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

eBay · Nov 20, 2023 · 15e308e · 15e308e
1 parent 57f4c36
commit 15e308e
Show file tree

Hide file tree

Showing 6 changed files with 299 additions and 0 deletions.
diff --git a/dist/toggle-button/toggle-button.css b/dist/toggle-button/toggle-button.css
@@ -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;
 }
@@ -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;
@@ -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;
@@ -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;
@@ -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;

diff --git a/docs/_includes/toggle-button.html b/docs/_includes/toggle-button.html
@@ -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>
diff --git a/src/less/toggle-button/stories/gallery-layout.stories.js b/src/less/toggle-button/stories/gallery-layout.stories.js
@@ -108,3 +108,45 @@ export const profileCSSImageCoverBackground = () => `
     </span>
 </button>
 `;
+
+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 = () => `
+<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>
+        </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>
+`;
diff --git a/src/less/toggle-button/stories/list-layout.stories.js b/src/less/toggle-button/stories/list-layout.stories.js
@@ -98,3 +98,45 @@ export const squareImageTitleSubtitle = () => `
     </span>
 </button>
 `;
+
+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>
+`;
diff --git a/src/less/toggle-button/stories/minimal-layout.stories.js b/src/less/toggle-button/stories/minimal-layout.stories.js
@@ -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>
+`;