Merge pull request #881 from trimble-oss/origin/dev/enowak/style-guid…

…e-updates Style Guide Updates
trimble-oss · Jul 17, 2024 · 6cd5167 · 6cd5167
2 parents 1f268fb + cdf492f
commit 6cd5167
Show file tree

Hide file tree

Showing 13 changed files with 147 additions and 98 deletions.
diff --git a/content/components/in-field/buttons/accessibility.md b/content/components/in-field/buttons/accessibility.md
@@ -11,11 +11,14 @@ tags: [in-field, accessibility]
 
 ## Accessibility
 
-- Disabled buttons should have `aria-disabled` set to true.
-- When placing a button on a color other than standard background colors (Gray Light or White), make sure the colors of all states (except for disabled) still meet [color contrast accessibility standards](/foundations/accessibility/).
 
-<style>
-body[data-url*="/buttons/"] #menu-left a[href*=radio-buttons] {
-  background-color: transparent !important;
-}
-</style>
+- Buttons have role of `button`. Using a native HTML `button` or `input type="submit"` element is a better choice than creating a custom ARIA button.
+- Buttons should have accessible labels. By default, the accessible name is computed from any text content inside the button element.
+- A button should be triggered by pressing "Spacebar," "Enter," or "Return."
+- The mouse cursor should be a hand icon (`cursor: pointer`).
+- Disabled buttons should have `aria-disabled` set to `true`.
+- When placing a button on a color other than standard background colors (Gray Light or White), make sure the colors of all states (except for disabled) still meet [color contrast accessibility standards](/foundations/accessibility/).
+- **The use of disabled buttons is discouraged.** Disabled buttons are not required to meet color contrast requirements according to WCAG–Inactive User Interface Components; they make it difficult for users to see and are ignored by assistive technologies such as screen readers. Additionally, disabled buttons provide no feedback on why the user cannot submit the information or what to fix that will enable the disabled button(s). Only use a button in a disabled state when an option is not available:
+  - When an item or product is unavailable;
+  - A request is actively being processed, and a duplicate request will be submitted;
+  - When the user is editing an existing record, but no changes have been made.
diff --git a/content/components/in-field/buttons/styles.md b/content/components/in-field/buttons/styles.md
@@ -77,6 +77,14 @@ All buttons (including icon buttons) should have the following states:
 {class="table table-bordered table-thead-light"}
 <!-- prettier-ignore-end -->
 
+#### Disabled Buttons
+
+**The use of disabled buttons is highly discouraged.** There are a few acceptable uses:
+
+- When an option is unavailable, such as an item or product.
+- The button has been clicked, and the system is processing the initial request. The button can be disabled to prevent the user from trying to submit a duplicate request and hitting the server multiple times.
+- When a user is editing a form, but the application has not detected any changes made by the user.
+
 ### OEM Branding
 
 - Primary and secondary buttons may be branded for OEM colors.

diff --git a/content/components/mobile/buttons/accessibility.md b/content/components/mobile/buttons/accessibility.md
@@ -17,3 +17,7 @@ tags: [mobile, accessibility]
 - The mouse cursor should be a hand icon (`cursor: pointer`).
 - Disabled buttons should have `aria-disabled` set to `true`.
 - When placing a button on a color other than standard background colors (Gray Light or White), make sure the colors of all states (except for disabled) still meet [color contrast accessibility standards](/foundations/accessibility/).
+- **The use of disabled buttons is discouraged.** Disabled buttons are not required to meet color contrast requirements according to WCAG–Inactive User Interface Components; they make it difficult for users to see and are ignored by assistive technologies such as screen readers. Additionally, disabled buttons provide no feedback on why the user cannot submit the information or what to fix that will enable the disabled button(s). Only use a button in a disabled state when an option is not available:
+  - When an item or product is unavailable;
+  - A request is actively being processed, and a duplicate request will be submitted;
+  - When the user is editing an existing record, but no changes have been made.
diff --git a/content/components/mobile/buttons/styles.md b/content/components/mobile/buttons/styles.md
@@ -48,6 +48,14 @@ FABs can attach to top or bottom of app bars and the edge of some components.
 
 {{< img src="/img/mobile/button-fab-placement.svg" dark="/img/mobile/button-fab-placement-dark.svg" width="960" height="489" alt="Floating Action Button Placement" >}}
 
+### Disabled Buttons
+
+**The use of disabled buttons is highly discouraged.** There are a few acceptable uses:
+
+- When an option is unavailable, such as an item or product.
+- The button has been clicked, and the system is processing the initial request. The button can be disabled to prevent the user from trying to submit a duplicate request and hitting the server multiple times.
+- When a user is editing a form, but the application has not detected any changes made by the user.
+
 ### Editorial
 
 - All buttons in the Modus Design System employ **sentence case**.

diff --git a/content/components/web/buttons/accessibility.md b/content/components/web/buttons/accessibility.md
@@ -22,3 +22,8 @@ tags: [accessibility]
 - Disabled buttons should have `aria-disabled` set to `true`.
 - When placing a button on a color other than standard background colors (Gray Light or White), make sure the colors of all states (except for disabled) still meet [color contrast accessibility standards](/foundations/accessibility/).
 - When an action cannot be undone and/or is potentially destructive, use critical action buttons which require users to click and hold the button for a defined amount of time.
+- **The use of disabled buttons is discouraged.** Disabled buttons are not required to meet color contrast requirements according to WCAG–Inactive User Interface Components; they make it difficult for users to see and are ignored by assistive technologies such as screen readers. Additionally, disabled buttons provide no feedback on why the user cannot submit the information or what to fix that will enable the disabled button(s). Only use a button in a disabled state when an option is not available:
+  - When an item or product is unavailable;
+  - A request is actively being processed, and a duplicate request will be submitted;
+  - When the user is editing an existing record, but no changes have been made.
+
diff --git a/content/components/web/buttons/styles.md b/content/components/web/buttons/styles.md
@@ -472,6 +472,15 @@ There are three types of icon-only buttons:
 
 Icon button state colors may vary based on product. Always make sure the colors of all states (except for disabled) meet [color contrast accessibility standards](/foundations/accessibility/).
 
+#### Disabled Buttons
+
+**The use of disabled buttons is highly discouraged.** There are a few acceptable uses:
+
+- When an option is unavailable, such as an item or product.
+- The button has been clicked, and the system is processing the initial request. The button can be disabled to prevent the user from trying to submit a duplicate request and hitting the server multiple times.
+- When a user is editing a form, but the application has not detected any changes made by the user.
+
+
 ### Editorial
 
 - All buttons in the Modus Design System employ **sentence case**.

diff --git a/content/components/web/inputs/styles.md b/content/components/web/inputs/styles.md
@@ -73,6 +73,25 @@ There are two sizes of input fields defined:
   </tbody>
 </table>
 
+### Colors
+
+<!-- prettier-ignore-start -->
+| Element          | Property                 | Color                                                                   |
+| ---------------- | ------------------------ | ----------------------------------------------------------------------- |
+| Label            | Text                     | {{< color-preview nameL=" " hexL="#464b52" nameD=" " hexD="#b7b9c3" >}} |
+| Input            | Text                     | {{< color-preview nameL=" " hexL="#464b52" nameD=" " hexD="#ffffff" >}} |
+|                  | Placeholder              | {{< color-preview nameL=" " hexL="#b7b9c3" nameD=" " hexD="#7d808d" >}} |
+|                  | Background               | {{< color-preview nameL=" " hexL="#ffffff" nameD=" " hexD="#171c1e" >}} |
+|                  | Border                   | {{< color-preview nameL=" " hexL="#e0e1e9" nameD=" " hexD="#464b52" >}} |
+|                  | Border                   | {{< color-preview nameL=" " hexL="#6a6e79" nameD=" " hexD="#6a6e79" >}} |
+| Input (Focus)    | Border                   | {{< color-preview nameL=" " hexL="#217cbb" nameD=" " hexD="#019AEB" >}} |
+| Input (Valid)    | Border                   | {{< color-preview nameL=" " hexL="#006638" nameD=" " hexD="#1e8a44" >}} |
+| Input (Invalid)  | Border                   | {{< color-preview nameL=" " hexL="#da212c" nameD=" " hexD="#da212c" >}} |
+| Input (Disabled) | Background (40% opacity) | {{< color-preview nameL=" " hexL="#f1f1f6" nameD=" " hexD="#171c1e" >}} |
+| Input (Readonly) | Background               | {{< color-preview nameL=" " hexL="#e0e1e9" nameD=" " hexD="#353a40" >}} |
+{class="table table-sm table-bordered border border-opacity-50" id="table-colors"}
+<!-- prettier-ignore-end -->
+
 ### Behaviors
 
 <div class="guide-example-block d-inline-block">
@@ -181,21 +200,4 @@ There are two sizes of input fields defined:
 - Use multi-step forms when necessary by breaking up inputs into distinct categories.
 - Provide clear and obvious action buttons. Form submission [buttons](/components/web/buttons/) should be primary.
 
-## Colors
 
-<!-- prettier-ignore-start -->
-| Element          | Property                 | Color                                                                   |
-| ---------------- | ------------------------ | ----------------------------------------------------------------------- |
-| Label            | Text                     | {{< color-preview nameL=" " hexL="#464b52" nameD=" " hexD="#b7b9c3" >}} |
-| Input            | Text                     | {{< color-preview nameL=" " hexL="#464b52" nameD=" " hexD="#ffffff" >}} |
-|                  | Placeholder              | {{< color-preview nameL=" " hexL="#b7b9c3" nameD=" " hexD="#7d808d" >}} |
-|                  | Background               | {{< color-preview nameL=" " hexL="#ffffff" nameD=" " hexD="#171c1e" >}} |
-|                  | Border                   | {{< color-preview nameL=" " hexL="#e0e1e9" nameD=" " hexD="#464b52" >}} |
-|                  | Border                   | {{< color-preview nameL=" " hexL="#6a6e79" nameD=" " hexD="#6a6e79" >}} |
-| Input (Focus)    | Border                   | {{< color-preview nameL=" " hexL="#217cbb" nameD=" " hexD="#019AEB" >}} |
-| Input (Valid)    | Border                   | {{< color-preview nameL=" " hexL="#006638" nameD=" " hexD="#1e8a44" >}} |
-| Input (Invalid)  | Border                   | {{< color-preview nameL=" " hexL="#da212c" nameD=" " hexD="#da212c" >}} |
-| Input (Disabled) | Background (40% opacity) | {{< color-preview nameL=" " hexL="#f1f1f6" nameD=" " hexD="#171c1e" >}} |
-| Input (Readonly) | Background               | {{< color-preview nameL=" " hexL="#e0e1e9" nameD=" " hexD="#353a40" >}} |
-{class="table table-sm table-bordered border border-opacity-50" id="table-colors"}
-<!-- prettier-ignore-end -->
diff --git a/content/components/web/messages/styles.md b/content/components/web/messages/styles.md
@@ -45,16 +45,7 @@ popoverCSSInspector: true
 - Fills the width of its container.
 - Should have an accompanying icon to the left of the message text. When the text spans multiple lines, the icon should remain aligned to the top.
 
-### Behaviors
-
-- Messages should remain static on the page. They should not be dismissible.
-
-### Editorial
-
-- Messages should be brief, full sentences, with proper punctuation.
-- They should provide the user with helpful, contextual information about a possible action or a set of data.
-
-## Colors
+### Colors
 
 <!-- prettier-ignore-start -->
 | Element   | Property   | Color                                                                                                |
@@ -65,3 +56,14 @@ popoverCSSInspector: true
 |           | Background | {{< color-preview nameL="Light Gray" hexL="#f1f1f6" nameD="Gray 9" hexD="#353a40" >}}                |
 {class="table table-sm table-bordered border border-opacity-50"}
 <!-- prettier-ignore-end -->
+
+### Behaviors
+
+- Messages should remain static on the page. They should not be dismissible.
+
+### Editorial
+
+- Messages should be brief, full sentences, with proper punctuation.
+- They should provide the user with helpful, contextual information about a possible action or a set of data.
+
+
diff --git a/content/components/web/sliders/styles.md b/content/components/web/sliders/styles.md
@@ -38,13 +38,7 @@ popoverCSSInspector: true
   </div>
 </div>
 
-### Behaviors
-
-- Adjust a slider’s value(s) by clicking and dragging its handle(s), or by clicking anywhere on its bar.
-- Hovering over an active slider’s handle will change the default cursor to the grab cursor; clicking will change it to the grab cursor.
-- Changes made with sliders are immediate.
-
-## Colors
+### Colors
 
 <!-- prettier-ignore-start -->
 | Element               | Property   | Color                                                                                           |
@@ -54,3 +48,11 @@ popoverCSSInspector: true
 | Label Text (Optional) | Color      | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD="White" hexD="#ffffff" >}}          |
 {class="table table-sm table-bordered border border-opacity-50"}
 <!-- prettier-ignore-end -->
+
+
+### Behaviors
+
+- Adjust a slider’s value(s) by clicking and dragging its handle(s), or by clicking anywhere on its bar.
+- Hovering over an active slider’s handle will change the default cursor to the grab cursor; clicking will change it to the grab cursor.
+- Changes made with sliders are immediate.
+
diff --git a/content/components/web/spinners/styles.md b/content/components/web/spinners/styles.md
@@ -27,6 +27,21 @@ tags: [styles]
   </div>
 </div>
 
+### Colors
+
+<!-- prettier-ignore-start -->
+| Element   | Property        | Color                                                                                           |
+| --------- | --------------- | ----------------------------------------------------------------------------------------------- |
+| Default   | Spinner         | {{< color-preview nameL="Trimble Blue" hexL="#0063a3" nameD="Dark Mode Blue" hexD="#019aeb" >}} |
+|           | Text (Optional) | {{< color-preview nameL="Trimble Blue" hexL="#0063a3" nameD="Gray Light" hexD="#f1f1f1" >}}     |
+| Secondary | Spinner         | {{< color-preview nameL="Gray 6" hexL="#6A6E79" nameD="Gray Light" hexD="#f1f1f1" >}}           |
+|           | Text (Optional) | {{< color-preview nameL="Gray 6" hexL="#6A6E79" nameD="Gray Light" hexD="#f1f1f1" >}}           |
+| Tertiary  | Spinner         | {{< color-preview nameL="Gray 1" hexL="#CBCDD6" nameD="Gray 4" hexD="#90939f" >}}               |
+|           | Text (Optional) | {{< color-preview nameL="Gray 1" hexL="#CBCDD6" nameD="Gray Light" hexD="#f1f1f1" >}}           |
+{class="table table-sm table-bordered border border-opacity-50"}
+<!-- prettier-ignore-end -->
+
+
 ### Behaviors
 
 - A spinner spins indefinitely until loading is complete.
@@ -58,16 +73,3 @@ tags: [styles]
 }
 </style>
 
-## Colors
-
-<!-- prettier-ignore-start -->
-| Element   | Property        | Color                                                                                           |
-| --------- | --------------- | ----------------------------------------------------------------------------------------------- |
-| Default   | Spinner         | {{< color-preview nameL="Trimble Blue" hexL="#0063a3" nameD="Dark Mode Blue" hexD="#019aeb" >}} |
-|           | Text (Optional) | {{< color-preview nameL="Trimble Blue" hexL="#0063a3" nameD="Gray Light" hexD="#f1f1f1" >}}     |
-| Secondary | Spinner         | {{< color-preview nameL="Gray 6" hexL="#6A6E79" nameD="Gray Light" hexD="#f1f1f1" >}}           |
-|           | Text (Optional) | {{< color-preview nameL="Gray 6" hexL="#6A6E79" nameD="Gray Light" hexD="#f1f1f1" >}}           |
-| Tertiary  | Spinner         | {{< color-preview nameL="Gray 1" hexL="#CBCDD6" nameD="Gray 4" hexD="#90939f" >}}               |
-|           | Text (Optional) | {{< color-preview nameL="Gray 1" hexL="#CBCDD6" nameD="Gray Light" hexD="#f1f1f1" >}}           |
-{class="table table-sm table-bordered border border-opacity-50"}
-<!-- prettier-ignore-end -->
diff --git a/content/components/web/switches/styles.md b/content/components/web/switches/styles.md
@@ -72,6 +72,26 @@ popoverCSSInspector: true
 </div>
 </div>
 
+### Colors
+
+<!-- prettier-ignore-start -->
+| Element      | Property         | Color                                                                                             |
+| ------------ | ---------------- | ------------------------------------------------------------------------------------------------- |
+| Toggle       |                  | {{< color-preview nameL="White" hexL="#ffffff" nameD="White" hexD="#ffffff" >}}                   |
+| Label        |                  | {{< color-preview nameL="Gray 8" hexL="#464B52" nameD="Gray 2" hexD="#B7B9C3" >}}                 |
+| Default/On   | Background       | {{< color-preview nameL="Blue Light" hexL="#217CBB" nameD="Dark Mode Blue" hexD="#019AEB" >}}     |
+| Default/Off  | Background       | {{< color-preview nameL="Gray 4" hexL="#90939F" nameD="Gray 4" hexD="#90939F" >}}                 |
+| Focused/On   | Background       | {{< color-preview nameL="Trimble Blue" hexL="#0063A3" nameD="Dark Mode Blue" hexD="#019aeb" >}}   |
+| Focused/Off  | Background       | {{< color-preview nameL="Gray 4" hexL="#90939F" nameD="Gray 4" hexD="#90939F" >}}                 |
+|              | Border           | {{< color-preview nameL="Blue Light" hexL="#217CBB" nameD="Dark Mode Blue" hexD="#019aeb" >}}     |
+| Hover/On     | Background       | {{< color-preview nameL="Trimble Blue" hexL="#0063A3" nameD="Dark Mode Blue" hexD="#019aeb" >}}   |
+| Hover/Off    | Background       | {{< color-preview nameL="Gray 4" hexL="#90939F" nameD="Gray 4" hexD="#90939F" >}}                 |
+|              | Border           | {{< color-preview nameL="Blue Light" hexL="#217CBB" nameD="Dark Mode Blue" hexD="#019AEB" >}}     |
+| Disabled/On  | Background (30%) | {{< color-preview nameL="Trimble Blue" hexL="#0063A380" nameD="Dark Mode Blue" hexD="#019aeb" >}} |
+| Disabled/Off | Background (30%) | {{< color-preview nameL="Gray 4" hexL="#90939F80" nameD="Gray 4" hexD="#90939F" >}}               |
+{class="table table-bordered table-sm table-colors"}
+<!-- prettier-ignore-end -->
+
 ### Behaviors
 
 - Avoid changing the label text based on on and off state.
@@ -111,26 +131,6 @@ popoverCSSInspector: true
   </tr>
 </table>
 
-### Colors
-
-<!-- prettier-ignore-start -->
-| Element      | Property         | Color                                                                                             |
-| ------------ | ---------------- | ------------------------------------------------------------------------------------------------- |
-| Toggle       |                  | {{< color-preview nameL="White" hexL="#ffffff" nameD="White" hexD="#ffffff" >}}                   |
-| Label        |                  | {{< color-preview nameL="Gray 8" hexL="#464B52" nameD="Gray 2" hexD="#B7B9C3" >}}                 |
-| Default/On   | Background       | {{< color-preview nameL="Blue Light" hexL="#217CBB" nameD="Dark Mode Blue" hexD="#019AEB" >}}     |
-| Default/Off  | Background       | {{< color-preview nameL="Gray 4" hexL="#90939F" nameD="Gray 4" hexD="#90939F" >}}                 |
-| Focused/On   | Background       | {{< color-preview nameL="Trimble Blue" hexL="#0063A3" nameD="Dark Mode Blue" hexD="#019aeb" >}}   |
-| Focused/Off  | Background       | {{< color-preview nameL="Gray 4" hexL="#90939F" nameD="Gray 4" hexD="#90939F" >}}                 |
-|              | Border           | {{< color-preview nameL="Blue Light" hexL="#217CBB" nameD="Dark Mode Blue" hexD="#019aeb" >}}     |
-| Hover/On     | Background       | {{< color-preview nameL="Trimble Blue" hexL="#0063A3" nameD="Dark Mode Blue" hexD="#019aeb" >}}   |
-| Hover/Off    | Background       | {{< color-preview nameL="Gray 4" hexL="#90939F" nameD="Gray 4" hexD="#90939F" >}}                 |
-|              | Border           | {{< color-preview nameL="Blue Light" hexL="#217CBB" nameD="Dark Mode Blue" hexD="#019AEB" >}}     |
-| Disabled/On  | Background (30%) | {{< color-preview nameL="Trimble Blue" hexL="#0063A380" nameD="Dark Mode Blue" hexD="#019aeb" >}} |
-| Disabled/Off | Background (30%) | {{< color-preview nameL="Gray 4" hexL="#90939F80" nameD="Gray 4" hexD="#90939F" >}}               |
-{class="table table-bordered table-sm table-colors"}
-<!-- prettier-ignore-end -->
-
 ### Editorial
 
 - Avoid acronyms.