Skip to content

Commit f1787fc

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2103 from dxc-technology/gomezivann/spacing-updates
Update spacing properties in layout components
2 parents 4e2c35b + 7a39ad1 commit f1787fc

File tree

19 files changed

+1294
-1615
lines changed

19 files changed

+1294
-1615
lines changed

‎.github/workflows/chromatic.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ jobs:
3636
exitOnceUploaded: true
3737
exitZeroOnChanges: true
3838
workingDir: packages/lib
39+
forceRebuild: true
3940

4041
- name: Run Storybook Tests
4142
run: |

‎apps/website/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"react-color": "^2.19.3",
1919
"react-dom": "^18",
2020
"react-error-boundary": "^3.1.4",
21-
"react-live": "^2.4.1",
21+
"react-live": "^4.1.7",
2222
"react-markdown": "^8.0.7",
2323
"sharp": "^0.33.3",
2424
"slugify": "^1.6.5",

‎apps/website/screens/common/example/Example.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import theme from "./liveEditorTheme";
55
import { DxcButton, DxcFlex, useToast } from "@dxc-technology/halstack-react";
66

77
type Example = {
8-
scope?: object;
8+
scope?: Record<string, any>;
99
code?: string;
1010
};
1111
type ExamplePropTypes = {
@@ -50,7 +50,7 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
5050

5151
return (
5252
<DxcFlex direction="column" gap="1rem">
53-
<LiveProvider scope={example.scope} theme={theme as any} code={example.code}>
53+
<LiveProvider code={example.code} scope={example.scope} theme={theme}>
5454
<StyledPreview>
5555
<LivePreview />
5656
<StyledError>
@@ -68,11 +68,7 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
6868
/>
6969
</DxcFlex>
7070
)}
71-
{isCodeVisible && (
72-
<StyledEditor>
73-
<LiveEditor />
74-
</StyledEditor>
75-
)}
71+
{isCodeVisible && <StyledEditor><LiveEditor /></StyledEditor>}
7672
</LiveProvider>
7773
</DxcFlex>
7874
);

‎apps/website/screens/common/example/liveEditorTheme.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
const theme = {
22
plain: {
3-
color: "#9CDCFE",
4-
backgroundColor: "#333333",
3+
backgroundColor: "#333",
54
borderRadius: "0.25rem",
5+
color: "#fff",
6+
fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
67
fontSize: "0.875rem",
78
},
89
styles: [

‎apps/website/screens/components/bleed/code/BleedCodePage.tsx‎

Lines changed: 16 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import basicUsage from "./examples/basicUsage";
88
import customSizes from "./examples/customSides";
99
import StatusBadge from "@/common/StatusBadge";
1010

11+
const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;
12+
1113
const sections = [
1214
{
1315
title: "Props",
@@ -22,86 +24,58 @@ const sections = [
2224
<tr>
2325
<td>space</td>
2426
<td>
25-
<TableCode>
26-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
27-
</TableCode>
27+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
2828
</td>
2929
<td>Applies the spacing scale to all sides.</td>
30-
<td>
31-
<TableCode>'0rem'</TableCode>
32-
</td>
30+
<td>-</td>
3331
</tr>
3432
<tr>
3533
<td>horizontal</td>
3634
<td>
37-
<TableCode>
38-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
39-
</TableCode>
35+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
4036
</td>
4137
<td>Applies the spacing scale to the left and right sides.</td>
42-
<td>
43-
<TableCode>'0rem'</TableCode>
44-
</td>
38+
<td>-</td>
4539
</tr>
4640
<tr>
4741
<td>vertical</td>
4842
<td>
49-
<TableCode>
50-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
51-
</TableCode>
43+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
5244
</td>
5345
<td>Applies the spacing scale to the top and bottom sides.</td>
54-
<td>
55-
<TableCode>'0rem'</TableCode>
56-
</td>
46+
<td>-</td>
5747
</tr>
5848
<tr>
5949
<td>top</td>
6050
<td>
61-
<TableCode>
62-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
63-
</TableCode>
51+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
6452
</td>
6553
<td>Applies the spacing scale to the top side.</td>
66-
<td>
67-
<TableCode>'0rem'</TableCode>
68-
</td>
54+
<td>-</td>
6955
</tr>
7056
<tr>
7157
<td>right</td>
7258
<td>
73-
<TableCode>
74-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
75-
</TableCode>
59+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
7660
</td>
7761
<td>Applies the spacing scale to the right side.</td>
78-
<td>
79-
<TableCode>'0rem'</TableCode>
80-
</td>
62+
<td>-</td>
8163
</tr>
8264
<tr>
8365
<td>bottom</td>
8466
<td>
85-
<TableCode>
86-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
87-
</TableCode>
67+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
8868
</td>
8969
<td>Applies the spacing scale to the bottom side.</td>
90-
<td>
91-
<TableCode>'0rem'</TableCode>
92-
</td>
70+
<td>-</td>
9371
</tr>
9472
<tr>
9573
<td>left</td>
9674
<td>
97-
<TableCode>
98-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
99-
</TableCode>
75+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
10076
</td>
10177
<td>Applies the spacing scale to the left side.</td>
102-
<td>
103-
<TableCode>'0rem'</TableCode>
104-
</td>
78+
<td>-</td>
10579
</tr>
10680
<tr>
10781
<td>

‎apps/website/screens/components/flex/code/FlexCodePage.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import gapOrderGrow from "./examples/gapOrderGrow";
99
import TableCode from "@/common/TableCode";
1010
import StatusBadge from "@/common/StatusBadge";
1111

12+
const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;
13+
1214
const sections = [
1315
{
1416
title: "Props",
@@ -128,9 +130,7 @@ const sections = [
128130
<tr>
129131
<td>gap</td>
130132
<td>
131-
<TableCode>
132-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem' | Gap
133-
</TableCode>
133+
<TableCode>{coreSpacingTokensTypeString} | Gap</TableCode>
134134
</td>
135135
<td>
136136
Sets <Code>gap</Code> CSS property. See{" "}
@@ -147,9 +147,7 @@ const sections = [
147147
</li>
148148
</ul>
149149
</td>
150-
<td>
151-
-
152-
</td>
150+
<td>-</td>
153151
</tr>
154152
<tr>
155153
<td>grow</td>

‎apps/website/screens/components/grid/code/GridCodePage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import layout from "./examples/layout";
99
import TableCode from "@/common/TableCode";
1010
import StatusBadge from "@/common/StatusBadge";
1111

12+
const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;
13+
1214
const sections = [
1315
{
1416
title: "Props",
@@ -71,9 +73,7 @@ const sections = [
7173
<tr>
7274
<td>gap</td>
7375
<td>
74-
<TableCode>
75-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem' | Gap
76-
</TableCode>
76+
<TableCode>{coreSpacingTokensTypeString} | Gap</TableCode>
7777
</td>
7878
<td>
7979
Sets the <Code>gap</Code> CSS property. See{" "}

‎apps/website/screens/components/inset/code/InsetCodePage.tsx‎

Lines changed: 17 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import customSides from "./examples/customSides";
88
import TableCode from "@/common/TableCode";
99
import StatusBadge from "@/common/StatusBadge";
1010

11+
const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;
12+
1113
const sections = [
1214
{
1315
title: "Props",
@@ -22,86 +24,59 @@ const sections = [
2224
<tr>
2325
<td>space</td>
2426
<td>
25-
<TableCode>
26-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
27-
</TableCode>
27+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
2828
</td>
2929
<td>Applies the spacing scale to all sides.</td>
30-
<td>
31-
<TableCode>'0rem'</TableCode>
32-
</td>
30+
<td>-</td>
3331
</tr>
3432
<tr>
3533
<td>horizontal</td>
3634
<td>
37-
<TableCode>
38-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
39-
</TableCode>
35+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
4036
</td>
4137
<td>Applies the spacing scale to the left and right sides.</td>
42-
<td>
43-
<TableCode>'0rem'</TableCode>
44-
</td>
38+
<td>-</td>
4539
</tr>
4640
<tr>
4741
<td>vertical</td>
4842
<td>
49-
<TableCode>
50-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
51-
</TableCode>
43+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
5244
</td>
5345
<td>Applies the spacing scale to the top and bottom sides.</td>
54-
<td>
55-
<TableCode>'0rem'</TableCode>
56-
</td>
46+
<td>-</td>
5747
</tr>
5848
<tr>
5949
<td>top</td>
6050
<td>
61-
<TableCode>
62-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
63-
</TableCode>
51+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
6452
</td>
6553
<td>Applies the spacing scale to the top side.</td>
66-
<td>
67-
<TableCode>'0rem'</TableCode>
68-
</td>
54+
<td>-</td>
6955
</tr>
7056
<tr>
7157
<td>right</td>
7258
<td>
73-
<TableCode>
74-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
75-
</TableCode>
59+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
7660
</td>
7761
<td>Applies the spacing scale to the right side.</td>
78-
<td>
79-
<TableCode>'0rem'</TableCode>
80-
</td>
62+
<td>-</td>
8163
</tr>
8264
<tr>
8365
<td>bottom</td>
8466
<td>
85-
<TableCode>
86-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
87-
</TableCode>
67+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
8868
</td>
8969
<td>Applies the spacing scale to the bottom side.</td>
90-
<td>
91-
<TableCode>'0rem'</TableCode>
92-
</td>
70+
71+
<td>-</td>
9372
</tr>
9473
<tr>
9574
<td>left</td>
9675
<td>
97-
<TableCode>
98-
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
99-
</TableCode>
76+
<TableCode>{coreSpacingTokensTypeString}</TableCode>
10077
</td>
10178
<td>Applies the spacing scale to the left side.</td>
102-
<td>
103-
<TableCode>'0rem'</TableCode>
104-
</td>
79+
<td>-</td>
10580
</tr>
10681
<tr>
10782
<td>

0 commit comments

Comments
 (0)