chore(merge): 2.17.5 Spring 22 ➡️ Summer 22 (#5024)

Dottenpixel · web-flow · commit af6b13e43dd3 · 2022-02-17T13:36:19.000-08:00
diff --git a/RELEASENOTES.general.md b/RELEASENOTES.general.md
@@ -5,7 +5,11 @@
 
 - Removed `&_` shorthand from numerous selectors in SCSS files
 
-## 2.17.4 - February 4, 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`
+
+## 2.17.4 - February 3, 2022
 
 ## 2.17.3 - January 27, 2022
 
diff --git a/RELEASENOTES.md b/RELEASENOTES.md
@@ -23,7 +23,24 @@
 #### Added
 - Added annotations for tile board CSS classes.
 
-## Release 2.17.4 - February 4, 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`
+
+## 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 3, 2022
 
 ## Components
 ### [Checkbox](https://www.lightningdesignsystem.com/components/checkbox)
diff --git a/design-tokens/primitive/background-color.yml b/design-tokens/primitive/background-color.yml
@@ -109,7 +109,7 @@ props:
     value: '{!PALETTE_RED_40}'
     comment: Color for UI elements related to destructive actions.
   COLOR_BACKGROUND_DESTRUCTIVE_HOVER:
-    value: '{!PALETTE_RED_40}'
+    value: '{!PALETTE_RED_30}'
     comment: Hover color for UI elements related to destructive actions.
   COLOR_BACKGROUND_DESTRUCTIVE_ACTIVE:
     value: '{!PALETTE_RED_30}'
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "@salesforce-ux/create-snap": "0.0.7",
     "@salesforce-ux/design-system-markup": "^2.0.4",
     "@salesforce-ux/design-system-parser": "^1.1.1",
-    "@salesforce-ux/design-system-primitive-tokens": "0.3.4",
+    "@salesforce-ux/design-system-primitive-tokens": "0.3.5",
     "@salesforce-ux/icons": "10.2.2",
     "@salesforce-ux/instant-vrt": "2.0.0",
     "@salesforce-ux/postcss-annotations-parser": "0.1.1",
diff --git a/ui/_config.scss b/ui/_config.scss
@@ -9,7 +9,7 @@
 ///
 /// @type String
 /// @access private
-$app-version: "2.17.4";
+$app-version: "2.17.5";
 
 /// 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,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;
-}
