Skip to content
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

feat(textbox,listbox-button): add icon to error messages #2247

Merged
merged 6 commits into from
Jan 19, 2024
Merged

feat(textbox,listbox-button): add icon to error messages #2247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c53756a
chore: updated dev deps
ArtBlue Dec 28, 2023
89b7788
feat(listbox-button,field): added listbox error state
ArtBlue Jan 9, 2024
fface7d
Merge remote-tracking branch 'origin/17.1.0' into 2063-listbox-error-…
ArtBlue Jan 9, 2024
7b8c33f
feat(textbox,listbox-button): added error message handling to textbox…
ArtBlue Jan 10, 2024
2ad1974
Merge remote-tracking branch 'origin/17.1.0' into 2103-textbox-listbo…
ArtBlue Jan 12, 2024
727ecef
chore(field): margin shorthand
ArtBlue Jan 18, 2024
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
6 changes: 5 additions & 1 deletion dist/field/field.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,12 @@ div.field__group {
.field__control + span.field__description {
margin-left: 8px;
}
.field__description .icon {
display: inline-block;
margin-right: var(--spacing-50);
}
div.field__description {
margin: 2px 0 0;
margin: var(--spacing-100) 0 0;
}
.field__row {
display: table-row;
Expand Down
10 changes: 5 additions & 5 deletions dist/listbox-button/listbox-button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
.listbox-button button[aria-invalid="true"] {
border-color: var(--listbox-button-invalid-border-color, var(--color-stroke-attention));
}
.listbox-button button.btn--form {
.listbox-button:not(.listbox-button--error) button.btn--form {
border-color: var(--listbox-button-border-color, var(--color-stroke-default));
}
.listbox-button button.btn--form:hover,
.listbox-button button.btn--form:focus,
.listbox-button button.btn--form:active {
.listbox-button:not(.listbox-button--error) button.btn--form:hover,
.listbox-button:not(.listbox-button--error) button.btn--form:focus,
.listbox-button:not(.listbox-button--error) button.btn--form:active {
border-color: inherit;
}
.listbox-button button.expand-btn--borderless,
Expand All @@ -76,7 +76,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
.listbox-button.listbox-button--form button[disabled],
.listbox-button.listbox-button--form button[aria-disabled="true"] {
border-color: var(--listbox-button-disabled-border-color, var(--color-background-disabled));
color: var(--listbox-button-disabled-foreground-color, var(--color-foreground-disabled));
color: var(--listbox-button-disabled-foreground-color, var(--color-foreground-primary));
}
.listbox-button.listbox-button--form button:focus {
background-color: var(--combobox-textbox-focus-background-color, var(--color-background-primary));
Expand Down
48 changes: 46 additions & 2 deletions docs/_includes/field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -819,7 +819,10 @@ <h4>Listbox Button with Label in Error State</h4>
</span>
</div>
<div class="field__description field__description--attention" id="field-listbox-button-1-description">
<span>There was an error.</span>
<svg class="icon icon--attention-filled-16" focusable="false" height="10" width="14" aria-hidden="true">
{% include symbol.html name="attention-filled-16" %}
</svg>
<span>There was an error</span>
</div>
</span>
</div>
Expand Down Expand Up @@ -876,7 +879,48 @@ <h4>Listbox Button with Label in Error State</h4>
</span>
</div>
<div class="field__description field__description--attention" id="field-listbox-button-1-description">
<span>There was an error.</span>
<svg class="icon icon--attention-filled-16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-attention-filled-16"></use>
</svg>
<span>There was an error</span>
</div>
</span>
{% endhighlight %}

<h4>Textbox in Error State</h4>
<p>You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.</p>

<div class="demo">
<div class="demo__inner">
<span class="field">
<label class="field__label field__label--stacked" for="field-textbox-1">Textbox 1</label>
<div class="field__control textbox">
<input aria-describedby="field-textbox-1-description" class="textbox__control" id="field-textbox-1" type="text" aria-invalid="true" />
</div>
<div class="field__description field__description--attention" id="field-textbox-1-description">
<svg class="icon icon--attention-filled-16" focusable="false" height="10" width="14" aria-hidden="true">
{% include symbol.html name="attention-filled-16" %}
</svg>
<span>There was an error</span>
</div>
</span>
</div>
</div>

<h4>Textbox in Error State</h4>
<p>You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.</p>

{% highlight html %}
<span class="field">
<label class="field__label field__label--stacked" for="field-textbox-1">Textbox 1</label>
<div class="field__control textbox">
<input aria-describedby="field-textbox-1-description" class="textbox__control" id="field-textbox-1" type="text" aria-invalid="true" />
</div>
<div class="field__description field__description--attention" id="field-textbox-1-description">
<svg class="icon icon--attention-filled-16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-attention-filled-16"></use>
</svg>
<span>There was an error</span>
</div>
</span>
{% endhighlight %}
Expand Down
7 changes: 6 additions & 1 deletion src/less/field/field.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,14 @@ div.field__group {
margin-left: 8px;
}

.field__description .icon {
display: inline-block;
margin-right: var(--spacing-50);
}

// if using a div for description, it implies it's always at bottom of field
div.field__description {
margin: 2px 0 0;
margin: var(--spacing-100) 0 0;
}

.field__row {
Expand Down
70 changes: 65 additions & 5 deletions src/less/field/stories/stacked.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const group = () => `

export const descriptions = () => `
<div class="field">
<label class="field__label field__label--stacked" for="field-descriptions-1">Field 1</label>
<label class="field__label field__label--stacked" for="field-descriptions-1">Textbox Field - Default</label>
<div class="field__control textbox">
<input aria-describedby="field-descriptions-1-description" class="textbox__control textbox__control--fluid" id="field-descriptions-1" type="text" />
</div>
Expand All @@ -104,7 +104,7 @@ export const descriptions = () => `
</div>
</div>
<div class="field">
<label class="field__label field__label--stacked" for="field-descriptions-2">Field 2</label>
<label class="field__label field__label--stacked" for="field-descriptions-2">Textbox Field - Confirmation</label>
<div class="field__control textbox">
<input aria-describedby="field-descriptions-2-description" class="textbox__control textbox__control--fluid" id="field-descriptions-2" type="text" />
</div>
Expand All @@ -113,7 +113,7 @@ export const descriptions = () => `
</div>
</div>
<div class="field">
<label class="field__label field__label--stacked" for="field-descriptions-3">Field 3</label>
<label class="field__label field__label--stacked" for="field-descriptions-3">Textbox Field - Information</label>
<div class="field__control textbox">
<input aria-describedby="field-descriptions-3-description" class="textbox__control textbox__control--fluid" id="field-descriptions-3" type="text" />
</div>
Expand All @@ -122,12 +122,72 @@ export const descriptions = () => `
</div>
</div>
<div class="field">
<label class="field__label field__label--stacked" for="field-descriptions-4">Field 4</label>
<label class="field__label field__label--stacked" for="field-descriptions-4">Textbox Field - Error</label>
<div class="field__control textbox">
<input aria-describedby="field-descriptions-4-description" class="textbox__control textbox__control--fluid" id="field-descriptions-4" type="text" />
<input aria-describedby="field-descriptions-4-description" class="textbox__control textbox__control--fluid" id="field-descriptions-4" type="text" aria-invalid="true" />
</div>
<div class="field__description field__description--attention" id="field-descriptions-4-description">
<svg class="icon icon--attention-filled-16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-attention-filled-16"></use>
</svg>
<span>Field description - error</span>
</div>
</div>

<span class="field">
<label class="field__label field__label--stacked" for="field-listbox-button-1">Listbox Button Field - Error</label>
<div class="field__control textbox">
<span class="listbox-button listbox-button--form listbox-button--error" data-makeup-auto-select="false">
<button class="btn btn--form" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox" aria-describedby="field-listbox-button-1-description">
<span class="btn__cell">
<span class="btn__label">Color: </span>
<span class="btn__text">-</span>
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">Red</span>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">Blue</span>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox-button__option" role="option" aria-disabled="true">
<span class="listbox-button__value">Yellow</span>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">Green</span>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
<select id="field-listbox-button-1" hidden="" class="listbox__native">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</select>
</span>
</div>
<div class="field__description field__description--attention" id="field-listbox-button-1-description">
<svg class="icon icon--attention-filled-16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-attention-filled-16"></use>
</svg>
<span>There was an error</span>
</div>
</span>
`;
4 changes: 2 additions & 2 deletions src/less/listbox-button/listbox-button.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
.border-color-token(listbox-button-invalid-border-color, color-stroke-attention);
}

.listbox-button button.btn--form {
.listbox-button:not(.listbox-button--error) button.btn--form {
.border-color-token(listbox-button-border-color, color-stroke-default);

&:hover,
Expand Down Expand Up @@ -78,7 +78,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
.listbox-button.listbox-button--form button[disabled],
.listbox-button.listbox-button--form button[aria-disabled="true"] {
.border-color-token(listbox-button-disabled-border-color, color-background-disabled);
.color-token(listbox-button-disabled-foreground-color, color-foreground-disabled);
.color-token(listbox-button-disabled-foreground-color, color-foreground-primary);
}

.listbox-button.listbox-button--form button:focus {
Expand Down
Loading