Skip to content

Commit 8e36ef0

Browse files
castastrophejawinnpfulton
committed
chore: run branch through format; update pathing and fix errors (#2700)
* feat(fieldlabel)!: s2 migration (#2569) BREAKING CHANGE: uses Spectrum 2 tokens Also: * feat(fieldlabel): medium as default and 100 sizing tokens - Use the correct "100" sized tokens for medium. - Make medium styles the default, to conform with existing pattern. .spectrum-FieldLabel--sizeM class removed as it is no longer necessary. * feat(fieldlabel): use correct font size tokens The font-size tokens used for large and extra large needed to be shifted up to match the s2 spec. * refactor(fieldlabel): remove deprecated mods Remove renamed mods marked as deprecated for S2 release. * docs(fieldlabel): spectrum 2 noted in migration notes Updates some docs and adds migration notes. Clarifies some docs around "left" and "right", and fixes duplicate ID warnings from examples code. * docs(fieldlabel): form - docs update and regenerate mods Add migration guide section to "Form", that currently lives within the Field label component. Regenerates mods to include the removal of deprecated renamed mods. * fix(fieldlabel): rename mod property referencing global token A mod custom property was referencing a global token instead of the component itself. Renames this and adds a note to the migration guide. * feat(fieldlabel): use correct sizing tokens Use correct tokens for some large and extra large custom properties, to matching with design. * style(fieldlabel): applying linter formatting adjustments Run linter fix on the fieldlabel component, which rearranges a few declarations. * docs(fieldlabel): document asterisk icon size Add documentation about asterisk UI icon sizes specified on the design. These sizes are already handled in the Storybook template, but were not really explained to the user. * feat(fieldlabel): black and white static color variants Add classes for static colors, as defined on the designs. And adds examples of these variants to the documentation. * build(fieldlabel): specify s2 tokens release for dependency Use Spectrum 2 version of tokens package in dependencies list. * chore: rebase against main and update components to use prerelease tokens * chore: run branch through format; update pathing and fix errors * chore: add changeset for css update --------- Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Patrick Fulton <pfulton@adobe.com>
1 parent 94dbddc commit 8e36ef0

File tree

21 files changed

+92
-54
lines changed

21 files changed

+92
-54
lines changed

‎.changeset/perfect-dogs-smash.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/button": patch
3+
---
4+
5+
chore: run branch through formatter

‎.storybook/package.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@adobe/spectrum-css-workflow-icons": "^1.5.4",
14-
"@spectrum-css/tokens": "^14.0.0-next.6",
14+
"@spectrum-css/tokens": "^14.0.0-next.7",
1515
"@spectrum-css/ui-icons": "^1.1.2"
1616
},
1717
"devDependencies": {
@@ -50,5 +50,12 @@
5050
"storybook": "^8.0.10",
5151
"style-loader": "4.0.0",
5252
"webpack": "^5.91.0"
53-
}
53+
},
54+
"keywords": [
55+
"adobe",
56+
"css",
57+
"design system",
58+
"spectrum",
59+
"storybook"
60+
]
5461
}

‎components/actionbutton/metadata/mods.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
| `--mod-actionbutton-min-width` |
5050
| `--mod-actionbutton-static-content-color` |
5151
| `--mod-actionbutton-text-to-visual` |
52+
| `--mod-animation-duration-100` |
5253
| `--mod-button-animation-duration` |
5354
| `--mod-button-font-family` |
5455
| `--mod-button-line-height` |
56+
| `--mod-line-height-100` |
57+
| `--mod-sans-font-family-stack` |

‎components/actiongroup/CHANGELOG.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
2424
🗓
2525
2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@4.2.5...@spectrum-css/actiongroup@5.0.0)
2626

27-
* feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
27+
- feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
2828

29-
###
30-
🛑 BREAKING CHANGES
29+
###
3130

32-
*
33-
- Removes component-builder & component-builder-simple for script leveraging postcss
31+
🛑 BREAKING CHANGES
32+
33+
-
34+
35+
* Removes component-builder & component-builder-simple for script leveraging postcss
3436

35-
- Imports added to index.css and themes/express.css
37+
* Imports added to index.css and themes/express.css
3638

3739
<a name="4.2.5"></a>
3840
##4.2.5

‎components/button/index.css

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -142,20 +142,12 @@ governing permissions and limitations under the License.
142142
}
143143

144144
.spectrum-Icon {
145-
/* Any block-size difference between the intended workflow icon size and actual icon used.
145+
/* stylelint-disable-next-line custom-property-pattern -- Any block-size difference between the intended workflow icon size and actual icon used.
146146
Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
147-
--_icon-size-difference: max(0px,
148-
var(--spectrum-button-intended-icon-size) -
149-
var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))
150-
);
147+
--_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)));
151148

152-
margin-block-start: var(--mod-button-icon-margin-block-start,
153-
max(0px,
154-
var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) -
155-
var(--mod-button-border-width, var(--spectrum-button-border-width)) +
156-
(var(--_icon-size-difference, 0px) / 2)
157-
)
158-
);
149+
/* stylelint-disable-next-line custom-property-pattern -- see note above */
150+
margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2)));
159151

160152
margin-inline-start: calc(
161153
var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) -

‎components/button/metadata/mods.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
| Modifiable custom properties |
22
| ------------------------------------------ |
3+
| `--mod-animation-duration-100` |
34
| `--mod-bold-font-weight` |
45
| `--mod-button-animation-duration` |
56
| `--mod-button-background-color-default` |
@@ -44,4 +45,6 @@
4445
| `--mod-button-top-to-icon` |
4546
| `--mod-button-top-to-text` |
4647
| `--mod-focus-indicator-gap` |
48+
| `--mod-line-height-100` |
49+
| `--mod-sans-font-family-stack` |
4750
| `--mod-static-black-focus-indicator-color` |

‎components/button/stories/button.stories.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import { withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
2+
13
import { html } from "lit";
24
import { styleMap } from "lit/directives/style-map.js";
3-
import { when } from "lit/directives/when.js";
4-
import { withDownStateDimensionCapture } from "../../../.storybook/decorators";
55

66
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
77
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
@@ -14,7 +14,6 @@ import { Template } from "./template";
1414
export default {
1515
title: "Components/Button",
1616
component: "Button",
17-
decorators: [withDownStateDimensionCapture('.spectrum-Button:not(:disabled)')],
1817
argTypes: {
1918
size: {
2019
name: "Size",
@@ -146,6 +145,7 @@ export default {
146145
}
147146
},
148147
decorators: [
148+
withDownStateDimensionCapture(".spectrum-Button:not(:disabled)"),
149149
(Story, context) => html`
150150
<style>
151151
.spectrum-Detail { display: inline-block; }

‎components/buttongroup/CHANGELOG.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
2424
🗓
2525
2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.2.5...@spectrum-css/buttongroup@7.0.0)
2626

27-
* feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
27+
- feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
2828

29-
###
30-
🛑 BREAKING CHANGES
29+
###
3130

32-
*
33-
- Removes component-builder & component-builder-simple for script leveraging postcss
31+
🛑 BREAKING CHANGES
3432

35-
- Imports added to index.css and themes/express.css
33+
-
34+
35+
* Removes component-builder & component-builder-simple for script leveraging postcss
36+
37+
* Imports added to index.css and themes/express.css
3638

3739
<a name="6.2.5"></a>
3840
##6.2.5

‎components/checkbox/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@
2121
"stories/template.js",
2222
"metadata/mods.md"
2323
],
24+
"peerDependencies": {
25+
"@spectrum-css/icon": ">=7",
26+
"@spectrum-css/tokens": ">=14.0.0-next.3"
27+
},
2428
"keywords": [
2529
"spectrum",
2630
"css",
2731
"design system",
2832
"adobe"
2933
],
30-
"peerDependencies": {
31-
"@spectrum-css/icon": ">=7",
32-
"@spectrum-css/tokens": ">=14.0.0-next.3"
33-
},
3434
"publishConfig": {
3535
"access": "public"
3636
}

‎components/closebutton/metadata/mods.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
| Modifiable custom properties |
22
| --------------------------------------------- |
3+
| `--mod-animation-duration-100` |
34
| `--mod-button-animation-duration` |
45
| `--mod-button-font-family` |
56
| `--mod-button-line-height` |
@@ -23,3 +24,5 @@
2324
| `--mod-closebutton-margin-inline` |
2425
| `--mod-closebutton-margin-top` |
2526
| `--mod-closebutton-width` |
27+
| `--mod-line-height-100` |
28+
| `--mod-sans-font-family-stack` |

‎components/dial/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@
2121
"stories/template.js",
2222
"metadata/mods.md"
2323
],
24+
"peerDependencies": {
25+
"@spectrum-css/tokens": ">=14.0.0-next.3"
26+
},
2427
"keywords": [
2528
"spectrum",
2629
"css",
2730
"design system",
2831
"adobe"
2932
],
30-
"peerDependencies": {
31-
"@spectrum-css/tokens": ">=14.0.0-next.3"
32-
},
3333
"publishConfig": {
3434
"access": "public"
3535
}

‎components/divider/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@
2121
"stories/template.js",
2222
"metadata/mods.md"
2323
],
24+
"peerDependencies": {
25+
"@spectrum-css/tokens": ">=14.0.0-next.3"
26+
},
2427
"keywords": [
2528
"spectrum",
2629
"css",
2730
"design system",
2831
"adobe"
2932
],
30-
"peerDependencies": {
31-
"@spectrum-css/tokens": ">=14.0.0-next.3"
32-
},
3333
"publishConfig": {
3434
"access": "public"
3535
}

‎components/fieldlabel/metadata/fieldlabel.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,12 @@ examples:
9090
name: Required
9191
description: |
9292
A Field label for a required field can display either the text "(required)", or an asterisk.
93-
93+
9494
If using the asterisk icon, do not leave any space between the label text and the start of the `<svg>` element in the markup, so extra space is not added in addition to the inline margin. The following UI icon sizes are used for the asterisk:
9595
- Asterisk100: Small and medium
9696
- Asterisk200: Large
9797
- Asterisk300: Extra large
98-
98+
9999
markup: |
100100
<label for="lifestory5" class="spectrum-FieldLabel">
101101
Life story<svg

‎components/fieldlabel/stories/template.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const Template = ({
4444
iconName = "Asterisk100";
4545
}
4646

47-
return html`
47+
const labelMarkup = html`
4848
<label
4949
class=${classMap({
5050
[rootClass]: true,
@@ -67,4 +67,18 @@ export const Template = ({
6767
}))}
6868
</label>
6969
`;
70+
71+
// When using the static color variants, wrap the label in an example element with a background color.
72+
return !staticColor
73+
? labelMarkup
74+
: html`
75+
<div
76+
style=${styleMap({
77+
padding: "1rem",
78+
backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
79+
})}
80+
</div>
81+
${labelMarkup}
82+
</div>
83+
`;
7084
};

‎components/logicbutton/metadata/mods.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
| Modifiable custom properties |
22
| -------------------------------------------------------- |
3+
| `--mod-animation-duration-100` |
34
| `--mod-button-animation-duration` |
45
| `--mod-button-focus-indicator-gap` |
56
| `--mod-button-font-family` |
67
| `--mod-button-line-height` |
8+
| `--mod-focus-indicator-gap` |
9+
| `--mod-line-height-100` |
710
| `--mod-logic-button-and-background-color` |
811
| `--mod-logic-button-and-background-color-disabled` |
912
| `--mod-logic-button-and-background-color-hover` |
@@ -33,3 +36,4 @@
3336
| `--mod-logic-button-or-text-color` |
3437
| `--mod-logic-button-or-text-color-disabled` |
3538
| `--mod-logic-button-padding` |
39+
| `--mod-sans-font-family-stack` |

‎components/opacitycheckerboard/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@
2121
"stories/template.js",
2222
"metadata/mods.md"
2323
],
24+
"peerDependencies": {
25+
"@spectrum-css/tokens": ">=14.0.0-next.3"
26+
},
2427
"keywords": [
2528
"spectrum",
2629
"css",
2730
"design system",
2831
"adobe"
2932
],
30-
"peerDependencies": {
31-
"@spectrum-css/tokens": ">=14.0.0-next.3"
32-
},
3333
"publishConfig": {
3434
"access": "public"
3535
}

‎components/page/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@
2121
"stories/template.js",
2222
"metadata/mods.md"
2323
],
24+
"peerDependencies": {
25+
"@spectrum-css/tokens": ">=14.0.0-next.3"
26+
},
2427
"keywords": [
2528
"spectrum",
2629
"css",
2730
"design system",
2831
"adobe"
2932
],
30-
"peerDependencies": {
31-
"@spectrum-css/tokens": ">=14.0.0-next.3"
32-
},
3333
"publishConfig": {
3434
"access": "public"
3535
}

‎components/picker/metadata/mods.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
| Modifiable custom properties |
22
| ------------------------------------------------------ |
3+
| `--mod-animation-duration-100` |
34
| `--mod-button-animation-duration` |
45
| `--mod-button-font-family` |
56
| `--mod-button-line-height` |
7+
| `--mod-line-height-100` |
68
| `--mod-picker-animation-duration` |
79
| `--mod-picker-background-color-active` |
810
| `--mod-picker-background-color-default` |
@@ -66,3 +68,4 @@
6668
| `--mod-picker-spacing-top-to-disclosure-icon` |
6769
| `--mod-picker-spacing-top-to-progress-circle` |
6870
| `--mod-picker-spacing-top-to-text` |
71+
| `--mod-sans-font-family-stack` |

‎components/progresscircle/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@
2121
"stories/template.js",
2222
"metadata/mods.md"
2323
],
24+
"peerDependencies": {
25+
"@spectrum-css/tokens": ">=14.0.0-next.3"
26+
},
2427
"keywords": [
2528
"spectrum",
2629
"css",
2730
"design system",
2831
"adobe"
2932
],
30-
"peerDependencies": {
31-
"@spectrum-css/tokens": ">=14.0.0-next.3"
32-
},
3333
"publishConfig": {
3434
"access": "public"
3535
}

‎components/switch/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ governing permissions and limitations under the License.
154154
block-size: 100%;
155155
inset-block-start: 0;
156156
inset-inline-start: 0;
157-
opacity: 0%;
157+
opacity: 0;
158158
z-index: 1;
159159

160160
cursor: pointer;

‎yarn.lock

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5244,7 +5244,7 @@ __metadata:
52445244
"@babel/core": "npm:^7.24.5"
52455245
"@chromaui/addon-visual-tests": "npm:^1.0.0"
52465246
"@etchteam/storybook-addon-status": "npm:^4.2.4"
5247-
"@spectrum-css/tokens": "npm:^14.0.0-next.6"
5247+
"@spectrum-css/tokens": "npm:^14.0.0-next.7"
52485248
"@spectrum-css/ui-icons": "npm:^1.1.2"
52495249
"@storybook/addon-a11y": "npm:^8.0.10"
52505250
"@storybook/addon-actions": "npm:^8.0.10"
@@ -5564,7 +5564,7 @@ __metadata:
55645564
languageName: node
55655565
linkType: hard
55665566

5567-
"@spectrum-css/tokens@npm:^14.0.0-next.6, @spectrum-css/tokens@workspace:tokens":
5567+
"@spectrum-css/tokens@npm:^14.0.0-next.7, @spectrum-css/tokens@workspace:tokens":
55685568
version: 0.0.0-use.local
55695569
resolution: "@spectrum-css/tokens@workspace:tokens"
55705570
dependencies:

0 commit comments

Comments
 (0)