diff --git a/ui/components/dueling-picklist/__tests__/__snapshots__/renders_a_default_dueling_picklist_with_no_reordering.json b/ui/components/dueling-picklist/__tests__/__snapshots__/renders_a_default_dueling_picklist_with_no_reordering.json
index 822e047307..34abb53a66 100644
--- a/ui/components/dueling-picklist/__tests__/__snapshots__/renders_a_default_dueling_picklist_with_no_reordering.json
+++ b/ui/components/dueling-picklist/__tests__/__snapshots__/renders_a_default_dueling_picklist_with_no_reordering.json
@@ -1,6 +1,7 @@
{
"snapshot": {
- "html": "\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
Option 5: final position 1 of 2.
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 5 \n \n
\n \n \n \n \n Option 4 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
Option 5: final position 1 of 2.
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 5 \n \n
\n \n \n \n \n Option 4 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
Option 5: current position 2 of 2. Press up or down arrows to move within list.
\n
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
Option 5: current position 2 of 2. Press up or down arrows to move within list.
\n
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists. Required items must remain in the second category.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists. Required items must remain in the second category.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
Option 5: current position 1 of 2.
\n
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 5 \n \n
\n \n \n \n \n Option 4 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
Option 5: current position 1 of 2.
\n
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 5 \n \n
\n \n \n \n \n Option 4 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
Option 5: current position 1 of 2.
\n
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 5 \n \n
\n \n \n \n \n Option 4 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
Option 5: current position 1 of 2.
\n
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 5 \n \n
\n \n \n \n \n Option 4 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection Up \n \n \n \n \n Move Selection Down \n \n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n
First Category \n
\n
\n \n \n \n Option 1 \n \n
\n \n \n \n \n Option 2 \n \n
\n \n \n \n \n Option 3 \n \n
\n \n \n \n \n Option 6 \n \n
\n \n \n
\n
\n
\n \n \n \n Move Selection to Second Category \n \n \n \n \n Move Selection to First Category \n \n
\n
\n
Second Category \n
\n
\n \n \n \n Option 4 \n \n
\n \n \n \n \n Option 5 \n \n
\n \n \n
\n
\n
@@ -43,11 +43,25 @@ 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
+## Showing a Group Label
+
+A Dueling Picklist has the option to display a group label, similar to using a `fieldset` and `legend` on grouped form controls. To achieve this, wrap the Dueling Picklist in an `slds-form-element` and add a `div` with the same class names that are applied to a `legend` element in a fieldset, `slds-form-element__label slds-form-element__legend slds-text-title_caps`.
+
+
+ It is important that the `slds-form-element` `` has the `role="group"` attribute applied, along with `aria-labelledby`, whose value is the ID of the visible group label.
+
+
+
+
+
+
+
## Responsive
To make the dueling picklist responsive or use it within narrow regions, apply the class `slds-dueling-picklist__column_responsive` to the `
`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.
-
+
diff --git a/ui/components/dueling-picklist/index.js b/ui/components/dueling-picklist/index.js
index 2e4710fc61..db90847312 100644
--- a/ui/components/dueling-picklist/index.js
+++ b/ui/components/dueling-picklist/index.js
@@ -11,7 +11,23 @@ import _ from '../../shared/helpers';
/// ////////////////////////////////////////
export const MultiSelect = props => {
- return (
+ const GroupedMultiSelect = () => (
+
+
+ {props.dataSet.groupLabel}
+
+
+
{
)}
);
+ return props.dataSet.groupLabel ? (
+
+ ) : (
+
+ );
};
export const MultiSelectViewMode = props => {
@@ -241,6 +262,61 @@ export const DefaultSnapShot = {
]
};
+export const GroupLabelSnapShot = {
+ groupLabel: 'Select an option',
+ liveRegionText: '',
+ optionDragLabel:
+ 'Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.',
+ selectionGroups: [
+ {
+ label: 'First Category',
+ options: [
+ {
+ text: 'Option 1',
+ tabIndex: 0,
+ isSelected: false,
+ isGrabbed: false
+ },
+ {
+ text: 'Option 2',
+ tabIndex: -1,
+ isSelected: false,
+ isGrabbed: false
+ },
+ {
+ text: 'Option 3',
+ tabIndex: -1,
+ isSelected: false,
+ isGrabbed: false
+ },
+ {
+ text: 'Option 6',
+ tabIndex: -1,
+ isSelected: false,
+ isGrabbed: false
+ }
+ ]
+ },
+ {
+ label: 'Second Category',
+ options: [
+ {
+ text: 'Option 4',
+ tabIndex: 0,
+ isSelected: false,
+ isGrabbed: false
+ },
+ {
+ text: 'Option 5',
+ tabIndex: -1,
+ isSelected: false,
+ isGrabbed: false
+ }
+ ]
+ }
+ ]
+};
+
export const DisabledSnapShot = {
liveRegionText: '',
optionDragLabel: