Skip to content
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

#345 Spacing variables for the css usage #367

Merged
merged 3 commits into from
Aug 1, 2022
Merged

#345 Spacing variables for the css usage #367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
14fe800
spacing variables for the css usage
marcinsawicki Jul 27, 2022
2b7f372
moved scss mixins to css variables, added page related to Spacing in …
marcinsawicki Jul 27, 2022
b180aa4
changes after review
marcinsawicki Jul 28, 2022
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 packages/react-components/.storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import '../src/themes/legacy.scss';
import '../src/themes/light.scss';
import '../src/themes/dark.scss';
import '../src/foundations/spacing.css';

export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"dev:styles": "npm run build:styles -- --watch",
"build": "run-s build:*",
"build:lib": "tsc && vite build",
"build:styles": "sass src/themes:dist/themes",
"build:styles": "sass src/themes:dist/themes; sass src/foundations:dist/spacing",
"build-storybook": "build-storybook",
"chromatic": "dotenv -e ../../.env chromatic -- --exit-zero-on-changes",
"lint": "eslint src --ext js,jsx,ts,tsx",
Expand Down
16 changes: 16 additions & 0 deletions packages/react-components/src/foundations/spacing-token.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export const SpacingToken = {
Spacing0: '--spacing-0',
Spacing05: '--spacing-05',
Spacing1: '--spacing-1',
Spacing2: '--spacing-2',
Spacing3: '--spacing-3',
Spacing4: '--spacing-4',
Spacing5: '--spacing-5',
Spacing6: '--spacing-6',
Spacing8: '--spacing-8',
Spacing12: '--spacing-12',
Spacing16: '--spacing-16',
Spacing18: '--spacing-18',
Spacing20: '--spacing-20',
Spacing24: '--spacing-24',
};
16 changes: 16 additions & 0 deletions packages/react-components/src/foundations/spacing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
:root {
--spacing-0: 0;
--spacing-05: 2px;
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 20px;
--spacing-6: 24px;
--spacing-8: 32px;
--spacing-12: 48px;
--spacing-16: 64px;
--spacing-18: 72px;
--spacing-20: 80px;
--spacing-24: 96px;
}
3 changes: 3 additions & 0 deletions packages/react-components/src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
@use './themes/legacy';
@use './themes/light';
@use './themes/dark';
@use './foundations/spacing';

*[class^='lc-'] {
box-sizing: border-box;
Expand Down
3 changes: 2 additions & 1 deletion packages/react-components/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import './index.scss';

export { DesignTokens } from './themes/designTokens';
export { DesignToken } from './themes/design-token';
export { SpacingToken } from './foundations/spacing-token';

export * from './components/Alert';
export * from './components/Badge';
Expand Down
28 changes: 28 additions & 0 deletions packages/react-components/src/stories/Spacing.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';

import { Spacing } from './components/Spacing';
import { SpacingExamples } from './components/SpacingExamples';

<Meta title="Foundations/Spacing" />

# Spacing

<Canvas
style={{
color: 'var(--content-default)',
backgroundColor: 'var(--background)',
}}
>
<Spacing />
</Canvas>

## Examples

<Canvas
style={{
color: 'var(--content-default)',
backgroundColor: 'var(--background)',
}}
>
<SpacingExamples />
</Canvas>
4 changes: 2 additions & 2 deletions packages/react-components/src/stories/components/ColorTokens.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { DesignTokens } from '../../themes/designTokens';
import { DesignToken } from '../../themes/design-token';
import { Text } from '../../components/Typography';

interface TokensGroup {
Expand All @@ -20,7 +20,7 @@ type TokenGroupName =
| 'decor';

const Tokens: TokensGroup = Object.values(
DesignTokens as { [key: string]: string }
DesignToken as { [key: string]: string }
).reduce(
(acc: TokensGroup, value) => {
const groupName = value.split('-').filter(Boolean)[0] as TokenGroupName;
Expand Down
23 changes: 23 additions & 0 deletions packages/react-components/src/stories/components/Spacing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
table {
border-collapse: collapse;
width: 100%;
}

table th,
table td {
border-bottom: 1px solid var(--border-default);
padding: 15px 0;
text-align: left;
}

table td {
font-size: 14px;
}

.first-column {
width: 20%;
}

.second-column {
width: 15%;
}
100 changes: 100 additions & 0 deletions packages/react-components/src/stories/components/Spacing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import * as React from 'react';

import './Spacing.css';

export const Spacing = (): React.ReactElement => {
return (
<div>
<table>
<tr>
<th className="first-column">Token</th>
<th className="second-column">Size</th>
<th>Usage</th>
</tr>
<tr>
<td>--spacing-0</td>
<td>0px</td>
<td>When objects are not separated</td>
</tr>
<tr>
<td>--spacing-05</td>
<td>2px</td>
<td>Use for really small spaces, where every pixel counts</td>
</tr>
<tr>
<td>--spacing-1</td>
<td>4px</td>
<td>Use for really small spaces, where every pixel counts</td>
</tr>
<tr>
<td>--spacing-2</td>
<td>8px</td>
<td>Use for small spaces, where every pixel counts</td>
</tr>
<tr>
<td>--spacing-3</td>
<td>12px</td>
<td>
Use for inner paddings in smaller components, for example tooltips
</td>
</tr>
<tr>
<td>--spacing-4</td>
<td>16px</td>
<td>
Use for inner paddings in medium components, for example cards or as
margins on mobile devices
</td>
</tr>
<tr>
<td>--spacing-5</td>
<td>20px</td>
<td>
Use for inner paddings in larger components, for example modals
</td>
</tr>
<tr>
<td>--spacing-6</td>
<td>24px</td>
<td>
Use to separate the content, for examples sections in settings, or
for margins on desktop
</td>
</tr>
<tr>
<td>--spacing-8</td>
<td>32px</td>
<td>
Use to separate the content where space is not limiting you, or when
you need more obvious distincion between components
</td>
</tr>
<tr>
<td>--spacing-12</td>
<td>48px</td>
<td>Use for larger margins for example in empty states</td>
</tr>
<tr>
<td>--spacing-16</td>
<td>64px</td>
<td>Use to represent additional data</td>
</tr>
<tr>
<td>--spacing-18</td>
<td>72px</td>
<td>Use to represent additional data</td>
</tr>
<tr>
<td>--spacing-20</td>
<td>80px</td>
<td>Use to represent additional data</td>
</tr>
<tr>
<td>--spacing-24</td>
<td>96px</td>
<td>Use to represent additional data</td>
</tr>
</table>
</div>
);
};
44 changes: 44 additions & 0 deletions packages/react-components/src/stories/components/SpacingExamples.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
.input {
&--spacing-0 {
padding: 0 var(--spacing-0);
}
&--spacing-05 {
padding: 0 var(--spacing-05);
}
&--spacing-1 {
padding: 0 var(--spacing-1);
}
&--spacing-2 {
padding: 0 var(--spacing-2);
}
&--spacing-3 {
padding: 0 var(--spacing-3);
}
&--spacing-4 {
padding: 0 var(--spacing-4);
}
&--spacing-5 {
padding: 0 var(--spacing-5);
}
&--spacing-6 {
padding: 0 var(--spacing-6);
}
&--spacing-8 {
padding: 0 var(--spacing-8);
}
&--spacing-12 {
padding: 0 var(--spacing-12);
}
&--spacing-16 {
padding: 0 var(--spacing-16);
}
&--spacing-18 {
padding: 0 var(--spacing-18);
}
&--spacing-20 {
padding: 0 var(--spacing-20);
}
&--spacing-24 {
padding: 0 var(--spacing-24);
}
}
99 changes: 99 additions & 0 deletions packages/react-components/src/stories/components/SpacingExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import * as React from 'react';

import { Input } from '../../components/Input';

import styles from './SpacingExamples.module.scss';
import { StoryDescriptor } from './StoryDescriptor';

const baseClass = 'input';

export const SpacingExamples = (): React.ReactElement => {
return (
<div>
<StoryDescriptor title="Spacing 0">
<Input
className={styles[`${baseClass}--spacing-0`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 0.5">
<Input
className={styles[`${baseClass}--spacing-05`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 1">
<Input
className={styles[`${baseClass}--spacing-1`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 2">
<Input
className={styles[`${baseClass}--spacing-2`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 3">
<Input
className={styles[`${baseClass}--spacing-3`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 4">
<Input
className={styles[`${baseClass}--spacing-4`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 5">
<Input
className={styles[`${baseClass}--spacing-5`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 6">
<Input
className={styles[`${baseClass}--spacing-6`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 8">
<Input
className={styles[`${baseClass}--spacing-8`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 12">
<Input
className={styles[`${baseClass}--spacing-12`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 16">
<Input
className={styles[`${baseClass}--spacing-16`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 18">
<Input
className={styles[`${baseClass}--spacing-18`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 20">
<Input
className={styles[`${baseClass}--spacing-20`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
<StoryDescriptor title="Spacing 24">
<Input
className={styles[`${baseClass}--spacing-24`]}
placeholder="Input with spacing"
/>
</StoryDescriptor>
</div>
);
};
2 changes: 1 addition & 1 deletion ...act-components/src/themes/designTokens.ts → ...act-components/src/themes/design-token.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const DesignTokens = {
export const DesignToken = {
Background: '--background',
SurfaceBasicDefault: '--surface-basic-default',
SurfaceBasicSubtle: '--surface-basic-subtle',
Expand Down