uswds · thisisdano · May 17, 2023 · Oct 24, 2022 · Oct 24, 2022 · Oct 24, 2022
diff --git a/packages/usa-button-group/src/usa-button-group.twig b/packages/usa-button-group/src/usa-button-group.twig
@@ -2,7 +2,7 @@
 {% if segmented == true %}
   <ul class="usa-button-group usa-button-group--segmented">
     <li class="usa-button-group__item">
-      <button type="button" class="usa-button">Map</button>
+      <button type="button" class="usa-button" {% if disabled_state == "disabled" %}disabled{% endif %} {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Map</button>
     </li>
     <li class="usa-button-group__item">
       <button type="button" class="usa-button usa-button--outline" {% if disabled_state == "disabled" %}disabled{% endif %} {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Hybrid</button>
@@ -18,7 +18,7 @@
   {% endif %}
     <ul class="usa-button-group usa-button-group--segmented">
       <li class="usa-button-group__item">
-        <button type="button" class="usa-button {{ modifier }}">Map</button>
+        <button type="button" class="usa-button {{ modifier }}" {% if disabled_state == "disabled" %}disabled{% endif %} {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Map</button>
       </li>
       <li class="usa-button-group__item">
         <button type="button" class="usa-button {{ modifier }}" {% if disabled_state == "disabled" %}disabled{% endif %} {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Hybrid</button>

diff --git a/packages/usa-button/src/content/usa-button~accent-cool.json b/packages/usa-button/src/content/usa-button~accent-cool.json
@@ -1,6 +1,4 @@
 {
   "modifier": "usa-button--accent-cool",
-  "text": "Accent cool",
-  "is_demo": true,
-  "aria_disabled": false
+  "text": "Accent cool"
 }
diff --git a/packages/usa-button/src/content/usa-button~accent-warm.json b/packages/usa-button/src/content/usa-button~accent-warm.json
@@ -1,6 +1,4 @@
 {
   "modifier": "usa-button--accent-warm",
-  "text": "Accent warm",
-  "is_demo": true,
-  "aria_disabled": false
+  "text": "Accent warm"
 }
diff --git a/packages/usa-button/src/content/usa-button~base.json b/packages/usa-button/src/content/usa-button~base.json
@@ -1,6 +1,4 @@
 {
   "modifier": "usa-button--base",
-  "text": "Base",
-  "is_demo": true,
-  "aria_disabled": false
+  "text": "Base"
 }
diff --git a/packages/usa-button/src/content/usa-button~big.json b/packages/usa-button/src/content/usa-button~big.json
@@ -1,6 +1,4 @@
 {
   "modifier": "usa-button--big",
-  "text": "Big button",
-  "is_demo": true,
-  "aria_disabled": false
+  "text": "Big button"
 }
diff --git a/packages/usa-button/src/content/usa-button~outline-inverse.json b/packages/usa-button/src/content/usa-button~outline-inverse.json
@@ -1,6 +1,4 @@
 {
   "modifier": "usa-button--outline usa-button--inverse",
-  "text": "Outline inverse",
-  "is_demo": true,
-  "aria_disabled": false
+  "text": "Outline inverse"
 }
diff --git a/packages/usa-button/src/content/usa-button~outline.json b/packages/usa-button/src/content/usa-button~outline.json
@@ -1,6 +1,4 @@
 {
   "modifier": "usa-button--outline",
-  "text": "Outline",
-  "is_demo": true,
-  "aria_disabled": false
+  "text": "Outline"
 }
diff --git a/packages/usa-button/src/content/usa-button~secondary.json b/packages/usa-button/src/content/usa-button~secondary.json
@@ -1,6 +1,4 @@
 {
   "modifier": "usa-button--secondary",
-  "text": "Secondary",
-  "is_demo": true,
-  "aria_disabled": false
+  "text": "Secondary"
 }
diff --git a/packages/usa-button/src/content/usa-button~unstyled.json b/packages/usa-button/src/content/usa-button~unstyled.json
@@ -1,6 +1,4 @@
 {
   "modifier": "usa-button--unstyled",
-  "text": "Unstyled button",
-  "is_demo": true,
-  "aria_disabled": false
+  "text": "Unstyled button"
 }
diff --git a/packages/usa-button/src/styles/_usa-button.scss b/packages/usa-button/src/styles/_usa-button.scss
@@ -75,11 +75,6 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
   &.usa-button--active {
     @include set-text-and-bg("accent-cool-darker", $context: $button-context);
   }
-
-  &:disabled:hover,
-  &[aria-disabled="true"]:hover {
-    color: color("white");
-  }
 }
 
 .usa-button--accent-warm {
@@ -203,39 +198,20 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
   padding: units(2) units(3);
 }
 
-.usa-button--disabled {
-  @include button-disabled;
-}
-
-.usa-button--outline-disabled,
-.usa-button--outline-inverse-disabled,
 .usa-button--outline:disabled,
 .usa-button--outline[aria-disabled="true"],
 .usa-button--outline-inverse:disabled,
 .usa-button--outline-inverse[aria-disabled="true"] {
-  background-color: color("transparent");
-
-  &:hover,
-  &.usa-button--hover,
-  &:active,
-  &.usa-button--active,
-  &:focus,
-  &.usa-focus {
-    background-color: color("transparent");
-    box-shadow: $button-stroke color("disabled");
-  }
+  @include u-disabled("transparent", $theme-color-disabled-text);
 }
 
-.usa-button--outline-disabled,
 .usa-button--outline:disabled,
 .usa-button--outline[aria-disabled="true"] {
   box-shadow: $button-stroke color("disabled");
-  color: color("disabled");
 
   &.usa-button--inverse {
-    background-color: transparent;
-    box-shadow: $button-stroke color("base");
-    color: color("base");
+    box-shadow: $button-stroke color($theme-color-disabled-text-reverse);
+    color: color($theme-color-disabled-text-reverse);
   }
 }
 

diff --git a/packages/usa-button/src/usa-button.stories.js b/packages/usa-button/src/usa-button.stories.js
@@ -22,16 +22,15 @@ export default {
     },
     is_demo: {
       name: "Show all button states",
+      defaultValue: true,
+      type: "boolean",
     },
     type: {
       defaultValue: "button",
       name: "Type attribute",
       options: ["button", "reset", "submit"],
       control: { type: "radio" },
     },
-    aria_disabled: {
-      name: "aria-disabled",
-    },
   },
 };
 

diff --git a/packages/usa-button/src/usa-button.twig b/packages/usa-button/src/usa-button.twig
@@ -8,21 +8,17 @@
   <button type="{{ type }}" class="usa-button {{ modifier }} usa-button--active">Active</button>
   <button type="{{ type }}" class="usa-button {{ modifier }} usa-focus">Focus</button>
   <button type="{{ type }}" class="usa-button {{ modifier }}" disabled>Disabled</button>
-  {% if aria_disabled == true %}
-    <button type="{{ type }}" class="usa-button {{ modifier }}" aria-disabled="true">aria-disabled</button>
-  {% endif %}
+  <button type="{{ type }}" class="usa-button {{ modifier }}" aria-disabled="true">aria-disabled</button>
   <button type="{{ type }}" class="usa-button {{ modifier }} usa-button--unstyled">Unstyled button</button>
 {% else %}
   <button type="{{ type }}" class="usa-button {{ modifier }}">{{ text }}</button>
   {% if is_demo and 'usa-button--big' in modifier %}
     <button type="{{ type }}" class="usa-button {{ modifier }}" disabled>Disabled</button>
-    {% if aria_disabled == true %}
-      <button type="{{ type }}" class="usa-button {{ modifier }}" aria-disabled="true">aria-disabled</button>
-    {% endif %}
+    <button type="{{ type }}" class="usa-button {{ modifier }}" aria-disabled="true">aria-disabled</button>
     <button type="{{ type }}" class="usa-button {{ modifier }} usa-button--unstyled">Unstyled button</button>
   {% endif %}
 {% endif %}
 
 {% if 'usa-button--outline usa-button--inverse' in modifier %}
   </div>
-{% endif %}
+{% endif %}
diff --git a/packages/usa-character-count/src/usa-character-count.stories.js b/packages/usa-character-count/src/usa-character-count.stories.js
@@ -2,8 +2,24 @@ import Component from "./usa-character-count.twig";
 
 export default {
   title: "Components/Form Inputs/Character Count",
+  argTypes: {
+    disabled_state: {
+      name: "Disabled state",
+      control: { type: "radio" },
+      options: ["none", "disabled", "aria-disabled"],
+    },
+  },
 };
 
 const Template = (args) => Component(args);
 
 export const CharacterCount = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled_state: "disabled",
+};
+export const AriaDisabled = Template.bind({});
+AriaDisabled.args = {
+  disabled_state: "aria-disabled",
+};
diff --git a/packages/usa-character-count/src/usa-character-count.twig b/packages/usa-character-count/src/usa-character-count.twig
@@ -8,7 +8,10 @@
         id="with-hint-input"
         maxlength="25"
         name="with-hint-input"
-        aria-describedby="with-hint-input-info with-hint-input-hint">
+        aria-describedby="with-hint-input-info with-hint-input-hint"
+        {% if disabled_state == 'disabled' %} disabled {%- endif %}
+        {% if disabled_state == 'aria-disabled' %} aria-disabled="true" {%- endif %}
+      >
     </div>
     <span id="with-hint-input-info" class="usa-character-count__message">You can enter up to 25 characters</span>
   </div>
@@ -25,7 +28,10 @@
         maxlength="50"
         name="with-hint-textarea"
         rows="5"
-        aria-describedby="with-hint-textarea-info with-hint-textarea-hint"></textarea>
+        aria-describedby="with-hint-textarea-info with-hint-textarea-hint"
+        {% if disabled_state == 'disabled' %} disabled {%- endif %}
+        {% if disabled_state == 'aria-disabled' %} aria-disabled="true" {%- endif %}
+        ></textarea>
     </div>
     <span id="with-hint-textarea-info" class="usa-character-count__message">You can enter up to 50 characters</span>
   </div>

diff --git a/packages/usa-checkbox/src/styles/_usa-checkbox.scss b/packages/usa-checkbox/src/styles/_usa-checkbox.scss
@@ -21,6 +21,7 @@
       cursor: not-allowed;
     }
     @include format-label {
+      color: color($theme-color-disabled-text);
       cursor: not-allowed;
     }
   }

diff --git a/packages/usa-checkbox/src/usa-checkbox--tile.twig b/packages/usa-checkbox/src/usa-checkbox--tile.twig
@@ -2,7 +2,16 @@
   <fieldset class="usa-fieldset">
     <legend class="usa-legend">Select any historical figure</legend>
     <div class="usa-checkbox">
-      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked {% if aria_disabled == true %}aria-disabled="true"{% endif %}>
+      <input
+        class="usa-checkbox__input usa-checkbox__input--tile"
+        id="check-historical-truth-2"
+        type="checkbox"
+        name="historical-figures-2"
+        value="sojourner-truth"
+        checked
+        {% if disabled_state == "disabled" %}disabled{% endif %} 
+        {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}
+      >
       <label class="usa-checkbox__label" for="check-historical-truth-2">
         Sojourner Truth
         <span class="usa-checkbox__label-description">
@@ -11,15 +20,37 @@
       </label>
     </div>
     <div class="usa-checkbox">
-      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2" type="checkbox" name="historical-figures-2" value="frederick-douglass" {% if aria_disabled == true %}aria-disabled="true"{% endif %}>
+      <input
+        class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2"
+        type="checkbox"
+        name="historical-figures-2"
+        value="frederick-douglass"
+        {% if disabled_state == "disabled" %}disabled{% endif %} 
+        {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}
+      >
       <label class="usa-checkbox__label" for="check-historical-douglass-2">Frederick Douglass</label>
     </div>
     <div class="usa-checkbox">
-      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2" type="checkbox" name="historical-figures-2" value="booker-t-washington" {% if aria_disabled == true %}aria-disabled="true"{% endif %}>
+      <input
+        class="usa-checkbox__input usa-checkbox__input--tile"
+        id="check-historical-washington-2"
+        type="checkbox"
+        name="historical-figures-2"
+        value="booker-t-washington"
+        {% if disabled_state == "disabled" %}disabled{% endif %} 
+        {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}
+      >
       <label class="usa-checkbox__label" for="check-historical-washington-2">Booker T. Washington</label>
     </div>
     <div class="usa-checkbox">
-      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-carver-2" type="checkbox" name="historical-figures-2"  value="george-washington-carver" disabled>
+      <input
+        class="usa-checkbox__input usa-checkbox__input--tile"
+        id="check-historical-carver-2"
+        type="checkbox"
+        name="historical-figures-2"
+        value="george-washington-carver"
+        disabled
+      >
       <label class="usa-checkbox__label" for="check-historical-carver-2">George Washington Carver</label>
     </div>
   </fieldset>

diff --git a/packages/usa-checkbox/src/usa-checkbox.stories.js b/packages/usa-checkbox/src/usa-checkbox.stories.js
@@ -1,27 +1,49 @@
 import Component from "./usa-checkbox.twig";
-import Tile from "./usa-checkbox--tile.twig";
+import TileComponent from "./usa-checkbox--tile.twig";
 import TestComponent from "./test/test-patterns/test-usa-checkbox.twig";
 
 export default {
   title: "Components/Form Inputs/Checkbox",
   argTypes: {
-    aria_disabled: {
-      control: { type: "boolean" },
-      defaultValue: false,
-      name: "aria-disabled",
+    disabled_state: {
+      name: "Disabled state",
+      control: { type: "radio" },
+      options: ["none", "disabled", "aria-disabled"],
     },
   },
 };
 
 const Template = (args) => Component(args);
-const TileTemplate = (args) => Tile(args);
+const TileTemplate = (args) => TileComponent(args);
 const TestTemplate = (args) => TestComponent(args);
 
 export const Default = Template.bind({});
-export const CheckboxTile = TileTemplate.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled_state: "disabled",
+};
+
+export const AriaDisabled = Template.bind({});
+AriaDisabled.args = {
+  disabled_state: "aria-disabled",
+};
+
+export const Tile = TileTemplate.bind({});
+
+export const DisabledTile = TileTemplate.bind({});
+DisabledTile.args = {
+  disabled_state: "disabled",
+};
+
+export const AriaDisabledTile = TileTemplate.bind({});
+AriaDisabledTile.args = {
+  disabled_state: "aria-disabled",
+};
+
 export const Test = TestTemplate.bind({});
 Test.argTypes = {
-  aria_disabled: {
+  disabled_state: {
     table: { disable: true },
   },
 };