fix: added tooltips to setting icons in datatable (#19375)

Author: riddhybansal

packages/web-components/src/components/data-table/_table-action.scss

@@ -27,8 +27,6 @@
 :host(#{$prefix}-table-toolbar-content) {
   @extend .#{$prefix}--toolbar-content;
 
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-
   ::slotted(#{$prefix}-overflow-menu) {
     display: flex;
     block-size: $spacing-09;

packages/web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts

@@ -74,7 +74,6 @@ export const Default = {
         vel arcu pulvinar bibendum non sit amet ligula. Nullam ut nisi eu tellus
         aliquet vestibulum vel sit amet odio.</cds-table-header-description
       >
-
       <cds-table-toolbar slot="toolbar">
         <cds-table-batch-actions ?active="true">
           <cds-button>Delete ${TrashCan({ slot: 'icon' })}</cds-button>
@@ -96,6 +95,8 @@ export const Default = {
               slot: 'icon',
               class: `${prefix}--overflow-menu__icon`,
             })}
+            <span slot="tooltip-content">Settings</span>
+
             <cds-overflow-menu-body>
               <cds-overflow-menu-item @click=${() => alert('Alert 1')}>
                 Action 1
@@ -221,6 +222,8 @@ export const Playground = {
               slot: 'icon',
               class: `${prefix}--overflow-menu__icon`,
             })}
+            <span slot="tooltip-content">Settings</span>
+
             <cds-overflow-menu-body>
               <cds-overflow-menu-item @click=${() => alert('Alert 1')}>
                 Action 1

packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts

@@ -156,6 +156,7 @@ export const Default = {
               slot: 'icon',
               class: `${prefix}--overflow-menu__icon`,
             })}
+            <span slot="tooltip-content">Settings</span>
             <cds-overflow-menu-body flipped>
               <cds-overflow-menu-item @click=${addRow}
                 >Add row</cds-overflow-menu-item
@@ -297,6 +298,7 @@ export const Playground = {
               slot: 'icon',
               class: `${prefix}--overflow-menu__icon`,
             })}
+            <span slot="tooltip-content">Settings</span>
             <cds-overflow-menu-body flipped>
               <cds-overflow-menu-item @click=${addRow}
                 >Add row</cds-overflow-menu-item

packages/web-components/src/components/data-table/stories/data-table-filtering.stories.ts

@@ -70,6 +70,7 @@ export const Default = {
               slot: 'icon',
               class: `${prefix}--overflow-menu__icon`,
             })}
+            <span slot="tooltip-content">Settings</span>
             <cds-overflow-menu-body>
               <cds-overflow-menu-item> Action 1 </cds-overflow-menu-item>
               <cds-overflow-menu-item> Action 2 </cds-overflow-menu-item>
@@ -180,6 +181,7 @@ export const Playground = {
               slot: 'icon',
               class: `${prefix}--overflow-menu__icon`,
             })}
+            <span slot="tooltip-content">Settings</span>
             <cds-overflow-menu-body>
               <cds-overflow-menu-item> Action 1 </cds-overflow-menu-item>
               <cds-overflow-menu-item> Action 2 </cds-overflow-menu-item>

packages/web-components/src/components/data-table/stories/data-table-toolbar.stories.ts

@@ -81,6 +81,7 @@ export const Default = {
                 slot: 'icon',
                 class: `${prefix}--overflow-menu__icon`,
               })}
+              <span slot="tooltip-content">Settings</span>
               <cds-overflow-menu-body>
                 <cds-overflow-menu-item @click=${() => alert('Alert 1')}>
                   Action 1
@@ -184,6 +185,7 @@ export const PersistentToolbar = {
               slot: 'icon',
               class: `${prefix}--overflow-menu__icon`,
             })}
+            <span slot="tooltip-content">Settings</span>
             <cds-overflow-menu-body>
               <cds-overflow-menu-item @click=${() => alert('Alert 1')}>
                 Action 1
@@ -286,6 +288,7 @@ export const SmallPersistentToolbar = {
               slot: 'icon',
               class: `${prefix}--overflow-menu__icon`,
             })}
+            <span slot="tooltip-content">Settings</span>
             <cds-overflow-menu-body>
               <cds-overflow-menu-item> Action 1 </cds-overflow-menu-item>
               <cds-overflow-menu-item> Action 2 </cds-overflow-menu-item>
@@ -381,6 +384,7 @@ export const WithOverflowMenu = {
               slot: 'icon',
               class: `${prefix}--overflow-menu__icon`,
             })}
+            <span slot="tooltip-content">Settings</span>
             <cds-overflow-menu-body>
               <cds-overflow-menu-item @click=${() => alert('Alert 1')}>
                 Action 1
@@ -573,6 +577,7 @@ export const Playground = {
               slot: 'icon',
               class: `${prefix}--overflow-menu__icon`,
             })}
+            <span slot="tooltip-content">Settings</span>
             <cds-overflow-menu-body>
               <cds-overflow-menu-item> Action 1 </cds-overflow-menu-item>
               <cds-overflow-menu-item> Action 2 </cds-overflow-menu-item>