From 6da2fb62fe5e78ccb14845611b634471b17ba9e8 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Tue, 11 Nov 2025 08:38:03 +0100 Subject: [PATCH 01/28] Removed 'new' tag from props that were added in 15.0.0 or before --- .../accordion/code/AccordionCodePage.tsx | 21 +++---------------- .../number-input/code/NumberInputCodePage.tsx | 8 +------ .../code/ResultsetTableCodePage.tsx | 14 ++----------- .../components/table/code/TableCodePage.tsx | 7 +------ 4 files changed, 7 insertions(+), 43 deletions(-) diff --git a/apps/website/screens/components/accordion/code/AccordionCodePage.tsx b/apps/website/screens/components/accordion/code/AccordionCodePage.tsx index 5a86d0019..49bfbeb3b 100644 --- a/apps/website/screens/components/accordion/code/AccordionCodePage.tsx +++ b/apps/website/screens/components/accordion/code/AccordionCodePage.tsx @@ -126,12 +126,7 @@ const sections = [ - - - - - badge - - + badge {"{ position: 'before' | 'after'; element: ReactNode }"} @@ -190,12 +185,7 @@ const sections = [ - - - - - statusLight - - + statusLight React.ReactNode @@ -203,12 +193,7 @@ const sections = [ - - - - - subLabel - - + subLabel string diff --git a/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx b/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx index dc25c8b21..62104a8ba 100644 --- a/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx +++ b/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx @@ -6,7 +6,6 @@ import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; import errorUsage from "./examples/errorHandling"; import Code, { TableCode } from "@/common/Code"; -import StatusBadge from "@/common/StatusBadge"; const sections = [ { @@ -219,12 +218,7 @@ const sections = [ - - - - - showControls - - + showControls boolean diff --git a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx index 387af74e8..c2ff00091 100644 --- a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx +++ b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx @@ -77,12 +77,7 @@ const sections = [ - - - - - hidePaginator - - + hidePaginator boolean @@ -132,12 +127,7 @@ const sections = [ - - - - - mode - - + mode 'default' | 'reduced' diff --git a/apps/website/screens/components/table/code/TableCodePage.tsx b/apps/website/screens/components/table/code/TableCodePage.tsx index b27bbca9f..d7cfbcadc 100644 --- a/apps/website/screens/components/table/code/TableCodePage.tsx +++ b/apps/website/screens/components/table/code/TableCodePage.tsx @@ -62,12 +62,7 @@ const sections = [ - - - - - mode - - + mode 'default' | 'reduced' From 28fbd07f87544fb26cebe5dcb329d0a420778944 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Tue, 11 Nov 2025 16:47:00 +0100 Subject: [PATCH 02/28] Removed new tag from an already existing prop --- .../screens/components/footer/code/FooterCodePage.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/apps/website/screens/components/footer/code/FooterCodePage.tsx b/apps/website/screens/components/footer/code/FooterCodePage.tsx index 0de8bdbb3..34f69fd93 100644 --- a/apps/website/screens/components/footer/code/FooterCodePage.tsx +++ b/apps/website/screens/components/footer/code/FooterCodePage.tsx @@ -87,12 +87,7 @@ const sections = [ - - - - - mode - - + mode 'default' | 'reduced' From 3115e09824548aeb01fb7bcb4bb25de4ea02dc3f Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 12 Nov 2025 09:13:23 +0100 Subject: [PATCH 03/28] Prepared skeleton for new migration section --- .../migration/migrating-modified-apis.tsx | 13 ++ .../pages/migration/migrating-to-emotion.tsx | 0 .../pages/migration/migrating-tokens.tsx | 0 apps/website/screens/common/pagesList.ts | 7 + .../screens/migration/ModifiedAPIsPage.tsx | 192 ++++++++++++++++++ 5 files changed, 212 insertions(+) create mode 100644 apps/website/pages/migration/migrating-modified-apis.tsx create mode 100644 apps/website/pages/migration/migrating-to-emotion.tsx create mode 100644 apps/website/pages/migration/migrating-tokens.tsx create mode 100644 apps/website/screens/migration/ModifiedAPIsPage.tsx diff --git a/apps/website/pages/migration/migrating-modified-apis.tsx b/apps/website/pages/migration/migrating-modified-apis.tsx new file mode 100644 index 000000000..c359784f7 --- /dev/null +++ b/apps/website/pages/migration/migrating-modified-apis.tsx @@ -0,0 +1,13 @@ +import Head from "next/head"; +import ModifiedAPIsPage from "screens/migration/ModifiedAPIsPage"; + +const DataVisualization = () => ( + <> + + Migrating modified component APIs + + + +); + +export default DataVisualization; diff --git a/apps/website/pages/migration/migrating-to-emotion.tsx b/apps/website/pages/migration/migrating-to-emotion.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/apps/website/pages/migration/migrating-tokens.tsx b/apps/website/pages/migration/migrating-tokens.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/apps/website/screens/common/pagesList.ts b/apps/website/screens/common/pagesList.ts index 48f6e4e01..3ba8da995 100644 --- a/apps/website/screens/common/pagesList.ts +++ b/apps/website/screens/common/pagesList.ts @@ -48,12 +48,19 @@ const foundationsLinks: LinkDetails[] = [ { label: "Typography", path: "/foundations/typography" }, ]; +const migrationLinks: LinkDetails[] = [ + { label: "Modified APIs", path: "/migration/migrating-modified-apis" }, + // { label: "Migrating to emotion", path: "/migration/migrating-to-emotion" }, + // { label: "Migrating tokens", path: "/migration/migrating-tokens" }, +]; + const componentsLinks = componentsList as LinkDetails[]; export const LinksSections: LinksSectionDetails[] = [ { label: "Overview", links: overviewLinks }, { label: "Principles", links: principlesLinks }, { label: "Foundations", links: foundationsLinks }, + { label: "Migration", links: migrationLinks }, { label: "Utilities", links: utilitiesLinks }, { label: "Components", links: componentsLinks }, ]; diff --git a/apps/website/screens/migration/ModifiedAPIsPage.tsx b/apps/website/screens/migration/ModifiedAPIsPage.tsx new file mode 100644 index 000000000..e7b45a787 --- /dev/null +++ b/apps/website/screens/migration/ModifiedAPIsPage.tsx @@ -0,0 +1,192 @@ +import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcBulletedList } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import DocFooter from "@/common/DocFooter"; +import PageHeading from "@/common/PageHeading"; +import Code from "@/common/Code"; + +const sections = [ + { + title: "Introduction", + content: ( + <> + + Version 16.0.0 introduces major breaking changes, including redesigned components, API updates, + and the removal of deprecated elements. This guide details the main differences and migration paths from + 15.x.x to 16.0.0. + + + ), + }, + { + title: "Removed components", + content: ( + <> + + The following components are no longer available and must be replaced or removed from your application: + + + + + Component + Action + + + + + Tag + + Removed completely. Replace with Badge, a Chip or StatusLight{" "} + based on the context. + + + + + + The following table describes which component to use depending on the use case: + + + + + Replacement + Recommended use case + + + + + + Badge + + + Use when you need to display a compact piece of information such as a count, short label, or status + indicator inside or near another component (e.g., notification count, "New", "Beta"). + + + + + Chip + + + Use for interactive labels or items representing filters, selections, or categories that users can + select, deselect, or remove. + + + + + StatusLight + + + Use for simple, non-interactive visual indicators of state or system status (e.g., success, warning, + error, inactive). + + + + + + ), + }, + { + title: "Modified APIs", + content: ( + <> + + Several components were redesigned and now expose different props or behavior. See below for details. + + + ), + subSections: [ + { + title: "Tabs", + content: ( + <> + + The Tabs component no longer supports the legacy API. Update to the new structure using the + tabs prop with items as objects containing label, icon, and{" "} + onClick. + + + ), + }, + { + title: "Slider", + content: ( + <> + + tabIndex prop has been removed. The new implementation follows native accessibility patterns. + + + ), + }, + { + title: "ToggleGroup", + content: ( + <> + + The ToggleGroup component has been redesigned with a new API and structure. Refer to updated + documentation for usage examples. + + + ), + }, + { + title: "Heading", + content: ( + <> + + Simplified API for Heading. Levels and weights are handled internally according to design + tokens. + + + ), + }, + ], + }, + { + title: "New components", + content: ( + <> + + + Header + + + Footer + + + SideNav + + + ApplicationLayout + + + + These components define the structure of page layouts within the Halstack Design System. + + + ), + }, + { + title: "Token updates", + content: ( + <> + + New design tokens have been added for semantic color mapping and improved theme support. Review any custom + themes using deprecated core tokens. + + + ), + }, +]; + +const MigrationPage = () => ( + + + + + + + + + +); + +export default MigrationPage; From ffb8af62dcca2ad0052dae3e075c9d51b574aac7 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Thu, 13 Nov 2025 17:22:34 +0100 Subject: [PATCH 04/28] Included information about API changes and new/removed components --- .../screens/migration/ModifiedAPIsPage.tsx | 215 ++++++++++-------- 1 file changed, 125 insertions(+), 90 deletions(-) diff --git a/apps/website/screens/migration/ModifiedAPIsPage.tsx b/apps/website/screens/migration/ModifiedAPIsPage.tsx index e7b45a787..efcdd5885 100644 --- a/apps/website/screens/migration/ModifiedAPIsPage.tsx +++ b/apps/website/screens/migration/ModifiedAPIsPage.tsx @@ -1,4 +1,4 @@ -import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcBulletedList } from "@dxc-technology/halstack-react"; +import { DxcFlex, DxcParagraph, DxcHeading, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import PageHeading from "@/common/PageHeading"; @@ -7,16 +7,133 @@ import Code from "@/common/Code"; const sections = [ { title: "Introduction", + content: ( + + Version 16.0.0 introduces major breaking changes, including redesigned components, API updates, and + the removal of deprecated elements. This guide details the main differences and migration paths from + 15.x.x to 16.0.0. + + ), + }, + { + title: "Added components", content: ( <> + The following components are now available to be used in your applications: + + + + Component + Features + + + + + Avatar + + Visual element used to identify users, teams, or entities across the interface. It helps create a + recognizable and consistent user experience by visually representing people or objects through images, + icons, or initials. + + + + ApplicationLayout + TBD + + + Header + TBD + + + SideNav + TBD + + + Footer + TBD + + + - Version 16.0.0 introduces major breaking changes, including redesigned components, API updates, - and the removal of deprecated elements. This guide details the main differences and migration paths from - 15.x.x to 16.0.0. + These components define the structure of page layouts within the Halstack Design System. ), }, + { + title: "Modified APIs", + content: ( + + Several components were redesigned and now expose different props or behavior. See below for details. + + ), + subSections: [ + // TODO: INCLUDE APPLICATIONLAYOUT COMPONENTS HERE? + { + title: "Badge", + content: ( + + Due to the recent token updates, we have aligned the color prop with a semantic color approach. + The available values are now 'primary', 'secondary', 'tertiary', + 'success', 'info', 'neutral', 'warning', and + 'error', replacing the previous functional options ('grey', 'blue',{" "} + 'green', 'orange', 'red','yellow', 'purple' + ). + + ), + }, + { + title: "DataGrid", + content: ( + + This component has exited the experimental phase and is now fully supported, featuring new functionalities + like on-demand loading (thanks to the childrenTrigger prop), possibility to have rows expanded + by default and the possibility to render any page by default. To know more about these new features, please + refer to the updated documentation. + + ), + }, + { + title: "Heading", + content: ( + + The weight options have been refactored, from 'light' | 'normal' | 'bold' to{" "} + 'default' | 'regular' | 'light'. Additionally, a heading level 6 is now supported. + + ), + }, + { + title: "Slider", + content: ( + + tabIndex prop has been removed. The prop was not having any effect in the component and was not + included on purpose, so it is now removed. + + ), + }, + { + title: "Tabs", + content: ( + + The Tabs component no longer supports the legacy API. A more flexible approach using a Compound + Component Pattern is now used instead to maintain a higher consistency with our existing{" "} + NavTabs and make the API much simpler. // TODO: ADD AN EXAMPLE CONVERTING THE OLD API TO THE + NEW ONE + + ), + }, + { + title: "ToggleGroup", + content: ( + + The ToggleGroup component API has been updated, including the possibility to have a custom + orientation (horizontal or vertical) and a redesign of the way options are structured. Please refer to the + updated documentation for more details.// TODO: INCLUDE LINK TO THE NEW DOCS + + ), + }, + ], + }, { title: "Removed components", content: ( @@ -84,95 +201,13 @@ const sections = [ ), }, - { - title: "Modified APIs", - content: ( - <> - - Several components were redesigned and now expose different props or behavior. See below for details. - - - ), - subSections: [ - { - title: "Tabs", - content: ( - <> - - The Tabs component no longer supports the legacy API. Update to the new structure using the - tabs prop with items as objects containing label, icon, and{" "} - onClick. - - - ), - }, - { - title: "Slider", - content: ( - <> - - tabIndex prop has been removed. The new implementation follows native accessibility patterns. - - - ), - }, - { - title: "ToggleGroup", - content: ( - <> - - The ToggleGroup component has been redesigned with a new API and structure. Refer to updated - documentation for usage examples. - - - ), - }, - { - title: "Heading", - content: ( - <> - - Simplified API for Heading. Levels and weights are handled internally according to design - tokens. - - - ), - }, - ], - }, - { - title: "New components", - content: ( - <> - - - Header - - - Footer - - - SideNav - - - ApplicationLayout - - - - These components define the structure of page layouts within the Halstack Design System. - - - ), - }, { title: "Token updates", content: ( - <> - - New design tokens have been added for semantic color mapping and improved theme support. Review any custom - themes using deprecated core tokens. - - + + New design tokens have been added for semantic color mapping and improved theme support. Review any custom + themes using deprecated core tokens. + ), }, ]; From 499a9690f29b24ca15955c1b2d905b57aa0980c9 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Fri, 14 Nov 2025 12:40:00 +0100 Subject: [PATCH 05/28] Emotion migration skeleton --- .../migration/migrating-modified-apis.tsx | 6 +- .../pages/migration/migrating-to-emotion.tsx | 228 ++++++++++++++++++ apps/website/screens/common/pagesList.ts | 4 +- ...ifiedAPIsPage.tsx => Components16Page.tsx} | 17 +- apps/website/screens/migration/TokensPage.tsx | 41 ++++ 5 files changed, 278 insertions(+), 18 deletions(-) rename apps/website/screens/migration/{ModifiedAPIsPage.tsx => Components16Page.tsx} (93%) create mode 100644 apps/website/screens/migration/TokensPage.tsx diff --git a/apps/website/pages/migration/migrating-modified-apis.tsx b/apps/website/pages/migration/migrating-modified-apis.tsx index c359784f7..f042d7b01 100644 --- a/apps/website/pages/migration/migrating-modified-apis.tsx +++ b/apps/website/pages/migration/migrating-modified-apis.tsx @@ -1,12 +1,12 @@ import Head from "next/head"; -import ModifiedAPIsPage from "screens/migration/ModifiedAPIsPage"; +import Components16Page from "screens/migration/Components16Page"; const DataVisualization = () => ( <> - Migrating modified component APIs + Migrating component APIs - + ); diff --git a/apps/website/pages/migration/migrating-to-emotion.tsx b/apps/website/pages/migration/migrating-to-emotion.tsx index e69de29bb..3114f2b71 100644 --- a/apps/website/pages/migration/migrating-to-emotion.tsx +++ b/apps/website/pages/migration/migrating-to-emotion.tsx @@ -0,0 +1,228 @@ +import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import DocFooter from "@/common/DocFooter"; +import PageHeading from "@/common/PageHeading"; +import Code from "@/common/Code"; +import Link from "next/link"; + +const sections = [ + { + title: "Overview", + content: ( + + As part of the version 16.0.0 release, Halstack React now uses emotion as its internal + styling engine. Previous versions relied on styled-components. This change improves performance, + reduces bundle size, and aligns with the rest of the Halstack ecosystem. This page explains the required steps + if your application relied on styled-components specific features, theme injections, or style + overrides. + + ), + }, + { + title: "What has changed", + content: ( + + + + Area + styled-components + emotion + + + + + Primary styling API + + styled factory from styled-components + + + @emotion/styled + + + + CSS prop + Not available by default + + Available natively (/** @jsxImportSource @emotion/react */) + + + + SSR insertion + + ServerStyleSheet + + + @emotion/server (extractCritical) + + + + Theme object + SC ThemeProvider + Emotion ThemeProvider + + + + ), + }, + { + title: "Impact on consumers", + content: ( + <> + Applications may need adjustments in the following areas: +
    +
  • + Local components using styled-components. +
    • +
  • + Overriding Halstack components with styled() wrappers. +
    • +
  • + Server-side rendering setups relying on ServerStyleSheet. +
    • +
  • Build setups using the Babel plugin for styled-components.
    • +
+ + ), + }, + { + title: "Updating styled components to emotion", + subSections: [ + { + title: "Instalation", + content: ( + <> + + As stated in the{" "} + + Installation Page + + , the following packages must be added to your project: + + @emotion/react @emotion/styled + While the following package must be removed from it: + styled-components + + ), + }, + { + title: "Styled usage", + content: ( + <> + + Replace imports from styled-components with @emotion/styled: + + Previous version: + import styled from "styled-components"; + New version: + import styled from "@emotion/styled"; + + The API of both works in the same way, so this should be the only required change. + + + ), + }, + { + title: "Theming", + content: ( + <> + + Theme context must now be provided using Emotion's ThemeProvider: + + + {`// Before +import { ThemeProvider } from "styled-components"; + +// Now +import { ThemeProvider } from "@emotion/react";`} + + + ), + }, + { + title: "CSS prop", + content: ( + <> + + Emotion supports the css prop natively. Enable it by adding the pragma at the file top if + required: + + + {`/** @jsxImportSource @emotion/react */ +
`} + + + ), + }, + { + title: "SSR configuration", + content: ( + <> + + If your app uses SSR, replace ServerStyleSheet with Emotion's server utilities: + + + {`// Before +import { ServerStyleSheet } from "styled-components"; + +// Now +import createEmotionServer from "@emotion/server/create-instance"; +import { cache } from "@emotion/css"; // or emotion-cache if configured + +const { extractCritical } = createEmotionServer(cache);`} + + + ), + }, + ], + }, + { + title: "Overriding Halstack components", + content: ( + <> + + Emotion's styled API can still wrap Halstack components. Replace any previous SC wrappers with + Emotion's equivalent: + + + {`import styled from "@emotion/styled"; +import { DxcButton } from "@dxc-technology/halstack-react"; + +const CustomButton = styled(DxcButton)\` + --button-padding: 12px; +\`;`} + + + ), + }, + { + title: "Removing styled-components from your build", + content: ( + <> + Styled-components is no longer required by Halstack React. You may remove: +
    +
  • + styled-components from package.json +
    • +
  • + Babel plugin: "babel-plugin-styled-components" +
    • +
  • Any SC-specific webpack or SSR setup
    • +
+ + ), + }, +]; + +const EmotionMigrationPage = () => ( + + + + + + + + + +); + +export default EmotionMigrationPage; diff --git a/apps/website/screens/common/pagesList.ts b/apps/website/screens/common/pagesList.ts index 3ba8da995..6e81f7fd7 100644 --- a/apps/website/screens/common/pagesList.ts +++ b/apps/website/screens/common/pagesList.ts @@ -49,8 +49,8 @@ const foundationsLinks: LinkDetails[] = [ ]; const migrationLinks: LinkDetails[] = [ - { label: "Modified APIs", path: "/migration/migrating-modified-apis" }, - // { label: "Migrating to emotion", path: "/migration/migrating-to-emotion" }, + { label: "Modified components", path: "/migration/migrating-modified-apis" }, + { label: "Migrating to emotion", path: "/migration/migrating-to-emotion" }, // { label: "Migrating tokens", path: "/migration/migrating-tokens" }, ]; diff --git a/apps/website/screens/migration/ModifiedAPIsPage.tsx b/apps/website/screens/migration/Components16Page.tsx similarity index 93% rename from apps/website/screens/migration/ModifiedAPIsPage.tsx rename to apps/website/screens/migration/Components16Page.tsx index efcdd5885..89835866c 100644 --- a/apps/website/screens/migration/ModifiedAPIsPage.tsx +++ b/apps/website/screens/migration/Components16Page.tsx @@ -61,10 +61,10 @@ const sections = [ ), }, { - title: "Modified APIs", + title: "Modified components", content: ( - Several components were redesigned and now expose different props or behavior. See below for details. + Several components were redesigned and now have a different API or behavior. See below for details. ), subSections: [ @@ -201,26 +201,17 @@ const sections = [ ), }, - { - title: "Token updates", - content: ( - - New design tokens have been added for semantic color mapping and improved theme support. Review any custom - themes using deprecated core tokens. - - ), - }, ]; const MigrationPage = () => ( - + - + ); diff --git a/apps/website/screens/migration/TokensPage.tsx b/apps/website/screens/migration/TokensPage.tsx new file mode 100644 index 000000000..eb50cb479 --- /dev/null +++ b/apps/website/screens/migration/TokensPage.tsx @@ -0,0 +1,41 @@ +import { DxcFlex, DxcParagraph, DxcHeading } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import DocFooter from "@/common/DocFooter"; +import PageHeading from "@/common/PageHeading"; +import Code from "@/common/Code"; + +const sections = [ + { + title: "Introduction", + content: ( + + Version 16.0.0 introduces major breaking changes, including redesigned components, API updates, and + the removal of deprecated elements. This guide details the main differences and migration paths from + 15.x.x to 16.0.0. + + ), + }, + { + title: "Token updates", + content: ( + + New design tokens have been added for semantic color mapping and improved theme support. Review any custom + themes using deprecated core tokens. + + ), + }, +]; + +const MigrationPage = () => ( + + + + + + + + + +); + +export default MigrationPage; From fde5b8fbb9a4a72c7951008e0c38a8ffed3a054b Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Fri, 14 Nov 2025 15:01:28 +0100 Subject: [PATCH 06/28] Updated emotion and components migration page --- .../migration/migrating-modified-apis.tsx | 4 +- .../pages/migration/migrating-to-emotion.tsx | 237 +------------- apps/website/screens/common/Code.tsx | 15 +- .../screens/migration/Components16Page.tsx | 12 +- .../website/screens/migration/EmotionPage.tsx | 295 ++++++++++++++++++ 5 files changed, 329 insertions(+), 234 deletions(-) create mode 100644 apps/website/screens/migration/EmotionPage.tsx diff --git a/apps/website/pages/migration/migrating-modified-apis.tsx b/apps/website/pages/migration/migrating-modified-apis.tsx index f042d7b01..c2accee0e 100644 --- a/apps/website/pages/migration/migrating-modified-apis.tsx +++ b/apps/website/pages/migration/migrating-modified-apis.tsx @@ -1,7 +1,7 @@ import Head from "next/head"; import Components16Page from "screens/migration/Components16Page"; -const DataVisualization = () => ( +const Components16Migration = () => ( <> Migrating component APIs @@ -10,4 +10,4 @@ const DataVisualization = () => ( ); -export default DataVisualization; +export default Components16Migration; diff --git a/apps/website/pages/migration/migrating-to-emotion.tsx b/apps/website/pages/migration/migrating-to-emotion.tsx index 3114f2b71..5f7a33a26 100644 --- a/apps/website/pages/migration/migrating-to-emotion.tsx +++ b/apps/website/pages/migration/migrating-to-emotion.tsx @@ -1,228 +1,13 @@ -import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import DocFooter from "@/common/DocFooter"; -import PageHeading from "@/common/PageHeading"; -import Code from "@/common/Code"; -import Link from "next/link"; - -const sections = [ - { - title: "Overview", - content: ( - - As part of the version 16.0.0 release, Halstack React now uses emotion as its internal - styling engine. Previous versions relied on styled-components. This change improves performance, - reduces bundle size, and aligns with the rest of the Halstack ecosystem. This page explains the required steps - if your application relied on styled-components specific features, theme injections, or style - overrides. - - ), - }, - { - title: "What has changed", - content: ( - - - - Area - styled-components - emotion - - - - - Primary styling API - - styled factory from styled-components - - - @emotion/styled - - - - CSS prop - Not available by default - - Available natively (/** @jsxImportSource @emotion/react */) - - - - SSR insertion - - ServerStyleSheet - - - @emotion/server (extractCritical) - - - - Theme object - SC ThemeProvider - Emotion ThemeProvider - - - - ), - }, - { - title: "Impact on consumers", - content: ( - <> - Applications may need adjustments in the following areas: -
    -
  • - Local components using styled-components. -
    • -
  • - Overriding Halstack components with styled() wrappers. -
    • -
  • - Server-side rendering setups relying on ServerStyleSheet. -
    • -
  • Build setups using the Babel plugin for styled-components.
    • -
- - ), - }, - { - title: "Updating styled components to emotion", - subSections: [ - { - title: "Instalation", - content: ( - <> - - As stated in the{" "} - - Installation Page - - , the following packages must be added to your project: - - @emotion/react @emotion/styled - While the following package must be removed from it: - styled-components - - ), - }, - { - title: "Styled usage", - content: ( - <> - - Replace imports from styled-components with @emotion/styled: - - Previous version: - import styled from "styled-components"; - New version: - import styled from "@emotion/styled"; - - The API of both works in the same way, so this should be the only required change. - - - ), - }, - { - title: "Theming", - content: ( - <> - - Theme context must now be provided using Emotion's ThemeProvider: - - - {`// Before -import { ThemeProvider } from "styled-components"; - -// Now -import { ThemeProvider } from "@emotion/react";`} - - - ), - }, - { - title: "CSS prop", - content: ( - <> - - Emotion supports the css prop natively. Enable it by adding the pragma at the file top if - required: - - - {`/** @jsxImportSource @emotion/react */ -
`} - - - ), - }, - { - title: "SSR configuration", - content: ( - <> - - If your app uses SSR, replace ServerStyleSheet with Emotion's server utilities: - - - {`// Before -import { ServerStyleSheet } from "styled-components"; - -// Now -import createEmotionServer from "@emotion/server/create-instance"; -import { cache } from "@emotion/css"; // or emotion-cache if configured - -const { extractCritical } = createEmotionServer(cache);`} - - - ), - }, - ], - }, - { - title: "Overriding Halstack components", - content: ( - <> - - Emotion's styled API can still wrap Halstack components. Replace any previous SC wrappers with - Emotion's equivalent: - - - {`import styled from "@emotion/styled"; -import { DxcButton } from "@dxc-technology/halstack-react"; - -const CustomButton = styled(DxcButton)\` - --button-padding: 12px; -\`;`} - - - ), - }, - { - title: "Removing styled-components from your build", - content: ( - <> - Styled-components is no longer required by Halstack React. You may remove: -
    -
  • - styled-components from package.json -
    • -
  • - Babel plugin: "babel-plugin-styled-components" -
    • -
  • Any SC-specific webpack or SSR setup
    • -
- - ), - }, -]; - -const EmotionMigrationPage = () => ( - - - - - - - - - +import Head from "next/head"; +import EmotionPage from "screens/migration/EmotionPage"; + +const EmotionMigration = () => ( + <> + + Migrating to emotion + + + ); -export default EmotionMigrationPage; +export default EmotionMigration; diff --git a/apps/website/screens/common/Code.tsx b/apps/website/screens/common/Code.tsx index eda849556..03d4f1178 100644 --- a/apps/website/screens/common/Code.tsx +++ b/apps/website/screens/common/Code.tsx @@ -21,14 +21,25 @@ export const TableCode = styled.code` font-size: var(--typography-label-s); `; -const ExtendedCodeContainer = styled.div` +const ExtendedTableCodeContainer = styled.div` ${codeStyles} white-space: pre; font-size: var(--typography-label-s); `; -export const ExtendedTableCode = ({ children }: { children: ReactNode }) => ( +const ExtendedCodeContainer = styled.div` + ${codeStyles} + white-space: pre; +`; + +export const ExtendedCode = ({ children }: { children: ReactNode }) => ( {children} ); + +export const ExtendedTableCode = ({ children }: { children: ReactNode }) => ( + + {children} + +); diff --git a/apps/website/screens/migration/Components16Page.tsx b/apps/website/screens/migration/Components16Page.tsx index 89835866c..30a66c344 100644 --- a/apps/website/screens/migration/Components16Page.tsx +++ b/apps/website/screens/migration/Components16Page.tsx @@ -1,8 +1,9 @@ -import { DxcFlex, DxcParagraph, DxcHeading, DxcTable } from "@dxc-technology/halstack-react"; +import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import PageHeading from "@/common/PageHeading"; import Code from "@/common/Code"; +import Link from "next/link"; const sections = [ { @@ -128,7 +129,10 @@ const sections = [ The ToggleGroup component API has been updated, including the possibility to have a custom orientation (horizontal or vertical) and a redesign of the way options are structured. Please refer to the - updated documentation for more details.// TODO: INCLUDE LINK TO THE NEW DOCS + + updated documentation + {" "} + for more details. ), }, @@ -203,7 +207,7 @@ const sections = [ }, ]; -const MigrationPage = () => ( +const Components16Page = () => ( @@ -215,4 +219,4 @@ const MigrationPage = () => ( ); -export default MigrationPage; +export default Components16Page; diff --git a/apps/website/screens/migration/EmotionPage.tsx b/apps/website/screens/migration/EmotionPage.tsx new file mode 100644 index 000000000..ce6c12b65 --- /dev/null +++ b/apps/website/screens/migration/EmotionPage.tsx @@ -0,0 +1,295 @@ +import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import DocFooter from "@/common/DocFooter"; +import PageHeading from "@/common/PageHeading"; +import Code, { ExtendedCode } from "@/common/Code"; +import Link from "next/link"; + +const sections = [ + { + title: "Overview", + content: ( + + As part of the version 16.0.0 release, Halstack React now uses emotion as its internal + styling engine. Previous versions relied on styled-components. This change improves performance, + reduces bundle size, and aligns with the rest of the Halstack ecosystem. This page explains the required steps + if your application relied on styled-components specific features, theme injections, or style + overrides. If any topic is not covered here, please refer to the{" "} + + official Emotion documentation + + . + + ), + }, + { + title: "What has changed", + content: ( + + + + Area + styled-components + emotion + + + + + Primary styling API + + styled factory from styled-components + + + @emotion/styled + + + + CSS prop + Not available by default + + Available natively{" "} + + CSS prop + + + + + SSR insertion + + ServerStyleSheet + + + @emotion/server (extractCritical) + + + + Theme object + SC ThemeProvider + Emotion ThemeProvider + + + + ), + }, + { + title: "Impact on consumers", + content: ( + <> + Applications may need adjustments in the following areas: +
    +
  • + Local components using styled-components. +
    • +
  • + Overriding Halstack components with styled() wrappers. +
    • +
  • + Server-side rendering setups relying on ServerStyleSheet. +
    • +
  • Build setups using the Babel plugin for styled-components.
    • +
+ + ), + }, + { + title: "Updating styled components to emotion", + subSections: [ + { + title: "Installation", + content: ( + <> + + As stated in the{" "} + + Installation Page + + , the following packages must be added to your project: + + @emotion/react @emotion/styled + While the following package must be removed from it: + styled-components + + ), + }, + { + title: "Styled usage", + content: ( + <> + + Replace imports from styled-components with @emotion/styled: + + Previous version: + import styled from "styled-components"; + New version: + import styled from "@emotion/styled"; + + The API of both works in the same way, so this should be the only required change. For further + information, please refer to the{" "} + + official documentation + + + + ), + }, + { + title: "Animations and keyframes", + content: ( + <> + + Replace keyframes from styled-components with the one provided by Emotion. + + + Previous version: + {`import { keyframes } from "styled-components";`} + + New version: + {`import { keyframes } from "@emotion/react";`} + + ), + }, + { + title: "Theming", + content: ( + <> + + Theme context must now be provided using Emotion's ThemeProvider: + + Previous version: + {`import { ThemeProvider } from "styled-components";`} + New version: + {`import { ThemeProvider } from "@emotion/react";`} + + Emotion and styled-components have mostly compatible theming APIs, but theme propagation differs in some + edge cases. In Emotion, deeply nested styled components always use the nearest + ThemeProvider without needing additional wrappers. + + + If your application relied on implicit theme merging or multiple nested theme layers from + styled-components, verify that the theme structure is still correct after migrating. + + + ), + }, + { + title: "CSS prop", + content: ( + <> + + Emotion supports the css prop natively. This prop can be used to apply styles directly to any + component without needing to create a styled wrapper. For more information please refer to the{" "} + + official documentation + + + + ), + }, + { + title: "SSR configuration", + content: ( + <> + + If your app uses SSR, replace ServerStyleSheet with Emotion's server utilities: + + Previous version: + {`import { ServerStyleSheet } from "styled-components";`} + New version: + {`import createEmotionServer from "@emotion/server/create-instance"; +import { cache } from "@emotion/css"; // or emotion-cache if configured +const { extractCritical } = createEmotionServer(cache);`} + + ), + }, + ], + }, + { + title: "Global styles", + content: ( + <> + + If your application used createGlobalStyle from styled-components, it must be + replaced with Emotion's Global component. + + Previous version: + + {`import { createGlobalStyle } from "styled-components"; + +const GlobalStyles = createGlobalStyle\` + body { + margin: 0; + } +\`;`} + + New version: + + {`import { Global, css } from "@emotion/react"; + +const GlobalStyles = ( + +);`} + + + ), + }, + { + title: "Overriding Halstack components", + content: ( + <> + + Emotion's styled API can still wrap Halstack components. Replace any previous SC wrappers with + Emotion's equivalent: + + + {`import styled from "@emotion/styled"; +import { DxcButton } from "@dxc-technology/halstack-react"; + +const CustomButton = styled(DxcButton)\` + --button-padding: 12px; +\`;`} + + + ), + }, + { + title: "Removing styled-components from your build", + content: ( + <> + styled-components is no longer required by Halstack React. You may remove: +
    +
  • + styled-components from package.json +
    • +
  • + Babel plugin: "babel-plugin-styled-components" +
    • +
  • Any styled-components-specific webpack or SSR setup
    • +
+ + ), + }, +]; + +const EmotionMigrationPage = () => ( + + + + + + + + + +); + +export default EmotionMigrationPage; From 9dc47e8b0edbad8a4540753b52f076cb9c8e406f Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Mon, 17 Nov 2025 17:16:43 +0100 Subject: [PATCH 07/28] Updated components migration doc --- apps/website/screens/common/Code.tsx | 15 +- .../screens/migration/Components16Page.tsx | 129 +++++++++++++++--- .../website/screens/migration/EmotionPage.tsx | 45 +++--- 3 files changed, 134 insertions(+), 55 deletions(-) diff --git a/apps/website/screens/common/Code.tsx b/apps/website/screens/common/Code.tsx index 03d4f1178..eda849556 100644 --- a/apps/website/screens/common/Code.tsx +++ b/apps/website/screens/common/Code.tsx @@ -21,25 +21,14 @@ export const TableCode = styled.code` font-size: var(--typography-label-s); `; -const ExtendedTableCodeContainer = styled.div` - ${codeStyles} - white-space: pre; - font-size: var(--typography-label-s); -`; - const ExtendedCodeContainer = styled.div` ${codeStyles} white-space: pre; + font-size: var(--typography-label-s); `; -export const ExtendedCode = ({ children }: { children: ReactNode }) => ( +export const ExtendedTableCode = ({ children }: { children: ReactNode }) => ( {children} ); - -export const ExtendedTableCode = ({ children }: { children: ReactNode }) => ( - - {children} - -); diff --git a/apps/website/screens/migration/Components16Page.tsx b/apps/website/screens/migration/Components16Page.tsx index 30a66c344..a55f78b5d 100644 --- a/apps/website/screens/migration/Components16Page.tsx +++ b/apps/website/screens/migration/Components16Page.tsx @@ -1,4 +1,4 @@ -import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; +import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink, DxcBulletedList } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import PageHeading from "@/common/PageHeading"; @@ -37,22 +37,6 @@ const sections = [ icons, or initials. - - ApplicationLayout - TBD - - - Header - TBD - - - SideNav - TBD - - - Footer - TBD - @@ -68,8 +52,114 @@ const sections = [ Several components were redesigned and now have a different API or behavior. See below for details. ), + // TODO: ADD AN EXAMPLE CONVERTING THE OLD APIs TO THE NEW ONES OR REDIRECT TO THE COMPONENTS' PAGES? subSections: [ - // TODO: INCLUDE APPLICATIONLAYOUT COMPONENTS HERE? + { + title: "ApplicationLayout", + content: ( + + The ApplicationLayout component and its compound components have been redesigned. The new API + focuses on improved flexibility, better responsiveness, and easier customization. The header{" "} + prop is no longer required, however it is highly encouraged to have either a Sidenav or a{" "} + Header in your application. The following sections will explain the changes in more depth. + + ), + subSections: [ + { + title: "ApplicationLayout.Header", + content: ( + <> + + The Header component has been redesigned. The new API provides a simpler and more + flexible approach: + + + + v15 (old): The header was configured using props like underlined, + content, and responsiveContent. Dropdowns were rendered using{" "} + DxcHeader.Dropdown. + + + v16: The new header uses branding for logo/app title, navItems for + navigation links (with optional nested groups), sideContent for side elements, and + responsiveBottomContent for mobile-specific content. + + + + When migrating, move your old content and dropdowns into the new branding{" "} + and + navItems props. Replace responsiveContent with + responsiveBottomContent and use sideContent as needed for further required + interaction. + + + For further information regarding the new API, please refer to{" "} + + updated documentation + + + + ), + }, + { + title: "ApplicationLayout.Sidenav", + content: ( + <> + + The Sidenav component has also changed from a compound component structure to a + declarative + navItems prop. This new API also features changes that improve the responsiveness and + flexibility of the component. + + + + v15 (old): Nested components like DxcSidenav.Title,{" "} + DxcSidenav.Section,DxcSidenav.Group, and DxcSidenav.Link{" "} + defined the structure and links. + + + v16: The navItems prop accepts an array of Item and + GroupItem objects. Each GroupItem can have a title, icon, collapsible + flag, and children Item objects. Each Item has a label, + optional icon, selected + state, and an onSelect callback. + + + + This is the main changes but there are some new additional props that have been added in this version: + + + To migrate, flatten your old Title, Section, Group, and + Link structure into a single items array following the new typing. + + + When migrating:{" "} + + + Flatten your old Title, Section, Group, and + Link structure into a single items array following the new typing. + + + Move your old logo/app title into the new branding + + + Include topContent and bottomContent as needed for further interaction + and handle the expanded state for responsive layouts with defaultExpanded for + uncontrolled behavior or expanded and onExpandedChange for controlled + behavior + + + + + ), + }, + // TODO: CHECK PELAYO PR FOR THE NEW FOOTER API + { + title: "ApplicationLayout.Footer", + content: TBD, + }, + ], + }, { title: "Badge", content: ( @@ -118,8 +208,7 @@ const sections = [ The Tabs component no longer supports the legacy API. A more flexible approach using a Compound Component Pattern is now used instead to maintain a higher consistency with our existing{" "} - NavTabs and make the API much simpler. // TODO: ADD AN EXAMPLE CONVERTING THE OLD API TO THE - NEW ONE + NavTabs and make the API much simpler. ), }, diff --git a/apps/website/screens/migration/EmotionPage.tsx b/apps/website/screens/migration/EmotionPage.tsx index ce6c12b65..0a2053657 100644 --- a/apps/website/screens/migration/EmotionPage.tsx +++ b/apps/website/screens/migration/EmotionPage.tsx @@ -2,8 +2,9 @@ import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink } from "@dxc-techn import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import PageHeading from "@/common/PageHeading"; -import Code, { ExtendedCode } from "@/common/Code"; +import Code from "@/common/Code"; import Link from "next/link"; +import CodeBlock from "@/common/CodeBlock"; const sections = [ { @@ -109,9 +110,9 @@ const sections = [ , the following packages must be added to your project: - @emotion/react @emotion/styled + {`npm i @emotion/react @emotion/styled`} While the following package must be removed from it: - styled-components + {`npm un styled-components`} ), }, @@ -123,9 +124,9 @@ const sections = [ Replace imports from styled-components with @emotion/styled: Previous version: - import styled from "styled-components"; + import styled from "styled-components"; New version: - import styled from "@emotion/styled"; + import styled from "@emotion/styled"; The API of both works in the same way, so this should be the only required change. For further information, please refer to the{" "} @@ -143,12 +144,10 @@ const sections = [ Replace keyframes from styled-components with the one provided by Emotion. - Previous version: - {`import { keyframes } from "styled-components";`} - + {`import { keyframes } from "styled-components";`} New version: - {`import { keyframes } from "@emotion/react";`} + {`import { keyframes } from "@emotion/react";`} ), }, @@ -160,9 +159,9 @@ const sections = [ Theme context must now be provided using Emotion's ThemeProvider: Previous version: - {`import { ThemeProvider } from "styled-components";`} + {`import { ThemeProvider } from "styled-components";`} New version: - {`import { ThemeProvider } from "@emotion/react";`} + {`import { ThemeProvider } from "@emotion/react";`} Emotion and styled-components have mostly compatible theming APIs, but theme propagation differs in some edge cases. In Emotion, deeply nested styled components always use the nearest @@ -197,11 +196,11 @@ const sections = [ If your app uses SSR, replace ServerStyleSheet with Emotion's server utilities: Previous version: - {`import { ServerStyleSheet } from "styled-components";`} + {`import { ServerStyleSheet } from "styled-components";`} New version: - {`import createEmotionServer from "@emotion/server/create-instance"; + {`import createEmotionServer from "@emotion/server/create-instance"; import { cache } from "@emotion/css"; // or emotion-cache if configured -const { extractCritical } = createEmotionServer(cache);`} +const { extractCritical } = createEmotionServer(cache);`} ), }, @@ -216,7 +215,7 @@ const { extractCritical } = createEmotionServer(cache);`} replaced with Emotion's Global component. Previous version: - + {`import { createGlobalStyle } from "styled-components"; const GlobalStyles = createGlobalStyle\` @@ -224,9 +223,9 @@ const GlobalStyles = createGlobalStyle\` margin: 0; } \`;`} - + New version: - + {`import { Global, css } from "@emotion/react"; const GlobalStyles = ( @@ -238,7 +237,7 @@ const GlobalStyles = ( \`} /> );`} - + ), }, @@ -250,14 +249,14 @@ const GlobalStyles = ( Emotion's styled API can still wrap Halstack components. Replace any previous SC wrappers with Emotion's equivalent: - + {`import styled from "@emotion/styled"; import { DxcButton } from "@dxc-technology/halstack-react"; const CustomButton = styled(DxcButton)\` --button-padding: 12px; \`;`} - + ), }, @@ -265,13 +264,15 @@ const CustomButton = styled(DxcButton)\` title: "Removing styled-components from your build", content: ( <> - styled-components is no longer required by Halstack React. You may remove: + + styled-components is no longer required by Halstack React. You should make sure to remove: +
  • styled-components from package.json
  • - Babel plugin: "babel-plugin-styled-components" + Babel plugin (babel-plugin-styled-components)
  • Any styled-components-specific webpack or SSR setup
From 8d09eba9d23fd81af441465a2ea6cc7cf3282a63 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Tue, 18 Nov 2025 10:53:40 +0100 Subject: [PATCH 08/28] Added new tags for the sidenav props --- .../sidenav/code/SidenavCodePage.tsx | 41 +++++++++++++++---- 1 file changed, 33 insertions(+), 8 deletions(-) diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx index 1cb2135c1..ec7818c92 100644 --- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx +++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx @@ -2,6 +2,7 @@ import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import Code, { ExtendedTableCode, TableCode } from "@/common/Code"; import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; +import StatusBadge from "@/common/StatusBadge"; const brandingTypeString = `{ logo?: Logo; @@ -52,7 +53,10 @@ const sections = [ - bottomContent + + + bottomContent + React.ReactNode @@ -60,7 +64,10 @@ const sections = [ - - branding + + + branding + {"Logo | ReactNode"}

@@ -76,7 +83,10 @@ const sections = [ - - defaultExpanded + + + defaultExpanded + boolean @@ -84,7 +94,10 @@ const sections = [ - - displayGroupLines + + + displayGroupLines + boolean @@ -92,7 +105,10 @@ const sections = [ - - expanded + + + expanded + boolean @@ -103,7 +119,10 @@ const sections = [ - - navItems + + + navItems + {"(Item | GroupItem)[] | Section[]"}

@@ -126,7 +145,10 @@ const sections = [ - - onExpandedChange + + + onExpandedChange + {"(value: boolean) => void"} @@ -134,7 +156,10 @@ const sections = [ - - topContent + + + topContent + React.ReactNode From 2caaf0f87b1577c04615a33b424561f59aa0c66b Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 19 Nov 2025 12:06:31 +0100 Subject: [PATCH 09/28] Included documentation for alias tokens and rest of migration --- apps/website/pages/_app.tsx | 2 +- .../migration/migrating-modified-apis.tsx | 4 +- .../pages/migration/migrating-to-emotion.tsx | 2 +- .../pages/migration/migrating-tokens.tsx | 13 + apps/website/screens/common/pagesList.ts | 2 +- .../screens/foundations/tokens/TokensPage.tsx | 106 ++- .../tokens/tables/CoreBorderTokens.tsx | 29 - .../tokens/tables/CoreColorTokens.tsx | 678 ------------------ .../tokens/tables/CoreDimensionsTokens.tsx | 137 ---- .../tokens/tables/CoreFontTokens.tsx | 162 ----- .../foundations/tokens/tables/TokensTable.tsx | 27 + .../tokens/tables/utils/mapCategory.ts | 4 + ...Page.tsx => Components16MigrationPage.tsx} | 13 +- ...otionPage.tsx => EmotionMigrationPage.tsx} | 2 +- .../screens/migration/TokensMigrationPage.tsx | 285 ++++++++ apps/website/screens/migration/TokensPage.tsx | 41 -- .../lib/src/styles/{scroll.tsx => scroll.ts} | 0 .../lib/src/styles/{tokens.tsx => tokens.ts} | 7 +- 18 files changed, 421 insertions(+), 1093 deletions(-) delete mode 100644 apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx delete mode 100644 apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx delete mode 100644 apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx delete mode 100644 apps/website/screens/foundations/tokens/tables/CoreFontTokens.tsx create mode 100644 apps/website/screens/foundations/tokens/tables/TokensTable.tsx create mode 100644 apps/website/screens/foundations/tokens/tables/utils/mapCategory.ts rename apps/website/screens/migration/{Components16Page.tsx => Components16MigrationPage.tsx} (96%) rename apps/website/screens/migration/{EmotionPage.tsx => EmotionMigrationPage.tsx} (99%) create mode 100644 apps/website/screens/migration/TokensMigrationPage.tsx delete mode 100644 apps/website/screens/migration/TokensPage.tsx rename packages/lib/src/styles/{scroll.tsx => scroll.ts} (100%) rename packages/lib/src/styles/{tokens.tsx => tokens.ts} (99%) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 7227ba1b3..091f287b8 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -92,7 +92,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo const filteredSections = useMemo(() => { const sections = mapLinksToGroupItems(LinksSections); return filterSections(sections, filter); - }, [filter]); + }, [filter, currentPath]); return ( diff --git a/apps/website/pages/migration/migrating-modified-apis.tsx b/apps/website/pages/migration/migrating-modified-apis.tsx index c2accee0e..8dea9861a 100644 --- a/apps/website/pages/migration/migrating-modified-apis.tsx +++ b/apps/website/pages/migration/migrating-modified-apis.tsx @@ -1,12 +1,12 @@ import Head from "next/head"; -import Components16Page from "screens/migration/Components16Page"; +import Components16MigrationPage from "screens/migration/Components16MigrationPage"; const Components16Migration = () => ( <> Migrating component APIs - + ); diff --git a/apps/website/pages/migration/migrating-to-emotion.tsx b/apps/website/pages/migration/migrating-to-emotion.tsx index 5f7a33a26..ce263ad39 100644 --- a/apps/website/pages/migration/migrating-to-emotion.tsx +++ b/apps/website/pages/migration/migrating-to-emotion.tsx @@ -1,5 +1,5 @@ import Head from "next/head"; -import EmotionPage from "screens/migration/EmotionPage"; +import EmotionPage from "screens/migration/EmotionMigrationPage"; const EmotionMigration = () => ( <> diff --git a/apps/website/pages/migration/migrating-tokens.tsx b/apps/website/pages/migration/migrating-tokens.tsx index e69de29bb..2d84f2127 100644 --- a/apps/website/pages/migration/migrating-tokens.tsx +++ b/apps/website/pages/migration/migrating-tokens.tsx @@ -0,0 +1,13 @@ +import Head from "next/head"; +import TokensMigrationPage from "screens/migration/TokensMigrationPage"; + +const TokensMigration = () => ( + <> + + Migrating tokens + + + +); + +export default TokensMigration; diff --git a/apps/website/screens/common/pagesList.ts b/apps/website/screens/common/pagesList.ts index 6e81f7fd7..c41c8e62d 100644 --- a/apps/website/screens/common/pagesList.ts +++ b/apps/website/screens/common/pagesList.ts @@ -51,7 +51,7 @@ const foundationsLinks: LinkDetails[] = [ const migrationLinks: LinkDetails[] = [ { label: "Modified components", path: "/migration/migrating-modified-apis" }, { label: "Migrating to emotion", path: "/migration/migrating-to-emotion" }, - // { label: "Migrating tokens", path: "/migration/migrating-tokens" }, + { label: "Migrating tokens", path: "/migration/migrating-tokens" }, ]; const componentsLinks = componentsList as LinkDetails[]; diff --git a/apps/website/screens/foundations/tokens/TokensPage.tsx b/apps/website/screens/foundations/tokens/TokensPage.tsx index 8da050af9..0b9bbc88c 100644 --- a/apps/website/screens/foundations/tokens/TokensPage.tsx +++ b/apps/website/screens/foundations/tokens/TokensPage.tsx @@ -6,21 +6,7 @@ import DxcQuickNavContainer from "@/common/QuickNavContainer"; import { DxcAlert, DxcBulletedList, DxcFlex, DxcHeading, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react"; import Link from "next/link"; import componentTokens from "./images/component_tokens.gif"; -import { - AbsoluteTokens, - AlphaTokens, - NeutralTokens, - PrimaryTokens, - SecondaryTokens, - Semantic01Tokens, - Semantic02Tokens, - Semantic03Tokens, - Semantic04Tokens, - TertiaryTokens, -} from "./tables/CoreColorTokens"; -import DimensionsTokens from "./tables/CoreDimensionsTokens"; -import { FontFamilyTokens, FontSizesTokens, FontStylesTokens, FontWeightTokens } from "./tables/CoreFontTokens"; -import BorderTokens from "./tables/CoreBorderTokens"; +import TokensTable from "./tables/TokensTable"; const sections = [ { @@ -299,6 +285,7 @@ const sections = [ ), }, + // TODO: SEPARATE ALIAS TOKENS AND CORE TOKENS IN DIFFERENT SECTIONS WITHIN THE NAVIGATION { title: "Tokens in Development", content: ( @@ -321,49 +308,104 @@ const sections = [ {/* Color Tokens */} - + - + - + - + - + - + - + - + - + - + <> {/* Dimensions Tokens */} - + <> {/* Font Tokens */} - + - + - + - + <> {/* Border Tokens */} - + - The component layer is still under development. + + The second layer (composed of alias tokens) can be used to replace raw values such as colors, . Alias + tokens act as an intermediate mapping between the low-level core values and the visual roles used by + components. + + <> + {/* Border Tokens */} + + + + + + + + + <> + {/* Color Tokens */} + + + + + + + + + + + <> + {/* Dimensions Tokens */} + + + + + + + + + <> + {/* Typography Tokens */} + + + + + + + + + + + + + + + + + The third layer (component tokens) is still under development. ), }, diff --git a/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx deleted file mode 100644 index a74df3ac3..000000000 --- a/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { TableCode } from "@/common/Code"; -import { DxcTable } from "@dxc-technology/halstack-react"; - -const BorderTokens = () => ( - - - - Token - Default value - - - - - - --line-style-dashed - - dashed - - - - --line-style-solid - - solid - - - -); - -export default BorderTokens; diff --git a/apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx deleted file mode 100644 index e1bca0110..000000000 --- a/apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx +++ /dev/null @@ -1,678 +0,0 @@ -import { TableCode } from "@/common/Code"; -import { DxcTable } from "@dxc-technology/halstack-react"; - -export const AbsoluteTokens = () => ( - - - - Token - Default value - - - - - - --color-absolutes-black - - #000000 - - - - --color-absolutes-white - - #ffffff - - - -); - -export const AlphaTokens = () => ( - - - - Token - Default value - - - - - - --color-alpha-100-a - - #ebebeb1a - - - - --color-alpha-200-a - - #dedede33 - - - - --color-alpha-300-a - - #d1d1d14d - - - - --color-alpha-400-a - - #b5b5b566 - - - - --color-alpha-500-a - - #9a9a9a80 - - - - --color-alpha-600-a - - #79797999 - - - - --color-alpha-700-a - - #5b5b5bb2 - - - - --color-alpha-800-a - - #494949cc - - - - --color-alpha-900-a - - #333333e5 - - - -); - -export const PrimaryTokens = () => ( - - - - Token - Default value - - - - - - --color-primary-50 - - #fcfbfe - - - - --color-primary-100 - - #f0e8fa - - - - --color-primary-200 - - #e7d9f6 - - - - --color-primary-300 - - #ddc9f3 - - - - --color-primary-400 - - #c8a7eb - - - - --color-primary-500 - - #b487e4 - - - - --color-primary-600 - - #9363c8 - - - - --color-primary-700 - - #6f4b97 - - - - --color-primary-800 - - #5a3c7a - - - - --color-primary-900 - - #3e2a55 - - - -); - -export const SecondaryTokens = () => ( - - - - Token - Default value - - - - - - --color-secondary-50 - - #f8fcff - - - - --color-secondary-100 - - #d9efff - - - - --color-secondary-200 - - #bce3ff - - - - --color-secondary-300 - - #a0d7ff - - - - --color-secondary-400 - - #61bdff - - - - --color-secondary-500 - - #30a1f1 - - - - --color-secondary-600 - - #267fbf - - - - --color-secondary-700 - - #1d6091 - - - - --color-secondary-800 - - #174e74 - - - - --color-secondary-900 - - #103651 - - - -); - -export const TertiaryTokens = () => ( - - - - Token - Default value - - - - - - --color-tertiary-50 - - #fefbef - - - - --color-tertiary-100 - - #fcedae - - - - --color-tertiary-200 - - #f9de6e - - - - --color-tertiary-300 - - #f5cd2b - - - - --color-tertiary-400 - - #d4b226 - - - - --color-tertiary-500 - - #b6981f - - - - --color-tertiary-600 - - #8f7818 - - - - --color-tertiary-700 - - #6c5a12 - - - - --color-tertiary-800 - - #57490f - - - - --color-tertiary-900 - - #3d3309 - - - -); - -export const NeutralTokens = () => ( - - - - Token - Default value - - - - - - --color-neutral-50 - - #fbfbfb - - - - --color-neutral-100 - - #ebebeb - - - - --color-neutral-200 - - #dedede - - - - --color-neutral-300 - - #d1d1d1 - - - - --color-neutral-400 - - #b5b5b5 - - - - --color-neutral-500 - - #9a9a9a - - - - --color-neutral-600 - - #797979 - - - - --color-neutral-700 - - #5b5b5b - - - - --color-neutral-800 - - #494949 - - - - --color-neutral-900 - - #333333 - - - -); - -export const Semantic01Tokens = () => ( - - - - Token - Default value - - - - - - --color-semantic01-50 - - #f8fcff - - - - --color-semantic01-100 - - #d9efff - - - - --color-semantic01-200 - - #bce3ff - - - - --color-semantic01-300 - - #a0d7ff - - - - --color-semantic01-400 - - #61bdff - - - - --color-semantic01-500 - - #30a1f1 - - - - --color-semantic01-600 - - #267fbf - - - - --color-semantic01-700 - - #1d6091 - - - - --color-semantic01-800 - - #174e74 - - - - --color-semantic01-900 - - #103651 - - - -); - -export const Semantic02Tokens = () => ( - - - - Token - Default value - - - - - - --color-semantic02-50 - - #f3fcf5 - - - - --color-semantic02-100 - - #d1f5db - - - - --color-semantic02-200 - - #acecbe - - - - --color-semantic02-300 - - #87e3a0 - - - - --color-semantic02-400 - - #53cb75 - - - - --color-semantic02-500 - - #47ae64 - - - - --color-semantic02-600 - - #39884f - - - - --color-semantic02-700 - - #2a673b - - - - --color-semantic02-800 - - #225230 - - - - --color-semantic02-900 - - #183921 - - - -); - -export const Semantic03Tokens = () => ( - - - - Token - Default value - - - - - - --color-semantic03-50 - - #fffbf6 - - - - --color-semantic03-100 - - #fde9d2 - - - - --color-semantic03-200 - - #fbd9b3 - - - - --color-semantic03-300 - - #f9c78f - - - - --color-semantic03-400 - - #f5a344 - - - - --color-semantic03-500 - - #d58a35 - - - - --color-semantic03-600 - - #a76d2b - - - - --color-semantic03-700 - - #7f5121 - - - - --color-semantic03-800 - - #66421a - - - - --color-semantic03-900 - - #3d3309 - - - -); - -export const Semantic04Tokens = () => ( - - - - Token - Default value - - - - - - --color-semantic04-50 - - #fff7f6 - - - - --color-semantic04-100 - - #ffe6e4 - - - - --color-semantic04-200 - - #ffd3d0 - - - - --color-semantic04-300 - - #ffc1bd - - - - --color-semantic04-400 - - #ff9896 - - - - --color-semantic04-500 - - #ff696f - - - - --color-semantic04-600 - - #e33248 - - - - --color-semantic04-700 - - #a92c37 - - - - --color-semantic04-800 - - #87262d - - - - --color-semantic04-900 - - #5b1f21 - - - -); diff --git a/apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx deleted file mode 100644 index 350b7e4ec..000000000 --- a/apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import { TableCode } from "@/common/Code"; -import { DxcTable } from "@dxc-technology/halstack-react"; - -const DimensionsTokens = () => ( - - - - Token - Default value - - - - - - --dimensions-0 - - 0px - - - - --dimensions-1 - - 1px - - - - --dimensions-2 - - 2px - - - - --dimensions-4 - - 4px - - - - --dimensions-8 - - 8px - - - - --dimensions-12 - - 12px - - - - --dimensions-16 - - 16px - - - - --dimensions-20 - - 20px - - - - --dimensions-24 - - 24px - - - - --dimensions-28 - - 28px - - - - --dimensions-32 - - 32px - - - - --dimensions-36 - - 36px - - - - --dimensions-40 - - 40px - - - - --dimensions-44 - - 44px - - - - --dimensions-48 - - 48px - - - - --dimensions-56 - - 56px - - - - --dimensions-64 - - 64px - - - - --dimensions-72 - - 72px - - - - --dimensions-80 - - 80px - - - - --dimensions-96 - - 96px - - - -); - -export default DimensionsTokens; diff --git a/apps/website/screens/foundations/tokens/tables/CoreFontTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreFontTokens.tsx deleted file mode 100644 index 2f9033e80..000000000 --- a/apps/website/screens/foundations/tokens/tables/CoreFontTokens.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import { TableCode } from "@/common/Code"; -import { DxcTable } from "@dxc-technology/halstack-react"; - -export const FontSizesTokens = () => ( - - - - Token - Default value - - - - - - --font-size-12 - - 12px - - - - --font-size-14 - - 14px - - - - --font-size-16 - - 16px - - - - --font-size-18 - - 18px - - - - --font-size-20 - - 20px - - - - --font-size-24 - - 24px - - - - --font-size-32 - - 32px - - - - --font-size-40 - - 40px - - - - --font-size-48 - - 48px - - - - --font-size-60 - - 60px - - - -); - -export const FontWeightTokens = () => ( - - - - Token - Default value - - - - - - --font-weight-light - - 300 - - - - --font-weight-regular - - 400 - - - - --font-weight-semibold - - 600 - - - - --font-weight-bold - - 700 - - - -); - -export const FontFamilyTokens = () => ( - - - - Token - Default value - - - - - - --font-family-mono - - Source Code Pro, mono - - - - --font-family-sans - - Open Sans, sans-serif - - - -); - -export const FontStylesTokens = () => ( - - - - Token - Default value - - - - - - --font-style-lightitalic - - light italic - - - - --font-style-normal - - normal - - - -); diff --git a/apps/website/screens/foundations/tokens/tables/TokensTable.tsx b/apps/website/screens/foundations/tokens/tables/TokensTable.tsx new file mode 100644 index 000000000..968632bf5 --- /dev/null +++ b/apps/website/screens/foundations/tokens/tables/TokensTable.tsx @@ -0,0 +1,27 @@ +import { TableCode } from "@/common/Code"; +import { DxcTable } from "@dxc-technology/halstack-react"; +import { aliasTokens, coreTokens } from "../../../../../../packages/lib/src/styles/tokens"; +import getTokensByCategory from "./utils/mapCategory"; + +const TokensTable = ({ categories, type }: { categories: string[]; type: "alias" | "core" }) => ( + + + + Token + Default value + + + + {getTokensByCategory(type === "alias" ? aliasTokens : coreTokens, categories).map(([token, value]) => ( + + + {token} + + {type === "alias" ? {value} : value} + + ))} + + +); + +export default TokensTable; diff --git a/apps/website/screens/foundations/tokens/tables/utils/mapCategory.ts b/apps/website/screens/foundations/tokens/tables/utils/mapCategory.ts new file mode 100644 index 000000000..9f51ae687 --- /dev/null +++ b/apps/website/screens/foundations/tokens/tables/utils/mapCategory.ts @@ -0,0 +1,4 @@ +const getTokensByCategory = (tokens: Record, categories: string[]) => + Object.entries(tokens).filter(([token]) => categories.some((category) => token.startsWith(`--${category}`))); + +export default getTokensByCategory; diff --git a/apps/website/screens/migration/Components16Page.tsx b/apps/website/screens/migration/Components16MigrationPage.tsx similarity index 96% rename from apps/website/screens/migration/Components16Page.tsx rename to apps/website/screens/migration/Components16MigrationPage.tsx index a55f78b5d..54e8bda64 100644 --- a/apps/website/screens/migration/Components16Page.tsx +++ b/apps/website/screens/migration/Components16MigrationPage.tsx @@ -11,7 +11,7 @@ const sections = [ content: ( Version 16.0.0 introduces major breaking changes, including redesigned components, API updates, and - the removal of deprecated elements. This guide details the main differences and migration paths from + the removal of deprecated elements. This guide details the main differences and how to migrate components from{" "} 15.x.x to 16.0.0. ), @@ -20,7 +20,7 @@ const sections = [ title: "Added components", content: ( <> - The following components are now available to be used in your applications: + The following component is now available to be used in your applications: @@ -40,7 +40,10 @@ const sections = [ - These components define the structure of page layouts within the Halstack Design System. + For more information about its usage and features, refer to{" "} + + its documentation + ), @@ -296,7 +299,7 @@ const sections = [ }, ]; -const Components16Page = () => ( +const Components16MigrationPage = () => ( @@ -308,4 +311,4 @@ const Components16Page = () => ( ); -export default Components16Page; +export default Components16MigrationPage; diff --git a/apps/website/screens/migration/EmotionPage.tsx b/apps/website/screens/migration/EmotionMigrationPage.tsx similarity index 99% rename from apps/website/screens/migration/EmotionPage.tsx rename to apps/website/screens/migration/EmotionMigrationPage.tsx index 0a2053657..bc28484dc 100644 --- a/apps/website/screens/migration/EmotionPage.tsx +++ b/apps/website/screens/migration/EmotionMigrationPage.tsx @@ -77,7 +77,7 @@ const sections = [ ), }, { - title: "Impact on consumers", + title: "Impact on adopters", content: ( <> Applications may need adjustments in the following areas: diff --git a/apps/website/screens/migration/TokensMigrationPage.tsx b/apps/website/screens/migration/TokensMigrationPage.tsx new file mode 100644 index 000000000..c8c8d52cc --- /dev/null +++ b/apps/website/screens/migration/TokensMigrationPage.tsx @@ -0,0 +1,285 @@ +import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import DocFooter from "@/common/DocFooter"; +import PageHeading from "@/common/PageHeading"; +import Code from "@/common/Code"; +import CodeBlock from "@/common/CodeBlock"; +import Link from "next/link"; + +const sections = [ + { + title: "Overview", + content: ( + + Halstack 16 introduces a new token-based theming system composed of core and alias{" "} + tokens. In Halstack 15, theming relied on a JSON-based opinionatedTheme /{" "} + advancedTheme object passed to the application wrapper. This migration page explains how to + transition from the old theme object to the new CSS-token architecture. + + ), + }, + { + title: "What has changed", + content: ( + + + + Area + Halstack 15 + Halstack 16 + + + + + Theming mechanism + Theme object (JSON) passed to provider + CSS variables (core + alias tokens) + + + Customization + opinionatedTheme / advancedTheme + Override core tokens (safe) and component tokens (advanced, upcoming) + + + Runtime updates + ThemeProvider re-renders components + CSS vars update instantly without rerenders + + + Naming consistency + No token taxonomy, per-component styles + Core → Alias → Component 3-layer architecture + + + + ), + }, + { + title: "Impact on adopters", + content: ( + <> + Applications may need adjustments in the following areas: +

    +
  • + Removal of old theme shape (advancedTheme / opinionatedTheme). +
    • +
  • Migrating color, spacing, and typography overrides to CSS tokens.
    • +
  • Replacing any custom component overrides that referenced theme object values.
    • +
  • Updating global styles to rely on CSS variables instead of hardcoded values.
    • +
+ + ), + }, + { + title: "New token architecture", + subSections: [ + { + title: "Core tokens", + content: ( + <> + + Core tokens define the raw, non-contextual values of the design system. They map directly to CSS + variables. You can find a list with all the core tokens in{" "} + + this page + + . + + + ), + }, + { + title: "Alias tokens", + content: ( + <> + + Alias tokens map raw core values to semantic meanings such as background, foreground, or border tokens. + They provide a shared vocabulary across components. You can find a list with all the alias tokens in{" "} + + this page. + + {/* TODO: SEPARATE THE NEWLY ADDED ALIAS TOKENS FROM THE CORE TOKENS IN A DIFFERENT PAGE */} + + + ), + }, + { + title: "Component tokens (upcoming)", + content: ( + <> + + Component tokens will be introduced progressively. They will reference alias tokens and control + component-level styling. + + + ), + }, + ], + }, + { + title: "Migrating from the old theming strategy", + subSections: [ + { + title: "Style overrides", + content: ( + <> + Old JSON-based color overrides must be replaced by CSS variable assignments. + Previous version: + {`const opinionatedTheme = { + button: { + "baseColor": "#2b470b", + "primaryFontColor": "#ffffff", + } +} +// ... +return ( + + + +);`} + New version: + + {`const opinionatedTheme = { + "--color-primary-700": "#2b470b", + "--color-absolutes-white": "#ffffff", +} +// ... +return ( + + + +);`} + + + This can be applied to colors, fonts, spacings and borders. However, keep in mind that, for now, only core + tokens can be overwritten and they affect all the components which are wrapped within the{" "} + HalstackProvider. + + + ), + }, + { + title: "Apply themes dynamically", + content: ( + <> + + To support dynamic theme switching (for example, toggling between light and dark mode), you can store the + theme object in a useState hook and update it in response to user actions. When the state + changes, the + HalstackProvider receives the updated CSS variables and the UI updates instantly without + rerendering components manually. + + + + {`const App = () => { + // Light palette example + const lightPalette = { + "--color-primary-50": "#d3f0b4", + "--color-primary-100": "#a2df5e", + "--color-primary-200": "#77c81f", + "--color-primary-300": "#68ad1b", + "--color-primary-400": "#579317", + "--color-primary-500": "#487813", + "--color-primary-600": "#39600f", + "--color-primary-700": "#2b470b", + "--color-primary-800": "#1c2f07", + "--color-primary-900": "#0d1503", + + "--color-secondary-50": "#fff9d6", + "--color-secondary-100": "#ffed99", + "--color-secondary-200": "#ffe066", + "--color-secondary-300": "#e6c84d", + "--color-secondary-400": "#ccad33", + "--color-secondary-500": "#b39426", + "--color-secondary-600": "#8f741f", + "--color-secondary-700": "#6b5517", + "--color-secondary-800": "#47370f", + "--color-secondary-900": "#241b08", + }; + + // Dark palette example + const darkPalette = { + "--color-primary-50": "#ffd6e7", + "--color-primary-100": "#ff99c2", + "--color-primary-200": "#ff66a3", + "--color-primary-300": "#e05584", + "--color-primary-400": "#c5446d", + "--color-primary-500": "#a83659", + "--color-primary-600": "#872b47", + "--color-primary-700": "#661f35", + "--color-primary-800": "#441423", + "--color-primary-900": "#220a12", + + "--color-secondary-50": "#f3e6db", + "--color-secondary-100": "#e2c7a9", + "--color-secondary-200": "#d1a577", + "--color-secondary-300": "#b88252", + "--color-secondary-400": "#99673f", + "--color-secondary-500": "#7a5232", + "--color-secondary-600": "#5c3f26", + "--color-secondary-700": "#3e2b19", + "--color-secondary-800": "#21170d", + "--color-secondary-900": "#100b06", + }; + + const [theme, setTheme] = useState(lightPalette); + + const toggleTheme = () => { + setTheme((prev) => (prev === lightPalette ? darkPalette : lightPalette)); + }; + + return ( + + + + ); +};`} + + + Any component wrapped by HalstackProvider will immediately reflect the new token values. + + + ), + }, + ], + }, + { + title: "Removing legacy theming APIs", + content: ( + <> + Ensure you remove: +
    +
  • + All usage of the old opinionatedTheme and advancedTheme. +
    • +
  • + Theme props passed to DxcApplication or similar wrappers. +
    • +
  • Any custom wrappers relying on the old theme shape.
    • +
+ + ), + }, +]; + +const TokensMigrationPage = () => ( + + + + + + + + + +); + +export default TokensMigrationPage; diff --git a/apps/website/screens/migration/TokensPage.tsx b/apps/website/screens/migration/TokensPage.tsx deleted file mode 100644 index eb50cb479..000000000 --- a/apps/website/screens/migration/TokensPage.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { DxcFlex, DxcParagraph, DxcHeading } from "@dxc-technology/halstack-react"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import DocFooter from "@/common/DocFooter"; -import PageHeading from "@/common/PageHeading"; -import Code from "@/common/Code"; - -const sections = [ - { - title: "Introduction", - content: ( - - Version 16.0.0 introduces major breaking changes, including redesigned components, API updates, and - the removal of deprecated elements. This guide details the main differences and migration paths from - 15.x.x to 16.0.0. - - ), - }, - { - title: "Token updates", - content: ( - - New design tokens have been added for semantic color mapping and improved theme support. Review any custom - themes using deprecated core tokens. - - ), - }, -]; - -const MigrationPage = () => ( - - - - - - - - - -); - -export default MigrationPage; diff --git a/packages/lib/src/styles/scroll.tsx b/packages/lib/src/styles/scroll.ts similarity index 100% rename from packages/lib/src/styles/scroll.tsx rename to packages/lib/src/styles/scroll.ts diff --git a/packages/lib/src/styles/tokens.tsx b/packages/lib/src/styles/tokens.ts similarity index 99% rename from packages/lib/src/styles/tokens.tsx rename to packages/lib/src/styles/tokens.ts index f8e5aa559..d2f607cf4 100644 --- a/packages/lib/src/styles/tokens.tsx +++ b/packages/lib/src/styles/tokens.ts @@ -4,8 +4,8 @@ export const coreTokens: Record = { /**************/ /* Application Layout */ - "--z-app-layout-header": 100, - "--z-app-layout-sidenav": 110, + "--z-app-layout-sidenav": 100, + "--z-app-layout-header": 110, /* Header */ "--z-header-overlay": 200, @@ -16,6 +16,7 @@ export const coreTokens: Record = { "--z-dropdown": 310, "--z-textinput": 320, "--z-select": 330, + "--z-contextualmenu": 340, /* Modals and overlays */ "--z-spinner-overlay": 400, @@ -376,6 +377,7 @@ export const aliasTokens: Record = { "--typography-helper-text-light": "var(--font-weight-light)", "--typography-helper-text-regular": "var(--font-weight-regular)", "--typography-helper-text-semibold": "var(--font-weight-semibold)", + "--typography-helper-text-italic": "var(--font-style-lightitalic)", "--typography-label-s": "var(--font-size-12)", "--typography-label-m": "var(--font-size-14)", "--typography-label-l": "var(--font-size-16)", @@ -392,5 +394,4 @@ export const aliasTokens: Record = { "--border-style-default": "var(--line-style-solid)", "--border-style-outline": "var(--line-style-dashed)", "--typography-font-family": "var(--font-family-sans)", - "--typography-helper-text-italic": "var(--font-style-lightitalic)", }; From 83a19aa658aee6d7208a47e4daad5298fb1cf3cc Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 19 Nov 2025 12:23:47 +0100 Subject: [PATCH 10/28] Fixed typo within migration link --- apps/website/screens/migration/TokensMigrationPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/screens/migration/TokensMigrationPage.tsx b/apps/website/screens/migration/TokensMigrationPage.tsx index c8c8d52cc..2e453a5b3 100644 --- a/apps/website/screens/migration/TokensMigrationPage.tsx +++ b/apps/website/screens/migration/TokensMigrationPage.tsx @@ -104,9 +104,9 @@ const sections = [ passHref legacyBehavior > - this page. + this page - {/* TODO: SEPARATE THE NEWLY ADDED ALIAS TOKENS FROM THE CORE TOKENS IN A DIFFERENT PAGE */} + .{/* TODO: SEPARATE THE NEWLY ADDED ALIAS TOKENS FROM THE CORE TOKENS IN A DIFFERENT PAGE */} ), From a079e49a5e84cc6d28651b444544c3986ac2a741 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Fri, 21 Nov 2025 14:34:01 +0100 Subject: [PATCH 11/28] Fixed issue with selected/scroll in navigationTree --- packages/lib/src/base-menu/GroupItem.tsx | 1 - packages/lib/src/base-menu/ItemAction.tsx | 8 +++++--- packages/lib/src/base-menu/SingleItem.tsx | 1 - packages/lib/src/navigation-tree/NavigationTree.tsx | 5 +++-- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/lib/src/base-menu/GroupItem.tsx b/packages/lib/src/base-menu/GroupItem.tsx index e72c73bf4..d5a742288 100644 --- a/packages/lib/src/base-menu/GroupItem.tsx +++ b/packages/lib/src/base-menu/GroupItem.tsx @@ -29,7 +29,6 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => { : } onClick={() => toggleOpen()} selected={groupSelected && !isOpen} diff --git a/packages/lib/src/base-menu/ItemAction.tsx b/packages/lib/src/base-menu/ItemAction.tsx index 68ecb9190..69de9477a 100644 --- a/packages/lib/src/base-menu/ItemAction.tsx +++ b/packages/lib/src/base-menu/ItemAction.tsx @@ -91,8 +91,9 @@ const ItemAction = memo( handleTextMouseEnter, getWrapper, } = useItemAction(props); - const { depthLevel, selected, href, label, icon, collapseIcon, "aria-pressed": ariaPressed, ...rest } = props; - + const { depthLevel, selected, href, label, icon, collapseIcon, ...rest } = props; + const ariaPressed = href ? !!selected : undefined; + const ariaSelected = !href ? !!selected : undefined; return getWrapper( - + ); diff --git a/apps/website/screens/migration/TokensMigrationPage.tsx b/apps/website/screens/migration/TokensMigrationPage.tsx index 2e453a5b3..11769e340 100644 --- a/apps/website/screens/migration/TokensMigrationPage.tsx +++ b/apps/website/screens/migration/TokensMigrationPage.tsx @@ -106,7 +106,7 @@ const sections = [ > this page - .{/* TODO: SEPARATE THE NEWLY ADDED ALIAS TOKENS FROM THE CORE TOKENS IN A DIFFERENT PAGE */} + . ), From fb9d79f042b0b28d4815d65ede91ad9fa1f370b8 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 26 Nov 2025 09:51:49 +0100 Subject: [PATCH 18/28] Fixed link for alias/core tokens list inside migration doc --- .../screens/migration/TokensMigrationPage.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/apps/website/screens/migration/TokensMigrationPage.tsx b/apps/website/screens/migration/TokensMigrationPage.tsx index 11769e340..aaa04b695 100644 --- a/apps/website/screens/migration/TokensMigrationPage.tsx +++ b/apps/website/screens/migration/TokensMigrationPage.tsx @@ -80,11 +80,7 @@ const sections = [ Core tokens define the raw, non-contextual values of the design system. They map directly to CSS variables. You can find a list with all the core tokens in{" "} - + this page . @@ -99,11 +95,7 @@ const sections = [ Alias tokens map raw core values to semantic meanings such as background, foreground, or border tokens. They provide a shared vocabulary across components. You can find a list with all the alias tokens in{" "} - + this page . From 4bb46c55ea7f0041d8eb7b5fe3a752a93ab38e6d Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 26 Nov 2025 10:07:15 +0100 Subject: [PATCH 19/28] Fixed typos --- .../migration/migrating-modified-apis.tsx | 2 +- .../pages/migration/migrating-to-emotion.tsx | 2 +- .../pages/migration/migrating-tokens.tsx | 2 +- .../components/alert/code/AlertCodePage.tsx | 14 ++-- .../data-grid/code/DataGridCodePage.tsx | 18 ++--- .../dropdown/code/DropdownCodePage.tsx | 6 +- .../file-input/code/FileInputCodePage.tsx | 8 +- .../components/footer/code/FooterCodePage.tsx | 27 ++----- .../components/grid/code/GridCodePage.tsx | 24 +++--- .../quick-nav/code/QuickNavCodePage.tsx | 8 +- .../radio-group/code/RadioGroupCodePage.tsx | 8 +- .../code/ResultsetTableCodePage.tsx | 12 +-- .../components/select/code/SelectCodePage.tsx | 12 +-- .../sidenav/code/SidenavCodePage.tsx | 80 +++++++++++-------- .../components/table/code/TableCodePage.tsx | 4 +- .../text-input/code/TextInputCodePage.tsx | 7 +- .../textarea/code/TextareaCodePage.tsx | 6 +- .../components/wizard/code/WizardCodePage.tsx | 10 +-- .../screens/foundations/tokens/TokensPage.tsx | 6 +- .../migration/Components16MigrationPage.tsx | 20 +++-- .../lib/src/container/Container.stories.tsx | 20 ++--- packages/lib/src/container/Container.test.tsx | 2 +- 22 files changed, 151 insertions(+), 147 deletions(-) diff --git a/apps/website/pages/migration/migrating-modified-apis.tsx b/apps/website/pages/migration/migrating-modified-apis.tsx index 8dea9861a..032d39055 100644 --- a/apps/website/pages/migration/migrating-modified-apis.tsx +++ b/apps/website/pages/migration/migrating-modified-apis.tsx @@ -4,7 +4,7 @@ import Components16MigrationPage from "screens/migration/Components16MigrationPa const Components16Migration = () => ( <> - Migrating component APIs + Migrating component APIs — Halstack Design System diff --git a/apps/website/pages/migration/migrating-to-emotion.tsx b/apps/website/pages/migration/migrating-to-emotion.tsx index ce263ad39..f847dc13f 100644 --- a/apps/website/pages/migration/migrating-to-emotion.tsx +++ b/apps/website/pages/migration/migrating-to-emotion.tsx @@ -4,7 +4,7 @@ import EmotionPage from "screens/migration/EmotionMigrationPage"; const EmotionMigration = () => ( <> - Migrating to emotion + Migrating to emotion — Halstack Design System diff --git a/apps/website/pages/migration/migrating-tokens.tsx b/apps/website/pages/migration/migrating-tokens.tsx index 2d84f2127..44e174f40 100644 --- a/apps/website/pages/migration/migrating-tokens.tsx +++ b/apps/website/pages/migration/migrating-tokens.tsx @@ -4,7 +4,7 @@ import TokensMigrationPage from "screens/migration/TokensMigrationPage"; const TokensMigration = () => ( <> - Migrating tokens + Migrating tokens — Halstack Design System diff --git a/apps/website/screens/components/alert/code/AlertCodePage.tsx b/apps/website/screens/components/alert/code/AlertCodePage.tsx index 9c86bf51d..6e8e5bfe7 100644 --- a/apps/website/screens/components/alert/code/AlertCodePage.tsx +++ b/apps/website/screens/components/alert/code/AlertCodePage.tsx @@ -78,17 +78,17 @@ const sections = [ The mode of the alert. The possible values are:
  • - inline: The alert must be displayed in the same place where it is declared. The user can - navigate between the messages if the message is an array. + inline: The alert must be displayed in the same place where it is declared. The user + can navigate between the messages if the message is an array.
  • - modal: The alert will be displayed in the middle of the screen with an overlay layer behind. In - this mode, the user has the responsibility of hiding the alert with the onClose event of - the message, otherwise the overlaid modal will remain visible. + modal: The alert will be displayed in the middle of the screen with an overlay layer + behind. In this mode, the user has the responsibility of hiding the alert with the{" "} + onClose event of the message, otherwise the overlaid modal will remain visible.
  • - banner: The alert must be displayed at the top of the screen. The user can navigate between the - messages if the message is an array. + banner: The alert must be displayed at the top of the screen. The user can navigate + between the messages if the message is an array.
diff --git a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx index fda3d6c0f..ecfdd9237 100644 --- a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx +++ b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx @@ -94,31 +94,31 @@ const sections = [ Each GridColumn object has the following properties:
  • - key: Key that will be rendered from each row in rows. + key: Key that will be rendered from each row in rows.
  • - label: Label that will be used for the column header. + label: Label that will be used for the column header.
  • - resizable: Whether the column is resizable or not. + resizable: Whether the column is resizable or not.
  • - sortable: Whether the column is sortable or not. + sortable: Whether the column is sortable or not.
  • - sortFn: Custom function with the criteria for the column sorting. + sortFn: Custom function with the criteria for the column sorting.
  • - draggable: Whether the column can be dragged or not to another position or not. + draggable: Whether the column can be dragged or not to another position or not.
  • - textEditable: Whether the column cells are editable or not. + textEditable: Whether the column cells are editable or not.
  • - summaryKey: Value that will be rendered from the summaryRow + summaryKey: Value that will be rendered from the summaryRow
  • - alignment: Sets the alignment inside the cells. + alignment: Sets the alignment inside the cells.
diff --git a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx index b6fc5a5c9..714a56705 100644 --- a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx +++ b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx @@ -132,10 +132,10 @@ const sections = [ An array of objects representing the options. Each object has the following properties:
  • - label: Option display value. + label: Option display value.
  • - icon:{" "} + icon:{" "} Material Symbol {" "} @@ -144,7 +144,7 @@ const sections = [ prefix the symbol name with "filled_".
  • - value: Option inner value. + value: Option inner value.
diff --git a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx index 2a9cf2176..736427146 100644 --- a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx +++ b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx @@ -214,14 +214,14 @@ const sections = [ An array of files representing the selected files. Each file has the following properties:
  • - file: Selected file. + file: Selected file.
  • - error: Error of the file. If it is defined, it will be shown and the file item will be mark as - invalid. + error: Error of the file. If it is defined, it will be shown and the file item will + be mark as invalid.
  • - preview: Preview of the file. + preview: Preview of the file.
diff --git a/apps/website/screens/components/footer/code/FooterCodePage.tsx b/apps/website/screens/components/footer/code/FooterCodePage.tsx index ebb9e9aaa..143f702e1 100644 --- a/apps/website/screens/components/footer/code/FooterCodePage.tsx +++ b/apps/website/screens/components/footer/code/FooterCodePage.tsx @@ -39,26 +39,15 @@ const sections = [ object has the following properties:
  • - text: Text for the link. + text: Text for the link.
  • - href: URL of the page the link goes to. + href: URL of the page the link goes to.
- - - children - - React.ReactNode - - - Contains DxcFooter.LeftContent and DxcFooter.RightContent components to customize the left and right - content of the footer respectively. - - - - copyright @@ -89,10 +78,10 @@ const sections = [ The available footer modes:
  • - default: Footer with full content. + default: Footer with full content.
  • - reduced: Smaller footer with minimal content. + reduced: Smaller footer with minimal content.
@@ -123,14 +112,14 @@ const sections = [ footer. Each object has the following properties:
  • - href: URL of the page the link goes to. + href: URL of the page the link goes to.
  • - title: Text representing advisory information related to the social link. Under the hood, it - also serves as an accessible label for the icon. + title: Text representing advisory information related to the social link. Under the + hood, it also serves as an accessible label for the icon.
  • - logo:{" "} + logo:{" "} Material Symbol {" "} diff --git a/apps/website/screens/components/grid/code/GridCodePage.tsx b/apps/website/screens/components/grid/code/GridCodePage.tsx index b54030a9f..3584dc0b1 100644 --- a/apps/website/screens/components/grid/code/GridCodePage.tsx +++ b/apps/website/screens/components/grid/code/GridCodePage.tsx @@ -115,10 +115,10 @@ const sections = [ properties:
    • - rowGap: gutter between rows. + rowGap: gutter between rows.
    • - columnGap: gutter between columns. + columnGap: gutter between columns.
    @@ -143,10 +143,10 @@ const sections = [ properties:
    • - justifyContent: aligns the grid along the inline (row) axis. + justifyContent: aligns the grid along the inline (row) axis.
    • - alignContent: aligns the grid along the block (column) axis. + alignContent: aligns the grid along the block (column) axis.
    @@ -168,10 +168,10 @@ const sections = [ properties:
    • - justifyItems: aligns grid items along the inline (row) axis. + justifyItems: aligns grid items along the inline (row) axis.
    • - alignItems: aligns grid items along the block (column) axis. + alignItems: aligns grid items along the block (column) axis.
    @@ -303,10 +303,10 @@ const sections = [ properties:
    • - start: starting position within the grid column. + start: starting position within the grid column.
    • - end: ending position within the grid column. + end: ending position within the grid column.
    @@ -326,10 +326,10 @@ const sections = [ properties:
    • - justifySelf: aligns a grid item inside a cell along the inline (row) axis. + justifySelf: aligns a grid item inside a cell along the inline (row) axis.
    • - alignSelf: aligns a grid item inside a cell along the block (column) axis. + alignSelf: aligns a grid item inside a cell along the block (column) axis.
    @@ -351,10 +351,10 @@ const sections = [ properties:
    • - start: starting position within the grid row. + start: starting position within the grid row.
    • - end: ending position within the grid row. + end: ending position within the grid row.
    diff --git a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx index 1c89ea016..fc3c6aa93 100644 --- a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx +++ b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx @@ -37,12 +37,12 @@ const sections = [ navigation when appropriate. Each link has the following properties:
    • - label: Text to be shown in the link. The content must be wrapped with an id equal to the - slugified label (in lower case and the white spaces replaced by '-') in order to be able to - navigate to the section that the label references. + label: Text to be shown in the link. The content must be wrapped with an id equal to + the slugified label (in lower case and the white spaces replaced by '-') in order to be able + to navigate to the section that the label references.
    • - links: Sublinks of the link. + links: Sublinks of the link.
    diff --git a/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx b/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx index 2b5ec74c4..9e9eaf8f8 100644 --- a/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx +++ b/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx @@ -150,14 +150,14 @@ const sections = [ An array of objects representing the selectable options. Each object Option has the following properties:
    • - label: Label of the option placed next to the radio input. + label: Label of the option placed next to the radio input.
    • - value: Value of the option. It should be unique and not an empty string, which is reserved to - the optional item added by the optional prop. + value: Value of the option. It should be unique and not an empty string, which is + reserved to the optional item added by the optional prop.
    • - disabled: disables the option. + disabled: disables the option.
    diff --git a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx index c2ff00091..303379047 100644 --- a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx +++ b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx @@ -67,10 +67,10 @@ const sections = [ An array of objects representing the columns of the table. Each object has the following properties:
    • - displayValue: Column display value. + displayValue: Column display value.
    • - isSortable: Boolean value to indicate whether the column is sortable or not. + isSortable: Boolean value to indicate whether the column is sortable or not.
    @@ -135,10 +135,10 @@ const sections = [ The available table modes:
    • - default: Default table size. + default: Default table size.
    • - reduced: More compact table with less spacing for high density information. + reduced: More compact table with less spacing for high density information.
    @@ -166,10 +166,10 @@ const sections = [ table. Each row is a set of cells that have the following properties:
    • - displayValue: Value to be displayed in the cell. + displayValue: Value to be displayed in the cell.
    • - sortValue: Value to be used when sorting the table by that column. If not indicated + sortValue: Value to be used when sorting the table by that column. If not indicated displayValue will be used for sorting.
    diff --git a/apps/website/screens/components/select/code/SelectCodePage.tsx b/apps/website/screens/components/select/code/SelectCodePage.tsx index 8116e1229..502d7f507 100644 --- a/apps/website/screens/components/select/code/SelectCodePage.tsx +++ b/apps/website/screens/components/select/code/SelectCodePage.tsx @@ -206,14 +206,14 @@ const sections = [ Option
    • - label: Label of the option to be shown in the select's listbox. + label: Label of the option to be shown in the select's listbox.
    • - value: Value of the option. It should be unique and not an empty string, which is reserved to - the empty option added by optional prop. + value: Value of the option. It should be unique and not an empty string, which is + reserved to the empty option added by optional prop.
    • - icon:{" "} + icon:{" "} Material Symbol {" "} @@ -226,10 +226,10 @@ const sections = [
      • - label: Label of the group to be shown in the select's listbox. + label: Label of the group to be shown in the select's listbox.
      • - options: List of Option instances. + options: List of Option instances.

      diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx index 422d8cf99..4da72da58 100644 --- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx +++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx @@ -53,10 +53,12 @@ const sections = [ - - - bottomContent - + + + + bottomContent + + React.ReactNode @@ -64,10 +66,12 @@ const sections = [ - - - - branding - + + + + branding + + {"Branding | ReactNode"}

      @@ -83,10 +87,12 @@ const sections = [ - - - - defaultExpanded - + + + + defaultExpanded + + boolean @@ -94,10 +100,12 @@ const sections = [ - - - - displayGroupLines - + + + + displayGroupLines + + boolean @@ -105,10 +113,12 @@ const sections = [ - - - - expanded - + + + + expanded + + boolean @@ -119,10 +129,12 @@ const sections = [ - - - - navItems - + + + + navItems + + {"(Item | GroupItem)[] | Section[]"}

      @@ -145,10 +157,12 @@ const sections = [ - - - - onExpandedChange - + + + + onExpandedChange + + {"(value: boolean) => void"} @@ -156,10 +170,12 @@ const sections = [ - - - - topContent - + + + + topContent + + React.ReactNode diff --git a/apps/website/screens/components/table/code/TableCodePage.tsx b/apps/website/screens/components/table/code/TableCodePage.tsx index d7cfbcadc..31ffa0165 100644 --- a/apps/website/screens/components/table/code/TableCodePage.tsx +++ b/apps/website/screens/components/table/code/TableCodePage.tsx @@ -70,10 +70,10 @@ const sections = [ The available table modes:

      • - default: Default table size. + default: Default table size.
      • - reduced: More compact table with less spacing for high density information. + reduced: More compact table with less spacing for high density information.
      diff --git a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx index 22604f369..c1f38ad2e 100644 --- a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx +++ b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx @@ -313,11 +313,12 @@ const sections = [ These are the options to be displayed as suggestions. It can be either an array or a function:
      • - Array: List of options that will be filtered by the user's input. + Array: List of options that will be filtered by the user's input.
      • - Function: This function will be called when the user changes the value. It will receive the new - value as a parameter and should return a promise that resolves to an array with the filtered options. + Function: This function will be called when the user changes the value. It will + receive the new value as a parameter and should return a promise that resolves to an array with the + filtered options.
      diff --git a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx index 23b54e240..d00e56ed5 100644 --- a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx +++ b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx @@ -271,13 +271,13 @@ const sections = [ Defines the textarea's ability to resize vertically. It can be:
      • - 'auto': The textarea grows or shrinks automatically in order to fit the content. + 'auto': The textarea grows or shrinks automatically in order to fit the content.
      • - 'manual': The height of the textarea is enabled to be manually modified. + 'manual': The height of the textarea is enabled to be manually modified.
      • - 'none': The textarea has a fixed height and can't be modified. + 'none': The textarea has a fixed height and can't be modified.
      diff --git a/apps/website/screens/components/wizard/code/WizardCodePage.tsx b/apps/website/screens/components/wizard/code/WizardCodePage.tsx index 0410a95c8..36620704a 100644 --- a/apps/website/screens/components/wizard/code/WizardCodePage.tsx +++ b/apps/website/screens/components/wizard/code/WizardCodePage.tsx @@ -98,23 +98,23 @@ const sections = [ An array of objects representing the steps. Each of them has the following properties:
      • - label: Step label. + label: Step label.
      • - description: Description that will be placed next to the step. + description: Description that will be placed next to the step.
      • - icon:{" "} + icon:{" "} Material Symbol {" "} name or SVG element used as the icon displayed in the step.
      • - disabled: If true, the step will be disabled. + disabled: If true, the step will be disabled.
      • - valid: Whether the step is valid or not. + valid: Whether the step is valid or not.
      diff --git a/apps/website/screens/foundations/tokens/TokensPage.tsx b/apps/website/screens/foundations/tokens/TokensPage.tsx index d4e0cf7df..bede23b01 100644 --- a/apps/website/screens/foundations/tokens/TokensPage.tsx +++ b/apps/website/screens/foundations/tokens/TokensPage.tsx @@ -307,9 +307,9 @@ const sections = [ . - The second layer (composed of alias tokens) can be used to replace raw values such as colors, . Alias - tokens act as an intermediate mapping between the low-level core values and the visual roles used by - components. You can view the{" "} + The second layer (composed of alias tokens) can be used to replace raw values such as colors, paddings, + sizes, etc. Alias tokens act as an intermediate mapping between the low-level core values and the visual + roles used by components. You can view the{" "} list of available alias tokens diff --git a/apps/website/screens/migration/Components16MigrationPage.tsx b/apps/website/screens/migration/Components16MigrationPage.tsx index 5695bc63c..db1af2e23 100644 --- a/apps/website/screens/migration/Components16MigrationPage.tsx +++ b/apps/website/screens/migration/Components16MigrationPage.tsx @@ -78,20 +78,19 @@ const sections = [ - v15 (old): The header was configured using props like underlined, + v15 (old): The header was configured using props like underlined, content, and responsiveContent. Dropdowns were rendered using{" "} DxcHeader.Dropdown. - v16: The new header uses branding for logo/app title, navItems for - navigation links (with optional nested groups), sideContent for side elements, and - responsiveBottomContent for mobile-specific content. + v16: The new header uses branding for logo/app title,{" "} + navItems for navigation links (with optional nested groups), sideContent{" "} + for side elements, and responsiveBottomContent for mobile-specific content. When migrating, move your old content and dropdowns into the new branding{" "} - and - navItems props. Replace responsiveContent with + and navItems props. Replace responsiveContent with{" "} responsiveBottomContent and use sideContent as needed for further required interaction. @@ -110,18 +109,17 @@ const sections = [ <> The Sidenav component has also changed from a compound component structure to a - declarative - navItems prop. This new API also features changes that improve the responsiveness and - flexibility of the component. + declarative navItems prop. This new API also features changes that improve the + responsiveness and flexibility of the component. - v15 (old): Nested components like DxcSidenav.Title,{" "} + v15 (old): Nested components like DxcSidenav.Title,{" "} DxcSidenav.Section,DxcSidenav.Group, and DxcSidenav.Link{" "} defined the structure and links. - v16: The navItems prop accepts an array of Item and + v16: The navItems prop accepts an array of Item and GroupItem objects. Each GroupItem can have a title, icon, collapsible flag, and children Item objects. Each Item has a label, optional icon, selected diff --git a/packages/lib/src/container/Container.stories.tsx b/packages/lib/src/container/Container.stories.tsx index c12dff0f1..4f4369ef1 100644 --- a/packages/lib/src/container/Container.stories.tsx +++ b/packages/lib/src/container/Container.stories.tsx @@ -79,7 +79,7 @@ const Container = () => ( padding="var(--spacing-padding-m)" margin="var(--spacing-padding-l)" > - Example text + Example text @@ -115,7 +115,7 @@ const Container = () => ( width="56px" height="var(--height-xxxl)" > - <b>1</b> + <strong>1</strong> </DxcContainer> <DxcContainer display="inline-block" @@ -123,7 +123,7 @@ const Container = () => ( width="56px" height="var(--height-xxxl)" > - <b>2</b> + <strong>2</strong> </DxcContainer> <DxcContainer display="inline-block" @@ -134,7 +134,7 @@ const Container = () => ( height="var(--height-xxxl)" zIndex={1} > - <b>3</b> + <strong>3</strong> </DxcContainer> </DxcContainer> </ExampleContainer> @@ -155,7 +155,7 @@ const Container = () => ( height="50px" margin={{ bottom: "var(--spacing-padding-m)" }} > - <b>1</b> + <strong>1</strong> </DxcContainer> <DxcContainer background={{ color: "var(--color-bg-primary-medium)" }} @@ -163,7 +163,7 @@ const Container = () => ( height="var(--height-xxxl)" margin={{ top: "var(--spacing-padding-l)" }} > - <b>2</b> + <strong>2</strong> </DxcContainer> </DxcContainer> </ExampleContainer> @@ -180,7 +180,7 @@ const Container = () => ( width="56px" height="var(--height-xxxl)" > - <b tabIndex={0}>1</b> + <strong tabIndex={0}>1</strong> </DxcContainer> <DxcContainer border={{ @@ -192,7 +192,7 @@ const Container = () => ( width="56px" height="var(--height-xxxl)" > - <b tabIndex={0}>2</b> + <strong tabIndex={0}>2</strong> </DxcContainer> <DxcContainer border={{ @@ -204,7 +204,7 @@ const Container = () => ( width="56px" height="var(--height-xxxl)" > - <b tabIndex={0}>3</b> + <strong tabIndex={0}>3</strong> </DxcContainer> </DxcContainer> </ExampleContainer> @@ -224,7 +224,7 @@ const Container = () => ( width="100px" height="100px" > - <b>Floating text</b> + <strong>Floating text</strong> </DxcContainer> <p style={{ margin: 0 }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, sapien vitae aliquam lacinia, nisl diff --git a/packages/lib/src/container/Container.test.tsx b/packages/lib/src/container/Container.test.tsx index 0c8a4c5c7..2581508e9 100644 --- a/packages/lib/src/container/Container.test.tsx +++ b/packages/lib/src/container/Container.test.tsx @@ -25,7 +25,7 @@ describe("Container component tests", () => { padding="var(--spacing-padding-m)" margin="var(--spacing-padding-l)" > - <b>Example text</b> + <strong>Example text</strong> </DxcContainer> ); expect(getByText("Example text")).toBeTruthy(); From 8abce6d2004beba7fb056e7dffaff21158eb555b Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Wed, 26 Nov 2025 10:10:19 +0100 Subject: [PATCH 20/28] Added logo prop back --- .../components/footer/code/FooterCodePage.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/apps/website/screens/components/footer/code/FooterCodePage.tsx b/apps/website/screens/components/footer/code/FooterCodePage.tsx index 143f702e1..dd69791c4 100644 --- a/apps/website/screens/components/footer/code/FooterCodePage.tsx +++ b/apps/website/screens/components/footer/code/FooterCodePage.tsx @@ -9,6 +9,11 @@ const bottomLinksTypeString = `{ text: string; }[]`; +const logoTypeString = `{ + src: string; + alt: string; +}`; + const socialLinkTypeString = `{ href: string; title: string; @@ -69,6 +74,21 @@ const sections = [ <td>Content to be displayed on the left side of the footer under the logo.</td> <td>-</td> </tr> + <tr> + <td> + <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline"> + <StatusBadge status="new" /> + logo + </DxcFlex> + </td> + <td> + <td> + <ExtendedTableCode>{logoTypeString}</ExtendedTableCode> + </td> + </td> + <td>Logo to be displayed inside the footer.</td> + <td>-</td> + </tr> <tr> <td>mode</td> <td> From 07fa3525bf420c56a5c839edc8a81e119963bdfe Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Wed, 26 Nov 2025 10:23:32 +0100 Subject: [PATCH 21/28] Fixed normalizeNavTabs typing --- apps/website/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 830e1c89c..a4f77484d 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -51,7 +51,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo ), }); - const normalizeNavTabs = (links: LinkDetails[] | LinksSectionDetails[]): (Item | GroupItem)[] => { + const normalizeNavTabs = (links: (LinkDetails | LinksSectionDetails)[]): (Item | GroupItem)[] => { return links.map((link) => { if ("links" in link) { return { From e36fc3e84448de75bca0d14fd996f7692a483afb Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Wed, 26 Nov 2025 11:01:13 +0100 Subject: [PATCH 22/28] Fixed typos --- .../screens/components/alert/code/AlertCodePage.tsx | 12 +++++------- .../components/footer/code/FooterCodePage.tsx | 4 +--- .../screens/migration/Components16MigrationPage.tsx | 8 ++++---- 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/apps/website/screens/components/alert/code/AlertCodePage.tsx b/apps/website/screens/components/alert/code/AlertCodePage.tsx index 6e8e5bfe7..96ce03ed8 100644 --- a/apps/website/screens/components/alert/code/AlertCodePage.tsx +++ b/apps/website/screens/components/alert/code/AlertCodePage.tsx @@ -51,13 +51,11 @@ const sections = [ <tr> <td>message</td> <td> - <td> - <TableCode>{"Message | Message[]"}</TableCode> - <p> - being <Code>Message</Code> an object with the following properties: - </p> - <ExtendedTableCode>{messageTypeString}</ExtendedTableCode> - </td> + <TableCode>{"Message | Message[]"}</TableCode> + <p> + being <Code>Message</Code> an object with the following properties: + </p> + <ExtendedTableCode>{messageTypeString}</ExtendedTableCode> </td> <td> List of messages to be displayed. Each message has a close action that will, apart from remove from the diff --git a/apps/website/screens/components/footer/code/FooterCodePage.tsx b/apps/website/screens/components/footer/code/FooterCodePage.tsx index dd69791c4..1073f5553 100644 --- a/apps/website/screens/components/footer/code/FooterCodePage.tsx +++ b/apps/website/screens/components/footer/code/FooterCodePage.tsx @@ -82,9 +82,7 @@ const sections = [ </DxcFlex> </td> <td> - <td> - <ExtendedTableCode>{logoTypeString}</ExtendedTableCode> - </td> + <ExtendedTableCode>{logoTypeString}</ExtendedTableCode> </td> <td>Logo to be displayed inside the footer.</td> <td>-</td> diff --git a/apps/website/screens/migration/Components16MigrationPage.tsx b/apps/website/screens/migration/Components16MigrationPage.tsx index db1af2e23..f3a42b717 100644 --- a/apps/website/screens/migration/Components16MigrationPage.tsx +++ b/apps/website/screens/migration/Components16MigrationPage.tsx @@ -89,10 +89,10 @@ const sections = [ </DxcBulletedList.Item> </DxcBulletedList> <DxcParagraph> - When migrating, move your old <Code>content</Code> and dropdowns into the new <Code>branding</Code>{" "} - and <Code>navItems</Code> props. Replace <Code>responsiveContent</Code> with{" "} - <Code>responsiveBottomContent</Code> and use <Code>sideContent</Code> as needed for further required - interaction. + When migrating, move your old <Code>content</Code> and dropdowns into the new <Code>logo</Code>,{" "} + <Code>appTitle</Code> and <Code>navItems</Code> props. Replace <Code>responsiveContent</Code> with{" "} + <Code>responsiveBottomContent</Code> and <Code>sideContent</Code> based on the desired positioning.{" "} + <Code>sideContent</Code> can receive a flag parameter that depends on responsiveness. </DxcParagraph> <DxcParagraph> For further information regarding the new API, please refer to{" "} From e35bf1a70d8f30d47bfb8a203cad7a6d194dba2a Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Wed, 26 Nov 2025 12:00:31 +0100 Subject: [PATCH 23/28] Added fixes for migration doc based on feedback --- .../component-updates.tsx} | 2 +- .../{ => 16}/migrating-to-emotion.tsx | 2 +- .../migration/{ => 16}/migrating-tokens.tsx | 0 .../screens/common/componentsList.json | 2 +- apps/website/screens/common/pagesList.tsx | 6 +- .../migration/Components16MigrationPage.tsx | 138 ++++++++++++------ .../migration/EmotionMigrationPage.tsx | 24 +-- .../screens/migration/TokensMigrationPage.tsx | 6 +- 8 files changed, 106 insertions(+), 74 deletions(-) rename apps/website/pages/migration/{migrating-modified-apis.tsx => 16/component-updates.tsx} (81%) rename apps/website/pages/migration/{ => 16}/migrating-to-emotion.tsx (77%) rename apps/website/pages/migration/{ => 16}/migrating-tokens.tsx (100%) diff --git a/apps/website/pages/migration/migrating-modified-apis.tsx b/apps/website/pages/migration/16/component-updates.tsx similarity index 81% rename from apps/website/pages/migration/migrating-modified-apis.tsx rename to apps/website/pages/migration/16/component-updates.tsx index 032d39055..0292cb1a7 100644 --- a/apps/website/pages/migration/migrating-modified-apis.tsx +++ b/apps/website/pages/migration/16/component-updates.tsx @@ -4,7 +4,7 @@ import Components16MigrationPage from "screens/migration/Components16MigrationPa const Components16Migration = () => ( <> <Head> - <title>Migrating component APIs — Halstack Design System + Component updates in v16 — Halstack Design System diff --git a/apps/website/pages/migration/migrating-to-emotion.tsx b/apps/website/pages/migration/16/migrating-to-emotion.tsx similarity index 77% rename from apps/website/pages/migration/migrating-to-emotion.tsx rename to apps/website/pages/migration/16/migrating-to-emotion.tsx index f847dc13f..3469b0e4a 100644 --- a/apps/website/pages/migration/migrating-to-emotion.tsx +++ b/apps/website/pages/migration/16/migrating-to-emotion.tsx @@ -4,7 +4,7 @@ import EmotionPage from "screens/migration/EmotionMigrationPage"; const EmotionMigration = () => ( <> - Migrating to emotion — Halstack Design System + Migrating to Emotion — Halstack Design System diff --git a/apps/website/pages/migration/migrating-tokens.tsx b/apps/website/pages/migration/16/migrating-tokens.tsx similarity index 100% rename from apps/website/pages/migration/migrating-tokens.tsx rename to apps/website/pages/migration/16/migrating-tokens.tsx diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index 48a94562c..a0969f03b 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -44,7 +44,7 @@ { "label": "Data grid", "path": "/components/data-grid", - "status": "experimental" + "status": "new" }, { "label": "Date input", diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx index 37d824075..cbca8f016 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -55,9 +55,9 @@ const foundationsLinks: (LinkDetails | LinksSectionDetails)[] = [ ]; const v16Links: LinkDetails[] = [ - { label: "Modified components", path: "/migration/migrating-modified-apis" }, - { label: "Migrating to emotion", path: "/migration/migrating-to-emotion" }, - { label: "Migrating tokens", path: "/migration/migrating-tokens" }, + { label: "Component updates", path: "/migration/16/component-updates" }, + { label: "Migrating to Emotion", path: "/migration/16/migrating-to-emotion" }, + { label: "Migrating tokens", path: "/migration/16/migrating-tokens" }, ]; const migrationLinks: LinksSectionDetails[] = [{ label: "v16", links: v16Links }]; diff --git a/apps/website/screens/migration/Components16MigrationPage.tsx b/apps/website/screens/migration/Components16MigrationPage.tsx index f3a42b717..0328f88f3 100644 --- a/apps/website/screens/migration/Components16MigrationPage.tsx +++ b/apps/website/screens/migration/Components16MigrationPage.tsx @@ -2,7 +2,7 @@ import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink, DxcBulletedList } import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import PageHeading from "@/common/PageHeading"; -import Code from "@/common/Code"; +import Code, { ExtendedTableCode } from "@/common/Code"; import Link from "next/link"; const sections = [ @@ -55,7 +55,6 @@ const sections = [ Several components were redesigned and now have a different API or behavior. See below for details. ), - // TODO: ADD AN EXAMPLE CONVERTING THE OLD APIs TO THE NEW ONES OR REDIRECT TO THE COMPONENTS' PAGES? subSections: [ { title: "ApplicationLayout", @@ -76,18 +75,36 @@ const sections = [ The Header component has been redesigned. The new API provides a simpler and more flexible approach: - - - v15 (old): The header was configured using props like underlined, - content, and responsiveContent. Dropdowns were rendered using{" "} - DxcHeader.Dropdown. - - - v16: The new header uses branding for logo/app title,{" "} - navItems for navigation links (with optional nested groups), sideContent{" "} - for side elements, and responsiveBottomContent for mobile-specific content. - - + + + + Version + Description + + + + + + v15 (old) + + + The header was configured using props like underlined,content, and{" "} + responsiveContent. Dropdowns were rendered using DxcHeader.Dropdown. + + + + + v16 + + + The new header uses logo and appTitle for the branding,{" "} + navItems for navigation links (with optional nested groups),{" "} + sideContent for side elements, and responsiveBottomContent for + mobile-specific content. + + + + When migrating, move your old content and dropdowns into the new logo,{" "} appTitle and navItems props. Replace responsiveContent with{" "} @@ -112,26 +129,55 @@ const sections = [ declarative navItems prop. This new API also features changes that improve the responsiveness and flexibility of the component. - - - v15 (old): Nested components like DxcSidenav.Title,{" "} - DxcSidenav.Section,DxcSidenav.Group, and DxcSidenav.Link{" "} - defined the structure and links. - - - v16: The navItems prop accepts an array of Item and - GroupItem objects. Each GroupItem can have a title, icon, collapsible - flag, and children Item objects. Each Item has a label, - optional icon, selected - state, and an onSelect callback. - - + + + + Version + Description + + + + + + v15 (old) + + + DxcSidenav.Section,DxcSidenav.Group, and DxcSidenav.Link{" "} + defined the structure and links. + + + + + v16 + + +

      + The navItems prop accepts an array of Item and + GroupItem objects. Each GroupItem has the following structure: +

      + {`{ + badge?: ReactElement; + icon?: string | SVG; + label: string; + items: (Item)[]; +}`} +

      + Each Item has the following structure: +

      + {`{ + badge?: ReactElement; + icon?: string | SVG; + label: string; + onSelect?: () => void; + selected?: boolean; +}`} + + + +       - This is the main changes but there are some new additional props that have been added in this version: - - - To migrate, flatten your old Title, Section, Group, and - Link structure into a single items array following the new typing. + These are the main changes but there are some new additional props that have been added in this + version. When migrating:{" "} @@ -141,7 +187,7 @@ const sections = [ Link structure into a single items array following the new typing.       - Move your old logo/app title into the new branding + Move your old logo/app title into the new logo and appTitle props. Include topContent and bottomContent as needed for further interaction @@ -186,10 +232,13 @@ const sections = [ title: "DataGrid", content: ( - This component has exited the experimental phase and is now fully supported, featuring new functionalities - like on-demand loading (thanks to the childrenTrigger prop), possibility to have rows expanded - by default and the possibility to render any page by default. To know more about these new features, please - refer to the updated documentation. + + This component + {" "} + has exited the experimental phase and is now fully supported, featuring new functionalities like on-demand + loading (thanks to the childrenTrigger prop), possibility to have rows expanded by default and + the possibility to render any page by default. To know more about these new features, please refer to the + updated documentation. ), }, @@ -206,8 +255,8 @@ const sections = [ title: "Slider", content: ( - tabIndex prop has been removed. The prop was not having any effect in the component and was not - included on purpose, so it is now removed. + tabIndex prop has been removed. The prop was not working as we intended, so in the meantime we + decided to remove it. We believe that, at some point, the component will need to set this prop. ), }, @@ -217,7 +266,12 @@ const sections = [ The Tabs component no longer supports the legacy API. A more flexible approach using a Compound Component Pattern is now used instead to maintain a higher consistency with our existing{" "} - NavTabs and make the API much simpler. + NavTabs and make the API much simpler. Additionally, a few improvements have been made to + enhance responsiveness and controlled behavior. Please refer to the + + updated documentation + {" "} + for more details. ), }, @@ -309,7 +363,7 @@ const Components16MigrationPage = () => ( - + diff --git a/apps/website/screens/migration/EmotionMigrationPage.tsx b/apps/website/screens/migration/EmotionMigrationPage.tsx index bc28484dc..41eeaead9 100644 --- a/apps/website/screens/migration/EmotionMigrationPage.tsx +++ b/apps/website/screens/migration/EmotionMigrationPage.tsx @@ -85,9 +85,6 @@ const sections = [
    • Local components using styled-components.
      • -
    • - Overriding Halstack components with styled() wrappers. -
    • Server-side rendering setups relying on ServerStyleSheet.
      • @@ -241,25 +238,6 @@ const GlobalStyles = ( ), }, - { - title: "Overriding Halstack components", - content: ( - <> - - Emotion's styled API can still wrap Halstack components. Replace any previous SC wrappers with - Emotion's equivalent: - - - {`import styled from "@emotion/styled"; -import { DxcButton } from "@dxc-technology/halstack-react"; - -const CustomButton = styled(DxcButton)\` - --button-padding: 12px; -\`;`} - - - ), - }, { title: "Removing styled-components from your build", content: ( @@ -285,7 +263,7 @@ const EmotionMigrationPage = () => ( - + diff --git a/apps/website/screens/migration/TokensMigrationPage.tsx b/apps/website/screens/migration/TokensMigrationPage.tsx index aaa04b695..57d765796 100644 --- a/apps/website/screens/migration/TokensMigrationPage.tsx +++ b/apps/website/screens/migration/TokensMigrationPage.tsx @@ -48,7 +48,7 @@ const sections = [ Naming consistency No token taxonomy, per-component styles - Core → Alias → Component 3-layer architecture + Core → Alias → Component (3-layer architecture) @@ -266,11 +266,11 @@ const TokensMigrationPage = () => ( - + - + ); From cfd31b9c7cdc85d1741a0ef4b1bf12c51476fdc9 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 26 Nov 2025 12:06:59 +0100 Subject: [PATCH 24/28] Fixed typo in Sidenav typing doc --- .../screens/components/sidenav/code/SidenavCodePage.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx index 4da72da58..9237e9723 100644 --- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx +++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx @@ -16,11 +16,9 @@ const logoTypeString = `{ src: string; }`; -const commonItemTypeString = `{ - badge?: ReactElement; +const commonItemTypeString = `badge?: ReactElement; icon?: string | SVG; - label: string; -}`; + label: string;`; const itemTypeString = `{ ${commonItemTypeString} From 0c3c2ba67889f52c9f36ae222885fe69b1ac3ba6 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 26 Nov 2025 16:56:39 +0100 Subject: [PATCH 25/28] Fixed typo --- apps/website/screens/migration/TokensMigrationPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/screens/migration/TokensMigrationPage.tsx b/apps/website/screens/migration/TokensMigrationPage.tsx index 57d765796..1668bc645 100644 --- a/apps/website/screens/migration/TokensMigrationPage.tsx +++ b/apps/website/screens/migration/TokensMigrationPage.tsx @@ -266,7 +266,7 @@ const TokensMigrationPage = () => ( - + From 52b13a9c0b904f25398178f4cebd7375b9564c5e Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 26 Nov 2025 16:56:56 +0100 Subject: [PATCH 26/28] Fixed typo --- apps/website/screens/migration/TokensMigrationPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/screens/migration/TokensMigrationPage.tsx b/apps/website/screens/migration/TokensMigrationPage.tsx index 1668bc645..545c0531a 100644 --- a/apps/website/screens/migration/TokensMigrationPage.tsx +++ b/apps/website/screens/migration/TokensMigrationPage.tsx @@ -266,7 +266,7 @@ const TokensMigrationPage = () => ( - + From 7f76f051236a1067f1eaf613d22e747ec7b6a714 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Thu, 27 Nov 2025 13:52:32 +0100 Subject: [PATCH 27/28] Added fix for sections being displayed even if they had no items --- apps/website/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index a4f77484d..928f4ec85 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -95,7 +95,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo title: section.label, items, }; - }); + }).filter((section) => section.items.length > 0); }, [currentPath, filter]); return ( From e584ae78100eb43a11a7e7a8d11dd3e6f14f2d77 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Fri, 28 Nov 2025 13:35:26 +0100 Subject: [PATCH 28/28] Added theming documentation --- .../screens/migration/TokensMigrationPage.tsx | 14 ++-- .../HalstackProviderPage.tsx | 32 ++++++++ .../examples/customThemes.tsx | 78 +++++++++++++++++++ 3 files changed, 119 insertions(+), 5 deletions(-) create mode 100644 apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx diff --git a/apps/website/screens/migration/TokensMigrationPage.tsx b/apps/website/screens/migration/TokensMigrationPage.tsx index 545c0531a..a4c80f11c 100644 --- a/apps/website/screens/migration/TokensMigrationPage.tsx +++ b/apps/website/screens/migration/TokensMigrationPage.tsx @@ -125,7 +125,7 @@ const sections = [ <> Old JSON-based color overrides must be replaced by CSS variable assignments. Previous version: - {`const opinionatedTheme = { + {`const customTheme = { button: { "baseColor": "#2b470b", "primaryFontColor": "#ffffff", @@ -145,7 +145,7 @@ return ( } // ... return ( - + );`} @@ -222,14 +222,18 @@ return ( "--color-secondary-900": "#100b06", }; - const [theme, setTheme] = useState(lightPalette); + const [theme, setTheme] = useState("light"); const toggleTheme = () => { - setTheme((prev) => (prev === lightPalette ? darkPalette : lightPalette)); + setTheme((prev) => { + const newTheme = prev === "light" ? "dark" : "light"; + console.log("Toggling theme", newTheme); + return newTheme; + }); }; return ( - + ); diff --git a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx index 789ab0e77..b47a212d4 100644 --- a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx +++ b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx @@ -2,6 +2,7 @@ import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import QuickNavContainer from "@/common/QuickNavContainer"; import customTranslations from "./examples/customTranslations"; +import customThemes from "./examples/customThemes"; import { DxcFlex, DxcParagraph, @@ -15,6 +16,7 @@ import { import Link from "next/link"; import PageHeading from "@/common/PageHeading"; import Code, { TableCode } from "@/common/Code"; +import StatusBadge from "@/common/StatusBadge"; const sections = [ { @@ -38,6 +40,19 @@ const sections = [ Object with a given structure, specified below, for defining translations. - + + + + + opinionatedTheme + + + + OpinionatedTheme + + Object with a given structure, specified below, for defining the opinionated theme. + - + ), @@ -80,6 +95,23 @@ const sections = [ ), }, + { + title: "Theming", + content: ( + <> + You can apply the opinionated theming strategy to customize the components. + + Below is an example of customizing the colours of a DxcButton: + + + + We create a lightPalette and darkPalette objects with as many CSS variables as we + want and their respective values. Then we pass one of the objects based on the state of the theme{" "} + to the Halstack Provider, which wraps our components, through its opinionatedTheme property. + + + ), + }, ]; const HalstackProviderPage = () => ( diff --git a/apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx b/apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx new file mode 100644 index 000000000..7e38c5eeb --- /dev/null +++ b/apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx @@ -0,0 +1,78 @@ +import { HalstackProvider, DxcButton } from "@dxc-technology/halstack-react"; +import { useState } from "react"; + +const code = `() => { + // Light palette example + const lightPalette = { + "--color-primary-50": "#d3f0b4", + "--color-primary-100": "#a2df5e", + "--color-primary-200": "#77c81f", + "--color-primary-300": "#68ad1b", + "--color-primary-400": "#579317", + "--color-primary-500": "#487813", + "--color-primary-600": "#39600f", + "--color-primary-700": "#2b470b", + "--color-primary-800": "#1c2f07", + "--color-primary-900": "#0d1503", + + "--color-secondary-50": "#fff9d6", + "--color-secondary-100": "#ffed99", + "--color-secondary-200": "#ffe066", + "--color-secondary-300": "#e6c84d", + "--color-secondary-400": "#ccad33", + "--color-secondary-500": "#b39426", + "--color-secondary-600": "#8f741f", + "--color-secondary-700": "#6b5517", + "--color-secondary-800": "#47370f", + "--color-secondary-900": "#241b08", + }; + + // Dark palette example + const darkPalette = { + "--color-primary-50": "#ffd6e7", + "--color-primary-100": "#ff99c2", + "--color-primary-200": "#ff66a3", + "--color-primary-300": "#e05584", + "--color-primary-400": "#c5446d", + "--color-primary-500": "#a83659", + "--color-primary-600": "#872b47", + "--color-primary-700": "#661f35", + "--color-primary-800": "#441423", + "--color-primary-900": "#220a12", + + "--color-secondary-50": "#f3e6db", + "--color-secondary-100": "#e2c7a9", + "--color-secondary-200": "#d1a577", + "--color-secondary-300": "#b88252", + "--color-secondary-400": "#99673f", + "--color-secondary-500": "#7a5232", + "--color-secondary-600": "#5c3f26", + "--color-secondary-700": "#3e2b19", + "--color-secondary-800": "#21170d", + "--color-secondary-900": "#100b06", + }; + + const [theme, setTheme] = useState("light"); + + const toggleTheme = () => { + setTheme((prev) => { + const newTheme = prev === "light" ? "dark" : "light"; + console.log("Toggling theme", newTheme); + return newTheme; + }); + }; + + return ( + + + + ); +}`; + +const scope = { + DxcButton, + HalstackProvider, + useState, +}; + +export default { code, scope };