feat(ListBoxMenuIcon): support translatable SVG icon title (#1802)

* feat(ListBoxMenuIcon): support translatable SVG icon title * feat(MultiSelect): pass custom SVG titles to ListBoxMenuIcon * chore: update snapshot * refactor(MultiSelect): use callback pattern for assigning SVG title * chore: update snapshot * fix(MultiSelect): remove default `translateWithid` prop value * chore: update snapshot
carbon-design-system · Feb 4, 2019 · 0e2f293 · 0e2f293
1 parent a29fb4f
commit 0e2f293
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/src/components/ListBox/ListBoxMenuIcon.js b/src/components/ListBox/ListBoxMenuIcon.js
@@ -40,7 +40,9 @@ const ListBoxMenuIcon = ({ isOpen, translateWithId: t }) => {
   return (
     <div className={className}>
       {componentsX ? (
-        <ChevronDown16 name="chevron--down" />
+        <ChevronDown16 name="chevron--down" aria-label={description}>
+          <title>{description}</title>
+        </ChevronDown16>
       ) : (
         <Icon
           icon={iconCaretDown}

diff --git a/src/components/MultiSelect/MultiSelect-story.js b/src/components/MultiSelect/MultiSelect-story.js
@@ -9,7 +9,13 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import {
+  withKnobs,
+  boolean,
+  select,
+  text,
+  object,
+} from '@storybook/addon-knobs';
 import MultiSelect from '../MultiSelect';
 
 const items = [
@@ -47,14 +53,25 @@ const props = () => ({
     'Invalid Selection'
   ),
   onChange: action('onChange'),
+  listBoxMenuIconTranslationIds: object(
+    'Listbox menu icon translation IDs (for translateWithId callback)',
+    {
+      'close.menu': 'Close menu',
+      'open.menu': 'Open menu',
+    }
+  ),
 });
 
 storiesOf('MultiSelect', module)
   .addDecorator(withKnobs)
   .add(
     'default',
     () => {
-      const { filterable, ...multiSelectProps } = props();
+      const {
+        filterable,
+        listBoxMenuIconTranslationIds,
+        ...multiSelectProps
+      } = props();
       const ComponentToUse = !filterable ? MultiSelect : MultiSelect.Filterable;
       const placeholder = !filterable ? undefined : defaultPlaceholder;
       return (
@@ -64,6 +81,7 @@ storiesOf('MultiSelect', module)
             items={items}
             itemToString={item => (item ? item.text : '')}
             placeholder={placeholder}
+            translateWithId={id => listBoxMenuIconTranslationIds[id]}
           />
         </div>
       );
@@ -79,7 +97,11 @@ storiesOf('MultiSelect', module)
   .add(
     'with initial selected items',
     () => {
-      const { filterable, ...multiSelectProps } = props();
+      const {
+        filterable,
+        listBoxMenuIconTranslationIds,
+        ...multiSelectProps
+      } = props();
       const ComponentToUse = !filterable ? MultiSelect : MultiSelect.Filterable;
       const placeholder = !filterable ? undefined : defaultPlaceholder;
       return (
@@ -90,6 +112,7 @@ storiesOf('MultiSelect', module)
             itemToString={item => (item ? item.text : '')}
             initialSelectedItems={[items[0], items[1]]}
             placeholder={placeholder}
+            translateWithId={id => listBoxMenuIconTranslationIds[id]}
           />
         </div>
       );

diff --git a/src/components/MultiSelect/MultiSelect.js b/src/components/MultiSelect/MultiSelect.js
@@ -91,6 +91,11 @@ export default class MultiSelect extends React.Component {
      * If invalid, what is the error?
      */
     invalidText: PropTypes.string,
+
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId: PropTypes.function,
   };
 
   static defaultProps = {
@@ -175,6 +180,7 @@ export default class MultiSelect extends React.Component {
       invalid,
       invalidText,
       useTitleInItem,
+      translateWithId,
     } = this.props;
     const className = cx(`${prefix}--multi-select`, containerClassName, {
       [`${prefix}--list-box--light`]: light,
@@ -217,7 +223,10 @@ export default class MultiSelect extends React.Component {
                     />
                   )}
                   <span className={`${prefix}--list-box__label`}>{label}</span>
-                  <ListBox.MenuIcon isOpen={isOpen} />
+                  <ListBox.MenuIcon
+                    isOpen={isOpen}
+                    translateWithId={translateWithId}
+                  />
                 </ListBox.Field>
                 {isOpen && (
                   <ListBox.Menu>