-
Notifications
You must be signed in to change notification settings - Fork 195
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(storybook): update chromatic add-on to latest version
BREAKING CHANGE: New chromatic configuration required for updated version support.
- Loading branch information
1 parent
b679cb3
commit 7a869a3
Showing
17 changed files
with
269 additions
and
890 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| --- | ||
| "@spectrum-css/preview": major | ||
| --- | ||
|
|
||
| Update the Chromatic add-on to the currently maintained package: | ||
|
|
||
| - from "@chromaui/addon-visual-tests": "^1.0.0" | ||
| - to "@chromatic-com/storybook": "^3.2.3" | ||
|
|
||
| This requires an update to the chromatic.config.json settings, removal of the generic argTypesRegex from the preview config, and a stricter import in the doc blocks. | ||
|
|
||
| To support a successful build, our test command must maintain the autodocs and mdx syntax. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { styled } from "@storybook/theming"; | ||
|
|
||
| export const Container = styled.section` | ||
| color: var(--spectrum-neutral-content-color-default); | ||
| background-color: var(--spectrum-background-layer-1-color); | ||
| display: ${props => props.display ?? "flex" }; | ||
| padding-inline: 48px 24px; | ||
| padding-block: 60px; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: 60px; | ||
| border-radius: 16px; | ||
| `; | ||
|
|
||
| export const List = styled.div` | ||
| display: grid; | ||
| gap: 24px; | ||
| grid-template-columns: 1fr auto; | ||
| grid-template-rows: auto; | ||
| align-items: center; | ||
| justify-content: center; | ||
| `; | ||
|
|
||
| export const DList = styled.dl` | ||
| display: grid; | ||
| grid-template-columns: max-content 1fr; | ||
| column-gap: 20px; | ||
| row-gap: 14px; | ||
| padding-block: 0.75rem; | ||
| margin-block: 0.5rem 2.5rem; | ||
| border-block: ${props => !props.skipBorder ? "1px solid hsla(203deg, 50%, 30%, 15%)" : "0"}; | ||
| & & { | ||
| border-block: 0px; | ||
| margin-block: 0; | ||
| padding-inline-start: 0.75rem; | ||
| padding-block-start: 0.25rem; | ||
| } | ||
| details > & { | ||
| margin-inline-start: 12px; | ||
| } | ||
| `; | ||
|
|
||
| export const DTerm = styled.dt` | ||
| font-weight: ${props => props.theme.typography.weight.bold ?? "bold"}; | ||
| padding: 0; | ||
| margin: 0; | ||
| font-size: ${props => props.theme.typography.size.s}; | ||
| `; | ||
|
|
||
| export const DDefinition = styled.dd` | ||
| font-style: normal; | ||
| padding: 0; | ||
| margin: 0; | ||
| font-size: ${props => props.theme.typography.size.s}; | ||
| `; | ||
|
|
||
| export const Details = styled.details` | ||
| cursor: pointer; | ||
| grid-column: 1 / 3; | ||
| padding: 0; | ||
| &[open] > summary::before { | ||
| transform: rotate(90deg); | ||
| } | ||
| `; | ||
|
|
||
| export const Summary = styled.summary` | ||
| display: inline-flex; | ||
| align-items: center; | ||
| font-weight: ${props => props.theme.typography.weight.bold ?? "bold"}; | ||
| padding: 0; | ||
| padding-block-end: 0.75rem; | ||
| margin: 0; | ||
| font-size: ${props => props.theme.typography.size.s}; | ||
| list-style: none; | ||
| &::-webkit-details-marker { | ||
| display: none; | ||
| } | ||
| &::before { | ||
| content: ''; | ||
| width: 10px; | ||
| height: 10px; | ||
| background-image: url('data:image/svg+xml,<svg focusable="false" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3 9.95a.875.875 0 0 1-.615-1.498L5.88 5 2.385 1.547A.875.875 0 0 1 3.615.302L7.74 4.377a.876.876 0 0 1 0 1.246L3.615 9.698A.87.87 0 0 1 3 9.95"></path></svg>'); | ||
| background-size: cover; | ||
| margin-inline-end: .75em; | ||
| transition: 0.2s; | ||
| } | ||
| `; | ||
|
|
||
| export const Table = styled.table` | ||
| --mod-table-cursor-row-default: auto; | ||
| padding-block: 10px; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import { styled } from "@storybook/theming"; | ||
|
|
||
| export const SwatchGroupLabel = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin-top: 16px; | ||
| align-self: flex-start; | ||
| justify-content: center; | ||
| text-wrap: nowrap; | ||
| inline-size: max-content; | ||
| block-size: ${props => props.size ?? 32}px; | ||
| color: ${props => `var(--spectrum-neutral-subdued-content-color-default, ${props.theme.defaultText})`}; | ||
| `; | ||
|
|
||
| export const SwatchSet = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: 2px; | ||
| color: ${props => `var(--spectrum-neutral-subdued-content-color-default, ${props.theme.defaultText})`}; | ||
| `; | ||
|
|
||
| export const Swatch = styled.div` | ||
| position: relative; | ||
| inline-size: var(--swatch-size, ${props => props.size ?? 32}px); | ||
| block-size: var(--swatch-size, ${props => props.size ?? 32}px); | ||
| outline: none; | ||
| user-select: none; | ||
| &::before { | ||
| position: absolute; | ||
| inset: 0; | ||
| inline-size: 100%; | ||
| block-size: 100%; | ||
| content: ""; | ||
| opacity: 1; | ||
| border: 1px solid rgba(0, 0, 0, 51%); | ||
| border-radius: ${props => `${props.theme.appBorderRadius}px` ?? `var(--spectrum-corner-radius-100, 4px)`}; | ||
| ${props => props.background && `background: ${props.background};`} | ||
| } | ||
| .spectrum--dark &::before, | ||
| .spectrum--darkest &::before { | ||
| border-color: rgba(255, 255, 255, 51%); | ||
| } | ||
| `; | ||
|
|
||
| export const SwatchColors = styled.div` | ||
| display: inline-flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| gap: ${props => props.size > 0 ? (props.size * 0.2) : 8}px; | ||
| align-items: flex-start; | ||
| justify-content: flex-start; | ||
| `; | ||
|
|
||
| export const SwatchGroup = styled.div` | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex: 1; | ||
| `; |
Oops, something went wrong.