Skip to content
Permalink
Browse files

fix(dueling picklist): Remove required in favour of locked options in…

… the listbox with updated visuals
  • Loading branch information...
SiTaggart committed Sep 25, 2017
1 parent bf965db commit 3556b2697f750b944f1ac4ce660941b126d6f787
Showing with 31 additions and 14 deletions.
  1. +3 −3 ui/components/dueling-picklist/base/example.jsx
  2. +28 −11 ui/components/dueling-picklist/index.js
@@ -5,7 +5,7 @@ import React from 'react';
import {
MultiSelect,
DefaultSnapShot,
RequiredSnapShot,
LockedSnapShot,
DisabledSnapShot,
SelectedSnapShot,
MultiSelectedSnapShot,
@@ -23,8 +23,8 @@ export default <MultiSelect dataSet={DefaultSnapShot} />;
export let states = [
{
id: 'required-dueling-picklist',
label: 'Required',
element: <MultiSelect dataSet={RequiredSnapShot} />
label: 'Locked',
element: <MultiSelect dataSet={LockedSnapShot} />
},
{
id: 'disabled-dueling-picklist',
@@ -90,6 +90,7 @@ const SelectionGroup = props => {
disabled={props.disabled}
options={props.group.options}
ariaLabelledby={groupLabelID}
listboxLabel={props.group.label}
/>
</div>
);
@@ -111,7 +112,11 @@ const ListBox = props => (
role="listbox"
>
{props.options.map(option => (
<Option key={_.uniqueId('cell-resize-handle-')} option={option} />
<Option
key={_.uniqueId('cell-resize-handle-')}
option={option}
listboxLabel={props.listboxLabel}
/>
))}
</ul>
</div>
@@ -121,7 +126,7 @@ const Option = props => (
<li role="presentation" className="slds-listbox__item">
<div
className={classNames(
'slds-listbox__option slds-listbox__option_plain slds-media',
'slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline',
{
'slds-is-grabbed': props.option.isGrabbed,
'slds-is-selected': props.option.isSelected
@@ -132,14 +137,26 @@ const Option = props => (
role="option"
tabIndex={props.option.tabIndex}
>
<span className="slds-truncate" title={props.option.text}>
{props.option.text}
{props.option.required ? (
<abbr className="slds-required" title="required">
*
</abbr>
) : null}
<span className="slds-media__body">
<span className="slds-truncate" title={props.option.text}>
{props.option.text}
</span>
</span>
{props.option.locked && (
<span className="slds-media__figure slds-media__figure_reverse">
<span className="slds-icon_container" title="Locked item">
<SvgIcon
className="slds-icon slds-icon_x-small slds-icon-text-default"
sprite="utility"
symbol="lock"
/>
<span className="slds-assistive-text">
{' '}
: item cannot be removed from {props.listboxLabel}
</span>
</span>
</span>
)}
</div>
</li>
);
@@ -256,7 +273,7 @@ export const DisabledSnapShot = {
]
};

export const RequiredSnapShot = {
export const LockedSnapShot = {
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. Required items must remain in the second category.',
@@ -298,7 +315,7 @@ export const RequiredSnapShot = {
tabIndex: 0,
isSelected: false,
isGrabbed: false,
required: true
locked: true
},
{
text: 'Option 5',

0 comments on commit 3556b26

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