feat(toggle-button): address code review

eBay · Nov 17, 2023 · e5bc767 · e5bc767
1 parent f35bfd9
commit e5bc767
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 10 deletions.
diff --git a/dist/toggle-button/toggle-button.css b/dist/toggle-button/toggle-button.css
@@ -29,6 +29,7 @@
   outline-style: outset;
   outline-width: 2px;
 }
+.toggle-button[aria-disabled="true"],
 .toggle-button:disabled {
   border-color: var(--color-stroke-disabled);
 }
@@ -41,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;
@@ -81,6 +87,7 @@
 .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);
 }
@@ -99,6 +106,7 @@
   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);
 }
@@ -109,6 +117,10 @@
   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;
@@ -145,9 +157,9 @@
   top: 0;
   width: 100%;
 }
-.toggle-button:disabled .toggle-button__icon {
-  color: var(--color-foreground-disabled);
-}
+.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 {
   opacity: 0.5;
 }

diff --git a/docs/_includes/toggle-button.html b/docs/_includes/toggle-button.html
@@ -555,7 +555,7 @@ <h4>Gallery Toggle Button with Icon</h4>
 
     <h4>Disabled Toggle Button</h4>
 
-    <p>Toggle buttons may be disabled in the same way as native HTML <span class="highlight">button</span>s.</p>
+    <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">
@@ -565,7 +565,7 @@ <h4>Disabled Toggle Button</h4>
                     <span class="toggle-button__subtitle">Subtitle</span>
                 </span>
             </button>
-            <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
+            <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" %}
@@ -586,6 +586,33 @@ <h4>Disabled Toggle Button</h4>
                     <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>
 
@@ -596,7 +623,7 @@ <h4>Disabled Toggle Button</h4>
         <span class="toggle-button__subtitle">Subtitle</span>
     </span>
 </button>
-<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
+<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>
@@ -617,6 +644,34 @@ <h4>Disabled Toggle Button</h4>
         <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
@@ -136,3 +136,17 @@ export const disabledIcon = () => `
     </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
@@ -126,3 +126,17 @@ export const disabledIcon = () => `
     </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>
+`;
diff --git a/src/less/toggle-button/toggle-button.less b/src/less/toggle-button/toggle-button.less
@@ -34,6 +34,7 @@
     }
 }
 
+.toggle-button[aria-disabled="true"],
 .toggle-button:disabled {
     border-color: var(--color-stroke-disabled);
 }
@@ -48,6 +49,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;
@@ -97,6 +103,7 @@
     margin-bottom: var(--spacing-200);
 }
 
+.toggle-button[aria-disabled="true"] .toggle-button__title,
 .toggle-button:disabled .toggle-button__title {
     color: var(--color-foreground-disabled);
 }
@@ -123,6 +130,7 @@
     margin-bottom: var(--spacing-200);
 }
 
+.toggle-button[aria-disabled="true"] .toggle-button__subtitle,
 .toggle-button:disabled .toggle-button__subtitle {
     color: var(--color-foreground-disabled);
 }
@@ -136,6 +144,12 @@
     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;
@@ -178,10 +192,9 @@
     width: 100%;
 }
 
-.toggle-button:disabled .toggle-button__icon {
-    color: var(--color-foreground-disabled);
-}
-
+.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 {
     opacity: 0.5;
 }