fix: components visual fixes and improvements with updated tokens (#98)

* fix(Button): border radius token TET-513 * fix(Toast): middle dot color TET-524 * fix(Popover): blured story example TET-517 * test(Popover): updated test TET-517 * fix(InlineSearchInput): added padding, clear button is absolut now, hover TET-516 * fix(Avatar): different rounding on small square size, centering of one initial letter TET-514 * fix(SocialButton): text styles TET-522 * fix(InlineBanner): icon vertical align, close button position TET-515 * fix(Select): height and paddings TET-521 * fix(SearchInput): right padding TET-520 * fix(Checkbox): removed red border in alert state if checked TET-519 * fix(RadioButton): removed red border in alert state if checked TET-518 * fix(TextInput): placeholder opacity on firefox browser, width set to 100% TET-523
VirtusLab · Nov 13, 2023 · 0d18440 · 0d18440
1 parent 8598130
commit 0d18440
Show file tree

Hide file tree

Showing 26 changed files with 352 additions and 93 deletions.
diff --git a/src/components/Avatar/Avatar.styles.ts b/src/components/Avatar/Avatar.styles.ts
@@ -1,11 +1,18 @@
-import type { AvatarAppearance, AvatarShape } from './types';
+import type { AvatarAppearance, AvatarShape, AvatarSize } from './types';
 
 import type { BaseProps } from '@/types/BaseProps';
 import { Emphasis } from '@/types/Emphasis';
 import { Size } from '@/types/Size';
 
 export type AvatarConfig = {
-  shape?: Partial<Record<AvatarShape, BaseProps>>;
+  shape?: Partial<
+    Record<
+      AvatarShape,
+      BaseProps & {
+        size?: Partial<Record<AvatarSize, BaseProps>>;
+      }
+    >
+  >;
   size?: Partial<Record<Size, BaseProps>>;
   appearance?: Partial<
     Record<
@@ -31,7 +38,11 @@ export const defaultConfig = {
       borderRadius: '$border-radius-full',
     },
     square: {
-      borderRadius: '$border-radius-large',
+      borderRadius: {
+        _: '$border-radius-large',
+        '&[data-size="xSmall"]': '$border-radius-medium',
+        '&[data-size="2xSmall"]': '$border-radius-medium',
+      },
     },
   },
   size: {

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -26,7 +26,14 @@ export const Avatar: FC<AvatarProps & MarginProps> = ({
   );
 
   return (
-    <tet.div {...styles.container} data-testid="avatar" {...restProps}>
+    <tet.div
+      {...styles.container}
+      data-testid="avatar"
+      data-size={size}
+      // if we have a single letter, we don't want to add letter spacing to better center the letter
+      letterSpacing={initials?.length === 1 ? 'normal' : undefined}
+      {...restProps}
+    >
       {img ? (
         <tet.img {...styles.image} data-testid="avatar-image" {...img} />
       ) : (

diff --git a/src/components/Button/Button.styles.ts b/src/components/Button/Button.styles.ts
@@ -1,5 +1,9 @@
+import { LoaderProps } from '../Loader';
+
 import { BaseProps } from '@/types/BaseProps';
 
+type LoaderAppearance = Pick<LoaderProps, 'appearance'>;
+
 export type DefaultButtonConfig = {
   appearance?: {
     primary?: {
@@ -39,6 +43,37 @@ export type DefaultButtonConfig = {
       hasAfterIcon?: BaseProps;
     } & BaseProps;
   };
+  innerElements?: {
+    loader?: {
+      appearance?: {
+        primary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+                success?: LoaderAppearance;
+                destructive?: LoaderAppearance;
+              };
+            };
+        secondary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+                success?: LoaderAppearance;
+                destructive?: LoaderAppearance;
+              };
+            };
+        inverted?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+      };
+    };
+  };
 } & BaseProps;
 
 export type GhostButtonConfig = {
@@ -83,6 +118,42 @@ export type GhostButtonConfig = {
       hasAfterIcon?: BaseProps;
     } & BaseProps;
   };
+  innerElements?: {
+    loader?: {
+      appearance?: {
+        primary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+                success?: LoaderAppearance;
+                destructive?: LoaderAppearance;
+              };
+            };
+        secondary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+        inverted?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+        reverseInverted?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+      };
+    };
+  };
 } & BaseProps;
 
 export type BareButtonConfig = {
@@ -122,6 +193,42 @@ export type BareButtonConfig = {
       hasAfterIcon?: BaseProps;
     } & BaseProps;
   };
+  innerElements?: {
+    loader?: {
+      appearance?: {
+        primary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+                success?: LoaderAppearance;
+                destructive?: LoaderAppearance;
+              };
+            };
+        secondary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+        inverted?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+        reverseInverted?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+      };
+    };
+  };
 } & BaseProps;
 
 const size = {
@@ -178,7 +285,8 @@ const size = {
 
 const commonConfig = {
   display: 'inline-flex',
-  gap: '$space-component-gap-xSmall',
+  borderRadius: '$border-radius-large',
+  gap: '$space-component-gap-small',
   w: 'fit-content',
   justifyContent: 'center',
   alignItems: 'center',
@@ -207,7 +315,6 @@ const commonConfig = {
 
 const defaultButtonConfig = {
   ...commonConfig,
-  borderRadius: '$border-radius-medium',
   boxShadow: '$elevation-bottom-100',
   appearance: {
     primary: {
@@ -300,11 +407,25 @@ const defaultButtonConfig = {
     },
   },
   size,
+  innerElements: {
+    loader: {
+      appearance: {
+        primary: {
+          appearance: 'white',
+        },
+        secondary: {
+          appearance: 'greyscale',
+        },
+        inverted: {
+          appearance: 'greyscale',
+        },
+      },
+    },
+  },
 } satisfies DefaultButtonConfig;
 
 const ghostButtonConfig = {
   ...commonConfig,
-  borderRadius: '$border-radius-large',
   backgroundColor: {
     _: 'transparent',
     hover: '$color-action-ghost-hover',
@@ -384,6 +505,26 @@ const ghostButtonConfig = {
     },
   },
   size,
+  innerElements: {
+    loader: {
+      appearance: {
+        primary: {
+          appearance: 'greyscale',
+          intent: {
+            none: {
+              appearance: 'primary',
+            },
+          },
+        },
+        secondary: {
+          appearance: 'greyscale',
+        },
+        inverted: {
+          appearance: 'greyscale',
+        },
+      },
+    },
+  },
 } satisfies GhostButtonConfig;
 
 const bareButtonConfig = {
@@ -473,6 +614,26 @@ const bareButtonConfig = {
       hasAfterIcon: {},
     },
   },
+  innerElements: {
+    loader: {
+      appearance: {
+        primary: {
+          appearance: 'greyscale',
+          intent: {
+            none: {
+              appearance: 'primary',
+            },
+          },
+        },
+        secondary: {
+          appearance: 'greyscale',
+        },
+        inverted: {
+          appearance: 'greyscale',
+        },
+      },
+    },
+  },
 } satisfies BareButtonConfig;
 
 export type ButtonConfig = {

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -57,13 +57,13 @@ export const Button: FC<ButtonProps & MarginProps> = ({
     <tet.button
       data-testid="button"
       {...styles.container}
-      disabled={['disabled', 'loading'].includes(state ?? '')}
+      disabled={state ? ['disabled', 'loading'].includes(state) : false}
       data-state={state}
       style={{ textUnderlineOffset: '3px', textDecorationThickness: '1px' }}
       {...rest}
     >
       {state === 'loading' && (
-        <Loader appearance="greyscale" size="small" shape="circle" />
+        <Loader {...styles.loader} size="small" shape="circle" />
       )}
       {beforeIcon && state !== 'loading' && <Icon name={beforeIcon} />}
       {children}

diff --git a/src/components/Button/stylesBuilder/stylesBuilder.test.ts b/src/components/Button/stylesBuilder/stylesBuilder.test.ts
@@ -23,11 +23,11 @@ describe('stylesBuilder', () => {
           loading: '$color-action-primary-loading',
           selected: '$color-action-primary-selected',
         },
-        borderRadius: '$border-radius-medium',
+        borderRadius: '$border-radius-large',
         boxShadow: '$elevation-bottom-100',
         color: '$color-action-inverted-normal',
         display: 'inline-flex',
-        gap: '$space-component-gap-xSmall',
+        gap: '$space-component-gap-small',
         justifyContent: 'center',
         opacity: {
           disabled: '$opacity-disabled',
@@ -56,6 +56,9 @@ describe('stylesBuilder', () => {
         w: 'fit-content',
         whiteSpace: 'nowrap',
       },
+      loader: {
+        appearance: 'white',
+      },
     });
   });
 });
diff --git a/src/components/Button/stylesBuilder/stylesBuilder.ts b/src/components/Button/stylesBuilder/stylesBuilder.ts
@@ -1,3 +1,4 @@
+import { LoaderProps } from '../../Loader';
 import { ButtonProps } from '../Button.props';
 import { defaultConfig } from '../Button.styles';
 
@@ -17,6 +18,32 @@ type ButtonStylesBulderInput = {
 
 type ButtonStylesBuilder = {
   container: BaseProps;
+  loader: Pick<LoaderProps, 'appearance'>;
+};
+
+const getLoaderProps = (
+  loader: object,
+  props: Pick<ButtonStylesBulderInput, 'appearance' | 'intent'>,
+) => {
+  let loaderProps: Pick<LoaderProps, 'appearance'> = {};
+
+  if (!('appearance' in loader)) return loader;
+
+  const loaderAppearance =
+    loader?.appearance?.[props.appearance as keyof typeof loader.appearance];
+
+  if (loaderAppearance) {
+    if ('intent' in loaderAppearance) {
+      const { intent: loaderIntent } = loaderAppearance;
+
+      loaderProps =
+        loaderIntent?.[props.intent as keyof typeof loaderIntent] || {};
+    } else {
+      loaderProps = loaderAppearance;
+    }
+  }
+
+  return loaderProps;
 };
 
 export const stylesBuilder = (
@@ -26,7 +53,13 @@ export const stylesBuilder = (
     defaultConfig,
     custom: props.custom,
   });
-  const { appearance, size, ...container } = variants[props.variant];
+
+  const {
+    appearance,
+    size,
+    innerElements: { loader },
+    ...container
+  } = variants[props.variant];
 
   const { hasDropdownIndicator, hasBeforeIcon, hasAfterIcon, ...sizeStyles } =
     fallbackKey(
@@ -68,5 +101,9 @@ export const stylesBuilder = (
       ...appearanceStyles,
       ...intentStyles,
     },
+    loader: getLoaderProps(loader, {
+      appearance: props.appearance,
+      intent: props.intent,
+    }),
   };
 };
diff --git a/src/components/Checkbox/Checkbox.styles.ts b/src/components/Checkbox/Checkbox.styles.ts
@@ -63,6 +63,7 @@ export const defaultConfig = {
         alert: {
           _: '$color-interaction-border-alert',
           hover: '$color-interaction-border-alert',
+          checked: '$color-interaction-ghost-normal',
         },
         indeterminate: 'transparent',
       },