feat(OverflowMenuItem): support title prop (#7277)

* feat(OverflowMenuItem): allow custom titles * chore: update snapshots * docs(OverflowMenu): add custom titles to example Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Nov 12, 2020 · d27b3d3 · d27b3d3
1 parent c8bb7cd
commit d27b3d3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4173,6 +4173,9 @@ Map {
       "requireTitle": Object {
         "type": "bool",
       },
+      "title": Object {
+        "type": "string",
+      },
       "wrapperClassName": Object {
         "type": "string",
       },

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
@@ -77,11 +77,13 @@ export const Basic = withReadme(OverflowREADME, () => (
       {...props.menuItem()}
       itemText="Option 2 is an example of a really long string and how we recommend handling this"
       requireTitle
+      title="Custom tooltip title"
     />
     <OverflowMenuItem {...props.menuItem()} itemText="Option 3" />
     <OverflowMenuItem {...props.menuItem()} itemText="Option 4" />
     <OverflowMenuItem
       {...props.menuItem()}
+      requireTitle
       itemText="Danger option"
       hasDivider
       isDelete

diff --git a/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.js b/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.js
@@ -50,10 +50,12 @@ export default class OverflowMenuItem extends React.Component {
      * `true` to make this menu item a "danger button".
      */
     isDelete: PropTypes.bool,
+
     /**
      * The text in the menu item.
      */
     itemText: PropTypes.node.isRequired,
+
     /**
      * event handlers
      */
@@ -64,9 +66,7 @@ export default class OverflowMenuItem extends React.Component {
     onKeyUp: PropTypes.func,
     onMouseDown: PropTypes.func,
     onMouseEnter: PropTypes.func,
-
     onMouseLeave: PropTypes.func,
-
     onMouseUp: PropTypes.func,
 
     /**
@@ -79,10 +79,17 @@ export default class OverflowMenuItem extends React.Component {
         'be removed in the next major release of `carbon-components-react`. ' +
         'Opt for `selectorPrimaryFocus` in `<OverflowMenu>` instead'
     ),
+
     /**
      * `true` if this menu item has long text and requires a browser tooltip
      */
     requireTitle: PropTypes.bool,
+
+    /**
+     * Specify a title for the OverflowMenuItem
+     */
+    title: PropTypes.string,
+
     /**
      * The CSS class name to be placed on the wrapper list item element
      */
@@ -141,6 +148,7 @@ export default class OverflowMenuItem extends React.Component {
       wrapperClassName,
       requireTitle,
       index,
+      title,
       ...other
     } = this.props;
 
@@ -193,7 +201,7 @@ export default class OverflowMenuItem extends React.Component {
             onKeyDown(evt);
           }}
           ref={this.overflowMenuItem}
-          title={requireTitle ? itemText : null}
+          title={requireTitle ? title || itemText : null}
           tabIndex="-1"
           index={index}>
           {OverflowMenuItemContent}