Add is-loading and aria-disabled to Button (#1879)

Author: tylersticka

.changeset/cuddly-birds-march.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add `is-loading` state class to Buttons

.changeset/rare-wasps-fly.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add support for `aria-disabled` attribute to Buttons

src/base/_animation.scss

@@ -0,0 +1,5 @@
+@keyframes rotate-clockwise {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/base/_index.scss

@@ -1,3 +1,4 @@
 @use './themes';
+@use './animation';
 @use './defaults';
 @use './typography';

src/components/button/button.stories.mdx

@@ -144,9 +144,30 @@ The `content_start`/`content_end` blocks override the
   </Story>
 </Canvas>
 
-## Icon with slash
+## States
 
-To add a slash across the icon(s), use the `is-slashed` state modifier CSS class.
+Buttons with a `disabled` attribute or with `aria-disabled` set to `'true'` will appear less prominent. ([Which should you use?](https://css-tricks.com/making-disabled-buttons-more-inclusive/))
+
+Buttons with the `is-loading` class will display a spinner. This informs the user visually that the button is waiting for some sort of response.
+
+<Canvas>
+  <Story name="Disabled" args={{ label: 'Disabled', disabled: true }}>
+    {(args) => buttonStory(args)}
+  </Story>
+  <Story
+    name="ARIA Disabled"
+    args={{ label: 'ARIA Disabled', aria_disabled: 'true' }}
+  >
+    {(args) => buttonStory(args)}
+  </Story>
+  <Story name="Loading" args={{ label: 'Loading', class: 'is-loading' }}>
+    {(args) => buttonStory(args)}
+  </Story>
+</Canvas>
+
+### Icon with slash
+
+To add a slash across the icon(s), use the `is-slashed` state class.
 
 If no `content_start_icon`/`content_end_icon` or `content_start`/`content_end` block content is passed in, the `'bell'` icon will be used by default as the `content_start_icon` value.
 
@@ -189,6 +210,7 @@ You can override the `content_start_icon` value to a different icon.
 
 ## Template Properties
 
+- `aria_disabled` (string, `'true'`/`'false'`): Sets the button's `aria-disabled` attribute.
 - `aria_expanded` (string, `'true'`/`'false'`): Sets the button's `aria-expanded` attribute.
 - `class` (string): Append a class to the root element.
 - `content_start_icon` (string): The name of the [icon](/docs/design-icons--page) to render in the `content_start` block.

src/components/button/button.twig

@@ -15,6 +15,9 @@
 
 <{{ tag_name }}
   class="c-button{% if class %} {{ class }}{% endif %}"
+  {% if aria_disabled %}
+    aria-disabled="{{ aria_disabled }}"
+  {% endif %}
   {% if aria_expanded %}
     aria-expanded="{{ aria_expanded }}"
   {% endif %}

src/mixins/_button.scss

@@ -93,12 +93,54 @@
     transform: scale(scale.$effect-shrink);
   }
 
-  &:disabled {
+  &:disabled,
+  &[aria-disabled='true'] {
     cursor: not-allowed;
     filter: grayscale(60%);
     opacity: 0.85;
     transform: none;
   }
+
+  /**
+   * Loading state
+   */
+
+  &.is-loading {
+    /**
+     * Display a spinner. Static if the user prefers reduced motion, animated
+     * otherwise.
+     */
+
+    &::after {
+      animation: transition.$glacial rotate-clockwise linear infinite;
+      block-size: size.$icon-medium;
+      border: size.$edge-control solid currentColor;
+      border-block-start-color: transparent;
+      border-radius: size.$border-radius-full;
+      content: '';
+      inline-size: size.$icon-medium;
+      inset: 0;
+      margin: auto;
+      position: absolute;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        border-block-start-color: currentColor;
+        border-style: dashed;
+      }
+    }
+
+    /**
+     * Hide child elements (content, extra). We use this technique because it is
+     * performant and will not negate any keyboard events.
+     *
+     * @link https: //stackoverflow.com/a/34529598
+     */
+
+    > * {
+      opacity: 0;
+    }
+  }
 }
 
 /**
@@ -121,6 +163,16 @@
   color: var(--theme-color-text-button-tertiary);
 }
 
+/// Rules for content element, used to contain button label.
+@mixin content {
+  /// We use opacity because it will not paint but it also won't remove the
+  /// element's keyboard events (if any).
+  /// @link https: //stackoverflow.com/a/34529598
+  .is-loading & {
+    opacity: 0;
+  }
+}
+
 /// Rules for extra element. Used to contain icons or other visual affordances.
 @mixin extra {
   display: flex;