Merge tag 'v2.17.4' into spring-22-opensource

Dottenpixel · Dottenpixel · commit 3d221b06de2d · 2022-02-11T18:26:33.000-08:00
2.17.4
diff --git a/RELEASENOTES.general.md b/RELEASENOTES.general.md
@@ -1,6 +1,8 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- On release, add general notes here. In time the legacy release notes will be add to this -->
 
+## 2.17.4 - February 4, 2022
+
 ## 2.17.3 - January 27, 2022
 
 ## 2.17.2 - January 20, 2022
diff --git a/RELEASENOTES.md b/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 - 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.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "CSS"
   ],
   "homepage": "https://lightningdesignsystem.com",
-  "version": "2.17.3",
+  "version": "2.17.4",
   "author": "Salesforce",
   "bugs": {
     "url": "https://github.com/salesforce-ux/design-system/issues"
diff --git a/ui/_config.scss b/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
diff --git a/ui/components/checkbox/RELEASENOTES.md b/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
 
diff --git a/ui/components/checkbox/base/_index.scss b/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
   }
 
   /**
diff --git a/ui/components/checkbox/base/_touch.scss b/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 {
diff --git a/ui/components/checkbox/base/example.jsx b/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',
diff --git a/ui/components/form-element/base/_index.scss b/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;
   }
 }
diff --git a/ui/components/welcome-mat/RELEASENOTES.md b/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
diff --git a/ui/components/welcome-mat/base/_index.scss b/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;
+}

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@`
`46`	`46`	`// Force radios and checkboxes to be on own line when there are multiples in a group`
`47`	`47`	`.slds-radio,`
`48`	`48`	`.slds-checkbox {`
`49`		`- display: block;`
	`49`	`+ display: flex;`
`50`	`50`	`margin-top: $spacing-xx-small;`
`51`	`51`	`}`
`52`	`52`	`}`