fix(Link, Button): add theme variables for border-bottom (#3203)

skbkontur · Jul 17, 2023 · d418758 · d418758
1 parent de54cba
commit d418758
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 14 deletions.
diff --git a/packages/react-ui/components/Button/getInnerLinkTheme.ts b/packages/react-ui/components/Button/getInnerLinkTheme.ts
@@ -5,6 +5,8 @@ export const getInnerLinkTheme = (theme: Theme): Theme => {
   return ThemeFactory.create(
     {
       linkLineBorderBottomStyle: theme.btnLinkLineBorderBottomStyle,
+      linkLineHoverBorderBottomStyle: theme.btnLinkHoverLineBorderBottomStyle,
+      linkLineBorderBottomOpacity: theme.btnLinkLineBorderBottomOpacity,
       linkLineBorderBottomWidth: theme.btnLinkLineBorderBottomWidth,
       linkDisabledColor: theme.btnLinkDisabledColor,
     },

diff --git a/packages/react-ui/components/Link/Link.mixins.ts b/packages/react-ui/components/Link/Link.mixins.ts
@@ -37,8 +37,9 @@ export const linkUseColorsMixin = (mainColor: string, hoverColor: string, active
   `;
 };
 
-export const linkUseLineWithoutOpacity = () => {
+export const linkUseLineHovered = (linkLineHoverBorderBottomStyle: string) => {
   return `
     animation: none !important;
+    border-bottom-style: ${linkLineHoverBorderBottomStyle};
   `;
 };
diff --git a/packages/react-ui/components/Link/Link.styles.ts b/packages/react-ui/components/Link/Link.styles.ts
@@ -1,7 +1,7 @@
 import { css, keyframes, memoizeStyle, prefix } from '../../lib/theming/Emotion';
 import { Theme } from '../../lib/theming/Theme';
 
-import { linkMixin, linkDisabledMixin, linkUseColorsMixin, linkUseLineWithoutOpacity } from './Link.mixins';
+import { linkMixin, linkDisabledMixin, linkUseColorsMixin, linkUseLineHovered } from './Link.mixins';
 
 export const globalClasses = prefix('link')({
   text: 'text',
@@ -33,20 +33,22 @@ export const styles = memoizeStyle({
   },
 
   lineText(t: Theme) {
+    const delay = parseFloat(t.linkLineBorderBottomOpacity) - 1;
     return css`
       border-bottom-style: ${t.linkLineBorderBottomStyle};
       border-bottom-width: ${t.linkLineBorderBottomWidth};
       animation: ${line} 1s linear !important; // override creevey
       animation-play-state: paused !important;
-      animation-delay: -0.5s !important;
+      animation-delay: ${delay}s !important;
+      animation-fill-mode: forwards !important;
     `;
   },
 
   lineFocus(t: Theme) {
     return css`
       color: ${t.linkHoverColor};
       .${globalClasses.text} {
-        ${linkUseLineWithoutOpacity()}
+        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}
       }
     `;
   },
@@ -55,7 +57,7 @@ export const styles = memoizeStyle({
     return css`
       color: ${t.linkSuccessHoverColor} !important;
       .${globalClasses.text} {
-        ${linkUseLineWithoutOpacity()}
+        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}
       }
     `;
   },
@@ -64,7 +66,7 @@ export const styles = memoizeStyle({
     return css`
       color: ${t.linkDangerHoverColor} !important;
       .${globalClasses.text} {
-        ${linkUseLineWithoutOpacity()}
+        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}
       }
     `;
   },
@@ -73,7 +75,7 @@ export const styles = memoizeStyle({
     return css`
       color: ${t.linkGrayedHoverColor} !important;
       .${globalClasses.text} {
-        ${linkUseLineWithoutOpacity()}
+        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}
       }
     `;
   },
@@ -115,7 +117,7 @@ export const styles = memoizeStyle({
       ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor)};
       .${globalClasses.text} {
         :hover {
-          ${linkUseLineWithoutOpacity()}
+          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}
         }
       }
     `;
@@ -126,7 +128,7 @@ export const styles = memoizeStyle({
       ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor)};
       .${globalClasses.text} {
         :hover {
-          ${linkUseLineWithoutOpacity()}
+          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}
         }
       }
     `;
@@ -137,7 +139,7 @@ export const styles = memoizeStyle({
       ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor)};
       .${globalClasses.text} {
         :hover {
-          ${linkUseLineWithoutOpacity()}
+          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}
         }
       }
     `;
@@ -148,7 +150,7 @@ export const styles = memoizeStyle({
       ${linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor)};
       .${globalClasses.text} {
         :hover {
-          ${linkUseLineWithoutOpacity()}
+          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}
         }
       }
     `;
@@ -178,10 +180,10 @@ export const styles = memoizeStyle({
     `;
   },
 
-  disabledDark22Theme() {
+  disabledDark22Theme(t: Theme) {
     return css`
       .${globalClasses.text} {
-        ${linkUseLineWithoutOpacity()}
+        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}
       }
     `;
   },

diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx
@@ -243,7 +243,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
       : cx(
           styles.lineRoot(),
           disabled && styles.disabled(this.theme),
-          disabled && _isTheme2022 && isDarkTheme(this.theme) && styles.disabledDark22Theme(),
+          disabled && _isTheme2022 && isDarkTheme(this.theme) && styles.disabledDark22Theme(this.theme),
           isFocused && use === 'default' && styles.lineFocus(this.theme),
           isFocused && use === 'success' && styles.lineFocusSuccess(this.theme),
           isFocused && use === 'danger' && styles.lineFocusDanger(this.theme),

diff --git a/packages/react-ui/internal/themes/DefaultTheme.ts b/packages/react-ui/internal/themes/DefaultTheme.ts
@@ -119,7 +119,11 @@ export class DefaultTheme {
   public static linkButtonPaddingX = '10px';
 
   public static linkLineBorderBottomStyle = '';
+  public static get linkLineHoverBorderBottomStyle() {
+    return this.linkLineBorderBottomStyle;
+  }
   public static linkLineBorderBottomWidth = '0px';
+  public static linkLineBorderBottomOpacity = '0.5';
 
   //#endregion
   //#region Token
@@ -484,7 +488,13 @@ export class DefaultTheme {
     return this.linkHoverTextDecoration;
   }
   public static btnLinkLineBorderBottomStyle = '';
+  public static get btnLinkHoverLineBorderBottomStyle() {
+    return this.btnLinkLineBorderBottomStyle;
+  }
   public static btnLinkLineBorderBottomWidth = '0px';
+  public static get btnLinkLineBorderBottomOpacity() {
+    return this.linkLineBorderBottomOpacity;
+  }
 
   public static get btnLinkIconMarginRight() {
     return this.linkIconMarginRight;