Skip to content

Commit 9444cdb

Browse files
castastrophecastastrophe
committed
build: add story exports; remove context from storybook
1 parent 828fec1 commit 9444cdb

File tree

120 files changed

+368
-390
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+368
-390
lines changed

‎.github/QUICK-START.md

Lines changed: 25 additions & 8 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,25 +13,33 @@ 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>
2223
<!-- Include global tokens depedency first -->
23-
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
24+
<link
25+
rel="stylesheet"
26+
href="node_modules/@spectrum-css/tokens/dist/index.css"
27+
/>
2428

2529
<!-- Include index.css for the components you're using -->
26-
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index.css"/>
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">
40+
<button
41+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
42+
>
3443
<span class="spectrum-Button-label">Button</span>
3544
</button>
3645
```
@@ -40,17 +49,25 @@ To put it all together, your final html file will look like this:
4049
```html
4150
<html class="spectrum spectrum--light spectrum--medium">
4251
<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">
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+
/>
4660
</head>
4761
<body>
48-
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
62+
<button
63+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
64+
>
4965
<span class="spectrum-Button-label">Button</span>
5066
</button>
5167
</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 & 20 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
testingPreview = false,
2423
} = {},
@@ -37,32 +36,21 @@ export const withContextWrapper = makeDecorator({
3736
},
3837
};
3938

40-
const original = {
41-
color,
42-
context,
43-
scale,
44-
};
39+
const original = { color, scale };
4540

4641
useEffect(() => {
4742
const isTesting = testingPreview;
4843
const isDocs = viewMode === "docs";
49-
const isRaw = Boolean(context === "raw");
5044

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

59-
// Start by attaching the appropriate tokens to the container
60-
toggleStyles(document.body, "tokens", tokens, !isRaw);
48+
// add the default classes to the body to ensure labels, headings, and borders are styled correctly
49+
document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium");
6150

6251
for (const container of fetchContainers(id, isDocs, isTesting)) {
6352
// Reset the context to the original values
6453
color = original.color;
65-
context = original.context;
6654
scale = original.scale;
6755

6856
// Check if the container has a static color element
@@ -80,7 +68,7 @@ export const withContextWrapper = makeDecorator({
8068
if (!staticKey) hasStaticElement = false;
8169

8270
// Every container gets the spectrum class
83-
container.classList.toggle("spectrum", !isRaw);
71+
container.classList.toggle("spectrum", true);
8472

8573
// Let the static color override the color if it's set
8674
if (hasStaticElement && staticColorSettings[staticKey]?.color) {
@@ -94,11 +82,11 @@ export const withContextWrapper = makeDecorator({
9482
}
9583

9684
for (let c of ["light", "dark"]) {
97-
container.classList.toggle(`spectrum--${c}`, c === color && !isRaw);
85+
container.classList.toggle(`spectrum--${c}`, c === color);
9886
}
9987

10088
for (const s of ["medium", "large"]) {
101-
container.classList.toggle(`spectrum--${s}`, s === scale && !isRaw);
89+
container.classList.toggle(`spectrum--${s}`, s === scale);
10290
}
10391

10492
// Start by removing the background color from the container and then add it back if needed
@@ -108,7 +96,7 @@ export const withContextWrapper = makeDecorator({
10896
}
10997
}
11098

111-
}, [context, viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, testingPreview]);
99+
}, [viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, testingPreview]);
112100

113101
return StoryFn(data);
114102
},

‎.storybook/manager.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import "@spectrum-css/tokens/dist/index.css";
22

33
import { addons } from "@storybook/manager-api";
44
import { create } from "@storybook/theming";
5+
import { startCase } from "lodash";
56

67
import logo from "./assets/logo.svg";
78
import pkg from "./package.json";
@@ -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",

‎README.md

Lines changed: 2 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -50,19 +50,7 @@ All components in this library have a peer dependency on [`@spectrum-css/tokens`
5050

5151
Spectrum CSS components have build output that is designed to be used in a variety of ways:
5252

53-
- `index.css` - _Preferred and most commonly used to incorporate Spectrum CSS into a project_. This file includes the component's styles and variable definitions. In this version, token-driven CSS properties<sup>[1](#token-footnote)</sup> are mapped to empty `--mod` prefixed variables (for customization) with a fallback to variables prefixed with `--spectrum` (sourced from the design tokens).
54-
55-
- This file loads both the `.spectrum` and `.spectrum--express` contexts which are used to toggle components between two different [visual styles](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language). The `.spectrum` context is the default.
56-
57-
- `index-vars.css` - _Deprecated_. This file is identical to `index.css`. It is provided as a fallback for older implementations that may have been using it and will be removed. It is recommended to use `index.css` instead.
58-
59-
- `index-base.css`: This file mimics the `index.css` output, but does not include the `.spectrum` or `.spectrum--express` contexts.
60-
61-
- If your product only requires the `.spectrum` context, you can use `index-base.css` plus `themes/spectrum.css` from the `themes` directory to render the default Spectrum visual language.
62-
- The `.spectrum--express` context, on the other hand, is dependent on/expands on the default `.spectrum` context. This means if you only want to use the Express context, you still need to include `themes/spectrum.css`. In this case, we recommend using `index.css` instead since it includes both contexts by default.
63-
- This approach can also be used when you have defined and written your own visual language and only need the base component styles from Spectrum CSS. To wire up your own visual language, you would need to define your own custom properties that match those defined in the `themes/*.css` assets.
64-
65-
- `index-theme.css`: This file provides only the visual language for a component. It is used in conjunction with `index-base.css` and when loaded together, provides the same result as using `index.css` by itself.
53+
- `index.css` - This file includes the component's styles and variable definitions. In this version, token-driven CSS properties<sup>[1](#token-footnote)</sup> are mapped to empty `--mod` prefixed variables (for customization) with a fallback to variables prefixed with `--spectrum` (sourced from the design tokens).
6654

6755
<sup><a name="token-footnote">1</a></sup>: Token-driven CSS properties are properties whose values are mapped to a value in the `@spectrum-css/tokens` package. These values represent design-language and are meant to be used across platforms. In contrast, properties specific to web-based implementations will not have a token value assigned, so not all CSS properties will use custom properties.
6856

@@ -74,42 +62,17 @@ Start by including the base set of variables:
7462
/* Include tokens */
7563
@import "node_modules/@spectrum-css/tokens/dist/index.css";
7664

77-
/*
78-
For components with no other contexts available, load the
79-
index.css file from the component's package. These are components
80-
that do not have a spectrum or express context available.
81-
*/
82-
@import "node_modules/@spectrum-css/page/dist/index.css";
8365
@import "node_modules/@spectrum-css/typography/dist/index.css";
8466
@import "node_modules/@spectrum-css/icon/dist/index.css";
85-
86-
/*
87-
Recommended: For components with multiple contexts available, if you
88-
want access to all contexts, load the index.css file, which includes
89-
all contexts and component variables.
90-
*/
9167
@import "node_modules/@spectrum-css/button/dist/index.css";
92-
93-
/*
94-
If you only need the spectrum visual context: For components with
95-
multiple contexts available, load only the spectrum context by sourcing
96-
index-base.css and the spectrum theme from the themes directory.
97-
*/
98-
@import "node_modules/@spectrum-css/button/dist/index-base.css";
99-
@import "node_modules/@spectrum-css/button/dist/themes/spectrum.css";
10068
```
10169

102-
Tokens values are mapped to context-specific classes which can be applied to the `<html>` element or any place in your DOM where you wish to encapsulate or alter the visual language of your Spectrum components.
70+
Token values are mapped to context-specific classes which can be applied to the `<html>` element or any place in your DOM where you wish to encapsulate or alter the visual language of your Spectrum components.
10371

10472
All contexts you want to use must be defined in order to load all the appropriate custom properties for the components you are using.
10573

10674
#### Global variables
10775

108-
##### Visual language
109-
110-
- `.spectrum` - The default visual language for Spectrum CSS
111-
- `.spectrum--express` - A variant of the standard visual language. _This visual language will be deprecated in Spectrum 2_.
112-
11376
##### Scales
11477

11578
Scales represent the browsing context of the user. They are used to adjust the size of components to improve readability and usability on different devices.
@@ -124,8 +87,6 @@ Themes represent the color scheme of the user's browsing context. They are used
12487
- `.spectrum--light` - The default theme for Spectrum CSS, used for light mode
12588
- `.spectrum--dark` - A darker theme for Spectrum CSS, used for dark mode
12689

127-
Other themes are available but are in the process of being deprecated and should not be used in new projects.
128-
12990
#### Context example
13091

13192
Put together, we would define the context for our application in the following way:
@@ -134,16 +95,6 @@ Put together, we would define the context for our application in the following w
13495
<html class="spectrum spectrum--medium spectrum--light"></html>
13596
```
13697

137-
To switch to Express, **add** the `.spectrum--express` class to the `<html>` element:
138-
139-
```html
140-
<html
141-
class="spectrum spectrum--medium spectrum--light spectrum--express"
142-
></html>
143-
```
144-
145-
Note the `spectrum--express` class is added to the existing classes; `spectrum` should always be present to ensure the correct visual language is loaded.
146-
14798
Because CSS custom properties honor the cascading nature of CSS, you can infinitely nest different contexts. For example, you could have a `.spectrum--dark` context inside of a `.spectrum--light` context, and components will honor the innermost context.
14899

149100
### Modifying components

‎components/accordion/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
".": "./dist/index.css",
1818
"./*.md": "./*.md",
1919
"./dist/*": "./dist/*",
20-
"./index-*.css": "./dist/index-*.css",
2120
"./index.css": "./dist/index.css",
2221
"./metadata.json": "./metadata/metadata.json",
2322
"./metadata/*": "./metadata/*",

‎components/actionbar/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
".": "./dist/index.css",
1818
"./*.md": "./*.md",
1919
"./dist/*": "./dist/*",
20-
"./index-*.css": "./dist/index-*.css",
2120
"./index.css": "./dist/index.css",
2221
"./metadata.json": "./metadata/metadata.json",
2322
"./metadata/*": "./metadata/*",

0 commit comments

Comments
 (0)