Skip to content

Commit c989174

Browse files
nikkimkRajdeepcRajdeep ChandraRajdeep ChandraRajdeep Chandra
authored
feat(field-label): added and implemented field-label mixin (#5799)
* feat(label): init field label mixin feat(label): init field label mixin * feat(textfield): updated textfiled docs to use label mixin * feat(field-label): added mixin to package exports * feat(field-label): added optional slot name for rendering label slot * docs(textfield): implemented label mixin in stories * test(textfield): added test for slotted label * feat(textfield): added default slot observer for label changes * test(textfield): added tests for slotted label * docs(number-field): updated number field docs based on text field label changes * docs(number-field): updated stories with slotted label * docs(color-field): updated docs with slotted label * feat(field-label): updated interface to include optional slot name for label * feat(combobox): added label slot to combobox * docs(combobox): added slotted label to docs * test(combobox): updates tests with slotted label * fix(combobox): fixed combobox field id for label * feat(field-label): added label slot change handler to mixin * feat(combobox): added slot change handlers * feat(field-label): hide field label if not used * feat(textfield): use field label mixin to observe slot * feat(combobox): use field label mixin to observe slot * feat(combobox): added placeholder * fix(textfield): fixed issue with detecting slot content * fix(field-label): fixed issue with slot content detection in text field * test(textfield): removed unneccessary id attribute * fix(fieldl-label): fixed mixin to allow slot naming * feat(combobox): updated combobox, stories and tests for field label mixin * fix(field-label): corrected linting issues * fix(menu): MenuItem focus stealing from input elements on mouseover (#5732) * fix(menu): added check to find focused element within root context * fix(menu): added story * fix(menu): added test * chore(menu): added changeset * fix(menu): added global const for component input pattern * fix(menu): remove delimiter from the regexp constructor * chore: skipped prod and vrt tests on the new story * chore: fix tests helpers * fix: check for cross root boundary * fix: code comments --------- Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> * fix(field-label): made field id optional for picker * fix(field-label): made field id optional for picker * feat(picker): added field label mixin to pciker and picker stories * fix(textfiled): fixed element name in warning * fix(combobox): fixed element name in warning * docs(picker): updated stories * feat(picker): added field label mizin to picker without affecting pickerBase * docs(textfield): documented default label slot * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * docs(textfield): updated docs with label examples * docs(textfield): fixed issue with tabs * test(textfield): updated test warning text to match revised warning text * docs(combobox): added label and placeholder sections to docs * docs(textfield): changed tabs label * docs(number-field): updated docs with a label section * chore(changeset): added changsets * docs(field-label): added field-label-mixin docs * Apply suggestion from @nikkimk * feat(picker): revert changes * feat(picker): revert changes * chore: updated changesets * docs(color-field): added label docs * chore: updated changesets * docs(combobox): fixed typo Co-authored-by: Casey Eickhoff <[email protected]> * docs(field-label): added JS Docs to mixin * chore: linting fixes * docs(combobox): fixed typo Co-authored-by: Casey Eickhoff <[email protected]> * chore: dropped changeset * docs(color-field): fixed typo Co-authored-by: Marissa Huysentruyt <[email protected]> * chore(combobox): fixed typo * docs(combobox): added side-aligned to story * docs(combobox): fixed typo Co-authored-by: Marissa Huysentruyt <[email protected]> * docs(combobox): fixed typo Co-authored-by: Marissa Huysentruyt <[email protected]> * docs(field-label): added links to mixin docs * docs(field-label): added code type in mixin docs Co-authored-by: Marissa Huysentruyt <[email protected]> * docs(field-label): added code type in mixin docs Co-authored-by: Marissa Huysentruyt <[email protected]> * fix(textfield): simiplified styles getter * fix(textfield): simplified attribute Co-authored-by: Rúben Carvalho <[email protected]> * fix(textfield): simplified attribute * docs(field-label): added more detail to mixin docs Co-authored-by: Rúben Carvalho <[email protected]> * docs(field-label): added more detail to field label mixin docs Co-authored-by: Rúben Carvalho <[email protected]> * fix(field-label): fixed inherited styles in mixin Co-authored-by: Rúben Carvalho <[email protected]> * fix(field-label): set side-aligned property to optional Co-authored-by: Rúben Carvalho <[email protected]> * fix(field-label): added override to styles getter Co-authored-by: Rúben Carvalho <[email protected]> * fix(field-label): field id should be required * fix(field-label): reverted styles changes to mixin * fix(textfield): fixed styles array * fix(textfield): ensure super styles are CSSResultArray --------- Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: Casey Eickhoff <[email protected]> Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: Rúben Carvalho <[email protected]>
1 parent c59ea1b commit c989174

28 files changed

+942
-446
lines changed

‎.changeset/four-suits-design.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@spectrum-web-components/number-field': minor
3+
---
4+
5+
**Added**: slotted visible label to resolve cross-root ARIA issues (Before: `<sp-field-label for="number">Label</sp-field-label><sp-number-field id="number"></sp-number-field>` / After: `<sp-number-field>Label</sp-number-field>`)

‎.changeset/funny-dingos-teach.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@spectrum-web-components/field-label': minor
3+
---
4+
5+
**Added**: field label mixin to insert a label in a component's shadow DOM to resolve cross-root ARIA issues (`export class FormField extends FieldLabelMixin(SpectrumElement, 'label')` to apply mixin with a `label` slot to a class and `this.renderFieldLabel('field_id')` to render a field label for an element with `id="field_id"`)

‎.changeset/six-dragons-pump.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@spectrum-web-components/combobox': minor
3+
---
4+
5+
**Added**: slotted visible label to resolve cross-root ARIA issues (Before: `<sp-field-label for="combo">Label</sp-field-label><sp-combobox id="combo"></sp-combobox>` / After: `<sp-combobox><span slot="field-label">Label</span></sp-combobox>`)

‎.changeset/solid-streets-sip.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@spectrum-web-components/textfield': minor
3+
---
4+
5+
**Added**: slotted visible label to resolve cross-root ARIA issues (Before: `<sp-field-label for="text">Label</sp-field-label><sp-textfield id="text"></sp-textfield>` / After: `<sp-textfield>Label</sp-textfield>`)

‎.changeset/thick-towns-hammer.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@spectrum-web-components/color-field': minor
3+
---
4+
5+
**Added**: slotted visible label to resolve cross-root ARIA issues (Before: `<sp-field-label for="color">Label</sp-field-label><sp-color-field id="color"></sp-color-field>` / After: `<sp-color-field>Label</sp-color-field>`)

‎packages/color-field/README.md‎

Lines changed: 111 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,78 @@ import { ColorField } from '@spectrum-web-components/color-field';
2727

2828
The color field consists of several key parts:
2929

30+
- **Label**: Visual or visually hidden text that describes the color field to the user
3031
- **Input field**: The main text input area where users can type color values
3132
- **Color handle**: An optional visual indicator showing the current color (when `view-color` attribute is enabled)
3233
- **Validation feedback**: Visual indicators for valid and invalid color inputs
3334
- **Size variations**: Different size options to match your design requirements
3435

3536
```html
36-
<sp-color-field value="#ffff00"></sp-color-field>
37+
<sp-color-field value="#ffff00">Background color</sp-color-field>
3738
```
3839

40+
#### Label
41+
42+
A color field must have a label in order to be accessible. A label can be provided either via the default slot, or via the `label` attribute, for a hidden label that can be read by assistive technology. If no label is provided, the component will have a visually hidden label with the text `color`.
43+
44+
<sp-tabs selected="slotted" auto label="Labels">
45+
<sp-tab value="slotted">Visible slotted label</sp-tab>
46+
<sp-tab-panel value="slotted">
47+
48+
```html
49+
<sp-color-field value="#000000">Text color</sp-color-field>
50+
```
51+
52+
</sp-tab-panel>
53+
<sp-tab value="attribute">Visually hidden label attribute</sp-tab>
54+
<sp-tab-panel value="attribute">
55+
56+
```html
57+
<sp-color-field value="#000000" label="Text color"></sp-color-field>
58+
```
59+
60+
</sp-tab-panel>
61+
</sp-tabs>
62+
63+
### Options
64+
65+
#### Sizes
66+
67+
<sp-tabs selected="m" auto label="Size Attribute Options">
68+
<sp-tab value="s">Small</sp-tab>
69+
<sp-tab-panel value="s">
70+
71+
```html
72+
<sp-color-field label="Size" value="1024" size="s"></sp-color-field>
73+
```
74+
75+
</sp-tab-panel>
76+
<sp-tab value="m">Medium</sp-tab>
77+
<sp-tab-panel value="m">
78+
79+
```html
80+
<sp-number-field label="Size" value="1024" size="m"></sp-number-field>
81+
```
82+
83+
</sp-tab-panel>
84+
<sp-tab value="l">Large</sp-tab>
85+
<sp-tab-panel value="l">
86+
87+
```html
88+
<sp-number-field label="Size" value="1024" size="l"></sp-number-field>
89+
```
90+
91+
</sp-tab-panel>
92+
<sp-tab value="xl">Extra Large</sp-tab>
93+
<sp-tab-panel value="xl">
94+
95+
```html
96+
<sp-number-field label="Size" value="1024" size="xl"></sp-number-field>
97+
```
98+
99+
</sp-tab-panel>
100+
</sp-tabs>
101+
39102
### Options
40103

41104
#### Sizes
@@ -45,15 +108,23 @@ The color field consists of several key parts:
45108
<sp-tab-panel value="s">
46109

47110
```html
48-
<sp-color-field size="s" value="#ffff00"></sp-color-field>
111+
<sp-color-field
112+
size="s"
113+
value="#ffff00"
114+
label="Background color"
115+
></sp-color-field>
49116
```
50117

51118
</sp-tab-panel>
52119
<sp-tab value="m">Medium</sp-tab>
53120
<sp-tab-panel value="m">
54121

55122
```html
56-
<sp-color-field size="m" value="#ffff00"></sp-color-field>
123+
<sp-color-field
124+
size="m"
125+
value="#ffff00"
126+
label="Background color"
127+
></sp-color-field>
57128
```
58129

59130
</sp-tab-panel>
@@ -62,7 +133,11 @@ The color field consists of several key parts:
62133
<sp-tab-panel value="l">
63134

64135
```html
65-
<sp-color-field size="l" value="#ffff00"></sp-color-field>
136+
<sp-color-field
137+
size="l"
138+
value="#ffff00"
139+
label="Background color"
140+
></sp-color-field>
66141
```
67142

68143
</sp-tab-panel>
@@ -71,7 +146,11 @@ The color field consists of several key parts:
71146
<sp-tab-panel value="xl">
72147

73148
```html
74-
<sp-color-field size="xl" value="#ffff00"></sp-color-field>
149+
<sp-color-field
150+
size="xl"
151+
value="#ffff00"
152+
label="Background color"
153+
></sp-color-field>
75154
```
76155

77156
</sp-tab-panel>
@@ -82,15 +161,15 @@ The color field consists of several key parts:
82161
When `view-color` is true, the color handle will be rendered. This is useful for development and debugging purposes.
83162

84163
```html
85-
<sp-color-field view-color value="#f00"></sp-color-field>
164+
<sp-color-field view-color value="#f00">Icon color</sp-color-field>
86165
```
87166

88167
#### Quiet
89168

90169
A quiet color field provides a more subtle appearance:
91170

92171
```html
93-
<sp-color-field quiet value="#e6e600"></sp-color-field>
172+
<sp-color-field quiet value="#e6e600">Icon color</sp-color-field>
94173
```
95174

96175
### States
@@ -100,23 +179,23 @@ A quiet color field provides a more subtle appearance:
100179
The default state of the color field, ready for user input:
101180

102181
```html
103-
<sp-color-field value="#ffff00"></sp-color-field>
182+
<sp-color-field value="#ffff00">Icon color</sp-color-field>
104183
```
105184

106185
#### Read Only
107186

108187
A readonly color field that displays the color value but prevents user modification:
109188

110189
```html
111-
<sp-color-field readonly value="#ffff00"></sp-color-field>
190+
<sp-color-field readonly value="#ffff00">Icon color</sp-color-field>
112191
```
113192

114193
#### Invalid Input
115194

116195
If the input value is not a valid color, `<sp-color-field>` will not accept it and may show validation feedback:
117196

118197
```html
119-
<sp-color-field value="not a color"></sp-color-field>
198+
<sp-color-field value="not a color">Icon color</sp-color-field>
120199
```
121200

122201
### Behaviors
@@ -134,7 +213,7 @@ For a complete list of supported color formats, see the [ColorController documen
134213
A hexadecimal color is specified with: `#RRGGBB`. `RR` (red), `GG` (green) and `BB` (blue) are hexadecimal integers between `00` and `FF` specifying the intensity of the color.
135214

136215
```html
137-
<sp-color-field view-color value="#ff0000"></sp-color-field>
216+
<sp-color-field view-color value="#ff0000" label="Text color"></sp-color-field>
138217
```
139218

140219
</sp-tab-panel>
@@ -144,7 +223,7 @@ A hexadecimal color is specified with: `#RRGGBB`. `RR` (red), `GG` (green) and `
144223
Shorthand hexadecimal color values are also supported. `#RGB` is a shorthand for `#RRGGBB`. In the shorthand form, `R` (red), `G` (green), and `B` (blue) are hexadecimal characters between `0` and `F`. Each character is repeated to create the full 6-digit color code. For example, `#123` would expand to `#112233`.
145224

146225
```html
147-
<sp-color-field view-color value="#f00"></sp-color-field>
226+
<sp-color-field view-color value="#f00" label="Text color"></sp-color-field>
148227
```
149228

150229
</sp-tab-panel>
@@ -154,7 +233,11 @@ Shorthand hexadecimal color values are also supported. `#RGB` is a shorthand for
154233
An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of the color with a value between 0 and 255.
155234

156235
```html
157-
<sp-color-field view-color value="rgb(255,0,0)"></sp-color-field>
236+
<sp-color-field
237+
view-color
238+
value="rgb(255,0,0)"
239+
label="Text color"
240+
></sp-color-field>
158241
```
159242

160243
</sp-tab-panel>
@@ -164,7 +247,11 @@ An RGB color value is specified with: rgb(red, green, blue). Each parameter defi
164247
An RGBA color value is specified with: `rgba(red, green, blue, alpha)`. The `alpha` parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
165248

166249
```html
167-
<sp-color-field view-color value="rgba(0,255,0,0.3)"></sp-color-field>
250+
<sp-color-field
251+
view-color
252+
value="rgba(0,255,0,0.3)"
253+
label="Text color"
254+
></sp-color-field>
168255
```
169256

170257
</sp-tab-panel>
@@ -174,7 +261,11 @@ An RGBA color value is specified with: `rgba(red, green, blue, alpha)`. The `alp
174261
An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and lightness are percentages.
175262

176263
```html
177-
<sp-color-field view-color value="hsl(234, 70%, 50%)"></sp-color-field>
264+
<sp-color-field
265+
view-color
266+
value="hsl(234, 70%, 50%)"
267+
label="Text color"
268+
></sp-color-field>
178269
```
179270

180271
</sp-tab-panel>
@@ -184,7 +275,11 @@ An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a
184275
An HSV color value is specified with: hsv(hue, saturation, value). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and value are percentages.
185276

186277
```html
187-
<sp-color-field view-color value="hsv(0, 70%, 50%)"></sp-color-field>
278+
<sp-color-field
279+
view-color
280+
value="hsv(0, 70%, 50%)"
281+
label="Text color"
282+
></sp-color-field>
188283
```
189284

190285
</sp-tab-panel>

‎packages/color-field/stories/color-field-sizes.stories.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212
import { TemplateResult } from '@spectrum-web-components/base';
13-
14-
import '@spectrum-web-components/field-label/sp-field-label.js';
1513
import '@spectrum-web-components/help-text/sp-help-text.js';
1614
import { ColorFieldMarkup } from './template.js';
1715

0 commit comments

Comments
 (0)