fix: overflow menu bg color on color tokens page (#3643)

* fix: overflow menu bg color on color tokens page * fix: tooltip alignment * fix: tooltip alignment * fix: typo --------- Co-authored-by: Francine Lucca <[email protected]>
carbon-design-system · Jul 14, 2023 · a0d9403 · a0d9403 · vercel · Jul 14, 2023
1 parent cd86c32
commit a0d9403
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/ColorTokenTable/ColorTokenTable.js b/src/components/ColorTokenTable/ColorTokenTable.js
@@ -102,7 +102,7 @@ export default class ColorTokenTable extends React.Component {
                 value[currentTheme].hex === '#ffffff' && '1px solid #BEBEBE',
             }}
           />
-          <OverflowMenu floatingMenu={false} flipped>
+          <OverflowMenu floatingMenu={false} flipped align="top-right">
             <CopyToClipboard text={value[currentTheme].hex}>
               <OverflowMenuItem primaryFocus itemText="Copy hex" />
             </CopyToClipboard>

diff --git a/src/components/ColorTokenTable/color-token-table.scss b/src/components/ColorTokenTable/color-token-table.scss
@@ -74,11 +74,15 @@
   justify-content: space-between;
 }
 
-.color-token-value .cds--overflow-menu {
+.color-token-value .cds--overflow-menu__wrapper {
   margin-left: $spacing-03;
   margin-top: -$spacing-03;
 }
 
+.color-token-value .cds--overflow-menu.cds--overflow-menu--open {
+  background-color: $layer-02;
+}
+
 .color-token-value .cds--overflow-menu-options {
   left: -9.25rem;
   top: $spacing-07;