Skip to content

Commit d399a34

Browse files
JialeclJialecl
authored
Merge pull request #2368 from dxc-technology/PelayoFelgueroso/improve-migration_documentation
Improve migration documentation for version 16
2 parents 5f1708d + 0216d7f commit d399a34

File tree

5 files changed

+112
-16
lines changed

5 files changed

+112
-16
lines changed

‎apps/website/pages/migration/16/component-updates.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Head from "next/head";
2-
import Components16MigrationPage from "screens/migration/Components16MigrationPage";
2+
import Components16MigrationPage from "screens/migration/components/Components16MigrationPage";
33

44
const Components16Migration = () => (
55
<>

‎apps/website/screens/migration/TokensMigrationPage.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ const sections = [
6666
<li>Migrating color, spacing, and typography overrides to CSS tokens.</li>
6767
<li>Replacing any custom component overrides that referenced theme object values.</li>
6868
<li>Updating global styles to rely on CSS variables instead of hardcoded values.</li>
69+
<li>Refactoring prop values to rely on alias tokens instead of hardcoded values.</li>
6970
</ul>
7071
</>
7172
),
@@ -153,7 +154,8 @@ return (
153154
<DxcParagraph>
154155
This can be applied to colors, fonts, spacings and borders. However, keep in mind that, for now, only core
155156
tokens can be overwritten and they affect all the components which are wrapped within the{" "}
156-
<Code>HalstackProvider</Code>.
157+
<Code>HalstackProvider</Code>. Note that the former <Code>theme</Code> prop has been renamed to{" "}
158+
<Code>opinionatedTheme</Code>.
157159
</DxcParagraph>
158160
</>
159161
),

apps/website/screens/migration/Components16MigrationPage.tsx renamed to apps/website/screens/migration/components/Components16MigrationPage.tsx

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,24 @@ import DocFooter from "@/common/DocFooter";
44
import PageHeading from "@/common/PageHeading";
55
import Code, { ExtendedTableCode } from "@/common/Code";
66
import Link from "next/link";
7+
import Example from "@/common/example/Example";
8+
import previousExample from "./examples/previous";
9+
import newExample from "./examples/new";
10+
11+
const groupItemType = `{
12+
badge?: ReactElement;
13+
icon?: string | SVG;
14+
label: string;
15+
items: (Item)[];
16+
}`;
17+
18+
const itemType = `{
19+
badge?: ReactElement;
20+
icon?: string | SVG;
21+
label: string;
22+
onSelect?: () => void;
23+
selected?: boolean;
24+
}`;
725

826
const sections = [
927
{
@@ -16,6 +34,27 @@ const sections = [
1634
</DxcParagraph>
1735
),
1836
},
37+
{
38+
title: "Usage of components",
39+
content: (
40+
<>
41+
<DxcParagraph>
42+
In our component props, instead of passing hardcoded values such as <Code>2rem</Code>, we should always use an
43+
alias token whenever possible. Only if no suitable alias token exists, a core token or a hardcoded value may
44+
be used.
45+
</DxcParagraph>
46+
<DxcParagraph>Previous version:</DxcParagraph>
47+
<Example example={previousExample} defaultIsVisible />
48+
<Example example={newExample} defaultIsVisible />
49+
<DxcParagraph>
50+
For more information about tokens refer to{" "}
51+
<Link href="/foundations/tokens/overview" passHref legacyBehavior>
52+
<DxcLink>its documentation</DxcLink>
53+
</Link>
54+
</DxcParagraph>
55+
</>
56+
),
57+
},
1958
{
2059
title: "Added components",
2160
content: (
@@ -155,22 +194,11 @@ const sections = [
155194
The <Code>navItems</Code> prop accepts an array of <Code>Item</Code> and
156195
<Code>GroupItem</Code> objects. Each <Code>GroupItem</Code> has the following structure:
157196
</p>
158-
<ExtendedTableCode>{`{
159-
badge?: ReactElement;
160-
icon?: string | SVG;
161-
label: string;
162-
items: (Item)[];
163-
}`}</ExtendedTableCode>
197+
<ExtendedTableCode>{groupItemType}</ExtendedTableCode>
164198
<p>
165199
Each <Code>Item</Code> has the following structure:
166200
</p>
167-
<ExtendedTableCode>{`{
168-
badge?: ReactElement;
169-
icon?: string | SVG;
170-
label: string;
171-
onSelect?: () => void;
172-
selected?: boolean;
173-
}`}</ExtendedTableCode>
201+
<ExtendedTableCode>{itemType}</ExtendedTableCode>
174202
</td>
175203
</tr>
176204
</tbody>
@@ -366,7 +394,7 @@ const Components16MigrationPage = () => (
366394
</DxcFlex>
367395
</PageHeading>
368396
<QuickNavContainer sections={sections} startHeadingLevel={2} />
369-
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/migration/Components16Page.tsx" />
397+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/migration/components/Components16MigrationPage.tsx" />
370398
</DxcFlex>
371399
);
372400

‎apps/website/screens/migration/components/examples/new.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { DxcContainer, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
2+
3+
const code = `() => {
4+
return (
5+
<DxcInset space="var(--spacing-padding-xl)">
6+
<DxcFlex gap="var(--spacing-gap-xl)">
7+
<DxcContainer
8+
width="100%"
9+
height="var(--height-xxl)"
10+
background={{color: "var(--color-bg-primary-medium)"}}
11+
/>
12+
<DxcContainer
13+
width="100%"
14+
height="var(--height-xxl)"
15+
background={{color: "var(--color-bg-primary-strong)"}}
16+
/>
17+
<DxcContainer
18+
width="100%"
19+
height="var(--height-xxl)"
20+
background={{color: "var(--color-bg-primary-medium)"}}
21+
/>
22+
</DxcFlex>
23+
</DxcInset>
24+
);
25+
}`;
26+
27+
const scope = {
28+
DxcFlex,
29+
DxcInset,
30+
DxcContainer,
31+
};
32+
33+
export default { code, scope };

‎apps/website/screens/migration/components/examples/previous.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { DxcContainer, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
2+
3+
const code = `() => {
4+
return (
5+
<DxcInset space="2rem">
6+
<DxcFlex gap="2rem">
7+
<DxcContainer
8+
width="100%"
9+
height="40px"
10+
background={{color: "#DDC9F3"}}
11+
/>
12+
<DxcContainer
13+
width="100%"
14+
height="40px"
15+
background={{color: "#6F4B97"}}
16+
/>
17+
<DxcContainer
18+
width="100%"
19+
height="40px"
20+
background={{color: "#DDC9F3"}}
21+
/>
22+
</DxcFlex>
23+
</DxcInset>
24+
);
25+
}`;
26+
27+
const scope = {
28+
DxcFlex,
29+
DxcInset,
30+
DxcContainer,
31+
};
32+
33+
export default { code, scope };

0 commit comments

Comments
 (0)