fix(table-toolbar-menu): update styles to use layer-02 (#15982)

* fix(table-toolbar-menu): update styles to use layer-02 * chore: updates snapshots --------- Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
carbon-design-system · Mar 18, 2024 · 6d409a7 · 6d409a7
1 parent e0454a5
commit 6d409a7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2251,6 +2251,9 @@ Map {
         "iconDescription": Object {
           "type": "string",
         },
+        "menuOptionsClass": Object {
+          "type": "string",
+        },
         "renderIcon": Object {
           "args": Array [
             Array [
@@ -8051,6 +8054,9 @@ Map {
       "iconDescription": Object {
         "type": "string",
       },
+      "menuOptionsClass": Object {
+        "type": "string",
+      },
       "renderIcon": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/DataTable/TableToolbarMenu.tsx b/packages/react/src/components/DataTable/TableToolbarMenu.tsx
@@ -19,7 +19,7 @@ export interface TableToolbarMenuProps
   children: React.ReactNode;
 
   /**
-   * Provide an optional class name for the toolbar menu
+   * Provide an optional class name for the toolbar menu trigger button
    */
   className?: string;
 
@@ -28,6 +28,11 @@ export interface TableToolbarMenuProps
    */
   iconDescription?: string;
 
+  /**
+   * Provide an optional class name for the toolbar menu
+   */
+  menuOptionsClass?: string;
+
   /**
    * Optional prop to allow overriding the default menu icon
    */
@@ -39,20 +44,26 @@ const TableToolbarMenu: React.FC<TableToolbarMenuProps> = ({
   renderIcon = Settings,
   iconDescription = defaultIconDescription,
   children,
+  menuOptionsClass,
   ...rest
 }) => {
   const prefix = usePrefix();
   const toolbarActionClasses = cx(
     className,
     `${prefix}--toolbar-action ${prefix}--overflow-menu`
   );
+  const menuOptionsClasses = cx(
+    menuOptionsClass,
+    `${prefix}--toolbar-action__menu`
+  );
   return (
     <OverflowMenu
       aria-label={iconDescription}
       renderIcon={renderIcon}
       className={toolbarActionClasses}
       title={iconDescription}
       iconDescription={iconDescription}
+      menuOptionsClass={menuOptionsClasses}
       flipped
       {...rest}>
       {children}
@@ -73,6 +84,11 @@ TableToolbarMenu.propTypes = {
    */
   iconDescription: PropTypes.string,
 
+  /**
+   * Provide an optional class name for the toolbar menu
+   */
+  menuOptionsClass: PropTypes.string,
+
   /**
    * Optional prop to allow overriding the default menu icon
    */

diff --git a/packages/styles/scss/components/data-table/action/_data-table-action.scss b/packages/styles/scss/components/data-table/action/_data-table-action.scss
@@ -272,8 +272,9 @@
     background-color: $field-hover;
   }
 
+  .#{$prefix}--toolbar-action[aria-expanded='true'],
   .#{$prefix}--toolbar-action:hover[aria-expanded='true'] {
-    background-color: $layer;
+    background-color: $layer-02;
   }
 
   .#{$prefix}--toolbar-action[disabled] {
@@ -315,6 +316,14 @@
     max-inline-size: $spacing-05;
   }
 
+  //-------------------------------------------------
+  //TOOLBAR Menu
+  //-------------------------------------------------
+  .#{$prefix}--toolbar-action__menu,
+  .#{$prefix}--toolbar-action__menu.#{$prefix}--overflow-menu-options::after {
+    background-color: $layer-02;
+  }
+
   //-------------------------------------------------
   //PERSISTENT SEARCH - OPTIONAL TOOLBAR
   //-------------------------------------------------