Skip to content

Commit f14ede5

Browse files
jenndiazMelissa Thompson
authored and
castastrophe
committed
feat(cornerrounding): add custom token and foundations documentation (#2559)
* feat(cornerrounding): documentation, custom tokens - feat(cornerrounding): add custom token - chore(cornerrounding): adds dist - docs(cornerrounding): add file strucutre for foundations - feat(cornerrounding): override token value - Sets custom var to override token spectrum-corner-radius-full - chore(cornerrounding): add override to dist - Adds custom var to override token value to dist - chore(cornerrounding): adjust file structure - Also renames file - feat(cornerrounding): add Foundations story for corner-rounding - feat(cornerrounding): add action buttons and checkboxes - Adds action buttons and checkboxes stories to demonstrate corner rounding - docs(cornerrounding): update corner-rounding docs - better utilize storybook features - clean up checkbox and action button stories - hide stories in corner-rounding directory - improve table styling and css token use - improve corner rounding documentation - add tables for component size tokens - fix(cornerrounding): remove mdx for tables - fix(cornerrounding): use sentence case - feat(cornerrounding): use custom token on close button - docs: add alias note - docs: remove reference to non-alias tokens - feat(actionbutton): partial migration for corner rounding only - feat(checkbox): partial migration for corner rounding only - chore(closebutton): update custom var post-refactor - fix: token rebase issue - chore(actionbutton,checkbox): update package version - chore: use corner-radius alias token - chore: update tokens version - chore: revert unneeded component version change - docs: design requested updates, show token with example - docs: move tables to stories, inline spacing for tables * fix: includes error --------- Co-authored-by: Melissa Thompson <mthompson@heysparkbox.com>
1 parent 2697ef9 commit f14ede5

File tree

11 files changed

+433
-14
lines changed

11 files changed

+433
-14
lines changed

‎.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { html } from "lit";
2+
import { Template } from "../../../components/actionbutton/stories/template";
3+
4+
export default {
5+
title: "Foundations/Corner rounding",
6+
description:
7+
"The action button component represents an action a user can take.",
8+
component: "ActionButton",
9+
args: {
10+
rootClass: "spectrum-ActionButton",
11+
},
12+
parameters: {
13+
actions: {
14+
handles: ["click .spectrum-ActionButton:not([disabled])"],
15+
},
16+
},
17+
tags: ['foundation'],
18+
};
19+
20+
const ActionButton = ({
21+
...args
22+
}) => {
23+
return html`
24+
<div style="padding: 1rem 0;">
25+
${Template({
26+
...args,
27+
iconName: undefined,
28+
})}
29+
</div>
30+
`;
31+
};
32+
33+
const ActionButtonTable = ({ ...args }) => {
34+
return html`
35+
<table class="spectrum-Foundations-Example-CornerRounding-table">
36+
<thead>
37+
<tr>
38+
<th scope="col">Token</th>
39+
<th scope="col" style="padding: 0 2rem;">Value</th>
40+
<th scope="col">Medium example</th>
41+
</tr>
42+
</thead>
43+
<tbody>
44+
<tr>
45+
<td>--spectrum-corner-radius-medium-size-extra-small</td>
46+
<td style="padding: 0 2rem;">6px</td>
47+
<td>
48+
${ActionButton({
49+
...args,
50+
label: "Extra Small",
51+
size: "xs"
52+
})}
53+
</td>
54+
</tr>
55+
<tr>
56+
<td>--spectrum-corner-radius-medium-size-small</td>
57+
<td style="padding: 0 2rem;">7px</td>
58+
<td>
59+
${ActionButton({
60+
...args,
61+
label: "Small",
62+
size: "s"
63+
})}
64+
</td>
65+
</tr>
66+
<tr>
67+
<td>--spectrum-corner-radius-medium-size-medium</td>
68+
<td style="padding: 0 2rem;">8px</td>
69+
<td>
70+
${ActionButton({
71+
...args,
72+
label: "Medium",
73+
size: "m"
74+
})}
75+
</td>
76+
</tr>
77+
<tr>
78+
<td>--spectrum-corner-radius-medium-size-large</td>
79+
<td style="padding: 0 2rem;">9px</td>
80+
<td>
81+
${ActionButton({
82+
...args,
83+
label: "Large",
84+
size: "l"
85+
})}
86+
</td>
87+
</tr>
88+
<tr>
89+
<td>--spectrum-corner-radius-medium-size-extra-large</td>
90+
<td style="padding: 0 2rem;">10px</td>
91+
<td>
92+
${ActionButton({
93+
...args,
94+
label: "Extra Large",
95+
size: "xl"
96+
})}
97+
</td>
98+
</tr>
99+
</tbody>
100+
</table>
101+
`;
102+
};
103+
104+
export const ActionButtonExamples = ActionButtonTable.bind({});
105+
ActionButtonExamples.args = {};

‎.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
// Import the component markup template
2+
import { html } from "lit";
3+
import { Template } from "../../../components/checkbox/stories/template";
4+
5+
export default {
6+
title: "Foundations/Corner rounding",
7+
description:
8+
"Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.",
9+
component: "Checkbox",
10+
args: {
11+
rootClass: "spectrum-Checkbox",
12+
},
13+
parameters: {
14+
actions: {
15+
handles: ['click input[type="checkbox"]'],
16+
},
17+
},
18+
tags: ['foundation'],
19+
};
20+
21+
const Checkbox = ({
22+
customStyles = {},
23+
isChecked = false,
24+
...args
25+
}) => {
26+
return html`
27+
<div style="padding: 1rem 0;">
28+
${Template({
29+
...args,
30+
iconName: undefined,
31+
})}
32+
</div>
33+
`;
34+
};
35+
36+
const CheckboxTable = ({...args}) => {
37+
return html`
38+
<table class="spectrum-Foundations-Example-CornerRounding-table">
39+
<thead>
40+
<tr>
41+
<th scope="col">Token</th>
42+
<th scope="col" style="padding: 0 2rem;">Value</th>
43+
<th scope="col">Small example</th>
44+
</tr>
45+
</thead>
46+
<tbody>
47+
<tr>
48+
<td>--spectrum-corner-radius-small-size-small</td>
49+
<td style="padding: 0 2rem;">3px</td>
50+
<td>
51+
${Checkbox({
52+
...args,
53+
label: "Small",
54+
size: "s"
55+
})}
56+
</td>
57+
</tr>
58+
<tr>
59+
<td>--spectrum-corner-radius-small-size-medium</td>
60+
<td style="padding: 0 2rem;">4px</td>
61+
<td>
62+
${Checkbox({
63+
...args,
64+
label: "Medium",
65+
size: "m"
66+
})}
67+
</td>
68+
</tr>
69+
<tr>
70+
<td>--spectrum-corner-radius-small-size-large</td>
71+
<td style="padding: 0 2rem;">5px</td>
72+
<td>
73+
${Checkbox({
74+
...args,
75+
label: "Large",
76+
size: "l"
77+
})}
78+
</td>
79+
</tr>
80+
<tr>
81+
<td>--spectrum-corner-radius-small-size-extra-large</td>
82+
<td style="padding: 0 2rem;">6px</td>
83+
<td>
84+
${Checkbox({
85+
...args,
86+
label: "Extra Large",
87+
size: "xl"
88+
})}
89+
</td>
90+
</tr>
91+
</tbody>
92+
</table>
93+
`;
94+
}
95+
96+
export const CheckboxExamples = CheckboxTable.bind({});
97+
CheckboxExamples.args = {};

‎.storybook/foundations/corner-rounding/component-size-tokens-medium.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
| Component size token | Alias token (if available) | Global token | Value |
2+
|---------------------------------------------------|-------------------------------|------------------------------|-------|
3+
| --spectrum-corner-radius-medium-size-extra-small | | --spectrum-corner-radius-300 | 6px |
4+
| --spectrum-corner-radius-medium-size-small | | --spectrum-corner-radius-400 | 7px |
5+
| --spectrum-corner-radius-medium-size-medium | --spectrum-corner-radius-medium-default | --spectrum-corner-radius-500 | 8px |
6+
| --spectrum-corner-radius-medium-size-large | | --spectrum-corner-radius-600 | 9px |
7+
| --spectrum-corner-radius-medium-size-extra-large | --spectrum-corner-radius-large-default | --spectrum-corner-radius-700 | 10px |

‎.storybook/foundations/corner-rounding/component-size-tokens-small.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
| Component size token | Alias token (if available) | Global token | Value |
2+
|---------------------------------------------------|-------------------------------|------------------------------|-------|
3+
| --spectrum-corner-radius-small-size-small | | --spectrum-corner-radius-75 | 3px |
4+
| --spectrum-corner-radius-small-size-medium | --spectrum-corner-radius-small-default | --spectrum-corner-radius-100 | 4px |
5+
| --spectrum-corner-radius-small-size-large | | --spectrum-corner-radius-200 | 5px |
6+
| --spectrum-corner-radius-small-size-extra-large | | --spectrum-corner-radius-300 | 6px |

‎.storybook/foundations/corner-rounding/corner-rounding.mdx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Meta, Canvas, Story, Title, Unstyled } from '@storybook/blocks';
2+
import * as CornerRoundingStories from './corner-rounding.stories.js';
3+
import * as CheckboxStories from './checkbox-corner-rounding.stories.js';
4+
import * as ActionButtonStories from './action-button-corner-rounding.stories.js';
5+
6+
<Meta of={CornerRoundingStories} />
7+
8+
<Title />
9+
10+
## Default values
11+
12+
<Story of={CornerRoundingStories.CornerRounding} />
13+
14+
## Component examples
15+
16+
### Small tokens
17+
18+
Checkbox includes small component size tokens to scale corner rounding.
19+
20+
<Story of={CheckboxStories.CheckboxExamples} />
21+
22+
### Medium tokens
23+
24+
Action button includes medium component size tokens to scale corner rounding.
25+
26+
<Story of={ActionButtonStories.ActionButtonExamples} />

‎.storybook/foundations/corner-rounding/corner-rounding.stories.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// Import the component markup template
2+
import { html } from "lit";
3+
import { Template } from './template';
4+
5+
export default {
6+
title: "Foundations/Corner rounding",
7+
description:
8+
"Corner rounding is a foundation that shows the different border-radius tokens that can be applied to a component.",
9+
component: "Corner rounding",
10+
args: {
11+
rootClass: "spectrum-Foundations-Example-CornerRounding",
12+
},
13+
tags: ['foundation'],
14+
};
15+
16+
const CornerRadiusGroup = ({
17+
customStyles = {},
18+
...args
19+
}) => {
20+
return html`
21+
<div>
22+
<table class="spectrum-Foundations-Example-CornerRounding-table">
23+
<thead>
24+
<tr>
25+
<th scope="col">Token</th>
26+
<th scope="col" style="padding: 0 2rem;">Value</th>
27+
<th scope="col">Example<br>(No Border)</th>
28+
<th scope="col">Example<br>(Border)</th>
29+
</tr>
30+
</thead>
31+
<tbody>
32+
${Template({
33+
...args,
34+
label: '--spectrum-corner-radius-none',
35+
size: 'none',
36+
value: '0px',
37+
})}
38+
${Template({
39+
...args,
40+
label: '--spectrum-corner-radius-small-default',
41+
size: 's',
42+
value: '4px',
43+
})}
44+
${Template({
45+
...args,
46+
label: '--spectrum-corner-radius-medium-default',
47+
size: 'm',
48+
value: '8px',
49+
})}
50+
${Template({
51+
...args,
52+
label: '--spectrum-corner-radius-large-default',
53+
size: 'l',
54+
value: '10px',
55+
})}
56+
${Template({
57+
...args,
58+
label: '--spectrum-corner-radius-extra-large-default',
59+
size: 'xl',
60+
value: '16px',
61+
})}
62+
${Template({
63+
...args,
64+
label: '--spectrum-corner-radius-full',
65+
size: 'full',
66+
value: '9999px',
67+
})}
68+
</tbody>
69+
</table>
70+
</div>
71+
`;
72+
};
73+
74+
export const CornerRounding = CornerRadiusGroup.bind({});
75+
CornerRounding.args = {};

‎.storybook/foundations/corner-rounding/index.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*!
2+
Copyright 2024 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
.spectrum-Foundations-Example-CornerRounding-table {
14+
border-spacing: 1rem 0;
15+
margin-inline-start: -1rem;
16+
}
17+
18+
.spectrum-Foundations-Example-CornerRounding-table th {
19+
text-align: start;
20+
}
21+
22+
.spectrum-Foundations-Example-CornerRounding {
23+
inline-size: 3rem;
24+
block-size: 3rem;
25+
margin: 0.5rem;
26+
background-color: var(--spectrum-gray-500);
27+
}
28+
29+
.spectrum-Foundations-Example-CornerRounding--border {
30+
background-color: var(--spectrum-gray-25);
31+
border: var(--spectrum-border-width-200) solid var(--spectrum-gray-700);
32+
}
33+
34+
.spectrum-Foundations-Example-CornerRounding--none {
35+
border-radius: var(--spectrum-corner-radius-none);
36+
}
37+
38+
.spectrum-Foundations-Example-CornerRounding--sizeS {
39+
border-radius: var(--spectrum-corner-radius-small-default);
40+
}
41+
42+
.spectrum-Foundations-Example-CornerRounding--sizeM {
43+
border-radius: var(--spectrum-corner-radius-medium-default);
44+
}
45+
46+
.spectrum-Foundations-Example-CornerRounding--sizeL {
47+
border-radius: var(--spectrum-corner-radius-large-default);
48+
}
49+
50+
.spectrum-Foundations-Example-CornerRounding--sizeXL {
51+
border-radius: var(--spectrum-corner-radius-extra-large-default);
52+
}
53+
54+
.spectrum-Foundations-Example-CornerRounding--full {
55+
border-radius: var(--spectrum-corner-radius-full);
56+
}

0 commit comments

Comments
 (0)