Merge 60eab2d into e771864

carbon-design-system · Feb 13, 2023 · 3850bae · 3850bae
2 parents e771864 + 60eab2d
commit 3850bae
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 3 deletions.
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.test.jsx b/packages/react/src/components/OverflowMenu/OverflowMenu.test.jsx
@@ -388,4 +388,14 @@ describe('IotOverflowMenu', () => {
     userEvent.type(baseElement, '{escape}');
     expect(baseElement.querySelector('ul')).toBeNull();
   });
+
+  it('should render button with label', () => {
+    render(
+      <OverflowMenu testId={testId} withCarbonTooltip buttonLabel="More">
+        <OverflowMenuItem itemText="Option 1" />
+      </OverflowMenu>
+    );
+
+    expect(screen.getByRole('button')).toHaveTextContent('More');
+  });
 });
diff --git a/packages/react/src/components/OverflowMenu/_overflow-menu.scss b/packages/react/src/components/OverflowMenu/_overflow-menu.scss
@@ -13,10 +13,19 @@ button.#{$iot-prefix}--overflow-menu-icon {
   }
 
   &.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
-    & svg,
+    & svg {
+      fill: $ui-05;
+      margin-left: 0;
+    }
+
     &:hover svg,
     &:focus svg {
       fill: $ui-05;
     }
   }
 }
+
+button.#{$iot-prefix}--overflow-menu--with-label {
+  width: unset;
+  font-size: 0.875rem;
+}
diff --git a/packages/react/src/components/OverflowMenu/index.jsx b/packages/react/src/components/OverflowMenu/index.jsx
@@ -184,6 +184,11 @@ class IotOverflowMenu extends Component {
      * Language direction
      */
     langDir: PropTypes.oneOf(['ltr', 'rtl']),
+
+    /**
+     * Label for the overflow menu button
+     */
+    buttonLabel: PropTypes.string,
   };
 
   // eslint-disable-next-line react/sort-comp
@@ -208,6 +213,7 @@ class IotOverflowMenu extends Component {
     tooltipPosition: 'top',
     size: 'md',
     langDir: 'ltr',
+    buttonLabel: '',
   };
 
   /**
@@ -488,6 +494,7 @@ class IotOverflowMenu extends Component {
       tooltipPosition,
       className,
       langDir, // Not to pollute DOM
+      buttonLabel,
       ...other
     } = this.props;
 
@@ -497,6 +504,7 @@ class IotOverflowMenu extends Component {
       [`${prefix}--overflow-menu--open`]: open,
       [`${prefix}--overflow-menu--light`]: light,
       [`${prefix}--overflow-menu--${size}`]: size,
+      [`${iotPrefix}--overflow-menu--with-label`]: buttonLabel,
     });
 
     const overflowMenuOptionsClasses = classNames(
@@ -560,7 +568,7 @@ class IotOverflowMenu extends Component {
               [`${iotPrefix}--table-toolbar-button-active`]: false, // https://github.com/carbon-design-system/carbon/issues/6160
             }
           )}
-          kind="icon-selection"
+          kind={buttonLabel ? 'primary' : 'icon-selection'}
           iconDescription={ariaLabel}
           onKeyDown={this.handleKeyPress}
           onClick={this.handleClick}
@@ -571,6 +579,7 @@ class IotOverflowMenu extends Component {
           aria-haspopup
           aria-expanded={open}
         >
+          {buttonLabel || null}
           {open && wrappedMenuBody}
         </Button>
       </ClickListener>
@@ -585,6 +594,7 @@ export const OverflowMenu = ({
   flipped,
   testId,
   withCarbonTooltip,
+  buttonLabel,
   ...props
 }) => {
   const [calculateMenuOffset, { adjustedDirection, adjustedFlipped }] = usePopoverPositioning({
@@ -607,6 +617,7 @@ export const OverflowMenu = ({
         menuOffset={calculateMenuOffset}
         menuOffsetFlip={calculateMenuOffset}
         langDir={langDir}
+        buttonLabel={buttonLabel}
       />
     );
   }
@@ -628,13 +639,15 @@ OverflowMenu.propTypes = {
   useAutoPositioning: PropTypes.bool,
   testId: PropTypes.string,
   withCarbonTooltip: PropTypes.bool,
+  buttonLabel: PropTypes.string,
 };
 
 OverflowMenu.defaultProps = {
   ...CarbonOverflowMenu.defaultProps,
   useAutoPositioning: false,
   testId: 'overflow-menu',
   withCarbonTooltip: false,
+  buttonLabel: '',
 };
 
 export default OverflowMenu;
diff --git a/packages/react/src/components/Table/Table.jsx b/packages/react/src/components/Table/Table.jsx
@@ -561,6 +561,7 @@ export const defaultProps = (baseProps) => ({
     actionFailedText: 'Action failed',
     toolbarTooltipLabel: 'Toolbar tooltip',
     filterRowIconDescription: 'Edit filters',
+    batchActionsOverflowMenuText: '',
   },
   error: null,
   // TODO: set default in v3. Leaving null for backwards compat. to match 'id' which was
@@ -876,6 +877,7 @@ const Table = (props) => {
               toggleAggregations: i18n.toggleAggregations,
               toolbarLabelAria: i18n.toolbarLabelAria,
               toolbarTooltipLabel: i18n.toolbarTooltipLabel,
+              batchActionsOverflowMenuText: i18n.batchActionsOverflowMenuText,
             }}
             actions={{
               ...pick(

diff --git a/packages/react/src/components/Table/Table.story.helpers.jsx b/packages/react/src/components/Table/Table.story.helpers.jsx
@@ -1610,6 +1610,7 @@ export const getI18nKnobs = (useGroup = true) => {
     multiSortCloseMenu: text('i18n.multiSortCloseMenu', 'Close menu', I18N_GROUP),
     multiSortDragHandle: text('i18n.multiSortDragHandle', 'Drag handle', I18N_GROUP),
     toolbarTooltipLabel: text('i18n.toolbarTooltipLabel', 'Toolbar tooltip', I18N_GROUP),
+    batchActionsOverflowMenuText: text('i18n.batchActionsOverflowMenuText', '', I18N_GROUP),
   };
 };
 

diff --git a/packages/react/src/components/Table/TablePropTypes.js b/packages/react/src/components/Table/TablePropTypes.js
@@ -225,6 +225,8 @@ export const I18NPropTypes = PropTypes.shape({
   toolbarTooltipLabel: PropTypes.string,
   /** tooltip text for filter row icon button */
   filterRowIconDescription: PropTypes.string,
+  /** button label for batch action overflow menu */
+  batchActionsOverflowMenuText: PropTypes.string,
 });
 
 export const defaultI18NPropTypes = {

diff --git a/packages/react/src/components/Table/TableToolbar/TableToolbar.jsx b/packages/react/src/components/Table/TableToolbar/TableToolbar.jsx
@@ -100,6 +100,8 @@ const propTypes = {
     downloadIconDescription: PropTypes.string,
     /** aria-label applied to the tooltip in the toolbar (if given) */
     toolbarTooltipLabel: PropTypes.string,
+    /** button label for batch action overflow menu */
+    batchActionsOverflowMenuText: PropTypes.string,
   }),
   /**
    * Action callbacks to update tableState
@@ -365,6 +367,7 @@ const TableToolbar = ({
               menuOptionsClass={`${iotPrefix}--table-overflow-batch-actions__menu`}
               withCarbonTooltip
               tooltipPosition="bottom"
+              buttonLabel={i18n.batchActionsOverflowMenuText}
             >
               {visibleOverflowBatchActions.map(
                 ({

diff --git a/packages/react/src/components/Table/TableToolbar/_table-toolbar.scss b/packages/react/src/components/Table/TableToolbar/_table-toolbar.scss
@@ -139,7 +139,8 @@ html[dir='rtl'] {
     outline-offset: -($spacing-01);
   }
 
-  > svg {
+  &.#{$iot-prefix}--overflow-menu-icon.#{$iot-prefix}--tooltip-svg-wrapper
+    svg.#{$prefix}--btn__icon {
     fill: $ui-01;
   }
 
@@ -149,6 +150,11 @@ html[dir='rtl'] {
     & + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
       opacity: 0;
     }
+
+    &.#{$iot-prefix}--overflow-menu-icon.#{$iot-prefix}--tooltip-svg-wrapper
+      svg.#{$prefix}--btn__icon {
+      fill: $ui-01;
+    }
   }
 }
 

diff --git a/packages/react/src/components/Table/mdx/Table.mdx b/packages/react/src/components/Table/mdx/Table.mdx
@@ -745,6 +745,7 @@ import TableViewDropdownContent from '../TableViewDropdown/TableViewDropdownCont
 | multiSortDescending              | string       | 'Descending'             |                                                        |
 | loadMoreText                     | string       | 'Load more...'           |                                                        |
 | filterRowIconDescription         | string       | 'Edit filters'           |                                                        |
+| batchActionsOverflowMenuText     | string       |                          | Batch action overflow menu label                       |
 
 ## Source Code
 

diff --git a/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap b/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
@@ -647,6 +647,7 @@ Map {
       "error": null,
       "i18n": Object {
         "actionFailedText": "Action failed",
+        "batchActionsOverflowMenuText": "",
         "batchCancel": "Cancel",
         "buttonLabelOnTableError": "Refresh the page",
         "clearAllFilters": "Clear all filters",
@@ -1278,6 +1279,9 @@ Map {
             "actionFailedText": Object {
               "type": "string",
             },
+            "batchActionsOverflowMenuText": Object {
+              "type": "string",
+            },
             "batchCancel": Object {
               "type": "string",
             },
@@ -2647,6 +2651,9 @@ Map {
             "actionFailedText": Object {
               "type": "string",
             },
+            "batchActionsOverflowMenuText": Object {
+              "type": "string",
+            },
             "batchCancel": Object {
               "type": "string",
             },
@@ -4554,6 +4561,9 @@ Map {
       "i18n": Object {
         "args": Array [
           Object {
+            "batchActionsOverflowMenuText": Object {
+              "type": "string",
+            },
             "batchCancel": Object {
               "type": "string",
             },