fix(Button): fix btnTextHoverBg, btnTextActiveBg vars in Theme2022Dark (

#3464)
skbkontur · Aug 26, 2024 · c6d70a3 · c6d70a3
1 parent eaeed3e
commit c6d70a3
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 1 deletion.
diff --git a/....creevey/images/Button/Btn Text Bg Hover Active/hover/firefox2022Dark/hover.png b/....creevey/images/Button/Btn Text Bg Hover Active/hover/firefox2022Dark/hover.png
diff --git a/...evey/images/Button/Btn Text Bg Hover Active/pressed/firefox2022Dark/pressed.png b/...evey/images/Button/Btn Text Bg Hover Active/pressed/firefox2022Dark/pressed.png
diff --git a/packages/react-ui/components/Button/__stories__/Button.stories.tsx b/packages/react-ui/components/Button/__stories__/Button.stories.tsx
@@ -15,6 +15,9 @@ import { Gapped } from '../../Gapped';
 import { ComponentTable } from '../../../internal/ComponentTable';
 import { ReactUIFeatureFlagsContext } from '../../../lib/featureFlagsContext';
 import { Button, ButtonProps } from '../Button';
+import { THEME_2022_DARK } from '../../../lib/theming/themes/Theme2022Dark';
+import { ThemeFactory } from '../../../lib/theming/ThemeFactory';
+import { ThemeContext } from '../../../lib/theming/ThemeContext';
 
 export default {
   title: 'Button',
@@ -719,3 +722,35 @@ HoverTextColor.parameters = {
     },
   },
 };
+
+export const BtnTextBgHoverActive: Story = () => {
+  const myTheme = ThemeFactory.create(
+    {
+      btnTextHoverBg: 'red',
+      btnTextActiveBg: 'green',
+    },
+    THEME_2022_DARK,
+  );
+
+  return (
+    <ThemeContext.Provider value={myTheme}>
+      <Button data-tid="test-button" use="text">
+        Text
+      </Button>
+    </ThemeContext.Provider>
+  );
+};
+
+BtnTextBgHoverActive.parameters = {
+  creevey: {
+    skip: {
+      'hover does not work in chrome & only 22 dark theme needed': {
+        in: /^(?!\bfirefox2022Dark?\b)/,
+      },
+    },
+    tests: {
+      hover: buttonTests.hover,
+      pressed: buttonTests.pressed,
+    },
+  },
+};
diff --git a/packages/react-ui/internal/themes/Theme2022Dark.ts b/packages/react-ui/internal/themes/Theme2022Dark.ts
@@ -70,7 +70,7 @@ export class Theme2022Dark extends (class {} as typeof Theme2022Internal) {
   public static btnBacklessHoverBorderColor = 'rgba(255, 255, 255, 0.1)';
   public static btnBacklessTextColor = 'rgba(255, 255, 255, 0.87)';
 
-  public static btnTextBg = 'transparent !important';
+  public static btnTextBg = 'transparent';
   public static btnTextHoverBg = 'rgba(255, 255, 255, 0.1)';
   public static btnTextActiveBg = 'rgba(255, 255, 255, 0.06)';
   public static btnTextBorderColor = 'transparent';