Skip to content

docs(tag): invalid tags should always include icon #2341

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 6, 2023
Merged

docs(tag): invalid tags should always include icon #2341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
617e945
docs(tag): remove incorrect invalid tags examples
jenndiaz Dec 5, 2023
d9d6170
docs(tag): update stories invalid tags
jenndiaz Dec 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 10 additions & 38 deletions components/tag/metadata/tag.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ sections:
```
### Icon size changed to small
If you use an icon (`spectrum-Tag-itemIcon`) along with a tag, please replace `.spectrum-Icon--sizeXS` with `.spectrum-Icon--sizeS`.

### Invalid
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.

examples:
- id: tag
name: Standard
Expand Down Expand Up @@ -86,10 +90,6 @@ examples:
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>

<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
<span class="spectrum-Tag-itemLabel">Tag label</span>
</div>

<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
<use xlink:href="#spectrum-icon-24-Alert" />
Expand All @@ -98,9 +98,9 @@ examples:
</div>

<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
<div class="spectrum-Avatar spectrum-Avatar--size50">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</div>
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
<use xlink:href="#spectrum-icon-24-Alert" />
</svg>
<span class="spectrum-Tag-itemLabel">Tag label</span>
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
<div class="spectrum-ClearButton-fill">
Expand Down Expand Up @@ -143,11 +143,6 @@ examples:

<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Invalid</h4>

<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
<span class="spectrum-Tag-itemLabel">Tag label</span>
</div>

<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
<use xlink:href="#spectrum-icon-24-Alert" />
Expand All @@ -156,9 +151,9 @@ examples:
</div>

<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
<div class="spectrum-Avatar spectrum-Avatar--size50">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</div>
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
<use xlink:href="#spectrum-icon-24-Alert" />
</svg>
<span class="spectrum-Tag-itemLabel">Tag label</span>
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
<div class="spectrum-ClearButton-fill">
Expand Down Expand Up @@ -390,18 +385,6 @@ examples:
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>

<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid spectrum-Tag--removable" tabindex="0">
<span class="spectrum-Tag-itemLabel">Tag label</span>
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
<div class="spectrum-ClearButton-fill">
<svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Cross75" />
</svg>
</div>
</button>
</div>

<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid spectrum-Tag--removable" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
<use xlink:href="#spectrum-icon-24-Alert" />
Expand Down Expand Up @@ -448,17 +431,6 @@ examples:
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Invalid</h4>

<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid spectrum-Tag--removable" tabindex="0">
<span class="spectrum-Tag-itemLabel">Tag label</span>
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
<div class="spectrum-ClearButton-fill">
<svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Cross75" />
</svg>
</div>
</button>
</div>

<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid spectrum-Tag--removable" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
<use xlink:href="#spectrum-icon-24-Alert" />
Expand Down
1 change: 1 addition & 0 deletions components/tag/stories/tag.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export default {
category: "Component",
},
control: "boolean",
if: { arg: "isInvalid", truthy: false },
},
isInvalid: {
name: "Invalid",
Expand Down
8 changes: 6 additions & 2 deletions components/tag/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ export const Template = ({
console.warn(e);
}

if(isInvalid) {
iconName = 'Alert'
}

return html`
<div
class=${classMap({
Expand All @@ -48,14 +52,14 @@ export const Template = ({
id=${ifDefined(id)}
tabindex=${isDisabled ? '-1' : '0'}
>
${avatarUrl
${avatarUrl && !isInvalid
? Avatar({
...globals,
image: avatarUrl,
size: "50",
})
: ""}
${iconName
${iconName || isInvalid
? Icon({
...globals,
size,
Expand Down
40 changes: 4 additions & 36 deletions components/taggroup/metadata/taggroup.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,6 @@ examples:
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item" role="listitem" tabindex="0">
<span class="spectrum-Tag-itemLabel">Tag 1</span>
</div>
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-invalid" role="listitem" tabindex="0">
<span class="spectrum-Tag-itemLabel">Tag 2</span>
</div>
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-disabled" role="listitem">
<span class="spectrum-Tag-itemLabel">Tag 2</span>
</div>
Expand All @@ -47,12 +44,6 @@ examples:
</div>
<span class="spectrum-Tag-itemLabel">Shantanu</span>
</div>
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-invalid" role="listitem" tabindex="0">
<div class="spectrum-Avatar spectrum-Avatar--size50">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</div>
<span class="spectrum-Tag-itemLabel">Shantanu</span>
</div>
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-disabled" role="listitem">
<div class="spectrum-Avatar spectrum-Avatar--size50">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
Expand All @@ -71,9 +62,9 @@ examples:
<span class="spectrum-Tag-itemLabel">Shantanu</span>
</div>
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-invalid" role="listitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
<use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
<use xlink:href="#spectrum-icon-24-Alert" />
</svg>
<span class="spectrum-Tag-itemLabel">Shantanu</span>
</div>
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-disabled" role="listitem">
Expand All @@ -98,16 +89,6 @@ examples:
</div>
</button>
</div>
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-invalid" tabindex="0" role="listitem">
<span class="spectrum-Tag-itemLabel">Tag 2</span>
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag 2" tabindex="-1">
<div class="spectrum-ClearButton-fill">
<svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Cross75" />
</svg>
</div>
</button>
</div>
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-disabled" role="listitem">
<span class="spectrum-Tag-itemLabel">Tag 2</span>
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag 3" tabindex="-1" disabled>
Expand Down Expand Up @@ -136,19 +117,6 @@ examples:
</div>
</button>
</div>
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-invalid" role="listitem" tabindex="0">
<div class="spectrum-Avatar spectrum-Avatar--size50">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</div>
<span class="spectrum-Tag-itemLabel">Shantanu</span>
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag 2" tabindex="-1">
<div class="spectrum-ClearButton-fill">
<svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Cross75" />
</svg>
</div>
</button>
</div>
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-disabled" role="listitem">
<div class="spectrum-Avatar spectrum-Avatar--size50">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
Expand Down Expand Up @@ -182,7 +150,7 @@ examples:
</div>
<div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-invalid" role="listitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
<use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
<use xlink:href="#spectrum-icon-24-Alert" />
</svg>
<span class="spectrum-Tag-itemLabel">Shantanu</span>
<button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag Shantanu" tabindex="-1">
Expand Down