Skip to content

Commit 8505fd2

Browse files
jawinncastastrophe
jawinn
authored and
castastrophe
committed
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.
1 parent 08f63b6 commit 8505fd2

File tree

6 files changed

+174
-73
lines changed

6 files changed

+174
-73
lines changed

‎components/fieldlabel/dist/metadata.json

+42-25
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,36 @@
77
".spectrum-FieldLabel--sizeL",
88
".spectrum-FieldLabel--sizeS",
99
".spectrum-FieldLabel--sizeXL",
10+
".spectrum-FieldLabel--staticBlack",
11+
".spectrum-FieldLabel--staticWhite",
1012
".spectrum-FieldLabel-requiredIcon",
1113
".spectrum-FieldLabel.is-disabled",
1214
".spectrum-FieldLabel:lang(ja)",
1315
".spectrum-FieldLabel:lang(ko)",
14-
".spectrum-FieldLabel:lang(zh)"
16+
".spectrum-FieldLabel:lang(zh)",
17+
".spectrum-Form",
18+
".spectrum-Form--labelsAbove",
19+
".spectrum-Form--labelsAbove .spectrum-Form-item",
20+
".spectrum-Form-item",
21+
".spectrum-Form-itemField",
22+
".spectrum-Form-itemField > *",
23+
".spectrum-Form-itemLabel"
1524
],
1625
"modifiers": [
17-
"--mod-disabled-content-color",
18-
"--mod-field-label-asterisk-vertical-align",
19-
"--mod-field-label-bottom-to-text",
20-
"--mod-field-label-text-to-asterisk",
21-
"--mod-field-label-top-to-text",
22-
"--mod-fieldlabel-color",
26+
"--mod-fieldlabel-asterisk-vertical-align",
27+
"--mod-fieldlabel-bottom-to-text",
2328
"--mod-fieldlabel-font-size",
2429
"--mod-fieldlabel-font-weight",
2530
"--mod-fieldlabel-line-height",
2631
"--mod-fieldlabel-line-height-cjk",
27-
"--mod-fieldlabel-margin-block",
28-
"--mod-fieldlabel-margin-block-end",
29-
"--mod-fieldlabel-margin-block-start",
30-
"--mod-fieldlabel-margin-inline",
31-
"--mod-fieldlabel-margin-inline-end",
32-
"--mod-fieldlabel-margin-inline-start",
3332
"--mod-fieldlabel-min-height",
34-
"--mod-fieldlabel-padding-block",
3533
"--mod-fieldlabel-padding-inline",
3634
"--mod-fieldlabel-side-margin-block-start",
37-
"--mod-fieldlabel-side-padding-right"
35+
"--mod-fieldlabel-side-padding-right",
36+
"--mod-fieldlabel-text-to-asterisk",
37+
"--mod-fieldlabel-top-to-text"
3838
],
3939
"component": [
40-
"--spectrum-field-label-bottom-to-text",
41-
"--spectrum-field-label-font-size",
42-
"--spectrum-field-label-min-height",
43-
"--spectrum-field-label-side-margin-block-start",
44-
"--spectrum-field-label-side-padding-right",
45-
"--spectrum-field-label-text-to-asterisk",
4640
"--spectrum-field-label-text-to-asterisk-extra-large",
4741
"--spectrum-field-label-text-to-asterisk-large",
4842
"--spectrum-field-label-text-to-asterisk-medium",
@@ -51,30 +45,53 @@
5145
"--spectrum-field-label-top-margin-large",
5246
"--spectrum-field-label-top-margin-medium",
5347
"--spectrum-field-label-top-margin-small",
54-
"--spectrum-field-label-top-to-text"
48+
"--spectrum-fieldlabel-bottom-to-text",
49+
"--spectrum-fieldlabel-color",
50+
"--spectrum-fieldlabel-font-size",
51+
"--spectrum-fieldlabel-font-weight",
52+
"--spectrum-fieldlabel-line-height",
53+
"--spectrum-fieldlabel-min-height",
54+
"--spectrum-fieldlabel-side-margin-block-start",
55+
"--spectrum-fieldlabel-side-padding-right",
56+
"--spectrum-fieldlabel-text-to-asterisk",
57+
"--spectrum-fieldlabel-top-to-text"
5558
],
5659
"global": [
60+
"--spectrum-black",
5761
"--spectrum-cjk-line-height-100",
5862
"--spectrum-component-bottom-to-text-100",
5963
"--spectrum-component-bottom-to-text-200",
64+
"--spectrum-component-bottom-to-text-300",
6065
"--spectrum-component-bottom-to-text-75",
6166
"--spectrum-component-height-100",
6267
"--spectrum-component-height-200",
68+
"--spectrum-component-height-300",
6369
"--spectrum-component-height-75",
6470
"--spectrum-component-top-to-text-100",
6571
"--spectrum-component-top-to-text-200",
72+
"--spectrum-component-top-to-text-300",
6673
"--spectrum-component-top-to-text-75",
6774
"--spectrum-disabled-content-color",
6875
"--spectrum-font-size-100",
6976
"--spectrum-font-size-200",
77+
"--spectrum-font-size-300",
7078
"--spectrum-font-size-75",
7179
"--spectrum-line-height-100",
7280
"--spectrum-neutral-subdued-content-color-default",
7381
"--spectrum-regular-font-weight",
7482
"--spectrum-spacing-100",
75-
"--spectrum-spacing-200"
83+
"--spectrum-spacing-200",
84+
"--spectrum-spacing-300",
85+
"--spectrum-tableform-item-block-spacing",
86+
"--spectrum-white"
7687
],
7788
"system-theme": [],
78-
"passthroughs": [],
79-
"high-contrast": ["--highcontrast-field-label-content-color"]
89+
"passthroughs": [
90+
"--mod-form-grid-template-columns",
91+
"--mod-form-grid-template-columns-labels-above",
92+
"--mod-form-inline-size",
93+
"--mod-form-item-block-spacing",
94+
"--mod-form-item-block-spacing-labels-above"
95+
],
96+
"high-contrast": ["--highcontrast-fieldlabel-disabled-content-color"]
8097
}

‎components/fieldlabel/index.css

+99-45
Original file line numberDiff line numberDiff line change
@@ -11,75 +11,83 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14-
/* @todo align modifiers to use field-label or fieldlabel but not both */
15-
1614
.spectrum-FieldLabel {
17-
--spectrum-field-label-min-height: var(--spectrum-component-height-75);
18-
--spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75);
19-
--spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
20-
--spectrum-field-label-font-size: var(--spectrum-font-size-75);
15+
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
16+
--spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
17+
18+
--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100);
19+
--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
20+
--spectrum-fieldlabel-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
2121

22-
--spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
23-
--spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
22+
--spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
23+
--spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
24+
--spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
2425

25-
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
26+
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
27+
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
2628
}
2729

2830
.spectrum-FieldLabel--sizeS {
29-
--spectrum-field-label-min-height: var(--spectrum-component-height-75);
30-
--spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75);
31-
--spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
32-
--spectrum-field-label-font-size: var(--spectrum-font-size-75);
31+
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
32+
--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
33+
--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
34+
--spectrum-fieldlabel-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
3335

34-
--spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
35-
--spectrum-field-label-side-padding-right: var(--spectrum-spacing-100);
36+
--spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
3637

37-
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
38+
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
39+
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
3840
}
3941

4042
.spectrum-FieldLabel--sizeL {
41-
--spectrum-field-label-min-height: var(--spectrum-component-height-100);
42-
--spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-100);
43-
--spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
44-
--spectrum-field-label-font-size: var(--spectrum-font-size-100);
43+
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-200);
44+
--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200);
45+
--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
46+
--spectrum-fieldlabel-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
4547

46-
--spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
47-
--spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
48+
--spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
4849

49-
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
50+
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
51+
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
5052
}
5153

5254
.spectrum-FieldLabel--sizeXL {
53-
--spectrum-field-label-min-height: var(--spectrum-component-height-200);
54-
--spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-200);
55-
--spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
56-
--spectrum-field-label-font-size: var(--spectrum-font-size-200);
55+
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-300);
56+
--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-300);
57+
--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
58+
--spectrum-fieldlabel-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
5759

58-
--spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
59-
--spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
60+
--spectrum-fieldlabel-font-size: var(--spectrum-font-size-300);
61+
62+
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
63+
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
64+
}
6065

61-
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
66+
.spectrum-FieldLabel--staticBlack {
67+
--spectrum-fieldlabel-color: var(--spectrum-black);
68+
}
69+
70+
.spectrum-FieldLabel--staticWhite {
71+
--spectrum-fieldlabel-color: var(--spectrum-white);
6272
}
6373

6474
.spectrum-FieldLabel {
6575
display: block;
6676
box-sizing: border-box;
67-
min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height));
77+
min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height));
6878

69-
padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text)));
79+
padding-block: var(--mod-fieldlabel-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-fieldlabel-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text));
7080
padding-inline: var(--mod-fieldlabel-padding-inline, 0);
71-
margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0));
72-
margin-inline: var(--mod-fieldlabel-margin-inline, var(--mod-fieldlabel-margin-inline-start, 0) var(--mod-fieldlabel-margin-inline-end, 0));
7381

74-
font-size: var(--mod-fieldlabel-font-size, var(--spectrum-field-label-font-size));
75-
font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-regular-font-weight));
82+
font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size));
83+
font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight));
7684

77-
line-height: var(--mod-fieldlabel-line-height, var(--spectrum-line-height-100));
85+
line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height));
7886

7987
-webkit-font-smoothing: subpixel-antialiased;
8088
-moz-osx-font-smoothing: auto;
8189

82-
color: var(--highcontrast-field-label-content-color, var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default)));
90+
color: var(--spectrum-fieldlabel-color);
8391

8492
/* CJK (Chinese, Japanese, and Korean) language support */
8593
&:lang(ja),
@@ -90,24 +98,24 @@
9098

9199
/********* Disabled state *********/
92100
&.is-disabled {
93-
--mod-fieldlabel-color: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color));
101+
--spectrum-fieldlabel-color: var(--highcontrast-fieldlabel-disabled-content-color, var(--spectrum-disabled-content-color));
94102
}
95103
}
96104

97105
.spectrum-FieldLabel-requiredIcon {
98106
color: inherit;
99107
margin-block: 0;
100-
margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
101-
vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline);
108+
margin-inline: var(--mod-fieldlabel-text-to-asterisk, var(--spectrum-fieldlabel-text-to-asterisk)) 0;
109+
vertical-align: var(--mod-fieldlabel-asterisk-vertical-align, baseline);
102110
}
103111

104112
.spectrum-FieldLabel--left,
105113
.spectrum-FieldLabel--right {
106114
display: inline-block;
107115

108-
margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-field-label-side-margin-block-start));
116+
margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-fieldlabel-side-margin-block-start));
109117
margin-block-end: 0;
110-
margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-field-label-side-padding-right));
118+
margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));
111119

112120
vertical-align: top;
113121
}
@@ -116,9 +124,55 @@
116124
text-align: end;
117125
}
118126

127+
/********* Form *********/
128+
.spectrum-Form {
129+
--spectrum-tableform-item-block-spacing: var(--spectrum-spacing-300);
130+
131+
display: grid;
132+
grid-template-columns: var(--mod-form-grid-template-columns, auto auto);
133+
row-gap: var(--mod-form-item-block-spacing, var(--spectrum-tableform-item-block-spacing));
134+
justify-content: start;
135+
136+
inline-size: var(--mod-form-inline-size, fit-content);
137+
margin: 0;
138+
}
139+
140+
/* Row */
141+
.spectrum-Form-item {
142+
display: contents;
143+
}
144+
145+
@supports (grid-template-columns: subgrid) {
146+
.spectrum-Form-item {
147+
display: grid;
148+
grid-column: span 2;
149+
grid-template-columns: subgrid;
150+
}
151+
}
152+
153+
.spectrum-Form-itemLabel,
154+
.spectrum-Form-itemField {
155+
display: block;
156+
}
157+
158+
/* Fix extra space after inline-flex elements such as stepper. */
159+
.spectrum-Form-itemField > * {
160+
vertical-align: top;
161+
}
162+
163+
/* Rows with stacked alignment */
164+
.spectrum-Form--labelsAbove {
165+
--mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--spectrum-spacing-200));
166+
--mod-form-grid-template-columns: var(--mod-form-grid-template-columns-labels-above, auto);
167+
168+
.spectrum-Form-item {
169+
display: block;
170+
}
171+
}
172+
119173
/********* WHCM *********/
120174
@media (forced-colors: active) {
121-
.spectrum-FieldLabel.is-disabled {
122-
--highcontrast-field-label-content-color: GrayText;
175+
.spectrum-FieldLabel {
176+
--highcontrast-fieldlabel-disabled-content-color: GrayText;
123177
}
124178
}

‎components/fieldlabel/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
],
3434
"peerDependencies": {
3535
"@spectrum-css/icon": ">=7",
36-
"@spectrum-css/tokens": ">=15"
36+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3737
},
3838
"devDependencies": {
3939
"@spectrum-css/icon": "workspace:^",

‎components/fieldlabel/stories/fieldlabel.stories.js

+28-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Sizes } from "@spectrum-css/preview/decorators";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
3-
import { isDisabled, isRequired, size } from "@spectrum-css/preview/types";
3+
import { isDisabled, isRequired, size, staticColor } from "@spectrum-css/preview/types";
44
import metadata from "../dist/metadata.json";
55
import packageJson from "../package.json";
66
import { FieldLabelGroup } from "./fieldlabel.test.js";
@@ -35,6 +35,7 @@ export default {
3535
},
3636
isDisabled,
3737
isRequired,
38+
staticColor,
3839
},
3940
args: {
4041
rootClass: "spectrum-FieldLabel",
@@ -136,6 +137,32 @@ Disabled.parameters = {
136137
chromatic: { disableSnapshot: true },
137138
};
138139

140+
/**
141+
* Use static white on dark color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio.
142+
*/
143+
export const StaticWhite = Default.bind({});
144+
StaticWhite.storyName = "Static white";
145+
StaticWhite.args = {
146+
staticColor: "white",
147+
};
148+
StaticWhite.tags = ["!dev"];
149+
StaticWhite.parameters = {
150+
chromatic: { disableSnapshot: true },
151+
};
152+
153+
/**
154+
* Use static black on light color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio.
155+
*/
156+
export const StaticBlack = Default.bind({});
157+
StaticBlack.storyName = "Static black";
158+
StaticBlack.args = {
159+
staticColor: "black",
160+
};
161+
StaticBlack.tags = ["!dev"];
162+
StaticBlack.parameters = {
163+
chromatic: { disableSnapshot: true },
164+
};
165+
139166
// ********* VRT ONLY ********* //
140167
export const WithForcedColors = FieldLabelGroup.bind({});
141168
WithForcedColors.args = Default.args;

0 commit comments

Comments
 (0)