Skip to content

Commit 13041bf

Browse files
jawinnpfulton
authored andcommitted
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 53ef780 commit 13041bf

File tree

7 files changed

+187
-97
lines changed

7 files changed

+187
-97
lines changed

components/fieldlabel/index.css

+40-46
Original file line numberDiff line numberDiff line change
@@ -11,82 +11,72 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-FieldLabel {
14-
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
15-
--spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
16-
14+
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
15+
--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100);
16+
--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
1717
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
1818

19+
--spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
1920
--spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
2021
--spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
2122
--spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
23+
24+
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
25+
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
26+
27+
--spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
2228
}
2329

2430
.spectrum-FieldLabel--sizeS {
2531
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
2632
--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
2733
--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
28-
--spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
29-
30-
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
31-
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
32-
3334
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
34-
}
3535

36-
.spectrum-FieldLabel--sizeM {
37-
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
38-
--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
39-
--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
4036
--spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
4137

42-
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
43-
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
44-
45-
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
38+
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
39+
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
4640
}
4741

4842
.spectrum-FieldLabel--sizeL {
49-
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
50-
--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100);
51-
--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
52-
--spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
53-
54-
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
55-
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
56-
57-
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
58-
}
59-
60-
.spectrum-FieldLabel--sizeXL {
6143
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-200);
6244
--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200);
6345
--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
46+
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
47+
6448
--spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
6549

66-
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
67-
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
50+
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
51+
}
6852

53+
.spectrum-FieldLabel--sizeXL {
54+
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-300);
55+
--spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-300);
56+
--spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
6957
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
58+
59+
--spectrum-fieldlabel-font-size: var(--spectrum-font-size-300);
60+
61+
--spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
7062
}
7163

7264
.spectrum-FieldLabel {
7365
display: block;
66+
7467
box-sizing: border-box;
7568
min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height));
76-
7769
padding-block: var(--mod-field-label-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text));
7870
padding-inline: 0;
7971

8072
font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size));
8173
font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight));
82-
8374
line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height));
75+
color: var(--spectrum-fieldlabel-color);
8476

8577
-webkit-font-smoothing: subpixel-antialiased;
8678
-moz-osx-font-smoothing: auto;
8779

88-
color: var(--spectrum-fieldlabel-color);
89-
9080
/* CJK (Chinese, Japanese, and Korean) language support */
9181
&:lang(ja),
9282
&:lang(zh),
@@ -116,19 +106,25 @@ governing permissions and limitations under the License.
116106
text-align: end;
117107
}
118108

109+
.spectrum-FieldLabel--staticBlack {
110+
color: var(--spectrum-black);
111+
}
112+
113+
.spectrum-FieldLabel--staticWhite {
114+
color: var(--spectrum-white);
115+
}
116+
119117
/********* Form *********/
120118
.spectrum-Form {
121119
--spectrum-tableform-item-block-spacing: var(--spectrum-spacing-300);
122120

123-
margin: 0;
124121
display: grid;
125122
grid-template-columns: var(--mod-form-grid-template-columns, auto auto);
126-
inline-size: var(--mod-form-inline-size, fit-content);
123+
row-gap: var(--mod-form-item-block-spacing, var(--spectrum-tableform-item-block-spacing));
127124
justify-content: start;
128125

129-
/* @deprecation --mod-tableform-item-block-spacing has been renamed to
130-
--mod-form-item-block-spacing. The fallback will be removed in a future version. */
131-
row-gap: var(--mod-form-item-block-spacing, var(--mod-tableform-item-block-spacing, var(--spectrum-tableform-item-block-spacing)));
126+
inline-size: var(--mod-form-inline-size, fit-content);
127+
margin: 0;
132128
}
133129

134130
/* Row */
@@ -156,9 +152,7 @@ governing permissions and limitations under the License.
156152

157153
/* Rows with stacked alignment */
158154
.spectrum-Form--labelsAbove {
159-
/* @deprecation --mod-tableform-item-block-spacing-labels-above has been renamed to
160-
--mod-form-item-block-spacing-labels-above. The fallback will be removed in a future version. */
161-
--mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--mod-tableform-item-block-spacing-labels-above, var(--spectrum-spacing-200)));
155+
--mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--spectrum-spacing-200));
162156
--mod-form-grid-template-columns: var(--mod-form-grid-template-columns-labels-above, auto);
163157

164158
.spectrum-Form-item {
@@ -170,17 +164,17 @@ governing permissions and limitations under the License.
170164
.spectrum-FieldLabel,
171165
.spectrum-Form-itemLabel {
172166
&.is-disabled {
173-
color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
167+
color: var(--highcontrast-field-label-disabled-content-color, var(--mod-field-label-disabled-content-color, var(--spectrum-disabled-content-color)));
174168

175169
.spectrum-FieldLabel-requiredIcon {
176-
color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
170+
color: var(--highcontrast-field-label-disabled-content-color, var(--mod-field-label-disabled-content-color, var(--spectrum-disabled-content-color)));
177171
}
178172
}
179173
}
180174

181175
/********* WHCM *********/
182176
@media (forced-colors: active) {
183177
.spectrum-FieldLabel {
184-
--highcontrast-disabled-content-color: GrayText;
178+
--highcontrast-field-label-disabled-content-color: GrayText;
185179
}
186180
}

components/fieldlabel/metadata/fieldlabel.yml

+67-26
Original file line numberDiff line numberDiff line change
@@ -6,83 +6,98 @@ sections:
66
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/fieldlabel/metadata/mods.md">here</a>.
77
- name: Migration Guide
88
description: |
9-
### T-shirt sizing
9+
### x/x/2024 - Version 8.0.0
10+
#### Spectrum 2 release
11+
Field label now uses Spectrum 2 tokens and specifications. A few notable changes and additions:
12+
- The medium size styles are used by default, so the `spectrum-FieldLabel--sizeM` class is no longer necessary and has been removed.
13+
- Two variant classes have been added for black and white static colors.
14+
- The mod custom property `--mod-disabled-content-color` has been renamed to `--mod-field-label-disabled-content-color`.
15+
16+
### 11/13/2020 - Version 3.0.0
17+
#### T-shirt sizing
1018
Field label now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-FieldLabel--size*` class.
1119
examples:
1220
- id: fieldlabel-sizing
1321
name: Sizing
1422
markup: |
1523
<div class="spectrum-Examples">
1624
<div class="spectrum-Examples-item">
17-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
25+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Small</h4>
1826
19-
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Life story</label>
27+
<label for="lifestory-s" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Life story</label>
2028
<div class="spectrum-Textfield">
21-
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
29+
<input id="lifestory-s" name="field" value="" class="spectrum-Textfield-input">
2230
</div>
2331
</div>
2432
<div class="spectrum-Examples-item">
25-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
33+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Medium (default)</h4>
2634
27-
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story</label>
35+
<label for="lifestory-m" class="spectrum-FieldLabel">Life story</label>
2836
<div class="spectrum-Textfield">
29-
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
37+
<input id="lifestory-m" name="field" value="" class="spectrum-Textfield-input">
3038
</div>
3139
</div>
3240
3341
<div class="spectrum-Examples-item">
34-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
42+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Large</h4>
3543
36-
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life story</label>
44+
<label for="lifestory-l" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life story</label>
3745
<div class="spectrum-Textfield">
38-
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
46+
<input id="lifestory-l" name="field" value="" class="spectrum-Textfield-input">
3947
</div>
4048
</div>
4149
4250
<div class="spectrum-Examples-item">
43-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
51+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Extra large</h4>
4452
45-
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Life story</label>
53+
<label for="lifestory-xl" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Life story</label>
4654
<div class="spectrum-Textfield">
47-
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
55+
<input id="lifestory-xl" name="field" value="" class="spectrum-Textfield-input">
4856
</div>
4957
</div>
5058
</div>
5159
- id: fieldlabel-standard
5260
name: Standard
5361
markup: |
54-
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story</label>
62+
<label for="lifestory" class="spectrum-FieldLabel">Life story</label>
5563
<div class="spectrum-Textfield">
5664
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
5765
</div>
5866
59-
<label for="lifestory2" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">Life story</label>
67+
<label for="lifestory2" class="spectrum-FieldLabel is-disabled">Life story</label>
6068
<div class="spectrum-Textfield is-disabled">
6169
<input id="lifestory2" name="field" value="" class="spectrum-Textfield-input" disabled>
6270
</div>
6371
- id: fieldlabel-side-left
64-
name: Left
65-
description: A left aligned Field label.
72+
name: Side label with left aligned text
73+
description: Labels with either the `spectrum-FieldLabel--left` or `spectrum-FieldLabel--right` class are for positioning the label to the side (inline start) of the form field. The left class sets the text alignment to left.
6674
markup: |
67-
<label for="lifestory3" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left" style="width: 72px">Life story</label>
75+
<label for="lifestory3" class="spectrum-FieldLabel spectrum-FieldLabel--left" style="width: 72px">Life story</label>
6876
6977
<div class="spectrum-Textfield spectrum-Textfield--multiline">
7078
<textarea id="lifestory3" name="field" value="" class="spectrum-Textfield-input"></textarea>
7179
</div>
7280
- id: fieldlabel-side-right
73-
name: Right
74-
description: A right aligned Field label.
81+
name: Side label with right aligned text
82+
description: With `spectrum-FieldLabel--right`, the side label is still positioned similarly to the left class, but with the text alignment set to right.
7583
markup: |
76-
<label for="lifestory4" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" style="width: 72px">Life story</label>
84+
<label for="lifestory4" class="spectrum-FieldLabel spectrum-FieldLabel--right" style="width: 72px">Life story</label>
7785
7886
<div class="spectrum-Textfield spectrum-Textfield--multiline">
7987
<textarea id="lifestory4" name="field" value="" class="spectrum-Textfield-input"></textarea>
8088
</div>
8189
- id: fieldlabel-required
8290
name: Required
83-
description: A Field label for a required field can display either the text "(required)", or an asterisk. 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.
91+
description: |
92+
A Field label for a required field can display either the text "(required)", or an asterisk.
93+
94+
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:
95+
- Asterisk100: Small and medium
96+
- Asterisk200: Large
97+
- Asterisk300: Extra large
98+
8499
markup: |
85-
<label for="lifestory5" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">
100+
<label for="lifestory5" class="spectrum-FieldLabel">
86101
Life story<svg
87102
class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
88103
<use xlink:href="#spectrum-css-icon-Asterisk100" />
@@ -92,15 +107,15 @@ examples:
92107
<input id="lifestory5" name="field" value="" class="spectrum-Textfield-input">
93108
</div>
94109
95-
<label for="lifestory6" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story (required)</label>
110+
<label for="lifestory6" class="spectrum-FieldLabel">Life story (required)</label>
96111
<div class="spectrum-Textfield">
97112
<input id="lifestory6" name="field" value="" class="spectrum-Textfield-input">
98113
</div>
99114
100115
<br/>
101116
<br/>
102117
103-
<label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left">
118+
<label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--left">
104119
Life story<svg
105120
class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
106121
<use xlink:href="#spectrum-css-icon-Asterisk100" />
@@ -110,7 +125,7 @@ examples:
110125
<textarea id="lifestory7" name="field" value="" class="spectrum-Textfield-input"></textarea>
111126
</div>
112127
113-
<label for="lifestory8" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">
128+
<label for="lifestory8" class="spectrum-FieldLabel is-disabled">
114129
Life story<svg
115130
class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
116131
<use xlink:href="#spectrum-css-icon-Asterisk100" />
@@ -119,3 +134,29 @@ examples:
119134
<div class="spectrum-Textfield is-disabled">
120135
<input id="lifestory8" name="field" value="" class="spectrum-Textfield-input" disabled>
121136
</div>
137+
138+
- id: fieldlabel-static-colors
139+
name: Static colors
140+
markup: |
141+
<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
142+
<label for="lifestory6" class="spectrum-FieldLabel spectrum-FieldLabel--staticBlack">
143+
Static black label with example background<svg
144+
class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
145+
<use xlink:href="#spectrum-css-icon-Asterisk100" />
146+
</svg>
147+
</label>
148+
<div class="spectrum-Textfield">
149+
<input id="lifestory6" name="field" value="" class="spectrum-Textfield-input">
150+
</div>
151+
</div>
152+
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
153+
<label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--staticWhite">
154+
Static white label with example background<svg
155+
class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
156+
<use xlink:href="#spectrum-css-icon-Asterisk100" />
157+
</svg>
158+
</label>
159+
<div class="spectrum-Textfield">
160+
<input id="lifestory7" name="field" value="" class="spectrum-Textfield-input">
161+
</div>
162+
</div>

components/fieldlabel/metadata/form.yml

+11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
name: Form
22
description: Form provides structure and spacing for your form fields.
3+
sections:
4+
- name: Custom Properties API
5+
description: |
6+
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/fieldlabel/metadata/mods.md">here</a>.
7+
- name: Migration Guide
8+
description: |
9+
### x/x/2024 - Version 8.0.0
10+
#### Spectrum 2 release
11+
The renamed mod properties previously marked as deprecated have been removed:
12+
- `--mod-tableform-item-block-spacing` has been renamed to `--mod-form-item-block-spacing`
13+
- `--mod-tableform-item-block-spacing-labels-above` has been renamed to `--mod-form-item-block-spacing-labels-above`
314
examples:
415
- id: form-labels-left
516
name: Standard - left-aligned text

0 commit comments

Comments
 (0)