fix(checkbox): Prevent Checkboxes from Collapsing with Long Wrapping Text (#4980)

Author: Alexis Córdova

RELEASENOTES.md

@@ -1,6 +1,13 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- !!! THIS FILE IS AUTO-GENERATED !!! DO NOT EDIT THIS FILE MANUALLY !!! -->
 
+## Release 2.17.3 - January 25, 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.
+
 ## Release 2.17.2 - January 20, 2022
 
 ## Components

ui/components/checkbox/RELEASENOTES.md

@@ -4,6 +4,11 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.17.3
+
+### Fixed
+- Checkbox inputs will no longer collapse horizontally when a label with a large amount of text is used.
+
 ## 2.17.0
 
 ### Added

ui/components/checkbox/base/_index.scss

@@ -32,6 +32,7 @@
     @include square($square-icon-medium-content);
     display: inline-block;
     position: relative;
+    flex-shrink: 0;
     vertical-align: middle;
     // @todo consider shared hooks for inputs
     border-radius: var(--slds-c-checkbox-radius-border, var(--sds-c-checkbox-radius-border, $border-radius-small));

ui/components/checkbox/base/example.jsx

@@ -275,6 +275,28 @@ export let examples = [
       </Fieldset>
     )
   },
+  {
+    id: 'long-wrapping-text-required-group',
+    label: 'Required Checkboxes with Abnormally-long Wrapping Text',
+    demoStyles: `width: 210px`,
+    storybookStyles: true,
+    element: (
+      <Fieldset>
+        <Legend>
+          <abbr className="slds-required" title="required">
+            *{' '}
+          </abbr>
+          Checkbox Group Label
+        </Legend>
+        <FormElementControl>
+          <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" />
+          <Checkbox label="When you wake up in the morning, it's a quarter to two, And you want to find, something to do. You brush your teeth, ch ch ch ch, ch ch ch ch. You brush your teeth, ch ch ch ch, ch ch ch ch" />
+          <Checkbox label="And when you wake up in the morning, it's a quarter to three, And your mind starts hummin', twiddle dee dee. You brush your teeth, ch ch ch ch, ch ch ch ch. You brush your teeth, ch ch ch ch, ch ch ch ch" />
+          <Checkbox label="When you wake up in the morning, it's a quarter to four, And you think you hear a knock on the door. You brush your teeth, ch ch ch ch, ch ch ch ch. You brush your teeth, ch ch ch ch, ch ch ch ch" />
+        </FormElementControl>
+      </Fieldset>
+    )
+  },
   {
     id: 'group',
     label: 'Group',