From f42902c4f55b37ce9de59457635571d16384eb5e Mon Sep 17 00:00:00 2001
From: Austin Turner <paustint@gmail.com>
Date: Sun, 22 Sep 2024 10:20:19 -0600
Subject: [PATCH] fix(radio): fix typo in docs

change documentation to refer to correct class name `slds-required` instead of `required`
---
 ui/components/checkbox-toggle/docs.mdx | 4 ++--
 ui/components/checkbox/_doc.scss       | 4 ++--
 ui/components/checkbox/docs.mdx        | 4 ++--
 ui/components/radio-group/docs.mdx     | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/components/checkbox-toggle/docs.mdx b/ui/components/checkbox-toggle/docs.mdx
index 0ebaead6eb..24c24084fa 100644
--- a/ui/components/checkbox-toggle/docs.mdx
+++ b/ui/components/checkbox-toggle/docs.mdx
@@ -28,9 +28,9 @@ Groups of checkboxes should be marked up using the fieldset and legend element.
 
 Custom checkboxes are created by applying the `.slds-checkbox` class to a `<label>` element. To remain accessible to all user agents, place `<input>` with `type="checkbox"` inside the `<label>` element. The `<input>` is then visually hidden, and the styling is placed on a span with the `.slds-checkbox_faux` class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with `.slds-form-element__label` contains the label text.
 
-When a single checkbox is required, `<div class="slds-checkbox">` should get `<abbr class="required" title="required">*</abbr>` added to the DOM, directly before the `<input type="checkbox" />` for visual indication that the checkbox is required.
+When a single checkbox is required, `<div class="slds-checkbox">` should get `<abbr class="slds-required" title="required">*</abbr>` added to the DOM, directly before the `<input type="checkbox" />` for visual indication that the checkbox is required.
 
-When a checkbox group is required, the `<fieldset>` should receive the class `.slds-is-required`. The `<legend>` should then get `<abbr class="required" title="required">*</abbr>` added to the DOM for visual indication that the checkbox group is required.
+When a checkbox group is required, the `<fieldset>` should receive the class `.slds-is-required`. The `<legend>` should then get `<abbr class="slds-required" title="required">*</abbr>` added to the DOM for visual indication that the checkbox group is required.
 
 As SLDS checkboxes rely on the `:checked` pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input.
 
diff --git a/ui/components/checkbox/_doc.scss b/ui/components/checkbox/_doc.scss
index 377527dbd2..04a37502f7 100644
--- a/ui/components/checkbox/_doc.scss
+++ b/ui/components/checkbox/_doc.scss
@@ -23,13 +23,13 @@
  * A second span with `.slds-form-element__label` contains the label text.
  *
  * When a single checkbox is required, `<div class="slds-checkbox">` should
- * get `<abbr class="required" title="required">*</abbr>` added to the DOM,
+ * get `<abbr class="slds-required" title="required">*</abbr>` added to the DOM,
  * directly before the `<input type="checkbox" />` for visual indication
  * that the checkbox is required.
  *
  * When a checkbox group is required, the `<fieldset>` should receive the
  * class `.slds-is-required`. The `<legend>` should then get
- * `<abbr class="required" title="required">*</abbr>` added to the DOM for
+ * `<abbr class="slds-required" title="required">*</abbr>` added to the DOM for
  * visual indication that the checkbox group is required.
  *
  * As SLDS checkboxes rely on the :checked psuedo selector, and the
diff --git a/ui/components/checkbox/docs.mdx b/ui/components/checkbox/docs.mdx
index f9149fef6e..7734ecff28 100644
--- a/ui/components/checkbox/docs.mdx
+++ b/ui/components/checkbox/docs.mdx
@@ -24,9 +24,9 @@ Groups of checkboxes should be marked up using the fieldset and legend element.
 
 Custom checkboxes are created by applying the `.slds-checkbox` class to a `<label>` element. To remain accessible to all user agents, place `<input>` with `type="checkbox"` inside the `<label>` element. The `<input>` is then visually hidden, and the styling is placed on a span with the `.slds-checkbox_faux` class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with `.slds-form-element__label` contains the label text.
 
-When a single checkbox is required, `<div class="slds-checkbox">` should get `<abbr class="required" title="required">*</abbr>` added to the DOM, directly before the `<input type="checkbox" />` for visual indication that the checkbox is required.
+When a single checkbox is required, `<div class="slds-checkbox">` should get `<abbr class="slds-required" title="required">*</abbr>` added to the DOM, directly before the `<input type="checkbox" />` for visual indication that the checkbox is required.
 
-When a checkbox group is required, the `<fieldset>` should receive the class `.slds-is-required`. The `<legend>` should then get `<abbr class="required" title="required">*</abbr>` added to the DOM for visual indication that the checkbox group is required.
+When a checkbox group is required, the `<fieldset>` should receive the class `.slds-is-required`. The `<legend>` should then get `<abbr class="slds-required" title="required">*</abbr>` added to the DOM for visual indication that the checkbox group is required.
 
 As SLDS checkboxes rely on the `:checked` pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input.
 
diff --git a/ui/components/radio-group/docs.mdx b/ui/components/radio-group/docs.mdx
index 6c384c2ce9..d0936cee38 100644
--- a/ui/components/radio-group/docs.mdx
+++ b/ui/components/radio-group/docs.mdx
@@ -25,7 +25,7 @@ Groups of radio buttons should be marked up using the fieldset and legend elemen
 
 Custom radio buttons are created by applying the `.slds-radio` class to a `<label>` element. To remain accessible to all user agents, place an `<input>` with `type="radio"` inside the `<label>` element. The `<input>` is then visually hidden, and the styling is placed on a span with the `.slds-radio_faux` class. The styling of the span changes based on whether the radio button is selected or focused by using a pseudo-element. A second span with `.slds-form-element__label` contains the label text.
 
-When a radio group is required, the `<fieldset>` should receive the class `.slds-is-required`. The `<legend>` should then get `<abbr class="required" title="required">*</abbr>` added to the DOM for visual indication that the radio group is required.
+When a radio group is required, the `<fieldset>` should receive the class `.slds-is-required`. The `<legend>` should then get `<abbr class="slds-required" title="required">*</abbr>` added to the DOM for visual indication that the radio group is required.
 
 When disabling a radio button, either the entire group must be disabled or if only some radio buttons are disabled, then the checked radio button cannot be disabled.