Skip to content
Permalink
Browse files

fix(dueling picklist): Make group label and form-element wrapper requ…

…ired (#3233)
  • Loading branch information...
Ayesha Mazumdar
Ayesha Mazumdar committed Apr 28, 2018
1 parent 5be8858 commit 8d1a1b4c29a1650bef5d819bc02940673f0f084e
Showing with 100 additions and 212 deletions.
  1. +7 −4 ui/components/dueling-picklist/__tests__/__snapshots__/renders_a_default_dueling_picklist.json
  2. +5 −3 ...eling-picklist/__tests__/__snapshots__/renders_a_default_dueling_picklist_with_no_reordering.json
  3. +5 −3 ui/components/dueling-picklist/__tests__/__snapshots__/renders_a_disabled_dueling_picklist.json
  4. +5 −3 ...ts/dueling-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_dropped_option.json
  5. +5 −3 ...ts/dueling-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_grabbed_option.json
  6. +0 −63 ...nents/dueling-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_group_label.json
  7. +6 −4 ...s/dueling-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_required_option.json
  8. +5 −3 ...s/dueling-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_selected_option.json
  9. +5 −3 ...ng-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_an_option_that_was_moved.json
  10. +5 −3 ...sts__/__snapshots__/renders_a_dueling_picklist_with_an_option_that_was_moved_to_another_list.json
  11. +5 −3 ...g-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_multiple_selected_options.json
  12. +5 −3 ui/components/dueling-picklist/__tests__/__snapshots__/renders_a_responsive_dueling_picklist.json
  13. +5 −3 ...eling-picklist/__tests__/__snapshots__/renders_a_responsive_non_reorderable_dueling_picklist.json
  14. +0 −4 ui/components/dueling-picklist/__tests__/index.spec.js
  15. +0 −6 ui/components/dueling-picklist/base/example.jsx
  16. +4 −4 ui/components/dueling-picklist/docs.mdx
  17. +32 −96 ui/components/dueling-picklist/index.js
  18. +1 −1 ui/components/form-element/base/_index.scss

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -4,7 +4,6 @@ import React from 'react';
import {
MultiSelect,
DefaultSnapShot,
GroupLabelSnapShot,
LockedSnapShot,
DisabledSnapShot,
SelectedSnapShot,
@@ -23,9 +22,6 @@ const { matchesMarkupAndStyle } = createHelpers(__dirname);
it('renders a default dueling picklist', () =>
matchesMarkupAndStyle(<MultiSelect dataSet={DefaultSnapShot} />));

it('renders a dueling picklist with a group label', () =>
matchesMarkupAndStyle(<MultiSelect dataSet={GroupLabelSnapShot} />));

it('renders a default dueling picklist with no reordering', () =>
matchesMarkupAndStyle(<MultiSelect dataSet={DefaultSnapShot} noReorder />));

@@ -5,7 +5,6 @@ import React from 'react';
import {
MultiSelect,
DefaultSnapShot,
GroupLabelSnapShot,
LockedSnapShot,
DisabledSnapShot,
SelectedSnapShot,
@@ -23,11 +22,6 @@ import {
export default <MultiSelect dataSet={DefaultSnapShot} />;

export let states = [
{
id: 'group-label-dueling-picklist',
label: 'Group Label',
element: <MultiSelect dataSet={GroupLabelSnapShot} />
},
{
id: 'required-dueling-picklist',
label: 'Locked',
@@ -2,7 +2,7 @@ import CodeView from '../../../shared/components/CodeView';
import CodeBlock from '../../../shared/components/CodeBlock';
import Example from '../../../shared/components/Example';
import Blockquote from '../../../shared/components/Blockquote';
import { MultiSelect, MultiSelectViewMode, DefaultSnapShot, GroupLabelSnapShot, LockedSnapShot, DisabledSnapShot, SelectedSnapShot, MultiSelectedSnapShot, GrabbedSnapShot, MovedInSnapShot, DroppedSnapShot, MoveToSnapShot, CountriesSnapshot, SelectedCountriesSnapshot, MultipleSelectedCountriesSnapshot, DroppedCountriesSnapshot } from './';
import { MultiSelect, MultiSelectViewMode, DefaultSnapShot, LockedSnapShot, DisabledSnapShot, SelectedSnapShot, MultiSelectedSnapShot, GrabbedSnapShot, MovedInSnapShot, DroppedSnapShot, MoveToSnapShot, CountriesSnapshot, SelectedCountriesSnapshot, MultipleSelectedCountriesSnapshot, DroppedCountriesSnapshot } from './';
import { DoctypeIcon } from '../icons/doctype/example';

<div className="doc lead">
@@ -43,17 +43,17 @@ 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
## 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`.
A Dueling Picklist should have 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`.

<Blockquote header="Labeling the group" type="a11y">
It is important that the `slds-form-element` `<div>` has the `role="group"` attribute applied, along with `aria-labelledby`, whose value is the ID of the visible group label.
</Blockquote>

<Example title="Dueling Picklist With Group Label">
<CodeView>
<MultiSelect dataSet={GroupLabelSnapShot} />
<MultiSelect dataSet={DefaultSnapShot} />
</CodeView>
</Example>

@@ -11,7 +11,7 @@ import _ from '../../shared/helpers';
/// ////////////////////////////////////////

export const MultiSelect = props => {
const GroupedMultiSelect = () => (
return (
<div
className="slds-form-element"
role="group"
@@ -21,50 +21,41 @@ export const MultiSelect = props => {
id="picklist-group-label"
className="slds-form-element__label slds-form-element__legend slds-text-title_caps"
>
{props.dataSet.groupLabel}
</div>
<BaseMultiSelect dataSet={props.dataSet} />
</div>
);

const BaseMultiSelect = () => (
<div className="slds-dueling-list">
<div
className="slds-assistive-text"
id="drag-live-region"
aria-live="assertive"
>
{props.dataSet.liveRegionText}
Select Options
</div>
<div className="slds-assistive-text" id="option-drag-label">
{props.dataSet.optionDragLabel}
<div className="slds-dueling-list">
<div
className="slds-assistive-text"
id="drag-live-region"
aria-live="assertive"
>
{props.dataSet.liveRegionText}
</div>
<div className="slds-assistive-text" id="option-drag-label">
{props.dataSet.optionDragLabel}
</div>
<SelectionGroup
disabled={props.disabled}
isResponsive={props.isResponsive}
group={props.dataSet.selectionGroups[0]}
/>
<MoveButtons
direction="horizontal"
targetA={props.dataSet.selectionGroups[0].label}
targetB={props.dataSet.selectionGroups[1].label}
disabled={props.disabled}
/>
<SelectionGroup
disabled={props.disabled}
isResponsive={props.isResponsive}
group={props.dataSet.selectionGroups[1]}
/>
{!props.noReorder && (
<MoveButtons disabled={props.disabled} direction="vertical" />
)}
</div>
<SelectionGroup
disabled={props.disabled}
isResponsive={props.isResponsive}
group={props.dataSet.selectionGroups[0]}
/>
<MoveButtons
direction="horizontal"
targetA={props.dataSet.selectionGroups[0].label}
targetB={props.dataSet.selectionGroups[1].label}
disabled={props.disabled}
/>
<SelectionGroup
disabled={props.disabled}
isResponsive={props.isResponsive}
group={props.dataSet.selectionGroups[1]}
/>
{!props.noReorder && (
<MoveButtons disabled={props.disabled} direction="vertical" />
)}
</div>
);
return props.dataSet.groupLabel ? (
<GroupedMultiSelect />
) : (
<BaseMultiSelect />
);
};

export const MultiSelectViewMode = props => {
@@ -262,61 +253,6 @@ 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:
@@ -20,7 +20,7 @@
* Creates label styles for our form elements
*
* @selector .slds-form-element__label
* @restrict .slds-form-element label, .slds-form-element span, .slds-form-element legend, [class*='slds-checkbox'] span, [class*='slds-radio'] span, span
* @restrict .slds-form-element label, .slds-form-element span, .slds-form-element legend, .slds-form-element div, [class*='slds-checkbox'] span, [class*='slds-radio'] span
*/
&__label {
display: inline-block;

0 comments on commit 8d1a1b4

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