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

…ired (#3233)
salesforce-ux · Apr 28, 2018 · 8d1a1b4 · 8d1a1b4
1 parent 5be8858
commit 8d1a1b4
Show file tree

Hide file tree

Showing 18 changed files with 100 additions and 212 deletions.
diff --git a/...mponents/dueling-picklist/__tests__/__snapshots__/renders_a_default_dueling_picklist.json b/...mponents/dueling-picklist/__tests__/__snapshots__/renders_a_default_dueling_picklist.json
diff --git a/...cklist/__tests__/__snapshots__/renders_a_default_dueling_picklist_with_no_reordering.json b/...cklist/__tests__/__snapshots__/renders_a_default_dueling_picklist_with_no_reordering.json
diff --git a/...ponents/dueling-picklist/__tests__/__snapshots__/renders_a_disabled_dueling_picklist.json b/...ponents/dueling-picklist/__tests__/__snapshots__/renders_a_disabled_dueling_picklist.json
diff --git a/...ng-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_dropped_option.json b/...ng-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_dropped_option.json
diff --git a/...ng-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_grabbed_option.json b/...ng-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_grabbed_option.json
diff --git a/...eling-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_group_label.json b/...eling-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_group_label.json
diff --git a/...g-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_required_option.json b/...g-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_required_option.json
diff --git a/...g-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_selected_option.json b/...g-picklist/__tests__/__snapshots__/renders_a_dueling_picklist_with_a_selected_option.json
diff --git a/...ist/__tests__/__snapshots__/renders_a_dueling_picklist_with_an_option_that_was_moved.json b/...ist/__tests__/__snapshots__/renders_a_dueling_picklist_with_an_option_that_was_moved.json
diff --git a/...snapshots__/renders_a_dueling_picklist_with_an_option_that_was_moved_to_another_list.json b/...snapshots__/renders_a_dueling_picklist_with_an_option_that_was_moved_to_another_list.json
diff --git a/...st/__tests__/__snapshots__/renders_a_dueling_picklist_with_multiple_selected_options.json b/...st/__tests__/__snapshots__/renders_a_dueling_picklist_with_multiple_selected_options.json
diff --git a/...nents/dueling-picklist/__tests__/__snapshots__/renders_a_responsive_dueling_picklist.json b/...nents/dueling-picklist/__tests__/__snapshots__/renders_a_responsive_dueling_picklist.json
diff --git a/...cklist/__tests__/__snapshots__/renders_a_responsive_non_reorderable_dueling_picklist.json b/...cklist/__tests__/__snapshots__/renders_a_responsive_non_reorderable_dueling_picklist.json
diff --git a/ui/components/dueling-picklist/__tests__/index.spec.js b/ui/components/dueling-picklist/__tests__/index.spec.js
@@ -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 />));
 

diff --git a/ui/components/dueling-picklist/base/example.jsx b/ui/components/dueling-picklist/base/example.jsx
@@ -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',

diff --git a/ui/components/dueling-picklist/docs.mdx b/ui/components/dueling-picklist/docs.mdx
@@ -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>
 

diff --git a/ui/components/dueling-picklist/index.js b/ui/components/dueling-picklist/index.js
@@ -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:

diff --git a/ui/components/form-element/base/_index.scss b/ui/components/form-element/base/_index.scss
@@ -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;