Revert "feat(checkbox, radio-group): Wrap label text under text (#4769)" (#5019)

Alexis Córdova · web-flow · commit 77daa02841a0 · 2022-02-10T13:37:47.000-08:00
* Revert "feat(checkbox, radio-group): Wrap label text under text (#4769)" This reverts commit e683782. # Conflicts: # ui/components/checkbox/RELEASENOTES.md # ui/components/checkbox/base/_index.scss # ui/components/checkbox/base/example.jsx # ui/components/form-element/base/_index.scss # ui/components/radio-group/RELEASENOTES.md * Update release notes * Re-add radio examples * Revert mobile checkbox style changes * Revert Welcome Mat changes * Update examples
diff --git a/RELEASENOTES.general.md b/RELEASENOTES.general.md
@@ -1,7 +1,7 @@
 <!-- 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.5 - February 7, 2022
+## 2.17.5 - February 10, 2022
 
 - Updated design token `COLOR_BACKGROUND_DESTRUCTIVE_HOVER` so that it is a different color from `COLOR_BACKGROUND_DESTRUCTIVE`
 
diff --git a/RELEASENOTES.md b/RELEASENOTES.md
@@ -1,11 +1,24 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- !!! THIS FILE IS AUTO-GENERATED !!! DO NOT EDIT THIS FILE MANUALLY !!! -->
 
-## Release 2.17.5 - February 7, 2022
+## Release 2.17.5 - February 10, 2022
 
 - Updated design token `COLOR_BACKGROUND_DESTRUCTIVE_HOVER` so that it is a different color from `COLOR_BACKGROUND_DESTRUCTIVE`
 
-## Release 2.17.4 - February 7, 2022
+## Components
+### [Checkbox](https://www.lightningdesignsystem.com/components/checkbox)
+#### Fixed
+- Reverted layout changes originally introduced in 2.17.0
+
+### [Radio Group](https://www.lightningdesignsystem.com/components/radio-group)
+#### Fixed
+- Reverted label layout changes introduced in 2.17.0
+
+### [Welcome Mat](https://www.lightningdesignsystem.com/components/welcome-mat)
+#### Fixed
+- Reverted changes to checkbox layout introduced in 2.17.4
+
+## Release 2.17.4 - February 10, 2022
 
 ## Components
 ### [Checkbox](https://www.lightningdesignsystem.com/components/checkbox)
diff --git a/ui/components/checkbox/RELEASENOTES.md b/ui/components/checkbox/RELEASENOTES.md
@@ -4,6 +4,11 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.17.5
+
+### Fixed
+- Reverted layout changes originally introduced in 2.17.0
+
 ## 2.17.4
 
 ### Fixed
diff --git a/ui/components/checkbox/base/_index.scss b/ui/components/checkbox/base/_index.scss
@@ -14,14 +14,9 @@
  * @variant
  */
 .slds-checkbox {
-  display: inline-flex;
+  display: inline-block;
   position: relative;
 
-  // When changing checkbox labels to inline-flex (PR #4769), the position of the required asterisk needed to be repositioned
-  > .slds-required {
-    line-height: 1; // because the required symbol is text, it needs its line-height reset
-  }
-
   /**
    * @summary Creates a custom styled checkbox
    * @selector .slds-checkbox_faux
@@ -53,13 +48,11 @@
    * @restrict .slds-checkbox label
    */
   .slds-checkbox__label {
-    display: inline-flex;
 
     // When slds-form-element__label is inline with slds-checkbox_faux, display as inline
     .slds-form-element__label {
       display: inline;
-      padding-top: 0;
-      line-height: $line-height-heading;
+      vertical-align: middle;
       font-size: $font-size-3;
     }
   }
diff --git a/ui/components/checkbox/base/_touch.scss b/ui/components/checkbox/base/_touch.scss
@@ -1,12 +1,9 @@
 .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/docs.mdx b/ui/components/checkbox/docs.mdx
@@ -52,7 +52,9 @@ The [form element variant](#Form-Element) accommodates a top level label and add
   {getDisplayElementById(CheckboxExamples.states, 'required')}
 </CodeView>
 
-<CodeView frameOnly frameTitle="Required checkbox example">{getDisplayElementById(CheckboxExamples.states, 'required')}</CodeView>
+<CodeView frameOnly frameTitle="Required checkbox example">
+  {getDisplayElementById(CheckboxExamples.states, 'required')}
+</CodeView>
 
 #### Error
 
@@ -80,12 +82,6 @@ The [form element variant](#Form-Element) accommodates a top level label and add
 
 <CodeView frameOnly frameTitle="Group checkbox example">{getDisplayElementById(CheckboxExamples.examples, 'group')}</CodeView>
 
-##### Group with Wrapping Labels
-
-<CodeView>{getDisplayElementById(CheckboxExamples.examples, 'wrapping-text')}</CodeView>
-
-<CodeView frameOnly frameTitle="Group checkbox with wrapping text example">{getDisplayElementById(CheckboxExamples.examples, 'wrapping-text')}</CodeView>
-
 ##### Required
 
 <CodeView>
@@ -94,11 +90,6 @@ The [form element variant](#Form-Element) accommodates a top level label and add
 
 <CodeView frameOnly frameTitle="Required group checkbox example">{getDisplayElementById(CheckboxExamples.examples, 'group-required')}</CodeView>
 
-##### Required with Wrapping Labels
-<CodeView>{getDisplayElementById(CheckboxExamples.examples, 'wrapping-text-required-group')}</CodeView>
-
-<CodeView frameOnly frameTitle="Required group checkbox with wrapping text example">{getDisplayElementById(CheckboxExamples.examples, 'wrapping-text-required-group')}</CodeView>
-
 ##### Error
 
 <CodeView>
diff --git a/ui/components/form-element/base/_index.scss b/ui/components/form-element/base/_index.scss
@@ -46,8 +46,7 @@
   // Force radios and checkboxes to be on own line when there are multiples in a group
   .slds-radio,
   .slds-checkbox {
-    display: flex;
-    margin-top: $spacing-xx-small;
+    display: block;
   }
 }
 
diff --git a/ui/components/form-element/horizontal/_index.scss b/ui/components/form-element/horizontal/_index.scss
@@ -64,7 +64,6 @@
       float: left;
       max-width: calc(33% - #{$square-icon-utility-medium}); // Removing the width of the icon for when the help-text icon is present
       flex-basis: calc(33% - #{$square-icon-utility-medium}); // Some form element controls are set to display:flex
-      flex-grow: 1; // For IE and Safari which didn't auto expand to the available space
       margin-bottom: 0;
       position: relative;
       z-index: 1;
@@ -100,7 +99,6 @@
         float: none;
         max-width: 100%;
         width: auto;
-        flex-basis: auto; // For IE not taking up the available space
       }
     }
 
@@ -111,7 +109,6 @@
       width: auto;
       max-width: 100%;
       flex-basis: auto;
-      flex-grow: 1;
       float: none;
       position: relative;
       padding-left: 0;
diff --git a/ui/components/radio-group/RELEASENOTES.md b/ui/components/radio-group/RELEASENOTES.md
@@ -4,6 +4,11 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.17.5
+
+### Fixed
+- Reverted label layout changes introduced in 2.17.0
+
 ## 2.17.0
 
 ### Added
diff --git a/ui/components/radio-group/base/_index.scss b/ui/components/radio-group/base/_index.scss
@@ -42,14 +42,9 @@
     transition: border $duration-quickly linear, background-color $duration-quickly linear;
   }
 
-  .slds-radio__label {
-    display: inline-flex;
-  }
-
   .slds-form-element__label {
     display: inline;
-    padding-top: 0;
-    line-height: $line-height-heading;
+    vertical-align: middle;
     font-size: $font-size-3;
   }
 
diff --git a/ui/components/radio-group/docs.mdx b/ui/components/radio-group/docs.mdx
@@ -39,15 +39,6 @@ When disabling a radio button, either the entire group must be disabled or if on
 
 <CodeView>{getDisplayElementById(Base.default)}</CodeView>
 
-## Examples
-
-### With Wrapping Labels
-<CodeView>
-  {getDisplayElementById(Base.examples, 'wrapping-text')}
-</CodeView>
-
-<CodeView frameOnly frameTitle="Example mobile styles for radio groups with wrapping labels">{getDisplayElementById(Base.examples, 'wrapping-text')}</CodeView>
-
 ## States
 
 ### Disabled
@@ -64,21 +55,10 @@ When disabling a radio button, either the entire group must be disabled or if on
 
 <CodeView>{getDisplayElementById(Base.states, 'required')}</CodeView>
 
-<CodeView frameOnly frameTitle="Example mobile styles for required radio groups">{getDisplayElementById(Base.states, 'required')}</CodeView>
-
-### Required with Wrapping Labels
-<CodeView>
-  {getDisplayElementById(Base.examples, 'wrapping-text-required')}
-</CodeView>
-
-<CodeView frameOnly frameTitle="Example mobile styles for required radio groups with wrapping labels">{getDisplayElementById(Base.examples, 'wrapping-text-required')}</CodeView>
-
 ### Error
 
 <CodeView>{getDisplayElementById(Base.states, 'error')}</CodeView>
 
-<CodeView frameOnly frameTitle="Example mobile styles for error radio groups">{getDisplayElementById(Base.states, 'error')}</CodeView>
-
 ### Right to Left
 
 <CodeView>{getDisplayElementById(Base.states, 'rtl')}</CodeView>
diff --git a/ui/components/welcome-mat/RELEASENOTES.md b/ui/components/welcome-mat/RELEASENOTES.md
@@ -3,6 +3,12 @@
 # Welcome Mat Release Notes
 
 <!-- ## [Unreleased] -->
+
+## 2.17.5
+
+### Fixed
+- Reverted changes to checkbox layout introduced in 2.17.4
+
 ## 2.17.4
 
 ### Fixed
diff --git a/ui/components/welcome-mat/base/_index.scss b/ui/components/welcome-mat/base/_index.scss
@@ -230,7 +230,3 @@
     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,8 +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: flex;`
`50`		`- margin-top: $spacing-xx-small;`
	`49`	`+ display: block;`
`51`	`50`	`}`
`52`	`51`	`}`
`53`	`52`
Original file line number	Diff line number	Diff line change
`@@ -42,14 +42,9 @@`
`42`	`42`	`transition: border $duration-quickly linear, background-color $duration-quickly linear;`
`43`	`43`	`}`
`44`	`44`
`45`		`- .slds-radio__label {`
`46`		`- display: inline-flex;`
`47`		`- }`
`48`		`-`
`49`	`45`	`.slds-form-element__label {`
`50`	`46`	`display: inline;`
`51`		`- padding-top: 0;`
`52`		`- line-height: $line-height-heading;`
	`47`	`+ vertical-align: middle;`
`53`	`48`	`font-size: $font-size-3;`
`54`	`49`	`}`
`55`	`50`