chore(merge): 2.17.4 Spring 22 ➡️ Summer 22 (#5017)

Author: Dottenpixel

RELEASENOTES.general.md

@@ -5,6 +5,8 @@
 
 - Removed `&_` shorthand from numerous selectors in SCSS files
 
+## 2.17.4 - February 4, 2022
+
 ## 2.17.3 - January 27, 2022
 
 ## 2.17.2 - January 20, 2022

RELEASENOTES.md

@@ -23,13 +23,21 @@
 #### Added
 - Added annotations for tile board CSS classes.
 
-## Release 2.17.3 - January 27, 2022
+## Release 2.17.4 - February 4, 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/_config.scss

@@ -9,7 +9,7 @@
 ///
 /// @type String
 /// @access private
-$app-version: "2.17.3";
+$app-version: "2.17.4";
 
 /// Debug mode (uncomment to activate)
 /// Turn on to output deprecation warnings during development

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;
+}