fix(Button): update styles in disabled Button (#3279)

skbkontur · Oct 5, 2023 · 80e2f91 · 80e2f91
1 parent 3646b08
commit 80e2f91
Show file tree

Hide file tree

Showing 14 changed files with 32 additions and 21 deletions.
diff --git a/packages/react-ui/.creevey/images/Button/Borderless/chrome2022Dark.png b/packages/react-ui/.creevey/images/Button/Borderless/chrome2022Dark.png
diff --git a/packages/react-ui/.creevey/images/Button/Borderless/firefox2022Dark.png b/packages/react-ui/.creevey/images/Button/Borderless/firefox2022Dark.png
diff --git a/...ges/react-ui/.creevey/images/Button/Different Prioritization/chrome2022Dark.png b/...ges/react-ui/.creevey/images/Button/Different Prioritization/chrome2022Dark.png
diff --git a/...es/react-ui/.creevey/images/Button/Different Prioritization/firefox2022Dark.png b/...es/react-ui/.creevey/images/Button/Different Prioritization/firefox2022Dark.png
diff --git a/packages/react-ui/.creevey/images/Button/Disabled/chrome2022Dark.png b/packages/react-ui/.creevey/images/Button/Disabled/chrome2022Dark.png
diff --git a/packages/react-ui/.creevey/images/Button/Disabled/firefox2022Dark.png b/packages/react-ui/.creevey/images/Button/Disabled/firefox2022Dark.png
diff --git a/packages/react-ui/.creevey/images/Button/Icon/chrome2022Dark.png b/packages/react-ui/.creevey/images/Button/Icon/chrome2022Dark.png
diff --git a/packages/react-ui/.creevey/images/Button/Icon/firefox2022Dark.png b/packages/react-ui/.creevey/images/Button/Icon/firefox2022Dark.png
diff --git a/packages/react-ui/.creevey/images/Button/Loading/chrome2022Dark.png b/packages/react-ui/.creevey/images/Button/Loading/chrome2022Dark.png
diff --git a/packages/react-ui/.creevey/images/Button/Loading/firefox2022Dark.png b/packages/react-ui/.creevey/images/Button/Loading/firefox2022Dark.png
diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts
@@ -966,6 +966,12 @@ export const styles = memoizeStyle({
     `;
   },
 
+  backlessDisabled2022(t: Theme) {
+    return css`
+      box-shadow: 0 0 0 1px ${t.btnBacklessDisabledBorderColor};
+    `;
+  },
+
   loading() {
     return css`
       position: absolute;

diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx
@@ -317,6 +317,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
               checked && styles.checkedDisabled(this.theme),
               checked && styles.checkedDisabled2022(this.theme),
               borderless && styles.borderless2022(),
+              use === 'backless' && !checked && styles.backlessDisabled2022(this.theme),
             ]
           : [
               active && !checked && activeStyles[use](this.theme),

diff --git a/packages/react-ui/internal/themes/DefaultTheme.ts b/packages/react-ui/internal/themes/DefaultTheme.ts
@@ -531,6 +531,9 @@ export class DefaultTheme {
   public static get btnBacklessBorderColor() {
     return this.btnDefaultBorderColor;
   }
+  public static get btnBacklessDisabledBorderColor() {
+    return this.btnDisabledBorderColor;
+  }
   public static get btnBacklessHoverBorderColor() {
     return this.btnBacklessBorderColor;
   }

diff --git a/packages/react-ui/internal/themes/Theme2022Dark.ts b/packages/react-ui/internal/themes/Theme2022Dark.ts
@@ -66,10 +66,11 @@ export class Theme2022Dark extends (class {} as typeof Theme2022Internal) {
   public static btnBacklessHoverBg = 'rgba(255, 255, 255, 0.1) !important';
   public static btnBacklessActiveBg = 'rgba(255, 255, 255, 0.06) !important';
   public static btnBacklessBorderColor = 'rgba(255, 255, 255, 0.16) !important';
+  public static btnBacklessDisabledBorderColor = 'rgba(255, 255, 255, 0.06) !important';
   public static btnBacklessHoverBorderColor = 'rgba(255, 255, 255, 0.1)';
   public static btnBacklessTextColor = 'rgba(255, 255, 255, 0.87)';
 
-  public static btnTextBg = 'transparent';
+  public static btnTextBg = 'transparent !important';
   public static btnTextHoverBg = 'rgba(255, 255, 255, 0.1)';
   public static btnTextActiveBg = 'rgba(255, 255, 255, 0.06)';
   public static btnTextBorderColor = 'transparent';