Skip to content

Commit c6fa9e5

Browse files
jenndiazjenndiaz
authored
docs(tag): invalid tags should always include icon (#2341)
* docs(tag): remove incorrect invalid tags examples * docs(tag): update stories invalid tags
1 parent e4f8292 commit c6fa9e5

File tree

4 files changed

+21
-76
lines changed

4 files changed

+21
-76
lines changed

‎components/tag/metadata/tag.yml‎

Lines changed: 10 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ sections:
2121
```
2222
### Icon size changed to small
2323
If you use an icon (`spectrum-Tag-itemIcon`) along with a tag, please replace `.spectrum-Icon--sizeXS` with `.spectrum-Icon--sizeS`.
24+
25+
### Invalid
26+
Docs updated to show invalid tags always including the alert icon. Invalid tags should have an icon to idenfity itself as invalid and not rely soley on the red background and border color.
27+
2428
examples:
2529
- id: tag
2630
name: Standard
@@ -86,10 +90,6 @@ examples:
8690
<div class="spectrum-Examples-item">
8791
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
8892
89-
<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
90-
<span class="spectrum-Tag-itemLabel">Tag label</span>
91-
</div>
92-
9393
<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
9494
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
9595
<use xlink:href="#spectrum-icon-24-Alert" />
@@ -98,9 +98,9 @@ examples:
9898
</div>
9999
100100
<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
101-
<div class="spectrum-Avatar spectrum-Avatar--size50">
102-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
103-
</div>
101+
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
102+
<use xlink:href="#spectrum-icon-24-Alert" />
103+
</svg>
104104
<span class="spectrum-Tag-itemLabel">Tag label</span>
105105
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
106106
<div class="spectrum-ClearButton-fill">
@@ -143,11 +143,6 @@ examples:
143143
144144
<div class="spectrum-Examples-item">
145145
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Invalid</h4>
146-
147-
<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
148-
<span class="spectrum-Tag-itemLabel">Tag label</span>
149-
</div>
150-
151146
<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
152147
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
153148
<use xlink:href="#spectrum-icon-24-Alert" />
@@ -156,9 +151,9 @@ examples:
156151
</div>
157152
158153
<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
159-
<div class="spectrum-Avatar spectrum-Avatar--size50">
160-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
161-
</div>
154+
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
155+
<use xlink:href="#spectrum-icon-24-Alert" />
156+
</svg>
162157
<span class="spectrum-Tag-itemLabel">Tag label</span>
163158
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
164159
<div class="spectrum-ClearButton-fill">
@@ -390,18 +385,6 @@ examples:
390385
</div>
391386
<div class="spectrum-Examples-item">
392387
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
393-
394-
<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid spectrum-Tag--removable" tabindex="0">
395-
<span class="spectrum-Tag-itemLabel">Tag label</span>
396-
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
397-
<div class="spectrum-ClearButton-fill">
398-
<svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
399-
<use xlink:href="#spectrum-css-icon-Cross75" />
400-
</svg>
401-
</div>
402-
</button>
403-
</div>
404-
405388
<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid spectrum-Tag--removable" tabindex="0">
406389
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
407390
<use xlink:href="#spectrum-icon-24-Alert" />
@@ -448,17 +431,6 @@ examples:
448431
<div class="spectrum-Examples-item">
449432
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Invalid</h4>
450433
451-
<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid spectrum-Tag--removable" tabindex="0">
452-
<span class="spectrum-Tag-itemLabel">Tag label</span>
453-
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
454-
<div class="spectrum-ClearButton-fill">
455-
<svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
456-
<use xlink:href="#spectrum-css-icon-Cross75" />
457-
</svg>
458-
</div>
459-
</button>
460-
</div>
461-
462434
<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid spectrum-Tag--removable" tabindex="0">
463435
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
464436
<use xlink:href="#spectrum-icon-24-Alert" />

‎components/tag/stories/tag.stories.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export default {
7070
category: "Component",
7171
},
7272
control: "boolean",
73+
if: { arg: "isInvalid", truthy: false },
7374
},
7475
isInvalid: {
7576
name: "Invalid",

‎components/tag/stories/template.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ export const Template = ({
3333
console.warn(e);
3434
}
3535

36+
if(isInvalid) {
37+
iconName = 'Alert'
38+
}
39+
3640
return html`
3741
<div
3842
class=${classMap({
@@ -48,14 +52,14 @@ export const Template = ({
4852
id=${ifDefined(id)}
4953
tabindex=${isDisabled ? '-1' : '0'}
5054
>
51-
${avatarUrl
55+
${avatarUrl && !isInvalid
5256
? Avatar({
5357
...globals,
5458
image: avatarUrl,
5559
size: "50",
5660
})
5761
: ""}
58-
${iconName
62+
${iconName || isInvalid
5963
? Icon({
6064
...globals,
6165
size,

‎components/taggroup/metadata/taggroup.yml‎

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,6 @@ examples:
3030
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item" role="listitem" tabindex="0">
3131
<span class="spectrum-Tag-itemLabel">Tag 1</span>
3232
</div>
33-
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-invalid" role="listitem" tabindex="0">
34-
<span class="spectrum-Tag-itemLabel">Tag 2</span>
35-
</div>
3633
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-disabled" role="listitem">
3734
<span class="spectrum-Tag-itemLabel">Tag 2</span>
3835
</div>
@@ -47,12 +44,6 @@ examples:
4744
</div>
4845
<span class="spectrum-Tag-itemLabel">Shantanu</span>
4946
</div>
50-
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-invalid" role="listitem" tabindex="0">
51-
<div class="spectrum-Avatar spectrum-Avatar--size50">
52-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
53-
</div>
54-
<span class="spectrum-Tag-itemLabel">Shantanu</span>
55-
</div>
5647
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-disabled" role="listitem">
5748
<div class="spectrum-Avatar spectrum-Avatar--size50">
5849
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
@@ -71,9 +62,9 @@ examples:
7162
<span class="spectrum-Tag-itemLabel">Shantanu</span>
7263
</div>
7364
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-invalid" role="listitem" tabindex="0">
74-
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
75-
<use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
76-
</svg>
65+
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
66+
<use xlink:href="#spectrum-icon-24-Alert" />
67+
</svg>
7768
<span class="spectrum-Tag-itemLabel">Shantanu</span>
7869
</div>
7970
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-disabled" role="listitem">
@@ -98,16 +89,6 @@ examples:
9889
</div>
9990
</button>
10091
</div>
101-
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-invalid" tabindex="0" role="listitem">
102-
<span class="spectrum-Tag-itemLabel">Tag 2</span>
103-
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag 2" tabindex="-1">
104-
<div class="spectrum-ClearButton-fill">
105-
<svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
106-
<use xlink:href="#spectrum-css-icon-Cross75" />
107-
</svg>
108-
</div>
109-
</button>
110-
</div>
11192
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-disabled" role="listitem">
11293
<span class="spectrum-Tag-itemLabel">Tag 2</span>
11394
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag 3" tabindex="-1" disabled>
@@ -136,19 +117,6 @@ examples:
136117
</div>
137118
</button>
138119
</div>
139-
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-invalid" role="listitem" tabindex="0">
140-
<div class="spectrum-Avatar spectrum-Avatar--size50">
141-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
142-
</div>
143-
<span class="spectrum-Tag-itemLabel">Shantanu</span>
144-
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag 2" tabindex="-1">
145-
<div class="spectrum-ClearButton-fill">
146-
<svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
147-
<use xlink:href="#spectrum-css-icon-Cross75" />
148-
</svg>
149-
</div>
150-
</button>
151-
</div>
152120
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-disabled" role="listitem">
153121
<div class="spectrum-Avatar spectrum-Avatar--size50">
154122
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
@@ -182,7 +150,7 @@ examples:
182150
</div>
183151
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-invalid" role="listitem" tabindex="0">
184152
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
185-
<use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
153+
<use xlink:href="#spectrum-icon-24-Alert" />
186154
</svg>
187155
<span class="spectrum-Tag-itemLabel">Shantanu</span>
188156
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag Shantanu" tabindex="-1">

0 commit comments

Comments
 (0)