fix(ListBoxTrigger): support title on ListBoxTrigger (#8094)

* fix(ListBoxTrigger): support title on ListBoxTrigger * docs(ListBox): add translateWithId knob in ComboBox and dropdown Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 17, 2021 · 8d39b78 · 8d39b78
1 parent 322ca4d
commit 8d39b78
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
+import { boolean, object, select, text } from '@storybook/addon-knobs';
 import ComboBox from '../ComboBox';
 import mdx from './ComboBox.mdx';
 
@@ -91,17 +91,29 @@ const props = () => ({
     'Warning state text (warnText)',
     'This mode may perform worse on older machines'
   ),
+  listBoxMenuIconTranslationIds: object(
+    'Listbox menu icon translation IDs (for translateWithId callback)',
+    {
+      'close.menu': 'Close menu',
+      'open.menu': 'Open menu',
+      'clear.selection': 'Clear selection',
+    }
+  ),
 });
 
-export const Playground = () => (
-  <div style={{ width: 300 }}>
-    <ComboBox
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-      {...props()}
-    />
-  </div>
-);
+export const Playground = () => {
+  const { listBoxMenuIconTranslationIds, ...comboBoxProps } = props();
+  return (
+    <div style={{ width: 300 }}>
+      <ComboBox
+        {...comboBoxProps}
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+      />
+    </div>
+  );
+};
 
 export const disabled = () => (
   <div style={{ width: 300 }}>

diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -7,7 +7,13 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import {
+  withKnobs,
+  boolean,
+  object,
+  select,
+  text,
+} from '@storybook/addon-knobs';
 import Dropdown from '../Dropdown';
 import DropdownSkeleton from './Dropdown.Skeleton';
 import mdx from './Dropdown.mdx';
@@ -78,6 +84,13 @@ const props = () => ({
     'Warning state text (warnText)',
     'This mode may perform worse on older machines'
   ),
+  listBoxMenuIconTranslationIds: object(
+    'Listbox menu icon translation IDs (for translateWithId callback)',
+    {
+      'close.menu': 'Close menu',
+      'open.menu': 'Open menu',
+    }
+  ),
 });
 
 export default {
@@ -125,12 +138,14 @@ export const Inline = () => (
 );
 
 export const Playground = () => {
+  const { listBoxMenuIconTranslationIds, ...dropdownProps } = props();
   return (
     <div style={{ width: 300 }}>
       <Dropdown
-        {...props()}
+        {...dropdownProps}
         items={items}
         itemToString={(item) => (item ? item.text : '')}
+        translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
       />
     </div>
   );

diff --git a/packages/react/src/components/ListBox/next/ListBoxTrigger.js b/packages/react/src/components/ListBox/next/ListBoxTrigger.js
@@ -36,6 +36,7 @@ const ListBoxTrigger = ({ isOpen, translateWithId: t, ...rest }) => {
     <button
       {...rest}
       aria-label={description}
+      title={description}
       className={className}
       type="button"
       tabIndex="-1">