feat(combobox): Add new grouped variant (#3050)

* feat(combobox): Add grouped combobox variant * Feature parity * Revert changed files that shouldnt have changed * Fix regressions and cleaned up jsx files * Add new TOC * Cleanup, add documentation, update snapshots * docs(combobox): Base combobox docs first pass * docs(combobox) autocomplete docs first pass * Autocomplete and lookup docs and fixes to listbox focused options * Start Grouped Combobox by adding aria-controls and updateing the entity switcher label * Wrap docblock examples in <Example />, apply unique IDs to all combobox and listbox * Add tests for combobox * Update snapshots * Update IDs on grouped example * Update snapshots * Update snapshots * Update snapshots * Fix VNU * Update snapshots * Update snapshots and documentation
salesforce-ux · Feb 8, 2018 · 6c79edd · 6c79edd
1 parent 9bc8b0d
commit 6c79edd
Show file tree

Hide file tree

Showing 112 changed files with 43,165 additions and 441 deletions.
diff --git a/test/__tests__/__snapshots__/Combobox_Autocomplete.json b/test/__tests__/__snapshots__/Combobox_Autocomplete.json
diff --git a/test/__tests__/__snapshots__/Combobox_Autocomplete_Displaying_Options.json b/test/__tests__/__snapshots__/Combobox_Autocomplete_Displaying_Options.json
diff --git a/...__tests__/__snapshots__/Combobox_Autocomplete_Displaying_options_based_on_user_input.json b/...__tests__/__snapshots__/Combobox_Autocomplete_Displaying_options_based_on_user_input.json
diff --git a/test/__tests__/__snapshots__/Combobox_Autocomplete_Entity.json b/test/__tests__/__snapshots__/Combobox_Autocomplete_Entity.json
diff --git a/test/__tests__/__snapshots__/Combobox_Autocomplete_Entity_Displaying_options.json b/test/__tests__/__snapshots__/Combobox_Autocomplete_Entity_Displaying_options.json
diff --git a/...__/__snapshots__/Combobox_Autocomplete_Entity_Displaying_options_based_on_user_input.json b/...__/__snapshots__/Combobox_Autocomplete_Entity_Displaying_options_based_on_user_input.json
diff --git a/test/__tests__/__snapshots__/Combobox_Autocomplete_Entity_Keyboard_interactions.json b/test/__tests__/__snapshots__/Combobox_Autocomplete_Entity_Keyboard_interactions.json
diff --git a/test/__tests__/__snapshots__/Combobox_Autocomplete_Entity_Multiple_Selection.json b/test/__tests__/__snapshots__/Combobox_Autocomplete_Entity_Multiple_Selection.json
diff --git a/test/__tests__/__snapshots__/Combobox_Autocomplete_Entity_Single_selection.json b/test/__tests__/__snapshots__/Combobox_Autocomplete_Entity_Single_selection.json
diff --git a/test/__tests__/__snapshots__/Combobox_Autocomplete_Keyboard_interactions.json b/test/__tests__/__snapshots__/Combobox_Autocomplete_Keyboard_interactions.json
diff --git a/test/__tests__/__snapshots__/Combobox_Autocomplete_Multiple_selections.json b/test/__tests__/__snapshots__/Combobox_Autocomplete_Multiple_selections.json
diff --git a/test/__tests__/__snapshots__/Combobox_Autocomplete_Selecting_an_option.json b/test/__tests__/__snapshots__/Combobox_Autocomplete_Selecting_an_option.json
diff --git a/test/__tests__/__snapshots__/Combobox_Base.json b/test/__tests__/__snapshots__/Combobox_Base.json
diff --git a/test/__tests__/__snapshots__/Combobox_Displaying_Options.json b/test/__tests__/__snapshots__/Combobox_Displaying_Options.json
diff --git a/test/__tests__/__snapshots__/Combobox_Grouped.json b/test/__tests__/__snapshots__/Combobox_Grouped.json
diff --git a/test/__tests__/__snapshots__/Combobox_Grouped_Collapsed_pills.json b/test/__tests__/__snapshots__/Combobox_Grouped_Collapsed_pills.json
diff --git a/test/__tests__/__snapshots__/Combobox_Grouped_Expanded_pills.json b/test/__tests__/__snapshots__/Combobox_Grouped_Expanded_pills.json
diff --git a/test/__tests__/__snapshots__/Combobox_Grouped_Options.json b/test/__tests__/__snapshots__/Combobox_Grouped_Options.json
diff --git a/test/__tests__/__snapshots__/Combobox_Grouped_Scoping_text_variant.json b/test/__tests__/__snapshots__/Combobox_Grouped_Scoping_text_variant.json
diff --git a/test/__tests__/__snapshots__/Combobox_Grouped_Selecting_options.json b/test/__tests__/__snapshots__/Combobox_Grouped_Selecting_options.json
diff --git a/test/__tests__/__snapshots__/Combobox_Grouped_User_inptu_with_selections_made.json b/test/__tests__/__snapshots__/Combobox_Grouped_User_inptu_with_selections_made.json
diff --git a/test/__tests__/__snapshots__/Combobox_Grouped_User_input.json b/test/__tests__/__snapshots__/Combobox_Grouped_User_input.json
diff --git a/test/__tests__/__snapshots__/Combobox_Handling_focus.json b/test/__tests__/__snapshots__/Combobox_Handling_focus.json
diff --git a/test/__tests__/__snapshots__/Combobox_Multiple_Selections.json b/test/__tests__/__snapshots__/Combobox_Multiple_Selections.json
diff --git a/test/__tests__/__snapshots__/Combobox_Multiple_selection_closed.json b/test/__tests__/__snapshots__/Combobox_Multiple_selection_closed.json
diff --git a/test/__tests__/__snapshots__/Combobox_Selecting_an_Option.json b/test/__tests__/__snapshots__/Combobox_Selecting_an_Option.json
diff --git a/test/__tests__/__snapshots__/Combobox_Single_Selection.json b/test/__tests__/__snapshots__/Combobox_Single_Selection.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Notification_With_playground.json b/test/__tests__/__snapshots__/Global_Header_Notification_With_playground.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Search_Active_State.json b/test/__tests__/__snapshots__/Global_Header_Search_Active_State.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Search_Default_State.json b/test/__tests__/__snapshots__/Global_Header_Search_Default_State.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Search_Expanded_State.json b/test/__tests__/__snapshots__/Global_Header_Search_Expanded_State.json
diff --git a/test/__tests__/__snapshots__/base_global_header.json b/test/__tests__/__snapshots__/base_global_header.json
diff --git a/ui/components/app-launcher/__tests__/__snapshots__/renders_a_default_app_launcher.json b/ui/components/app-launcher/__tests__/__snapshots__/renders_a_default_app_launcher.json
diff --git a/ui/components/app-launcher/__tests__/__snapshots__/renders_a_dropped_app_launcher.json b/ui/components/app-launcher/__tests__/__snapshots__/renders_a_dropped_app_launcher.json
diff --git a/ui/components/app-launcher/__tests__/__snapshots__/renders_a_grabbed_app_launcher.json b/ui/components/app-launcher/__tests__/__snapshots__/renders_a_grabbed_app_launcher.json
diff --git a/ui/components/app-launcher/__tests__/__snapshots__/renders_a_moved_app_launcher.json b/ui/components/app-launcher/__tests__/__snapshots__/renders_a_moved_app_launcher.json
diff --git a/ui/components/app-launcher/__tests__/__snapshots__/renders_a_search_app_launcher.json b/ui/components/app-launcher/__tests__/__snapshots__/renders_a_search_app_launcher.json
diff --git a/.../__snapshots__/render_combobox_render_autocomplete_combobox_with_mutliple_selections.json b/.../__snapshots__/render_combobox_render_autocomplete_combobox_with_mutliple_selections.json
diff --git a/...s__/__snapshots__/render_combobox_render_autocomplete_combobox_with_single_selection.json b/...s__/__snapshots__/render_combobox_render_autocomplete_combobox_with_single_selection.json
diff --git a/...combobox/__tests__/__snapshots__/render_combobox_render_autocomplete_entity_combobox.json b/...combobox/__tests__/__snapshots__/render_combobox_render_autocomplete_entity_combobox.json
diff --git a/..._combobox_render_autocomplete_entity_combobox_displaying_options_based_on_user_input.json b/..._combobox_render_autocomplete_entity_combobox_displaying_options_based_on_user_input.json
diff --git a/...shots__/render_combobox_render_autocomplete_entity_combobox_with_mutliple_selections.json b/...shots__/render_combobox_render_autocomplete_entity_combobox_with_mutliple_selections.json
diff --git a/...napshots__/render_combobox_render_autocomplete_entity_combobox_with_single_selection.json b/...napshots__/render_combobox_render_autocomplete_entity_combobox_with_single_selection.json
diff --git a/ui/components/combobox/__tests__/__snapshots__/render_combobox_render_base_combobox.json b/ui/components/combobox/__tests__/__snapshots__/render_combobox_render_base_combobox.json
diff --git a/...pshots__/render_combobox_render_combobox_with_displaying_options_based_on_user_input.json b/...pshots__/render_combobox_render_combobox_with_displaying_options_based_on_user_input.json
diff --git a/ui/components/combobox/__tests__/__snapshots__/render_combobox_render_grouped_combobox.json b/ui/components/combobox/__tests__/__snapshots__/render_combobox_render_grouped_combobox.json
diff --git a/...ots__/render_combobox_render_grouped_combobox_displaying_options_based_on_user_input.json b/...ots__/render_combobox_render_grouped_combobox_displaying_options_based_on_user_input.json
diff --git a/...ts__/render_combobox_render_grouped_combobox_with_selections_made_in_collapsed_state.json b/...ts__/render_combobox_render_grouped_combobox_with_selections_made_in_collapsed_state.json
diff --git a/...ots__/render_combobox_render_grouped_combobox_with_selections_made_in_expanded_state.json b/...ots__/render_combobox_render_grouped_combobox_with_selections_made_in_expanded_state.json
diff --git a/...ests__/__snapshots__/render_combobox_render_multiple_selections_in_a_closed_combobox.json b/...ests__/__snapshots__/render_combobox_render_multiple_selections_in_a_closed_combobox.json
diff --git a/.../__tests__/__snapshots__/render_combobox_render_single_selection_in_an_open_combobox.json b/.../__tests__/__snapshots__/render_combobox_render_single_selection_in_an_open_combobox.json
diff --git a/...nents/combobox/__tests__/__snapshots__/render_combobox_renders_autocomplete_combobox.json b/...nents/combobox/__tests__/__snapshots__/render_combobox_renders_autocomplete_combobox.json
diff --git a/...ponents/combobox/__tests__/__snapshots__/render_combobox_renders_groups_in_a_listbox.json b/...ponents/combobox/__tests__/__snapshots__/render_combobox_renders_groups_in_a_listbox.json
diff --git a/.../combobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_base_combobox.json b/.../combobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_base_combobox.json
diff --git a/...ts__/render_deprecated_combobox_renders_a_base_combobox_with_closed_options_selected.json b/...ts__/render_deprecated_combobox_renders_a_base_combobox_with_closed_options_selected.json
diff --git a/..._tests__/__snapshots__/render_deprecated_combobox_renders_a_base_combobox_with_focus.json b/..._tests__/__snapshots__/render_deprecated_combobox_renders_a_base_combobox_with_focus.json
diff --git a/...napshots__/render_deprecated_combobox_renders_a_base_combobox_with_open_item_focused.json b/...napshots__/render_deprecated_combobox_renders_a_base_combobox_with_open_item_focused.json
diff --git a/...x/__tests__/__snapshots__/render_deprecated_combobox_renders_a_multi_entity_combobox.json b/...x/__tests__/__snapshots__/render_deprecated_combobox_renders_a_multi_entity_combobox.json
diff --git a/.../__snapshots__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_focus.json b/.../__snapshots__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_focus.json
diff --git a/...er_deprecated_combobox_renders_a_multi_entity_combobox_with_focused_options_selected.json b/...er_deprecated_combobox_renders_a_multi_entity_combobox_with_focused_options_selected.json
diff --git a/...__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_open_item_focused.json b/...__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_open_item_focused.json
diff --git a/...s__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_options_selected.json b/...s__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_options_selected.json
diff --git a/...bobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_readonly_combobox.json b/...bobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_readonly_combobox.json
diff --git a/...render_deprecated_combobox_renders_a_readonly_combobox_with_closed_option_s_selected.json b/...render_deprecated_combobox_renders_a_readonly_combobox_with_closed_option_s_selected.json
diff --git a/..._/render_deprecated_combobox_renders_a_readonly_combobox_with_closed_option_selected.json b/..._/render_deprecated_combobox_renders_a_readonly_combobox_with_closed_option_selected.json
diff --git a/...ts__/__snapshots__/render_deprecated_combobox_renders_a_readonly_combobox_with_focus.json b/...ts__/__snapshots__/render_deprecated_combobox_renders_a_readonly_combobox_with_focus.json
diff --git a/...hots__/render_deprecated_combobox_renders_a_readonly_combobox_with_open_item_focused.json b/...hots__/render_deprecated_combobox_renders_a_readonly_combobox_with_open_item_focused.json
diff --git a/..._/render_deprecated_combobox_renders_a_readonly_combobox_with_open_option_s_selected.json b/..._/render_deprecated_combobox_renders_a_readonly_combobox_with_open_option_s_selected.json
diff --git a/...s__/render_deprecated_combobox_renders_a_readonly_combobox_with_open_option_selected.json b/...s__/render_deprecated_combobox_renders_a_readonly_combobox_with_open_option_selected.json
diff --git a/..._snapshots__/render_deprecated_combobox_renders_an_inline_combobox_open_item_focused.json b/..._snapshots__/render_deprecated_combobox_renders_an_inline_combobox_open_item_focused.json
diff --git a/...sts__/__snapshots__/render_deprecated_combobox_renders_an_inline_combobox_with_focus.json b/...sts__/__snapshots__/render_deprecated_combobox_renders_an_inline_combobox_with_focus.json
diff --git a/..._tests__/__snapshots__/render_deprecated_combobox_renders_an_inline_listbox_combobox.json b/..._tests__/__snapshots__/render_deprecated_combobox_renders_an_inline_listbox_combobox.json
diff --git a/...r_deprecated_combobox_renders_an_inline_listbox_combobox_with_closed_option_selected.json b/...r_deprecated_combobox_renders_an_inline_listbox_combobox_with_closed_option_selected.json
diff --git a/...deprecated_combobox_renders_an_inline_listbox_combobox_with_focused_options_selected.json b/...deprecated_combobox_renders_an_inline_listbox_combobox_with_focused_options_selected.json
diff --git a/.../render_deprecated_combobox_renders_an_inline_listbox_combobox_with_options_selected.json b/.../render_deprecated_combobox_renders_an_inline_listbox_combobox_with_options_selected.json
diff --git a/ui/components/combobox/__tests__/__snapshots__/renders_a_base_combobox.json b/ui/components/combobox/__tests__/__snapshots__/renders_a_base_combobox.json
diff --git a/...ombobox/__tests__/__snapshots__/renders_a_base_combobox_with_closed_options_selected.json b/...ombobox/__tests__/__snapshots__/renders_a_base_combobox_with_closed_options_selected.json
diff --git a/ui/components/combobox/__tests__/__snapshots__/renders_a_base_combobox_with_focus.json b/ui/components/combobox/__tests__/__snapshots__/renders_a_base_combobox_with_focus.json
diff --git a/...ents/combobox/__tests__/__snapshots__/renders_a_base_combobox_with_open_item_focused.json b/...ents/combobox/__tests__/__snapshots__/renders_a_base_combobox_with_open_item_focused.json
diff --git a/ui/components/combobox/__tests__/__snapshots__/renders_a_multi_entity_combobox.json b/ui/components/combobox/__tests__/__snapshots__/renders_a_multi_entity_combobox.json
diff --git a/...mponents/combobox/__tests__/__snapshots__/renders_a_multi_entity_combobox_with_focus.json b/...mponents/combobox/__tests__/__snapshots__/renders_a_multi_entity_combobox_with_focus.json
diff --git a/..._tests__/__snapshots__/renders_a_multi_entity_combobox_with_focused_options_selected.json b/..._tests__/__snapshots__/renders_a_multi_entity_combobox_with_focused_options_selected.json
diff --git a/...bobox/__tests__/__snapshots__/renders_a_multi_entity_combobox_with_open_item_focused.json b/...bobox/__tests__/__snapshots__/renders_a_multi_entity_combobox_with_open_item_focused.json
diff --git a/...mbobox/__tests__/__snapshots__/renders_a_multi_entity_combobox_with_options_selected.json b/...mbobox/__tests__/__snapshots__/renders_a_multi_entity_combobox_with_options_selected.json
diff --git a/ui/components/combobox/__tests__/__snapshots__/renders_a_readonly_combobox.json b/ui/components/combobox/__tests__/__snapshots__/renders_a_readonly_combobox.json
diff --git a/...ox/__tests__/__snapshots__/renders_a_readonly_combobox_with_closed_option_s_selected.json b/...ox/__tests__/__snapshots__/renders_a_readonly_combobox_with_closed_option_s_selected.json
diff --git a/...obox/__tests__/__snapshots__/renders_a_readonly_combobox_with_closed_option_selected.json b/...obox/__tests__/__snapshots__/renders_a_readonly_combobox_with_closed_option_selected.json
diff --git a/ui/components/combobox/__tests__/__snapshots__/renders_a_readonly_combobox_with_focus.json b/ui/components/combobox/__tests__/__snapshots__/renders_a_readonly_combobox_with_focus.json
diff --git a/.../combobox/__tests__/__snapshots__/renders_a_readonly_combobox_with_open_item_focused.json b/.../combobox/__tests__/__snapshots__/renders_a_readonly_combobox_with_open_item_focused.json
diff --git a/...obox/__tests__/__snapshots__/renders_a_readonly_combobox_with_open_option_s_selected.json b/...obox/__tests__/__snapshots__/renders_a_readonly_combobox_with_open_option_s_selected.json
diff --git a/...mbobox/__tests__/__snapshots__/renders_a_readonly_combobox_with_open_option_selected.json b/...mbobox/__tests__/__snapshots__/renders_a_readonly_combobox_with_open_option_selected.json
diff --git a/...onents/combobox/__tests__/__snapshots__/renders_an_inline_combobox_open_item_focused.json b/...onents/combobox/__tests__/__snapshots__/renders_an_inline_combobox_open_item_focused.json
diff --git a/ui/components/combobox/__tests__/__snapshots__/renders_an_inline_combobox_with_focus.json b/ui/components/combobox/__tests__/__snapshots__/renders_an_inline_combobox_with_focus.json
diff --git a/ui/components/combobox/__tests__/__snapshots__/renders_an_inline_listbox_combobox.json b/ui/components/combobox/__tests__/__snapshots__/renders_an_inline_listbox_combobox.json
diff --git a/...tests__/__snapshots__/renders_an_inline_listbox_combobox_with_closed_option_selected.json b/...tests__/__snapshots__/renders_an_inline_listbox_combobox_with_closed_option_selected.json
diff --git a/...sts__/__snapshots__/renders_an_inline_listbox_combobox_with_focused_options_selected.json b/...sts__/__snapshots__/renders_an_inline_listbox_combobox_with_focused_options_selected.json
diff --git a/...box/__tests__/__snapshots__/renders_an_inline_listbox_combobox_with_options_selected.json b/...box/__tests__/__snapshots__/renders_an_inline_listbox_combobox_with_options_selected.json
diff --git a/ui/components/combobox/__tests__/index.spec.js b/ui/components/combobox/__tests__/index.spec.js
diff --git a/ui/components/combobox/base/_index.scss b/ui/components/combobox/base/_index.scss
@@ -24,6 +24,14 @@
   &.slds-is-open .slds-dropdown {
     display: block;
   }
+
+  &.slds-has-selection {
+
+    .slds-combobox__input-value,
+    .slds-combobox__input-value:focus {
+      box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px $color-border inset;
+    }
+  }
 }
 
 /**
@@ -56,8 +64,10 @@
   font-size: inherit;
   font-weight: $font-weight-regular;
 
-  &:focus {
+  &:focus,
+  &.slds-has-focus {
     border-color: $color-border-brand-primary;
+    box-shadow: $shadow-button-focus;
   }
 
   &[disabled] {
@@ -114,6 +124,10 @@
   flex-wrap: wrap;
   align-items: center;
 
+  li {
+    display: flex;
+  }
+
   li + li {
     padding-left: $spacing-xxx-small;
   }
@@ -169,6 +183,21 @@
     cursor: default;
   }
 
+  /**
+   * Modifies the listbox option if it contains an entity object
+   *
+   * @selector .slds-listbox__option_entity
+   * @restrict .slds-listbox__option
+   */
+  .slds-listbox__option_entity,
+  .slds-listbox__option--entity {
+    padding: $spacing-xx-small $spacing-small;
+
+    .slds-media__figure {
+      margin-right: $spacing-x-small;
+    }
+  }
+
   /**
    * Modifies the listbox option if it contains an plain object or string
    *
@@ -180,18 +209,12 @@
     padding: $spacing-x-small $spacing-small;
   }
 
-  /**
-   * Modifies the listbox option if it contains an entity object
-   *
-   * @selector .slds-listbox__option_entity
-   * @restrict .slds-listbox__option
-   */
-  .slds-listbox__option_entity,
-  .slds-listbox__option--entity {
-    padding: $spacing-xx-small $spacing-small;
+  .slds-listbox__option_term {
+    padding: $spacing-x-small $spacing-small;
 
     .slds-media__figure {
-      margin-right: $spacing-x-small;
+      margin-left: $spacing-xx-small;
+      margin-right: $spacing-small;
     }
   }
 
@@ -308,6 +331,174 @@
   padding: $spacing-xxx-small;
 }
 
+/**
+ * @summary Modifier that identifies the combobox as the object switcher, applies specific interactions for its context
+ * @selector .slds-combobox_object-switcher
+ * @restrict .slds-combobox-group div
+ */
+.slds-combobox_object-switcher {
+  flex-shrink: 0;
+
+  .slds-combobox__input {
+    width: 120px;
+    transition: width 80ms linear;
+
+    &:focus,
+    &.slds-has-focus {
+      width: 150px;
+    }
+  }
+}
+
+/**
+ * @summary Input field within a combobox
+ *
+ * @selector .slds-combobox__input
+ * @restrict .slds-combobox input
+ */
+.slds-combobox__input {
+  /**
+   * @summary Force focus state of the input
+   *
+   * @selector .slds-has-focus
+   * @restrict .slds-combobox__input
+   */
+  &.slds-has-focus {
+    border-color: $color-border-input-active;
+    box-shadow: $shadow-button-focus;
+  }
+}
+
+/**
+ * @summary Container for a combobox group
+ *
+ * @name combobox-group
+ * @selector .slds-combobox-group
+ * @restrict div
+ * @variant
+ */
+.slds-combobox-group {
+  display: flex;
+  flex-direction: row;
+
+  .slds-combobox_container {
+    flex: 1 1 auto;
+  }
+
+  .slds-combobox__input {
+    border-radius: 0;
+    margin-left: -1px;
+    margin-right: -1px;
+
+    &:focus,
+    &.slds-has-focus {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  /**
+   * @summary Modifier that notifies the combobox group that a selection has been made
+   *
+   * @selector .slds-has-selection
+   * @restrict .slds-combobox-group, .slds-combobox_container
+   */
+  &.slds-has-selection {
+
+    .slds-combobox-addon_start .slds-combobox__input {
+      border-bottom-left-radius: 0;
+    }
+
+    .slds-combobox-addon_end .slds-combobox__input {
+      border-bottom-right-radius: 0;
+    }
+
+    ~ .slds-listbox_selection-group {
+      display: flex;
+      position: relative;
+      border: 1px solid $color-border;
+      border-top: 0;
+      border-bottom-left-radius: $border-radius-medium;
+      border-bottom-right-radius: $border-radius-medium;
+      left: -1px;
+    }
+  }
+
+  .slds-listbox_horizontal li + li {
+    padding: $spacing-xxx-small;
+  }
+}
+
+/**
+ * @summary The container of pill selections found inside of a combobox group
+ * @selector .slds-listbox_selection-group
+ * @restrict .slds-listbox
+ * @modifier
+ */
+.slds-listbox_selection-group {
+  padding: 0;
+  padding-right: 3.75rem;
+  height: calc(#{$height-input} + #{$border-width-thin});
+  overflow: hidden;
+
+  /**
+   * @summary Expanded state of a selection group
+   * @selector .slds-is-expanded
+   * @restrict .slds-listbox_selection-group
+   * @modifier
+   */
+  &.slds-is-expanded {
+    height: auto;
+    padding: 0;
+  }
+
+  .slds-listbox-item {
+    padding: $spacing-xxx-small;
+    line-height: 1;
+  }
+
+  /**
+   * @summary Toggle button to show all of the pill selections
+   * @selector .slds-listbox-toggle
+   * @restrict .slds-listbox_selection-group
+   */
+  .slds-listbox-toggle {
+    position: absolute;
+    right: $spacing-x-small;
+    top: $spacing-x-small;
+
+    .slds-button {
+      line-height: 1;
+    }
+  }
+}
+
+/**
+ * @summary The first combobox in the combobox group
+ * @selector .sldss-combobox-addon_start
+ * @restrict .slds-combobox-group div
+ * @modifier
+ */
+.slds-combobox-addon_start .slds-combobox__input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+/**
+ * @summary The last combobox in the combobox group
+ * @selector .sldss-combobox-addon_end
+ * @restrict .slds-combobox-group div
+ * @modifier
+ */
+.slds-combobox-addon_end .slds-combobox__input {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 /**
  * If combo has a selection model that requires a listbox of pills to be displayed
  * inside of a combobox
@@ -322,12 +513,6 @@
   border: $border-width-thin solid $color-border;
   border-radius: $border-radius-medium;
 
-  /**
-   * Input field within a combobox
-   *
-   * @selector .slds-combobox__input
-   * @restrict .slds-combobox input
-   */
   .slds-combobox__input {
     min-height: $height-pill;
     line-height: $height-pill;
@@ -378,6 +563,7 @@
 
   [role="listbox"] {
     display: inline-flex;
+    padding: 0;
   }
 
   .slds-combobox__input[value],