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(toggle-button): add disabled state #2202

Merged
merged 4 commits into from
Nov 20, 2023
Merged

feat(toggle-button): add disabled state #2202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f35bfd9
feat(toggle-button): add disabled state
LuLaValva Nov 13, 2023
e5bc767
feat(toggle-button): address code review
LuLaValva Nov 17, 2023
28ca4ef
feat(toggle-button): switch to [disabled]
LuLaValva Nov 20, 2023
e9260df
feat(toggle-button): grayscale images and icons
LuLaValva Nov 20, 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
28 changes: 28 additions & 0 deletions dist/toggle-button/toggle-button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@
outline-style: outset;
outline-width: 2px;
}
.toggle-button[aria-disabled="true"],
.toggle-button[disabled] {
border-color: var(--color-stroke-disabled);
}
.toggle-button * {
pointer-events: none;
}
Expand All @@ -38,6 +42,11 @@
box-shadow: 0 0 0 1px var(--color-stroke-strong);
font-weight: bold;
}
.toggle-button[aria-disabled="true"][aria-pressed="true"],
.toggle-button[disabled][aria-pressed="true"] {
border-color: var(--color-stroke-disabled);
box-shadow: 0 0 0 1px var(--color-stroke-disabled);
}
.toggle-button__content {
align-self: center;
display: flex;
Expand Down Expand Up @@ -78,6 +87,10 @@
.toggle-button__title:only-child {
margin-bottom: var(--spacing-200);
}
.toggle-button[aria-disabled="true"] .toggle-button__title,
.toggle-button[disabled] .toggle-button__title {
color: var(--color-foreground-disabled);
}
.toggle-button .toggle-button__content:only-child .toggle-button__title:only-child {
font-weight: bold;
margin-bottom: auto;
Expand All @@ -93,13 +106,21 @@
line-height: var(--font-size-large-1);
margin-bottom: var(--spacing-200);
}
.toggle-button[aria-disabled="true"] .toggle-button__subtitle,
.toggle-button[disabled] .toggle-button__subtitle {
color: var(--color-foreground-disabled);
}
.toggle-button__subtitle p {
margin: 0;
}
.toggle-button[aria-pressed="true"] .toggle-button__subtitle {
color: var(--color-foreground-primary);
font-weight: normal;
}
.toggle-button[aria-disabled="true"][aria-pressed="true"] .toggle-button__subtitle,
.toggle-button[disabled][aria-pressed="true"] .toggle-button__subtitle {
color: var(--color-foreground-disabled);
}
/* Layout Themes */
.toggle-button--list-layout {
justify-content: left;
Expand Down Expand Up @@ -136,6 +157,13 @@
top: 0;
width: 100%;
}
.toggle-button[aria-disabled="true"] .toggle-button__icon,
.toggle-button[aria-disabled="true"] .toggle-button__image,
.toggle-button[disabled] .toggle-button__icon,
.toggle-button[disabled] .toggle-button__image {
filter: grayscale(1);
opacity: 0.5;
}
.toggle-button--gallery-layout .toggle-button__image-container img {
height: 100%;
max-height: 200px;
Expand Down
121 changes: 121 additions & 0 deletions docs/_includes/toggle-button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -552,5 +552,126 @@ <h4>Gallery Toggle Button with Icon</h4>
</span>
</button>
{% endhighlight %}

<h4>Disabled Toggle Button</h4>

<p>Toggle buttons may be disabled with <span class="highlight">disabled</span> or <span class="highlight">aria-disabled="true"</span>.</p>

<div class="demo">
<div class="demo__inner">
<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>
<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" aria-disabled="true">
<span class="toggle-button__icon">
<svg aria-hidden="true" class="icon icon--on-the-way-16" focusable="false" height="16" width="16">
{% include symbol.html name="on-the-way-16" prefix="icon" %}
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>
<button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false" disabled>
<span class="toggle-button__image-container">
<span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
</span>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>
<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="true" aria-disabled="true">
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>
<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="true" disabled>
<span class="toggle-button__icon">
<svg aria-hidden="true" class="icon icon--mastercard-32-colored" focusable="false" height="16" width="16">
{% include symbol.html name="mastercard-32-colored" prefix="icon" %}
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>
<button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="true" aria-disabled="true">
<span class="toggle-button__image-container">
<span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
</span>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>
</div>
</div>

{% highlight html %}
<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>
<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" aria-disabled="true">
<span class="toggle-button__icon">
<svg aria-hidden="true" class="icon icon--on-the-way-16" focusable="false" height="16" width="16">
<use href="static/icons.svg#on-the-way-16"></use>
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>
<button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false" disabled>
<span class="toggle-button__image-container">
<span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
</span>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>

<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="true" aria-disabled="true">
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>
<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="true" disabled>
<span class="toggle-button__icon">
<svg aria-hidden="true" class="icon icon--mastercard-32-colored" focusable="false" height="16" width="16">
<use href="static/icons.svg#mastercard-32-colored"></use>
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>
<button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="true" aria-disabled="true">
<span class="toggle-button__image-container">
<span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
</span>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Title</span>
<span class="toggle-button__subtitle">Subtitle</span>
</span>
</button>
{% endhighlight %}

</div>
42 changes: 42 additions & 0 deletions src/less/toggle-button/stories/gallery-layout.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,45 @@ export const profileCSSImageCoverBackground = () => `
</span>
</button>
`;

LuLaValva marked this conversation as resolved.
Show resolved Hide resolved
export const disabledImage = () => `
<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
<span class="toggle-button__image-container">
<span class="toggle-button__image">
<img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-square-pic.jpg" alt="">
</span>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Image Button Title</span>
<span class="toggle-button__subtitle">Image Button Subtitle</span>
</span>
</button>
`;

export const disabledIcon = () => `
LuLaValva marked this conversation as resolved.
Show resolved Hide resolved
<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
<span class="toggle-button__icon">
<svg aria-hidden="true" class="icon icon--on-the-way-16" focusable="false" height="64" width="64">
<use href="#icon-on-the-way-16"></use>
ArtBlue marked this conversation as resolved.
Show resolved Hide resolved
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Icon Button Title</span>
<span class="toggle-button__subtitle">Icon Button Subtitle</span>
</span>
</button>
`;

export const disabledIconColored = () => `
<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
<span class="toggle-button__icon">
<svg aria-hidden="true" class="icon icon--mastercard-32-colored" focusable="false" height="64" width="64">
<use href="#icon-mastercard-32-colored"></use>
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Icon Button Title</span>
<span class="toggle-button__subtitle">Icon Button Subtitle</span>
</span>
</button>
`;
42 changes: 42 additions & 0 deletions src/less/toggle-button/stories/list-layout.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,3 +98,45 @@ export const squareImageTitleSubtitle = () => `
</span>
</button>
`;

LuLaValva marked this conversation as resolved.
Show resolved Hide resolved
export const disabledImage = () => `
<button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false" disabled>
<span class="toggle-button__image-container">
<span class="toggle-button__image">
<img alt="" src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg">
</span>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Image Button Title</span>
<span class="toggle-button__subtitle">Image Button Subtitle</span>
</span>
</button>
`;

export const disabledIcon = () => `
<button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false" disabled>
<span class="toggle-button__icon">
<svg aria-hidden="true" class="icon icon--on-the-way-16" focusable="false" height="16" width="16">
<use href="#icon-on-the-way-16"></use>
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Icon Button Title</span>
<span class="toggle-button__subtitle">Icon Button Subtitle</span>
</span>
</button>
`;

export const disabledIconColored = () => `
<button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false" disabled>
<span class="toggle-button__icon">
<svg aria-hidden="true" class="icon icon--mastercard-32-colored" focusable="false" height="16" width="16">
<use href="#icon-mastercard-32-colored"></use>
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title">Icon Button Title</span>
<span class="toggle-button__subtitle">Icon Button Subtitle</span>
</span>
</button>
`;
32 changes: 32 additions & 0 deletions src/less/toggle-button/stories/minimal-layout.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,35 @@ export const toggledOn = () => `
</span>
</button>
`;

export const toggledOffDisabled = () => `
<button type="button" class="toggle-button" aria-pressed="false" disabled>
<span class="toggle-button__content">
<span class="toggle-button__title">4.5</span>
</span>
</button>
`;

export const toggledOnDisabled = () => `
<button type="button" class="toggle-button" aria-pressed="true" disabled>
<span class="toggle-button__content">
<span class="toggle-button__title">4.5</span>
</span>
</button>
`;

export const toggledOffAriaDisabled = () => `
<button type="button" class="toggle-button" aria-pressed="false" aria-disabled="true">
<span class="toggle-button__content">
<span class="toggle-button__title">4.5</span>
</span>
</button>
`;

export const toggledOnAriaDisabled = () => `
<button type="button" class="toggle-button" aria-pressed="true" aria-disabled="true">
<span class="toggle-button__content">
<span class="toggle-button__title">4.5</span>
</span>
</button>
`;
Loading
Loading