From 9420b7bedb5841e5fb4761f126ce72c600c10779 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 11 Dec 2025 12:15:32 +0100 Subject: [PATCH 1/2] Improve migration documentation for version 16, related to using alias tokens in the props of the components instead of hardcoded values --- .../pages/migration/16/component-updates.tsx | 2 +- .../screens/migration/TokensMigrationPage.tsx | 4 ++- .../Components16MigrationPage.tsx | 24 ++++++++++++++ .../migration/components/examples/new.tsx | 33 +++++++++++++++++++ .../components/examples/previous.tsx | 33 +++++++++++++++++++ 5 files changed, 94 insertions(+), 2 deletions(-) rename apps/website/screens/migration/{ => components}/Components16MigrationPage.tsx (94%) create mode 100644 apps/website/screens/migration/components/examples/new.tsx create mode 100644 apps/website/screens/migration/components/examples/previous.tsx diff --git a/apps/website/pages/migration/16/component-updates.tsx b/apps/website/pages/migration/16/component-updates.tsx index 0292cb1a7..0d5d94fa3 100644 --- a/apps/website/pages/migration/16/component-updates.tsx +++ b/apps/website/pages/migration/16/component-updates.tsx @@ -1,5 +1,5 @@ import Head from "next/head"; -import Components16MigrationPage from "screens/migration/Components16MigrationPage"; +import Components16MigrationPage from "screens/migration/components/Components16MigrationPage"; const Components16Migration = () => ( <> diff --git a/apps/website/screens/migration/TokensMigrationPage.tsx b/apps/website/screens/migration/TokensMigrationPage.tsx index a4c80f11c..6c8f834d2 100644 --- a/apps/website/screens/migration/TokensMigrationPage.tsx +++ b/apps/website/screens/migration/TokensMigrationPage.tsx @@ -66,6 +66,7 @@ const sections = [
  • 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.
    • +
  • Refactoring prop values to rely on alias tokens instead of hardcoded values.
    • ), @@ -153,7 +154,8 @@ 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. + HalstackProvider. Note that the former theme prop has been renamed to{" "} + opinionatedTheme. ), diff --git a/apps/website/screens/migration/Components16MigrationPage.tsx b/apps/website/screens/migration/components/Components16MigrationPage.tsx similarity index 94% rename from apps/website/screens/migration/Components16MigrationPage.tsx rename to apps/website/screens/migration/components/Components16MigrationPage.tsx index 0328f88f3..20f4fe365 100644 --- a/apps/website/screens/migration/Components16MigrationPage.tsx +++ b/apps/website/screens/migration/components/Components16MigrationPage.tsx @@ -4,6 +4,9 @@ import DocFooter from "@/common/DocFooter"; import PageHeading from "@/common/PageHeading"; import Code, { ExtendedTableCode } from "@/common/Code"; import Link from "next/link"; +import Example from "@/common/example/Example"; +import previousExample from "./examples/previous"; +import newExample from "./examples/new"; const sections = [ { @@ -16,6 +19,27 @@ const sections = [ ), }, + { + title: "Usage of components", + content: ( + <> + + In our component props, instead of passing hardcoded values such as 2rem, we should always use an + alias token whenever possible. Only if no suitable alias token exists, a core token or a hardcoded value may + be used. + + Previous version: + + + + For more information about tokens refer to{" "} + + its documentation + + + + ), + }, { title: "Added components", content: ( diff --git a/apps/website/screens/migration/components/examples/new.tsx b/apps/website/screens/migration/components/examples/new.tsx new file mode 100644 index 000000000..1b22888b6 --- /dev/null +++ b/apps/website/screens/migration/components/examples/new.tsx @@ -0,0 +1,33 @@ +import { DxcContainer, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + + + + + ); +}`; + +const scope = { + DxcFlex, + DxcInset, + DxcContainer, +}; + +export default { code, scope }; diff --git a/apps/website/screens/migration/components/examples/previous.tsx b/apps/website/screens/migration/components/examples/previous.tsx new file mode 100644 index 000000000..aaf7d28e7 --- /dev/null +++ b/apps/website/screens/migration/components/examples/previous.tsx @@ -0,0 +1,33 @@ +import { DxcContainer, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + + + + + ); +}`; + +const scope = { + DxcFlex, + DxcInset, + DxcContainer, +}; + +export default { code, scope }; From 0216d7f12f690f82f4a2f2ec7841e435d4c51f3f Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 23 Dec 2025 14:39:44 +0100 Subject: [PATCH 2/2] Correct url added to DocFooter --- .../components/Components16MigrationPage.tsx | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/apps/website/screens/migration/components/Components16MigrationPage.tsx b/apps/website/screens/migration/components/Components16MigrationPage.tsx index 2a2d81203..56eab849c 100644 --- a/apps/website/screens/migration/components/Components16MigrationPage.tsx +++ b/apps/website/screens/migration/components/Components16MigrationPage.tsx @@ -8,6 +8,21 @@ import Example from "@/common/example/Example"; import previousExample from "./examples/previous"; import newExample from "./examples/new"; +const groupItemType = `{ + badge?: ReactElement; + icon?: string | SVG; + label: string; + items: (Item)[]; +}`; + +const itemType = `{ + badge?: ReactElement; + icon?: string | SVG; + label: string; + onSelect?: () => void; + selected?: boolean; +}`; + const sections = [ { title: "Introduction", @@ -179,22 +194,11 @@ const sections = [ 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)[]; -}`} + {groupItemType}

    Each Item has the following structure:

    - {`{ - badge?: ReactElement; - icon?: string | SVG; - label: string; - onSelect?: () => void; - selected?: boolean; -}`} + {itemType} @@ -390,7 +394,7 @@ const Components16MigrationPage = () => ( - + );