feat(cornerrounding): add custom token and foundations documentation by jenndiaz · Pull Request #2559 · adobe/spectrum-css

jenndiaz · 2024-02-26T15:31:39Z

Description

S2 migration work for corner rounding tokens. Includes:

Foundations page for documenting corner rounding as a concept for consumers (according to direction from this Slack thread https://adobedesign.slack.com/archives/G019JTYMT6H/p1708721169366349)
Checkbox, action button component changes to partially migrate to only include new corner rounding
Close button update to use the new custom token from feat(tokens): use spectrum-tokens 13.0.0-beta.21 #2597

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

The new and updated corner rounding tokens from the design spec are set to the appropriate values
In Storybook, Corner Rounding has a Foundations docs page with a doc that explains the tokens in a way that makes sense
Checkbox component includes new corner rounding tokens
Action button includes new corner rounding tokens
Close button uses the new custom token --spectrum-corner-radius-1000 for border-radius (
Jenn's code pen that shows why this is needed for posterity)
Design team has reviewed the docs page @mdt2 (approved by Matt Knorr in Slack)

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
If my change impacts documentation, I have updated the documentation accordingly.
Dependencies have a tokens version set that includes the custom-vars additions
✨ This pull request is ready to merge. ✨

github-actions · 2024-02-26T15:35:23Z

🚀 Deployed on https://pr-2559--spectrum-css.netlify.app

github-actions · 2024-02-26T15:35:30Z

File metrics

Summary

Total size: 4.48 MB^*
Total change (Δ): ⬇ 24.76 KB (-0.54%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
actionbutton	41.24 KB	⬆ 0.28 KB
actiongroup	5.73 KB	⬇ 2.79 KB
button	83.15 KB	⬆ 0.09 KB
buttongroup	1.38 KB	⬇ 0.53 KB
checkbox	25.10 KB	⬆ 0.17 KB
closebutton	11.79 KB	⬇ 4.35 KB
dial	11.56 KB	⬇ < 0.01 KB
fieldlabel	6.42 KB	⬇ 0.24 KB
logicbutton	9.00 KB	⬇ 0.38 KB
modal	5.23 KB	⬇ < 0.01 KB
page	0.72 KB	⬇ < 0.01 KB
picker	30.67 KB	⬇ 0.20 KB
slider	33.18 KB	⬇ 0.01 KB
splitview	11.42 KB	⬇ < 0.01 KB
table	47.17 KB	⬇ < 0.01 KB
tokens	201.36 KB	⬆ 1.63 KB

Details

actionbutton

File	Head	Base	Δ
index-base.css	30.17 KB	29.90 KB	⬆ 0.28 KB (0.90%)
index-theme.css	11.65 KB	11.65 KB	-
index-vars.css	41.24 KB	40.97 KB	⬆ 0.28 KB (0.66%)
index.css	41.24 KB	40.97 KB	⬆ 0.28 KB (0.66%)
metadata.json	17.55 KB	17.43 KB	⬆ 0.13 KB (0.71%)
themes/express.css	8.92 KB	8.92 KB	-
themes/spectrum.css	9.11 KB	9.11 KB	-

actiongroup

File	Head	Base	Δ
index-base.css	5.73 KB	8.04 KB	⬇ 2.31 KB (-28.75%)
index-theme.css	0.59 KB	1.06 KB	⬇ 0.49 KB (-45.10%)
index-vars.css	5.73 KB	8.52 KB	⬇ 2.79 KB (-32.74%)
index.css	5.73 KB	8.52 KB	⬇ 2.79 KB (-32.74%)
metadata.json	2.61 KB	3.41 KB	⬇ 0.82 KB (-23.54%)
themes/express.css	0.59 KB	0.89 KB	⬇ 0.29 KB (-33.11%)
themes/spectrum.css	0.59 KB	0.79 KB	⬇ 0.19 KB (-24.62%)

button

File	Head	Base	Δ
index-base.css	53.20 KB	53.11 KB	⬆ 0.09 KB (0.16%)
index-theme.css	30.53 KB	30.53 KB	-
index-vars.css	83.15 KB	83.06 KB	⬆ 0.09 KB (0.10%)
index.css	83.15 KB	83.06 KB	⬆ 0.09 KB (0.10%)
metadata.json	33.77 KB	33.56 KB	⬆ 0.22 KB (0.65%)
themes/express.css	29.33 KB	29.33 KB	-
themes/spectrum.css	29.40 KB	29.40 KB	-

buttongroup

File	Head	Base	Δ
index-base.css	1.38 KB	1.90 KB	⬇ 0.53 KB (-27.32%)
index-vars.css	1.38 KB	1.90 KB	⬇ 0.53 KB (-27.32%)
index.css	1.38 KB	1.90 KB	⬇ 0.53 KB (-27.32%)
metadata.json	0.53 KB	0.64 KB	⬇ 0.11 KB (-16.98%)

checkbox

File	Head	Base	Δ
index-base.css	24.48 KB	24.32 KB	⬆ 0.17 KB (0.67%)
index-theme.css	1.20 KB	1.20 KB	-
index-vars.css	25.10 KB	24.94 KB	⬆ 0.17 KB (0.65%)
index.css	25.10 KB	24.94 KB	⬆ 0.17 KB (0.65%)
metadata.json	13.50 KB	13.16 KB	⬆ 0.36 KB (2.66%)
themes/express.css	0.92 KB	0.92 KB	-
themes/spectrum.css	0.91 KB	0.91 KB	-

closebutton

File	Head	Base	Δ
index-base.css	11.46 KB	15.50 KB	⬇ 4.03 KB (-26.01%)
index-theme.css	0.93 KB	1.22 KB	⬇ 0.33 KB (-26.00%)
index-vars.css	11.79 KB	16.14 KB	⬇ 4.35 KB (-26.95%)
index.css	11.79 KB	16.14 KB	⬇ 4.35 KB (-26.95%)
metadata.json	4.99 KB	8.09 KB	⬇ 3.10 KB (-38.32%)
themes/express.css	0.93 KB	0.93 KB	-
themes/spectrum.css	0.92 KB	0.92 KB	-

dial

File	Head	Base	Δ
index-base.css	11.56 KB	11.56 KB	⬇ < 0.01 KB (-0.01%)
index-vars.css	11.56 KB	11.56 KB	⬇ < 0.01 KB (-0.01%)
index.css	11.56 KB	11.56 KB	⬇ < 0.01 KB (-0.01%)
metadata.json	4.85 KB	4.85 KB	⬇ < 0.01 KB (-0.02%)

fieldlabel

File	Head	Base	Δ
index-base.css	6.42 KB	6.65 KB	⬇ 0.24 KB (-3.48%)
index-vars.css	6.42 KB	6.65 KB	⬇ 0.24 KB (-3.48%)
index.css	6.42 KB	6.65 KB	⬇ 0.24 KB (-3.48%)
metadata.json	3.59 KB	3.41 KB	⬆ 0.18 KB (5.27%)

logicbutton

File	Head	Base	Δ
index-base.css	9.00 KB	9.37 KB	⬇ 0.38 KB (-3.91%)
index-vars.css	9.00 KB	9.37 KB	⬇ 0.38 KB (-3.91%)
index.css	9.00 KB	9.37 KB	⬇ 0.38 KB (-3.91%)
metadata.json	4.10 KB	4.23 KB	⬇ 0.13 KB (-3.09%)

modal

File	Head	Base	Δ
index-base.css	5.23 KB	5.23 KB	⬇ < 0.01 KB (-0.02%)
index-vars.css	5.23 KB	5.23 KB	⬇ < 0.01 KB (-0.02%)
index.css	5.23 KB	5.23 KB	⬇ < 0.01 KB (-0.02%)
metadata.json	1.82 KB	1.82 KB	⬇ < 0.01 KB (-0.05%)

page

File	Head	Base	Δ
index-base.css	0.72 KB	0.72 KB	⬇ < 0.01 KB (-0.14%)
index-vars.css	0.72 KB	0.72 KB	⬇ < 0.01 KB (-0.14%)
index.css	0.72 KB	0.72 KB	⬇ < 0.01 KB (-0.14%)
metadata.json	0.15 KB	0.15 KB	⬇ < 0.01 KB (-0.68%)

picker

File	Head	Base	Δ
index-base.css	28.78 KB	28.98 KB	⬇ 0.20 KB (-0.68%)
index-theme.css	2.46 KB	2.46 KB	-
index-vars.css	30.67 KB	30.87 KB	⬇ 0.20 KB (-0.64%)
index.css	30.67 KB	30.87 KB	⬇ 0.20 KB (-0.64%)
metadata.json	14.55 KB	14.65 KB	⬇ 0.10 KB (-0.67%)
themes/express.css	1.47 KB	1.47 KB	-
themes/spectrum.css	1.57 KB	1.57 KB	-

slider

File	Head	Base	Δ
index-base.css	30.87 KB	30.87 KB	⬇ < 0.01 KB (-0.01%)
index-theme.css	2.89 KB	2.89 KB	⬇ < 0.01 KB (-0.10%)
index-vars.css	33.18 KB	33.18 KB	⬇ 0.01 KB (-0.01%)
index.css	33.18 KB	33.18 KB	⬇ 0.01 KB (-0.01%)
metadata.json	13.70 KB	13.70 KB	⬇ < 0.01 KB (-0.01%)
themes/express.css	1.75 KB	1.75 KB	-
themes/spectrum.css	1.72 KB	1.72 KB	⬇ < 0.01 KB (-0.17%)

splitview

File	Head	Base	Δ
index-base.css	11.42 KB	11.42 KB	⬇ < 0.01 KB (-0.01%)
index-vars.css	11.42 KB	11.42 KB	⬇ < 0.01 KB (-0.01%)
index.css	11.42 KB	11.42 KB	⬇ < 0.01 KB (-0.01%)
metadata.json	4.58 KB	4.59 KB	⬇ < 0.01 KB (-0.02%)

table

File	Head	Base	Δ
index-base.css	47.17 KB	47.17 KB	⬇ < 0.01 KB (-0.00%)
index-vars.css	47.17 KB	47.17 KB	⬇ < 0.01 KB (-0.00%)
index.css	47.17 KB	47.17 KB	⬇ < 0.01 KB (-0.00%)
metadata.json	21.85 KB	21.85 KB	⬇ < 0.01 KB (-0.00%)

tokens

File	Head	Base	Δ
css/dark-vars.css	36.07 KB	24.57 KB	⬆ 11.50 KB (46.80%)
css/express/custom-dark-vars.css	0.59 KB	0.59 KB	-
css/express/custom-darkest-vars.css	0.59 KB	0.59 KB	-
css/express/custom-large-vars.css	0.50 KB	0.50 KB	-
css/express/custom-light-vars.css	0.63 KB	0.63 KB	-
css/express/custom-medium-vars.css	0.48 KB	0.48 KB	-
css/express/custom-vars.css	0.04 KB	0.04 KB	-
css/global-vars.css	49.64 KB	38.23 KB	⬆ 11.41 KB (29.85%)
css/large-vars.css	27.44 KB	24.40 KB	⬆ 3.04 KB (12.45%)
css/light-vars.css	36.07 KB	24.55 KB	⬆ 11.52 KB (46.91%)
css/medium-vars.css	27.36 KB	24.33 KB	⬆ 3.03 KB (12.46%)
css/spectrum/custom-dark-vars.css	3.40 KB	3.40 KB	-
css/spectrum/custom-darkest-vars.css	3.40 KB	3.40 KB	-
css/spectrum/custom-large-vars.css	4.94 KB	4.94 KB	-
css/spectrum/custom-light-vars.css	3.40 KB	3.40 KB	-
css/spectrum/custom-medium-vars.css	5.18 KB	5.18 KB	-
css/spectrum/custom-vars.css	2.18 KB	2.04 KB	⬆ 0.15 KB (7.00%)
index.css	201.36 KB	199.73 KB	⬆ 1.63 KB (0.82%)
css/darkest-vars.css	-	24.53 KB	🚨 deleted, moved, or renamed
css/express/global-vars.css	-	2.39 KB	🚨 deleted, moved, or renamed
css/express/large-vars.css	-	2.52 KB	🚨 deleted, moved, or renamed
css/express/medium-vars.css	-	2.51 KB	🚨 deleted, moved, or renamed
css/spectrum/global-vars.css	-	2.74 KB	🚨 deleted, moved, or renamed
css/spectrum/large-vars.css	-	2.32 KB	🚨 deleted, moved, or renamed
css/spectrum/medium-vars.css	-	2.32 KB	🚨 deleted, moved, or renamed

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

jawinn

Nice work on creating the MDX page to demo the different rounding. This looks just like what we were trying to achieve.

One small thing, could we put some more padding so that 16px is not so close to the token name? It might also be worth adding a table header to describe the columns too.

mdt2

Thanks for your work on this Rise!! A couple comments for you born from my getting a little caught on documentation semantics 😅

jawinn · 2024-03-15T14:47:42Z

I just noticed that when I scrolled to the bottom of the Storybook sidebar, there is another section appearing for corner rounding. Is there a way to hide these?

…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>

jenndiaz changed the base branch from main to spectrum-two February 26, 2024 15:36

pfulton force-pushed the spectrum-two branch from 98335ab to fec70b3 Compare February 26, 2024 19:47

castastrophe added the S2 Spectrum 2 label Feb 28, 2024

mdt2 force-pushed the corner-rounding branch from b8a8dc8 to b6e5b75 Compare February 28, 2024 19:28

jawinn mentioned this pull request Feb 28, 2024

feat(closebutton)!: migrate to S2 #2564

Merged

13 tasks

mdt2 mentioned this pull request Feb 29, 2024

feat(downstate): docs + implementation for example components #2520

Merged

10 tasks

rise-erpelding force-pushed the corner-rounding branch from 52952c2 to a27896c Compare March 9, 2024 00:12

rise-erpelding reviewed Mar 9, 2024

View reviewed changes

Comment thread .storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js

rise-erpelding reviewed Mar 9, 2024

View reviewed changes

Comment thread .storybook/foundations/corner-rounding/corner-rounding.mdx Outdated

rise-erpelding reviewed Mar 9, 2024

View reviewed changes

Comment thread tokens/custom-spectrum/custom-vars.css Outdated

pfulton force-pushed the spectrum-two branch from b0ac179 to 13041bf Compare March 11, 2024 17:20

jawinn suggested changes Mar 11, 2024

View reviewed changes

rise-erpelding force-pushed the corner-rounding branch 4 times, most recently from e84e0bd to 244543e Compare March 14, 2024 19:15

rise-erpelding reviewed Mar 14, 2024

View reviewed changes

Comment thread .storybook/foundations/corner-rounding/component-size-tokens-medium.mdx Outdated

rise-erpelding reviewed Mar 14, 2024

View reviewed changes

Comment thread .storybook/foundations/corner-rounding/corner-rounding.mdx Outdated

rise-erpelding reviewed Mar 14, 2024

View reviewed changes

Comment thread .storybook/foundations/corner-rounding/corner-rounding.stories.js

rise-erpelding reviewed Mar 14, 2024

View reviewed changes

Comment thread .storybook/manager.js

rise-erpelding marked this pull request as ready for review March 14, 2024 20:19

rise-erpelding added the ready-for-review label Mar 14, 2024

rise-erpelding requested review from jawinn and mdt2 March 14, 2024 20:35

mdt2 reviewed Mar 14, 2024

View reviewed changes

Comment thread .storybook/foundations/corner-rounding/corner-rounding.mdx Outdated

Comment thread .storybook/foundations/corner-rounding/corner-rounding.mdx Outdated

jawinn reviewed Mar 15, 2024

View reviewed changes

Comment thread .storybook/foundations/corner-rounding/corner-rounding.stories.js Outdated

rise-erpelding reviewed Mar 15, 2024

View reviewed changes

Comment thread components/closebutton/index.css Outdated

castastrophe mentioned this pull request Apr 15, 2025

feat(tokens,card): update to @adobe/spectrum-tokens@13.3.0 #3669

Merged

12 tasks

This was referenced May 16, 2025

chore(swatch,menu,swatchgroup): fix reverted metadata assets #3752

Merged

chore: merge latest updates from main #3777

Merged

castastrophe mentioned this pull request Jul 25, 2025

ci: chromatic runs for S2 [CSS-1233] #4070

Merged

3 tasks

castastrophe mentioned this pull request Aug 6, 2025

fix: minor linting updates #4113

Merged

11 tasks

This was referenced Aug 27, 2025

chore(popover): wrapper placement in story #4173

Closed

feat(storybook): chromatic a11y testing #4180

Closed

chore: updating lint-staged file inheritance order #4193

Closed

castastrophe mentioned this pull request Oct 22, 2025

feat(badge): remove modifiers from the API [SWC-1264] #4283

Merged

14 tasks

Conversation

jenndiaz commented Feb 26, 2024 • edited by mdt2 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Validation steps

To-do list

Uh oh!

github-actions Bot commented Feb 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Feb 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

actionbutton

actiongroup

button

buttongroup

checkbox

closebutton

dial

fieldlabel

logicbutton

modal

page

picker

slider

splitview

table

tokens

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jawinn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mdt2 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jawinn commented Mar 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

jenndiaz commented Feb 26, 2024 •

edited by mdt2

Loading

github-actions Bot commented Feb 26, 2024 •

edited

Loading

github-actions Bot commented Feb 26, 2024 •

edited

Loading

jawinn commented Mar 15, 2024 •

edited

Loading