Skip to content
Permalink
Browse files

fix(dueling-picklist): New class 'slds-dueling-picklist__column_respo…

…nsive' for responsive dueling picklists (#3142)
  • Loading branch information...
Ayesha Mazumdar
Ayesha Mazumdar committed Mar 12, 2018
1 parent 1b8e6b8 commit 40001501cf09c4eb97435d38fc5f43300f4102df

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -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 />));
@@ -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
*
@@ -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',
@@ -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

@@ -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

0 comments on commit 4000150

Please sign in to comment.
You can’t perform that action at this time.