Skip to content

Update spacing properties in layout components #2103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 17, 2024
Merged

Update spacing properties in layout components #2103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
63c7765
Layout components spacing values updated
GomezIvann Oct 17, 2024
eff87bf
react-live editor issues solved
GomezIvann Oct 17, 2024
c6b4d2f
Merge branch 'master' into gomezivann/spacing-updates
GomezIvann Oct 17, 2024
f210214
Footer issue fixed
GomezIvann Oct 17, 2024
9500af1
Force rebuild to prevent chromatic reference error
Mil4n0r Oct 17, 2024
823e8f1
Grid & Flex update
GomezIvann Oct 17, 2024
7a39ad1
Merge branch 'gomezivann/spacing-updates' of https://github.com/dxc-t…
GomezIvann Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/chromatic.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ jobs:
exitOnceUploaded: true
exitZeroOnChanges: true
workingDir: packages/lib
forceRebuild: true

- name: Run Storybook Tests
run: |
Expand Down
2 changes: 1 addition & 1 deletion apps/website/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"react-color": "^2.19.3",
"react-dom": "^18",
"react-error-boundary": "^3.1.4",
"react-live": "^2.4.1",
"react-live": "^4.1.7",
"react-markdown": "^8.0.7",
"sharp": "^0.33.3",
"slugify": "^1.6.5",
Expand Down
10 changes: 3 additions & 7 deletions apps/website/screens/common/example/Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import theme from "./liveEditorTheme";
import { DxcButton, DxcFlex, useToast } from "@dxc-technology/halstack-react";

type Example = {
scope?: object;
scope?: Record<string, any>;
code?: string;
};
type ExamplePropTypes = {
Expand Down Expand Up @@ -50,7 +50,7 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E

return (
<DxcFlex direction="column" gap="1rem">
<LiveProvider scope={example.scope} theme={theme as any} code={example.code}>
<LiveProvider code={example.code} scope={example.scope} theme={theme}>
<StyledPreview>
<LivePreview />
<StyledError>
Expand All @@ -68,11 +68,7 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
/>
</DxcFlex>
)}
{isCodeVisible && (
<StyledEditor>
<LiveEditor />
</StyledEditor>
)}
{isCodeVisible && <StyledEditor><LiveEditor /></StyledEditor>}
</LiveProvider>
</DxcFlex>
);
Expand Down
5 changes: 3 additions & 2 deletions apps/website/screens/common/example/liveEditorTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
const theme = {
plain: {
color: "#9CDCFE",
backgroundColor: "#333333",
backgroundColor: "#333",
borderRadius: "0.25rem",
color: "#fff",
fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
fontSize: "0.875rem",
},
styles: [
Expand Down
58 changes: 16 additions & 42 deletions apps/website/screens/components/bleed/code/BleedCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import basicUsage from "./examples/basicUsage";
import customSizes from "./examples/customSides";
import StatusBadge from "@/common/StatusBadge";

const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;

const sections = [
{
title: "Props",
Expand All @@ -22,86 +24,58 @@ const sections = [
<tr>
<td>space</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to all sides.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>horizontal</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the left and right sides.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>vertical</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the top and bottom sides.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>top</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the top side.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>right</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the right side.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>bottom</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the bottom side.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>left</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the left side.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>
Expand Down
10 changes: 4 additions & 6 deletions apps/website/screens/components/flex/code/FlexCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import gapOrderGrow from "./examples/gapOrderGrow";
import TableCode from "@/common/TableCode";
import StatusBadge from "@/common/StatusBadge";

const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;

const sections = [
{
title: "Props",
Expand Down Expand Up @@ -128,9 +130,7 @@ const sections = [
<tr>
<td>gap</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem' | Gap
</TableCode>
<TableCode>{coreSpacingTokensTypeString} | Gap</TableCode>
</td>
<td>
Sets <Code>gap</Code> CSS property. See{" "}
Expand All @@ -147,9 +147,7 @@ const sections = [
</li>
</ul>
</td>
<td>
-
</td>
<td>-</td>
</tr>
<tr>
<td>grow</td>
Expand Down
6 changes: 3 additions & 3 deletions apps/website/screens/components/grid/code/GridCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import layout from "./examples/layout";
import TableCode from "@/common/TableCode";
import StatusBadge from "@/common/StatusBadge";

const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;

const sections = [
{
title: "Props",
Expand Down Expand Up @@ -71,9 +73,7 @@ const sections = [
<tr>
<td>gap</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem' | Gap
</TableCode>
<TableCode>{coreSpacingTokensTypeString} | Gap</TableCode>
</td>
<td>
Sets the <Code>gap</Code> CSS property. See{" "}
Expand Down
59 changes: 17 additions & 42 deletions apps/website/screens/components/inset/code/InsetCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import customSides from "./examples/customSides";
import TableCode from "@/common/TableCode";
import StatusBadge from "@/common/StatusBadge";

const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;

const sections = [
{
title: "Props",
Expand All @@ -22,86 +24,59 @@ const sections = [
<tr>
<td>space</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to all sides.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>horizontal</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the left and right sides.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>vertical</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the top and bottom sides.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>top</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the top side.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>right</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the right side.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>bottom</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the bottom side.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>

<td>-</td>
</tr>
<tr>
<td>left</td>
<td>
<TableCode>
'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem'
</TableCode>
<TableCode>{coreSpacingTokensTypeString}</TableCode>
</td>
<td>Applies the spacing scale to the left side.</td>
<td>
<TableCode>'0rem'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>
Expand Down
Loading
Loading