Merge tag 'v2.17.3' of github.com:salesforce-ux/design-system-internal into spring-22-opensource

Dottenpixel · Dottenpixel · commit 56819d17cf12 · 2022-01-27T14:45:36.000-08:00
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -485,18 +485,18 @@ jobs:
       - node/install-npm
       - node/install-packages
 
-      - run:
-          name: 'Build static site'
-          command: 'npm run build'
-          environment:
-            SLDS__FRAMEWORK__PATH: .slds/.dist/
-
       # Heroku
       - heroku/install
       - run:
           name: 'Install Heroku Build CLI plugin'
           command: 'heroku plugins:install heroku-builds'
 
+      - run:
+          name: 'Build static site'
+          command: 'npm run build'
+          environment:
+            SLDS__FRAMEWORK__PATH: .slds/.dist/
+
       - run:
           name: 'Generate site tarball'
           command: |
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.3 - January 27, 2022
+
 ## 2.17.2 - January 20, 2022
 
 ## 2.17.1 - January 6, 2022
diff --git a/RELEASENOTES.md b/RELEASENOTES.md
@@ -1,6 +1,17 @@
 <!-- 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
+
+## 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.
+
+### [Combobox](https://www.lightningdesignsystem.com/components/combobox)
+## Fixed
+- Fixed spacing/alignment issue in `.slds-input_faux > span` for select-only combobox without a placeholder.
+
 ## Release 2.17.2 - January 20, 2022
 
 ## Components
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.2",
+  "version": "2.17.3",
   "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.2";
+$app-version: "2.17.3";
 
 /// 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.3
+
+### Fixed
+- Checkbox inputs will no longer collapse horizontally when a label with a large amount of text is used.
+
 ## 2.17.0
 
 ### Added
diff --git a/ui/components/checkbox/base/_index.scss b/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));
diff --git a/ui/components/checkbox/base/example.jsx b/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',
diff --git a/ui/components/combobox/RELEASENOTES.md b/ui/components/combobox/RELEASENOTES.md
@@ -4,6 +4,12 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.17.3
+
+## Fixed
+
+- Fixed spacing/alignment issue in `.slds-input_faux > span` for select-only combobox without a placeholder.
+
 ## 2.16.2
 
 ## Removed
diff --git a/ui/components/combobox/base/example.jsx b/ui/components/combobox/base/example.jsx
@@ -14,6 +14,7 @@ import {
 import { ListboxPills, ListboxPillsItem, ListboxPill } from '../../pills';
 import { UtilityIcon } from '../../icons/base/example';
 import { StandardIcon } from '../../icons/standard/example';
+import Grid, { Column } from '../../../utilities/grid/docs/Grid';
 import _ from '../../../shared/helpers';
 import * as Snapshot from '../snapshots.data';
 
@@ -52,6 +53,36 @@ export const ListboxDropdown = props => (
   </DeprecatedListbox>
 );
 
+const ComboBoxDefault = props => (
+  <Combobox
+    id={_.uniqueId('combobox-id-')}
+    aria-controls="listbox-id-1"
+    inputIconPosition="right"
+    rightInputIcon={
+      <UtilityIcon
+        symbol="down"
+        className="slds-icon slds-icon_x-small slds-icon-text-default"
+        containerClassName="slds-input__icon slds-input__icon_right"
+        assistiveText={false}
+        title={false}
+      />
+    }
+    results={
+      <Listbox
+      id="listbox-id-1"
+      snapshot={Snapshot.ObjectOptions}
+      type="plain"
+      count={8}
+      visualSelection
+      />
+    }
+    resultsType="listbox"
+    hasInteractions
+    selectOnly
+    {...props}
+  />
+)
+
 /* -----------------------------------------------------------------------------
     Exports
 ----------------------------------------------------------------------------- */
@@ -63,32 +94,7 @@ export default [
     id: `${STORY_SINK_CONTEXT.toLowerCase()}-default`,
     label: `${STORY_SINK_CONTEXT} default (select-only)`,
     element: (
-      <Combobox
-        id={_.uniqueId('combobox-id-')}
-        aria-controls="listbox-id-1"
-        inputIconPosition="right"
-        rightInputIcon={
-          <UtilityIcon
-            symbol="down"
-            className="slds-icon slds-icon_x-small slds-icon-text-default"
-            containerClassName="slds-input__icon slds-input__icon_right"
-            assistiveText={false}
-            title={false}
-          />
-        }
-        results={
-          <Listbox
-            id="listbox-id-1"
-            snapshot={Snapshot.ObjectOptions}
-            type="plain"
-            count={8}
-            visualSelection
-          />
-        }
-        resultsType="listbox"
-        hasInteractions
-        selectOnly
-      />
+      <ComboBoxDefault />
     )
   }
 ];
@@ -539,5 +545,17 @@ export let states = [
         </DeprecatedCombobox>
       </div>
     )
+  },
+  {
+    context: STORY_SINK_CONTEXT,
+    id: `${STORY_SINK_CONTEXT.toLowerCase()}-without-placeholder`,
+    label: `${STORY_SINK_CONTEXT} without placeholder (select-only)`,
+    element: (
+      <Grid className="slds-gutters">
+        <Column><ComboBoxDefault placeholder="This has a placeholder…"/></Column>
+        <Column><ComboBoxDefault placeholder=""/></Column>
+        <Column><ComboBoxDefault placeholder="…the middle one does not"/></Column>
+      </Grid>
+    )
   }
 ];
diff --git a/ui/components/combobox/deprecated/index.jsx b/ui/components/combobox/deprecated/index.jsx
@@ -54,7 +54,7 @@ const DeprecatedObjectSwitcher = props => {
 
 /**
  * Combobox input element. This is deprecated since updated a11y guidance is to
- * have select-only comboboxes replace the input with a div
+ * have select-only comboboxes replace the input with a button
  * @name DeprecatedComboboxInputElement
  * @prop {boolean} aria-activedescendant
  * @prop {string}  aria-controls
diff --git a/ui/components/combobox/index.jsx b/ui/components/combobox/index.jsx
@@ -149,7 +149,7 @@ const ComboboxInput = ({
 }) => {
   const hasInputIcon = leftInputIcon || rightInputIcon || showCloseButton;
   const { isOpen } = useContext(ComboboxFormContext);
-  const placeholderValue = !placeholder
+  const placeholderValue = !placeholder && placeholder !== ""
     ? autocomplete
       ? 'Search...'
       : 'Select an Option…'
diff --git a/ui/components/input/base/_index.scss b/ui/components/input/base/_index.scss
@@ -127,6 +127,11 @@
   &.slds-is-disabled {
     @include input-disabled;
   }
+
+  > span:before {
+    content: '';
+    display: inline-block;
+  }
 }
 
 /**
