Skip to content

Commit 4074c4e

Browse files
castastrophecastastrophe
committed
build: add story exports; remove context from storybook
1 parent 2080a35 commit 4074c4e

File tree

35 files changed

+254
-170
lines changed

35 files changed

+254
-170
lines changed

‎.github/QUICK-START.md

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
This guide will show you how to quickly install Spectrum CSS and use it to display the Button component.
44

55
## Install using Node/yarn
6+
67
Install the components you want along with their dependencies. Here's an example:
78

89
```shell
@@ -12,45 +13,61 @@ yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @s
1213
Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `<html>` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme:
1314

1415
```html
15-
<html class="spectrum spectrum--medium spectrum--light">
16+
<html class="spectrum spectrum--medium spectrum--light"></html>
1617
```
1718

1819
Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag:
1920

2021
```html
2122
<head>
22-
<!-- Include global tokens depedency first -->
23-
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
23+
<!-- Include global tokens depedency first -->
24+
<link
25+
rel="stylesheet"
26+
href="node_modules/@spectrum-css/tokens/dist/index.css"
27+
/>
2428

25-
<!-- Include index.css for the components you're using -->
26-
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index.css"/>
29+
<!-- Include index.css for the components you're using -->
30+
<link
31+
rel="stylesheet"
32+
href="node_modules/@spectrum-css/button/dist/index.css"
33+
/>
2734
</head>
2835
```
2936

3037
Inside the `<body>` tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names `spectrum-Button--fill` and `spectrum-Button--accent`, to use the accent variant:
3138

3239
```html
33-
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
34-
<span class="spectrum-Button-label">Button</span>
40+
<button
41+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
42+
>
43+
<span class="spectrum-Button-label">Button</span>
3544
</button>
3645
```
3746

3847
To put it all together, your final html file will look like this:
3948

4049
```html
4150
<html class="spectrum spectrum--light spectrum--medium">
42-
<head>
43-
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
44-
<link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
45-
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
46-
</head>
47-
<body>
48-
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
49-
<span class="spectrum-Button-label">Button</span>
50-
</button>
51-
</body>
51+
<head>
52+
<link
53+
rel="stylesheet"
54+
href="node_modules/@spectrum-css/tokens/dist/index.css"
55+
/>
56+
<link
57+
rel="stylesheet"
58+
href="node_modules/@spectrum-css/button/dist/index.css"
59+
/>
60+
</head>
61+
<body>
62+
<button
63+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
64+
>
65+
<span class="spectrum-Button-label">Button</span>
66+
</button>
67+
</body>
5268
</html>
5369
```
5470

5571
## Include files from a CDN
72+
5673
Another way to include Spectrum CSS components in your project is to use a CDN to link to the components you want, plus their dependencies, in the `<head>` tag of your HTML. If you choose to use a CDN, please note that Spectrum CSS doesn't manage a CDN, cannot confirm the availability or up-time of external CDNs, and doesn't recommend using a CDN for Spectrum CSS in a production environment.

‎.github/actions/file-diff/README.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,8 @@ Total size of all files for this branch in bytes.
4444
name: Compare compiled output file size
4545
uses: "spectrum-tools/gh-action-file-diff"
4646
with:
47-
head-path: ${{ github.workspace }}/pull-request
48-
base-path: ${{ github.workspace }}/base-branch
49-
file-glob-pattern: |
50-
components/*/dist/*.{css,json}
51-
components/*/dist/themes/*.css
47+
head-path: ${{ github.workspace }}/pull-request
48+
base-path: ${{ github.workspace }}/base-branch
49+
file-glob-pattern: |
50+
components/*/dist/*.{css,json}
5251
```

‎.storybook/decorators/context.js

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export const withContextWrapper = makeDecorator({
1818
} = {},
1919
globals: {
2020
color = "light",
21-
context = "spectrum",
2221
scale = "medium",
2322
} = {},
2423
parameters: {
@@ -39,24 +38,18 @@ export const withContextWrapper = makeDecorator({
3938
},
4039
};
4140

42-
const original = {
43-
color,
44-
context,
45-
scale,
46-
};
41+
const original = { color, scale };
4742

4843
useEffect(() => {
4944
const isDocs = viewMode === "docs";
5045
const isTesting = showTestingGrid;
5146
const isRaw = Boolean(context === "raw");
5247

53-
if (!isRaw) {
54-
// add the default classes to the body to ensure labels, headings, and borders are styled correctly
55-
document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium");
56-
}
57-
5848
// Start by attaching the appropriate tokens to the container
59-
toggleStyles(document.body, "tokens", tokens, !isRaw);
49+
toggleStyles(document.body, "tokens", tokens, true);
50+
51+
// add the default classes to the body to ensure labels, headings, and borders are styled correctly
52+
document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium");
6053

6154
for (const container of fetchContainers(id, isDocs, isTesting)) {
6255
// Check if the container is a testing wrapper to prevent applying colors around the testing grid
@@ -66,7 +59,6 @@ export const withContextWrapper = makeDecorator({
6659

6760
// Reset the context to the original values
6861
color = original.color;
69-
context = original.context;
7062
scale = original.scale;
7163

7264
let staticKey = staticColor;
@@ -81,7 +73,7 @@ export const withContextWrapper = makeDecorator({
8173
if (!staticKey) hasStaticElement = false;
8274

8375
// Every container gets the spectrum class
84-
container.classList.toggle("spectrum", !isRaw);
76+
container.classList.toggle("spectrum", true);
8577

8678
// Let the static color override the color if it's set
8779
if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) {
@@ -95,11 +87,11 @@ export const withContextWrapper = makeDecorator({
9587
}
9688

9789
for (let c of ["light", "dark"]) {
98-
container.classList.toggle(`spectrum--${c}`, c === color && !isRaw);
90+
container.classList.toggle(`spectrum--${c}`, c === color);
9991
}
10092

10193
for (const s of ["medium", "large"]) {
102-
container.classList.toggle(`spectrum--${s}`, s === scale && !isRaw);
94+
container.classList.toggle(`spectrum--${s}`, s === scale);
10395
}
10496

10597
if (!isTestingWrapper) {

‎.storybook/manager.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11

22
import { addons } from "@storybook/manager-api";
33
import { create } from "@storybook/theming";
4+
import { startCase } from "lodash";
45

56

67
import logo from "./assets/logo.svg";
@@ -66,5 +67,6 @@ addons.setConfig({
6667
}),
6768
sidebar: {
6869
showRoots: false,
70+
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚",
6971
},
7072
});

‎.storybook/types/global.js

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,6 @@
44

55
/** @type import('@storybook/types').GlobalTypes */
66
export default {
7-
context: {
8-
title: "Design context",
9-
description: "The variation of Spectrum to use in the component",
10-
defaultValue: "spectrum",
11-
type: "string",
12-
showName: true,
13-
toolbar: {
14-
items: [
15-
{ value: "spectrum", title: "Spectrum 2", right: "default" },
16-
{ value: "raw", title: "Token-free", right: "raw" },
17-
],
18-
dynamicTitle: true,
19-
},
20-
},
217
color: {
228
title: "Color",
239
description: "Controls the color context of the component",

‎components/actionbutton/index.css

Lines changed: 56 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,46 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14+
@media (forced-colors: active) {
15+
.spectrum-ActionButton {
16+
/* force a more visible focus indicator color */
17+
--highcontrast-actionbutton-focus-indicator-color: ButtonText;
18+
19+
&::after {
20+
/* make sure focus indicator renders */
21+
forced-color-adjust: none;
22+
}
23+
24+
&.is-selected {
25+
--highcontrast-actionbutton-background-color-default: Highlight;
26+
--highcontrast-actionbutton-background-color-hover: Highlight;
27+
--highcontrast-actionbutton-background-color-focus: Highlight;
28+
--highcontrast-actionbutton-background-color-down: Highlight;
29+
--highcontrast-actionbutton-background-color-disabled: ButtonFace;
30+
31+
--highcontrast-actionbutton-border-color-default: HighlightText;
32+
--highcontrast-actionbutton-border-color-hover: HighlightText;
33+
--highcontrast-actionbutton-border-color-focus: HighlightText;
34+
--highcontrast-actionbutton-border-color-down: HighlightText;
35+
--highcontrast-actionbutton-border-color-disabled: GrayText;
36+
37+
--highcontrast-actionbutton-content-color-default: HighlightText;
38+
--highcontrast-actionbutton-content-color-hover: HighlightText;
39+
--highcontrast-actionbutton-content-color-focus: HighlightText;
40+
--highcontrast-actionbutton-content-color-down: HighlightText;
41+
--highcontrast-actionbutton-content-color-disabled: GrayText;
42+
43+
.spectrum-ActionButton-icon,
44+
.spectrum-ActionButton-hold,
45+
.spectrum-ActionButton-label {
46+
/* ensure custom text colors from above get applied */
47+
/* it seems like this shouldn't have to be done, but colors are wrong without it */
48+
forced-color-adjust: none;
49+
}
50+
}
51+
}
52+
}
53+
1454
.spectrum-ActionButton {
1555
--spectrum-actionbutton-background-color-default: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-gray-50)));
1656
--spectrum-actionbutton-background-color-hover: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-gray-100)));
@@ -63,22 +103,17 @@
63103
}
64104

65105
&.spectrum-ActionButton--quiet {
66-
--mod-actionbutton-border-color-default: transparent;
67-
68106
--mod-actionbutton-background-color-default: transparent;
69107
--mod-actionbutton-background-color-hover: var(--spectrum-gray-100);
70108
--mod-actionbutton-background-color-down: var(--spectrum-gray-200);
71109
--mod-actionbutton-background-color-focus: var(--spectrum-gray-100);
72-
73-
&:disabled:not(.is-selected),
74-
&.is-disabled:not(.is-selected) {
75-
--mod-actionbutton-border-color-disabled: transparent;
76-
--mod-actionbutton-background-color-disabled: transparent;
77-
}
78110
}
79111

80112
&.spectrum-ActionButton--staticBlack {
81-
--mod-actionbutton-background-color-default: transparent;
113+
--mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500);
114+
--mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600);
115+
--mod-actionbutton-border-color-down: var(--spectrum-transparent-black-700);
116+
--mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
82117

83118
--mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500);
84119
--mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600);
@@ -97,12 +132,18 @@
97132
}
98133

99134
&.spectrum-ActionButton--quiet {
100-
--mod-actionbutton-border-color-default: transparent;
135+
--mod-actionbutton-background-color-default: transparent;
136+
--mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-400);
137+
--mod-actionbutton-background-color-down: var(--spectrum-transparent-black-500);
138+
--mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-400);
101139
}
102140
}
103141

104142
&.spectrum-ActionButton--staticWhite {
105-
--mod-actionbutton-background-color-default: transparent;
143+
--mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500);
144+
--mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600);
145+
--mod-actionbutton-border-color-down: var(--spectrum-transparent-white-700);
146+
--mod-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
106147

107148
--mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500);
108149
--mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600);
@@ -121,7 +162,10 @@
121162
}
122163

123164
&.spectrum-ActionButton--quiet {
124-
--mod-actionbutton-border-color-default: transparent;
165+
--mod-actionbutton-background-color-default: transparent;
166+
--mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-400);
167+
--mod-actionbutton-background-color-down: var(--spectrum-transparent-white-500);
168+
--mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-400);
125169
}
126170
}
127171

@@ -269,8 +313,6 @@
269313
/* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
270314
-webkit-appearance: button;
271315

272-
border-style: solid;
273-
274316
transition:
275317
background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
276318
border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out,
@@ -422,40 +464,3 @@ a.spectrum-ActionButton {
422464
/* Augment the margin correction for the icon only scenario */
423465
margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
424466
}
425-
426-
@media (forced-colors: active) {
427-
.spectrum-ActionButton {
428-
&::after {
429-
/* make sure focus indicator renders */
430-
forced-color-adjust: none;
431-
}
432-
433-
&.is-selected {
434-
--highcontrast-actionbutton-background-color-default: Highlight;
435-
--highcontrast-actionbutton-background-color-hover: Highlight;
436-
--highcontrast-actionbutton-background-color-focus: Highlight;
437-
--highcontrast-actionbutton-background-color-down: Highlight;
438-
--highcontrast-actionbutton-background-color-disabled: ButtonFace;
439-
440-
--highcontrast-actionbutton-border-color-default: HighlightText;
441-
--highcontrast-actionbutton-border-color-hover: HighlightText;
442-
--highcontrast-actionbutton-border-color-focus: HighlightText;
443-
--highcontrast-actionbutton-border-color-down: HighlightText;
444-
--highcontrast-actionbutton-border-color-disabled: GrayText;
445-
446-
--highcontrast-actionbutton-content-color-default: HighlightText;
447-
--highcontrast-actionbutton-content-color-hover: HighlightText;
448-
--highcontrast-actionbutton-content-color-focus: HighlightText;
449-
--highcontrast-actionbutton-content-color-down: HighlightText;
450-
--highcontrast-actionbutton-content-color-disabled: GrayText;
451-
452-
.spectrum-ActionButton-icon,
453-
.spectrum-ActionButton-hold,
454-
.spectrum-ActionButton-label {
455-
/* ensure custom text colors from above get applied */
456-
/* it seems like this shouldn't have to be done, but colors are wrong without it */
457-
forced-color-adjust: none;
458-
}
459-
}
460-
}
461-
}

0 commit comments

Comments
 (0)