fix(dueling-picklist): New class 'slds-dueling-picklist__column_responsive' for responsive dueling picklists (#3142)

Author: Ayesha Mazumdar

ui/components/dueling-picklist/__tests__/__snapshots__/renders_a_responsive_dueling_picklist.json

@@ -49,5 +49,15 @@ it('renders a dueling picklist with a dropped option', () =>
 it('renders a dueling picklist with an option that was moved to another list', () =>
   matchesMarkupAndStyle(<MultiSelect dataSet={MovedInSnapShot} />));
 
+it('renders a responsive dueling picklist', () =>
+  matchesMarkupAndStyle(
+    <MultiSelect dataSet={DefaultSnapShot} isResponsive />
+  ));
+
+it('renders a responsive non-reorderable dueling picklist', () =>
+  matchesMarkupAndStyle(
+    <MultiSelect dataSet={DefaultSnapShot} noReorder isResponsive />
+  ));
+
 it('renders a view mode of dueling picklist', () =>
   matchesMarkupAndStyle(<MultiSelectViewMode />));

ui/components/dueling-picklist/__tests__/__snapshots__/renders_a_responsive_non_reorderable_dueling_picklist.json

@@ -35,6 +35,24 @@
   }
 }
 
+/**
+ * @summary Changes the layout of the dueling picklist to be responsive
+ *
+ * @selector .slds-dueling-list__column_responsive
+ * @restrict .slds-dueling-list__column
+ */
+.slds-dueling-list__column_responsive {
+  flex: 0 1 $size-small;
+  flex-wrap: wrap;
+  overflow: hidden;
+  min-width: $size-xx-small;
+
+  .slds-dueling-list__options {
+    width: auto;
+    max-width: $size-small;
+  }
+}
+
 /**
  * @summary Bounding visual container for listbox of options
  *

ui/components/dueling-picklist/__tests__/index.spec.js

@@ -67,6 +67,11 @@ export let states = [
     label: 'No Reordering',
     element: <MultiSelect dataSet={DefaultSnapShot} noReorder />
   },
+  {
+    id: 'responsive-no-reordering-dueling-picklist',
+    label: 'Responsive No Reordering',
+    element: <MultiSelect dataSet={DefaultSnapShot} noReorder isResponsive />
+  },
   {
     id: 'view-mode-dueling-picklist',
     label: 'View Mode',

ui/components/dueling-picklist/base/_index.scss

@@ -43,6 +43,15 @@ This component is essentially 2 ARIA listboxes side by side, so we follow the [A
   - `space` toggles "Drag and Drop" mode. When in "Drag and Drop" mode:
     - `up` and `down` arrows move the selected items _within_ the current list
 
+## Responsive
+
+To make the dueling picklist responsive or use it within narrow regions, apply the class `slds-dueling-picklist__column_responsive` to the `<div>`s with class `slds-dueling-picklist__column` that contain options (not the columns that only contain buttons). Any items longer than the space available will truncate with ellipses.
+
+<Example title="Dueling Picklist">
+  <CodeView>
+    <MultiSelect dataSet={CountriesSnapshot} noReorder isResponsive />
+  </CodeView>
+</Example>
 
 ## Edit Mode
 

ui/components/dueling-picklist/base/example.jsx

@@ -25,6 +25,7 @@ export const MultiSelect = props => {
       </div>
       <SelectionGroup
         disabled={props.disabled}
+        isResponsive={props.isResponsive}
         group={props.dataSet.selectionGroups[0]}
       />
       <MoveButtons
@@ -35,6 +36,7 @@ export const MultiSelect = props => {
       />
       <SelectionGroup
         disabled={props.disabled}
+        isResponsive={props.isResponsive}
         group={props.dataSet.selectionGroups[1]}
       />
       {!props.noReorder && (
@@ -99,7 +101,11 @@ const MoveButtons = props => {
 const SelectionGroup = props => {
   const groupLabelID = _.uniqueId('label-');
   return (
-    <div className="slds-dueling-list__column">
+    <div
+      className={classNames('slds-dueling-list__column', {
+        'slds-dueling-list__column_responsive': props.isResponsive
+      })}
+    >
       <span className="slds-form-element__label" id={groupLabelID}>
         {props.group.label}
       </span>
@@ -700,7 +706,7 @@ export const CountriesSnapshot = {
           isGrabbed: false
         },
         {
-          text: 'Turkish',
+          text: 'Tobagonian Creole English',
           tabIndex: -1,
           isSelected: false,
           isGrabbed: false
@@ -760,7 +766,7 @@ export const SelectedCountriesSnapshot = {
           isGrabbed: false
         },
         {
-          text: 'Turkish',
+          text: 'Tobagonian Creole English',
           tabIndex: -1,
           isSelected: false,
           isGrabbed: false
@@ -820,7 +826,7 @@ export const MultipleSelectedCountriesSnapshot = {
           isGrabbed: false
         },
         {
-          text: 'Turkish',
+          text: 'Tobagonian Creole English',
           tabIndex: -1,
           isSelected: false,
           isGrabbed: false
@@ -868,7 +874,7 @@ export const DroppedCountriesSnapshot = {
           isGrabbed: false
         },
         {
-          text: 'Turkish',
+          text: 'Tobagonian Creole English',
           tabIndex: -1,
           isSelected: false,
           isGrabbed: false