Skip to content

Commit 4d3f543

Browse files
castastrophecastastrophe
committed
feat: remove modifiers from the API
1 parent 1026301 commit 4d3f543

File tree

160 files changed

+1918
-4476
lines changed

Some content is hidden

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

160 files changed

+1918
-4476
lines changed

‎.storybook/blocks/ColorPalette.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const ColorItem = ({ title, color, size = 60, values = [], noCheckerboard
5252
<SwatchSet
5353
className="swatch-set"
5454
key={`${color}-${value}`}
55-
style={{ "--mod-swatch-size": `${size}px` }}
55+
style={{ "--spectrum-swatch-size": `${size}px` }}
5656
>
5757
<Body className="swatch-label" size="s">
5858
{value}

‎.storybook/blocks/PropertiesTable.jsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ import React, { useContext } from 'react';
44
import { Table } from "./Layouts.jsx";
55
import { ThemeContainer } from "./ThemeContainer.jsx";
66
import { Body, Code, LinkableHeading } from "./Typography.jsx";
7-
import styles from "@spectrum-css/bundle/dist/index.module.css";
87

98
/**
109
* Displays the modifiable custom properties for a component based on the metadata provided in the story.
1110
* The story metadata object is imported from the "metadata.json" file in the component's directory.
1211
*
13-
* If the metadata object does not contain a "modifiers" array, this component will not render.
12+
* If the metadata object does not contain a "component" array, this component will not render.
1413
*
1514
* Usage of this doc block within MDX template(s):
1615
* <PropertiesTable />
@@ -23,14 +22,20 @@ export const PropertiesTable = () => {
2322
const metadata = storyMeta?.csfFile?.meta?.parameters?.metadata ?? {};
2423

2524
if (!packageJson?.name) return;
26-
if (!metadata?.modifiers || !metadata?.modifiers.length) return;
25+
if (!metadata?.component || !metadata?.component.length) return;
2726

2827
return (
2928
<ThemeContainer color="light" display="contents">
3029
<LinkableHeading id="modifiable-properties" size="m">
31-
<a aria-hidden="true" href="#modifiable-properties" tabIndex="-1" target="_self" onClick={() => {
32-
context.channel.emit(NAVIGATE_URL, "#modifiable-properties");
33-
}}></a>
30+
<a
31+
aria-hidden="true"
32+
href="#modifiable-properties"
33+
tabIndex="-1"
34+
target="_self"
35+
onClick={() => {
36+
context.channel.emit(NAVIGATE_URL, "#modifiable-properties");
37+
}}
38+
></a>
3439
Modifiable custom properties
3540
</LinkableHeading>
3641
<Body>
@@ -39,10 +44,10 @@ export const PropertiesTable = () => {
3944
</Body>
4045
<Table
4146
headers={["Property"]}
42-
rows={metadata?.modifiers.map((propertyName) => [
47+
rows={metadata?.component.map((propertyName) => [
4348
<Code backgroundColor={"transparent"} size="s">
4449
{propertyName}
45-
</Code>
50+
</Code>,
4651
])}
4752
/>
4853
</ThemeContainer>

‎.storybook/foundations/drop-shadow/index.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@ governing permissions and limitations under the License.
2929
var(--spectrum-drop-shadow-emphasized-default-x)
3030
var(--spectrum-drop-shadow-emphasized-default-y)
3131
var(--spectrum-drop-shadow-emphasized-default-blur)
32-
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color));
32+
var(--spectrum-drop-shadow-emphasized-default-color);
3333
}
3434

3535
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
3636
filter: drop-shadow(
3737
var(--spectrum-drop-shadow-emphasized-default-x)
3838
var(--spectrum-drop-shadow-emphasized-default-y)
3939
calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */
40-
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color))
40+
var(--spectrum-drop-shadow-emphasized-default-color)
4141
);
4242
}
4343

@@ -46,23 +46,23 @@ governing permissions and limitations under the License.
4646
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow,
4747
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
4848
/* adjustment because color tokens do not work properly on foundations pages */
49-
--mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
49+
--spectrum-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
5050
}
5151

5252
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
5353
box-shadow:
5454
var(--spectrum-drop-shadow-emphasized-hover-x)
5555
var(--spectrum-drop-shadow-emphasized-hover-y)
5656
var(--spectrum-drop-shadow-emphasized-hover-blur)
57-
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color));
57+
var(--spectrum-drop-shadow-emphasized-hover-color);
5858
}
5959

6060
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow {
6161
filter: drop-shadow(
6262
var(--spectrum-drop-shadow-emphasized-hover-x)
6363
var(--spectrum-drop-shadow-emphasized-hover-y)
6464
calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */
65-
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color))
65+
var(--spectrum-drop-shadow-emphasized-hover-color)
6666
);
6767
}
6868

@@ -71,23 +71,23 @@ governing permissions and limitations under the License.
7171
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow,
7272
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
7373
/* adjustment because color tokens do not work properly on foundations pages */
74-
--mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
74+
--spectrum-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
7575
}
7676

7777
.spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
7878
box-shadow:
7979
var(--spectrum-drop-shadow-elevated-x)
8080
var(--spectrum-drop-shadow-elevated-y)
8181
var(--spectrum-drop-shadow-elevated-blur)
82-
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color));
82+
var(--spectrum-drop-shadow-elevated-color);
8383
}
8484

8585
.spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow {
8686
filter: drop-shadow(
8787
var(--spectrum-drop-shadow-elevated-x)
8888
var(--spectrum-drop-shadow-elevated-y)
8989
calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */
90-
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color))
90+
var(--spectrum-drop-shadow-elevated-color)
9191
);
9292
}
9393

@@ -96,7 +96,7 @@ governing permissions and limitations under the License.
9696
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow,
9797
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
9898
/* adjustment because color tokens do not work properly on foundations pages */
99-
--mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
99+
--spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
100100
}
101101

102102
.spectrum-Foundations-Example-swatch-container {

‎.storybook/guides/releasing.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Meta, Title } from "@storybook/blocks";
88

99
This project versions components independently, meaning each component has its own version number, updated independently of other components. We follow [semantic versioning](https://semver.org/) and as such, each release is versioned according to the following rules:
1010

11-
- **Major**: Breaking changes such as API changes, the removal of features, or changes to `--mod` custom properties
11+
- **Major**: Breaking changes such as API changes, the removal of features, or changes to custom properties
1212
- **Minor**: New features or enhancements
1313
- **Patch**: Bug fixes or minor improvements
1414

‎components/accordion/dist/metadata.json‎

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -37,55 +37,6 @@
3737
".spectrum-Accordion:lang(ko)",
3838
".spectrum-Accordion:lang(zh)"
3939
],
40-
"modifiers": [
41-
"--mod-accordion-animation-duration",
42-
"--mod-accordion-background-color-default",
43-
"--mod-accordion-background-color-down",
44-
"--mod-accordion-background-color-hover",
45-
"--mod-accordion-background-color-key-focus",
46-
"--mod-accordion-content-padding-inline",
47-
"--mod-accordion-corner-radius",
48-
"--mod-accordion-disclosure-indicator-height",
49-
"--mod-accordion-disclosure-indicator-to-text-space",
50-
"--mod-accordion-divider-color",
51-
"--mod-accordion-divider-thickness",
52-
"--mod-accordion-edge-to-content-area",
53-
"--mod-accordion-edge-to-disclosure-indicator-space",
54-
"--mod-accordion-edge-to-text-space",
55-
"--mod-accordion-item-content-area-bottom-to-content",
56-
"--mod-accordion-item-content-area-top-to-content",
57-
"--mod-accordion-item-content-color",
58-
"--mod-accordion-item-content-disabled-color",
59-
"--mod-accordion-item-content-font",
60-
"--mod-accordion-item-content-font-size",
61-
"--mod-accordion-item-content-font-style",
62-
"--mod-accordion-item-content-font-weight",
63-
"--mod-accordion-item-content-line-height",
64-
"--mod-accordion-item-direct-actions-height",
65-
"--mod-accordion-item-direct-actions-spacing",
66-
"--mod-accordion-item-direct-actions-vertical-spacing",
67-
"--mod-accordion-item-focus-indicator-color",
68-
"--mod-accordion-item-focus-indicator-gap",
69-
"--mod-accordion-item-focus-indicator-thickness",
70-
"--mod-accordion-item-header-bottom-to-text-space",
71-
"--mod-accordion-item-header-color-default",
72-
"--mod-accordion-item-header-color-down",
73-
"--mod-accordion-item-header-color-hover",
74-
"--mod-accordion-item-header-color-key-focus",
75-
"--mod-accordion-item-header-disabled-color",
76-
"--mod-accordion-item-header-font",
77-
"--mod-accordion-item-header-font-size",
78-
"--mod-accordion-item-header-font-style",
79-
"--mod-accordion-item-header-font-weight",
80-
"--mod-accordion-item-header-line-height",
81-
"--mod-accordion-item-header-to-direct-actions-space",
82-
"--mod-accordion-item-header-top-to-text-space",
83-
"--mod-accordion-item-min-block-size",
84-
"--mod-accordion-item-minimum-height",
85-
"--mod-accordion-item-minimum-width",
86-
"--mod-accordion-item-width",
87-
"--mod-accordion-top-to-disclosure-indicator"
88-
],
8940
"component": [
9041
"--spectrum-accordion-animation-duration",
9142
"--spectrum-accordion-background-color-default",

0 commit comments

Comments
 (0)