fix(combobox): Fix spacing/alignment on select-only combobox without placeholder (#4989)

* add psuedo element to select-only combobox placeholder to maintain spacing/alignment

* fix CirceCI publish-site job

Author: Dottenpixel

.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: |

RELEASENOTES.md

@@ -1,13 +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 25, 2022
+## Release 2.17.3 - January 26, 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

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

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>
+    )
   }
 ];

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

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…'

ui/components/input/base/_index.scss

@@ -127,6 +127,11 @@
   &.slds-is-disabled {
     @include input-disabled;
   }
+
+  > span:before {
+    content: '';
+    display: inline-block;
+  }
 }
 
 /**