Skip to content

Commit de7599e

Browse files
jawinnjawinn
authored
feat(fieldlabel): required asterisk vertical alignment (#2166)
* feat(fieldlabel): required icon vertical-align - Update the inline-block required icon to be vertically aligned at the baseline using the vertical-align property - Consolidate some repeated styles - Remove non-existant font-smoothing property * docs(fieldlabel): note and change regarding extra inline space - Include note in docs about not adding extra space in markup for required icon. Previously, extra inline space was appearing in examples that was in addition to the defined margin-inline token. - Storybook fix: Add missing required class * docs(fieldlabel): add stories for required asterisk Use isRequired field in stories, so the required asterisk is represented in VRTs. Along with wrapping label text.
1 parent 0c0332b commit de7599e

File tree

5 files changed

+60
-51
lines changed

5 files changed

+60
-51
lines changed

‎components/fieldlabel/index.css

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -91,14 +91,12 @@ governing permissions and limitations under the License.
9191

9292
-webkit-font-smoothing: subpixel-antialiased;
9393
-moz-osx-font-smoothing: auto;
94-
font-smoothing: subpixel-antialiased;
9594

9695
color: var(--spectrum-fieldlabel-color);
9796
}
9897

9998
/* international lang support */
10099
.spectrum-FieldLabel {
101-
102100
&:lang(ja),
103101
&:lang(zh),
104102
&:lang(ko) {
@@ -109,24 +107,18 @@ governing permissions and limitations under the License.
109107
.spectrum-FieldLabel-requiredIcon {
110108
margin-block: 0;
111109
margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
110+
vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline);
112111
}
113112

114-
.spectrum-FieldLabel--left {
113+
.spectrum-FieldLabel--left,
114+
.spectrum-FieldLabel--right {
115115
display: inline-block;
116116
padding-block: var(--mod-fieldlabel-side-padding-top, var(--spectrum-fieldlabel-side-padding-top)) 0;
117117
padding-inline: 0 var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));
118-
119-
& .spectrum-FieldLabel-requiredIcon {
120-
margin-block: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
121-
margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
122-
}
123118
}
124119

125120
.spectrum-FieldLabel--right {
126-
display: inline-block;
127121
text-align: end;
128-
padding-block: var(--mod-fieldlabel-side-padding-top, var(--spectrum-fieldlabel-side-padding-top)) 0;
129-
padding-inline: 0 var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));
130122
}
131123

132124
.spectrum-Form {
@@ -151,7 +143,6 @@ governing permissions and limitations under the License.
151143
}
152144

153145
/* disabled state */
154-
155146
.spectrum-FieldLabel,
156147
.spectrum-Form-itemLabel {
157148
&.is-disabled {
@@ -176,7 +167,7 @@ governing permissions and limitations under the License.
176167
display: flex;
177168
flex-direction: column;
178169

179-
&+.spectrum-Form-item {
170+
& + .spectrum-Form-item {
180171
margin-block-start: var(--mod-field-label-top-to-asterisk, var(--spectrum-field-label-top-to-asterisk));
181172
}
182173
}

‎components/fieldlabel/metadata/fieldlabel.yml

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ sections:
77
- name: Migration Guide
88
description: |
99
### T-shirt sizing
10-
Field Label now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-FieldLabel--size*` class.
10+
Field label now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-FieldLabel--size*` class.
1111
examples:
1212
- id: fieldlabel-sizing
1313
name: Sizing
@@ -16,15 +16,15 @@ examples:
1616
<div class="spectrum-Examples-item">
1717
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
1818
19-
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Life Story</label>
19+
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Life story</label>
2020
<div class="spectrum-Textfield">
2121
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
2222
</div>
2323
</div>
2424
<div class="spectrum-Examples-item">
2525
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
2626
27-
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story</label>
27+
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story</label>
2828
<div class="spectrum-Textfield">
2929
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
3030
</div>
@@ -33,7 +33,7 @@ examples:
3333
<div class="spectrum-Examples-item">
3434
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
3535
36-
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life Story</label>
36+
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life story</label>
3737
<div class="spectrum-Textfield">
3838
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
3939
</div>
@@ -42,7 +42,7 @@ examples:
4242
<div class="spectrum-Examples-item">
4343
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
4444
45-
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Life Story</label>
45+
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Life story</label>
4646
<div class="spectrum-Textfield">
4747
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
4848
</div>
@@ -51,66 +51,68 @@ examples:
5151
- id: fieldlabel-standard
5252
name: Standard
5353
markup: |
54-
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story</label>
54+
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story</label>
5555
<div class="spectrum-Textfield">
5656
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
5757
</div>
5858
59-
<label for="lifestory2" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">Life Story</label>
59+
<label for="lifestory2" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">Life story</label>
6060
<div class="spectrum-Textfield is-disabled">
6161
<input id="lifestory2" name="field" value="" class="spectrum-Textfield-input" disabled>
6262
</div>
6363
- id: fieldlabel-side-left
6464
name: Left
65-
description: A left aligned field label.
65+
description: A left aligned Field label.
6666
markup: |
67-
<label for="lifestory3" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left" style="width: 72px">Life Story</label>
67+
<label for="lifestory3" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left" style="width: 72px">Life story</label>
6868
6969
<div class="spectrum-Textfield spectrum-Textfield--multiline">
7070
<textarea id="lifestory3" name="field" value="" class="spectrum-Textfield-input"></textarea>
7171
</div>
7272
- id: fieldlabel-side-right
7373
name: Right
74-
description: A right aligned field label.
74+
description: A right aligned Field label.
7575
markup: |
76-
<label for="lifestory4" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" style="width: 72px">Life Story</label>
76+
<label for="lifestory4" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" style="width: 72px">Life story</label>
7777
7878
<div class="spectrum-Textfield spectrum-Textfield--multiline">
7979
<textarea id="lifestory4" name="field" value="" class="spectrum-Textfield-input"></textarea>
8080
</div>
8181
- id: fieldlabel-required
8282
name: Required
83-
description: Field label for a required field.
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.
8484
markup: |
85-
<label for="lifestory5" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story
86-
<svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
85+
<label for="lifestory5" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">
86+
Life story<svg
87+
class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
8788
<use xlink:href="#spectrum-css-icon-Asterisk100" />
8889
</svg>
8990
</label>
9091
<div class="spectrum-Textfield">
9192
<input id="lifestory5" name="field" value="" class="spectrum-Textfield-input">
9293
</div>
9394
94-
<label for="lifestory6" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story (Required)</label>
95+
<label for="lifestory6" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story (required)</label>
9596
<div class="spectrum-Textfield">
9697
<input id="lifestory6" name="field" value="" class="spectrum-Textfield-input">
9798
</div>
9899
99100
<br/>
100101
<br/>
101102
102-
<label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left">Life Story
103-
<svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
103+
<label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left">
104+
Life story<svg
105+
class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
104106
<use xlink:href="#spectrum-css-icon-Asterisk100" />
105107
</svg>
106108
</label>
107109
<div class="spectrum-Textfield spectrum-Textfield--multiline">
108110
<textarea id="lifestory7" name="field" value="" class="spectrum-Textfield-input"></textarea>
109111
</div>
110112
111-
112-
<label for="lifestory8" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">Life Story
113-
<svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
113+
<label for="lifestory8" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">
114+
Life story<svg
115+
class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
114116
<use xlink:href="#spectrum-css-icon-Asterisk100" />
115117
</svg>
116118
</label>

‎components/fieldlabel/metadata/mods.md

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
| Modifiable Custom Properties |
2-
| ------------------------------------- |
3-
| `--mod-disabled-content-color` |
4-
| `--mod-field-label-text-to-asterisk` |
5-
| `--mod-field-label-top-to-asterisk` |
6-
| `--mod-fieldlabel-font-size` |
7-
| `--mod-fieldlabel-font-weight` |
8-
| `--mod-fieldlabel-line-height` |
9-
| `--mod-fieldlabel-line-height-cjk` |
10-
| `--mod-fieldlabel-min-height` |
11-
| `--mod-fieldlabel-side-padding-right` |
12-
| `--mod-fieldlabel-side-padding-top` |
13-
| `--mod-spacing-300` |
14-
| `--mod-tableform-border-spacing` |
15-
| `--mod-tableform-margin` |
1+
| Modifiable Custom Properties |
2+
| ------------------------------------------- |
3+
| `--mod-disabled-content-color` |
4+
| `--mod-field-label-asterisk-vertical-align` |
5+
| `--mod-field-label-text-to-asterisk` |
6+
| `--mod-field-label-top-to-asterisk` |
7+
| `--mod-fieldlabel-font-size` |
8+
| `--mod-fieldlabel-font-weight` |
9+
| `--mod-fieldlabel-line-height` |
10+
| `--mod-fieldlabel-line-height-cjk` |
11+
| `--mod-fieldlabel-min-height` |
12+
| `--mod-fieldlabel-side-padding-right` |
13+
| `--mod-fieldlabel-side-padding-top` |
14+
| `--mod-spacing-300` |
15+
| `--mod-tableform-border-spacing` |
16+
| `--mod-tableform-margin` |

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,19 @@ RightAligned.args = {
8585
alignment: "right",
8686
style: { width: "72px" },
8787
};
88+
89+
export const Required = Template.bind({});
90+
Required.args = {
91+
label: "Label example",
92+
alignment: "left",
93+
isRequired: true,
94+
style: { width: "200px" },
95+
};
96+
97+
export const WrappingAndRequired = Template.bind({});
98+
WrappingAndRequired.args = {
99+
label: "Label example with longer text that will wrap to the next line. And with an asterisk that marks it as required.",
100+
alignment: "left",
101+
isRequired: true,
102+
style: { width: "200px" },
103+
};

‎components/fieldlabel/stories/template.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,13 +63,12 @@ export const Template = ({
6363
id=${ifDefined(id)}
6464
for=${ifDefined(forInput)}
6565
>
66-
${label}
67-
${isRequired
66+
${label}${isRequired
6867
? Icon({
6968
...globals,
7069
size,
7170
iconName,
72-
customClasses: [`${rootClass}-UIIcon`],
71+
customClasses: [`${rootClass}-UIIcon`, `${rootClass}-requiredIcon`],
7372
})
7473
: ""}
7574
</label>

0 commit comments

Comments
 (0)