fix(checkbox): Align Required Asterisk with Checkbox and Label (#4991)

Author: Alexis Córdova

RELEASENOTES.md

@@ -1,13 +1,21 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- !!! THIS FILE IS AUTO-GENERATED !!! DO NOT EDIT THIS FILE MANUALLY !!! -->
 
-## Release 2.17.3 - January 27, 2022
+## Release 2.17.4 - January 27, 2022
 
 ## Components
 ### [Checkbox](https://www.lightningdesignsystem.com/components/checkbox)
 #### Fixed
 - Checkbox inputs will no longer collapse horizontally when a label with a large amount of text is used.
+- All elements of an individual required checkbox (asterisk, input, and label) are now properly horizontally aligned.
+
+### [Welcome Mat](https://www.lightningdesignsystem.com/components/welcome-mat)
+#### Fixed
+- Centered checkboxes using the new Flexbox layout.
 
+## Release 2.17.3 - January 27, 2022
+
+## Components
 ### [Combobox](https://www.lightningdesignsystem.com/components/combobox)
 ## Fixed
 - Fixed spacing/alignment issue in `.slds-input_faux > span` for select-only combobox without a placeholder.

ui/components/checkbox/RELEASENOTES.md

@@ -4,10 +4,11 @@
 
 <!-- ## [Unreleased] -->
 
-## 2.17.3
+## 2.17.4
 
 ### Fixed
 - Checkbox inputs will no longer collapse horizontally when a label with a large amount of text is used.
+- All elements of an individual required checkbox (asterisk, input, and label) are now properly horizontally aligned.
 
 ## 2.17.0
 

ui/components/checkbox/base/_index.scss

@@ -14,12 +14,12 @@
  * @variant
  */
 .slds-checkbox {
-  display: inline-block;
+  display: inline-flex;
   position: relative;
 
   // When changing checkbox labels to inline-flex (PR #4769), the position of the required asterisk needed to be repositioned
   > .slds-required {
-    vertical-align: super;
+    line-height: 1; // because the required symbol is text, it needs its line-height reset
   }
 
   /**

ui/components/checkbox/base/_touch.scss

@@ -1,9 +1,12 @@
 .slds-checkbox {
 
+  > .slds-required {
+    line-height: inherit;
+  }
+
   .slds-checkbox_faux,
   .slds-checkbox--faux {
     @include square($square-tappable-x-small);
-    flex-shrink: 0; // Contained within flex, we don't want checkbox to shrink
   }
 
   .slds-checkbox__label {

ui/components/checkbox/base/example.jsx

@@ -202,6 +202,34 @@ export let states = [
     label: 'Required',
     element: <Required />
   },
+  {
+    id: 'required-with-long-label',
+    label: 'Required with long label',
+    demoStyles: 'width: 200px',
+    storybookStyles: true,
+    element: (
+      <FormElement>
+        <Checkbox label="When you wake up in the morning, it's a quarter to one, And you want to have a little fun. You brush your teeth, ch ch ch ch, ch ch ch ch. You brush your teeth, ch ch ch ch, ch ch ch ch">
+          <abbr className="slds-required" title="required">
+            *
+          </abbr>
+        </Checkbox>
+      </FormElement>
+    )
+  },
+  {
+    id: 'required-not-form-element-long-label',
+    label: 'Required (Not Form Element) with long label',
+    demoStyles: 'width: 200px',
+    storybookStyles: true,
+    element: (
+      <Checkbox label="When you wake up in the morning, it's a quarter to one, And you want to have a little fun. You brush your teeth, ch ch ch ch, ch ch ch ch. You brush your teeth, ch ch ch ch, ch ch ch ch">
+        <abbr className="slds-required" title="required">
+            *
+        </abbr>
+      </Checkbox>
+    )
+  },
   {
     id: 'required-optional-mix',
     label: 'Required/Optional Combination',

ui/components/form-element/base/_index.scss

@@ -46,7 +46,7 @@
   // Force radios and checkboxes to be on own line when there are multiples in a group
   .slds-radio,
   .slds-checkbox {
-    display: block;
+    display: flex;
     margin-top: $spacing-xx-small;
   }
 }

ui/components/welcome-mat/RELEASENOTES.md

@@ -3,6 +3,11 @@
 # Welcome Mat Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.17.4
+
+### Fixed
+- Centered checkboxes using the new Flexbox layout.
+
 ## 2.16.0
 
 ### Added

ui/components/welcome-mat/base/_index.scss

@@ -230,3 +230,7 @@
     fill: $color-text-inverse;
   }
 }
+
+.slds-welcome-mat .slds-welcome-mat__info-actions .slds-checkbox {
+  justify-content: center;
+}