fix(ds): Fix tertiary button on elevation (#14282)

* fix(ds): Fix tertiary button on elevation * fix(ds): get rid of console log in buttonStyleUtils --------- Co-authored-by: MiroslavProchazka <[email protected]>
trezor · Sep 11, 2024 · d07e708 · d07e708
1 parent 15f417b
commit d07e708
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 6 deletions.
diff --git a/packages/components/src/components/buttons/Button/Button.tsx b/packages/components/src/components/buttons/Button/Button.tsx
@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
 import styled, { useTheme } from 'styled-components';
-import { borders, spacingsPx, typography } from '@trezor/theme';
+import { borders, Elevation, spacingsPx, typography } from '@trezor/theme';
 import { Spinner } from '../../loaders/Spinner/Spinner';
 import {
     ButtonSize,
@@ -20,6 +20,7 @@ import {
     withFrameProps,
 } from '../../../utils/frameProps';
 import { Icon, IconName } from '../../Icon/Icon';
+import { useElevation } from '../../ElevationContext/ElevationContext';
 
 export const allowedButtonFrameProps = [
     'margin',
@@ -29,6 +30,7 @@ export const allowedButtonFrameProps = [
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedButtonFrameProps)[number]>;
 
 type ButtonContainerProps = TransientProps<AllowedFrameProps> & {
+    $elevation: Elevation;
     $variant: ButtonVariant;
     $size: ButtonSize;
     $iconAlignment?: IconAlignment;
@@ -56,7 +58,7 @@ export const ButtonContainer = styled.button<ButtonContainerProps>`
     border: 1px solid transparent;
 
     ${getFocusShadowStyle()}
-    ${({ $variant, $isSubtle }) => useVariantStyle($variant, $isSubtle)}
+    ${({ $variant, $isSubtle, $elevation }) => useVariantStyle($variant, $isSubtle, $elevation)}
 
     &:disabled {
         background: ${({ theme }) => theme.backgroundNeutralDisabled};
@@ -157,6 +159,8 @@ export const Button = ({
 
     const isLink = href !== undefined;
 
+    const { elevation } = useElevation();
+
     return (
         <ButtonContainer
             as={isLink ? 'a' : 'button'}
@@ -170,6 +174,7 @@ export const Button = ({
             $isSubtle={isSubtle}
             type={type}
             $hasIcon={!!icon || isLoading}
+            $elevation={elevation}
             {...rest}
             onClick={isDisabled ? undefined : rest?.onClick}
             {...frameProps}

diff --git a/packages/components/src/components/buttons/IconButton/IconButton.tsx b/packages/components/src/components/buttons/IconButton/IconButton.tsx
@@ -6,6 +6,7 @@ import { ButtonVariant, getIconColor, getIconSize, getPadding } from '../buttonS
 import { TOOLTIP_DELAY_NONE, TOOLTIP_DELAY_SHORT } from '../../Tooltip/TooltipDelay';
 import { Tooltip } from '../../Tooltip/Tooltip';
 import { Icon, IconName } from '../../Icon/Icon';
+import { useElevation } from '../../ElevationContext/ElevationContext';
 
 const IconButtonContainer = styled(ButtonContainer)`
     position: relative;
@@ -62,6 +63,8 @@ export const IconButton = ({
         e.stopPropagation();
     };
 
+    const { elevation } = useElevation();
+
     return (
         <Tooltip
             content={label}
@@ -75,6 +78,7 @@ export const IconButton = ({
                 disabled={isDisabled || isLoading}
                 onClick={handleClick}
                 $isSubtle={isSubtle}
+                $elevation={elevation}
                 {...rest}
             >
                 {!isLoading && icon && IconComponent}

diff --git a/packages/components/src/components/buttons/buttonStyleUtils.ts b/packages/components/src/components/buttons/buttonStyleUtils.ts
@@ -1,8 +1,9 @@
-import { css, useTheme } from 'styled-components';
+import { DefaultTheme, css, useTheme } from 'styled-components';
 
-import { Colors, spacings, spacingsPx } from '@trezor/theme';
+import { Color, Colors, Elevation, spacings, spacingsPx } from '@trezor/theme';
 import type { UIHorizontalAlignment, UISize, UIVariant } from '../../config/types';
 import { hexToRgba } from '@suite-common/suite-utils';
+import { capitalizeFirstLetter } from '@trezor/utils';
 
 const SUBTLE_ALPHA = 0.12;
 const SUBTLE_ALPHA_HOVER = 0.2;
@@ -59,6 +60,36 @@ export const getIconColor = ({
     }
 };
 
+export type ButtonState = 'normal' | 'hover';
+
+export const mapElevationToBackgroundToken = ({ $elevation }: { $elevation: Elevation }): Color =>
+    `backgroundSurfaceElevation${$elevation === -1 ? 'Negative' : $elevation}`;
+
+const mapElevationToButtonBackground = ({
+    elevation,
+    theme,
+    state,
+}: {
+    elevation: Elevation;
+    theme: DefaultTheme;
+    state: ButtonState;
+}) => {
+    const capitalizedState = capitalizeFirstLetter(state);
+
+    const map: Record<Elevation, Color> = {
+        '-1': `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation3`, // For example left menu is negative elevation
+
+        // Button lies always on elevation so for example Button that lies has elevation 0, lies on elevation -1.
+        // This is why the values here a shifted by 1.
+        0: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevationNegative`,
+        1: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation0`,
+        2: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation1`,
+        3: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation2`,
+    };
+
+    return theme[map[elevation]];
+};
+
 export const getIconSize = (size: ButtonSize) => {
     switch (size) {
         case 'large':
@@ -78,6 +109,7 @@ export const getIconSize = (size: ButtonSize) => {
 export const useVariantStyle = (
     variant: ButtonVariant,
     isSubtle: boolean,
+    elevation: Elevation,
 ): ReturnType<typeof css> => {
     const theme = useTheme();
 
@@ -88,8 +120,16 @@ export const useVariantStyle = (
             text: theme.textOnPrimary,
         },
         tertiary: {
-            background: theme.backgroundTertiaryDefaultOnElevation0,
-            backgroundHover: theme.backgroundTertiaryPressedOnElevation0,
+            background: mapElevationToButtonBackground({
+                elevation,
+                theme,
+                state: 'normal',
+            }),
+            backgroundHover: mapElevationToButtonBackground({
+                elevation,
+                theme,
+                state: 'hover',
+            }),
             text: theme.textOnTertiary,
         },
         info: {