Skip to content

Commit

Permalink
fix: components fixes and improvements with updated tokens (#100)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
adrian-potepa authored Nov 14, 2023
1 parent 28d94d9 commit cf85388
Show file tree
Hide file tree
Showing 26 changed files with 352 additions and 93 deletions.
17 changes: 14 additions & 3 deletions src/components/Avatar/Avatar.styles.ts
Original file line number Diff line number Diff line change
@@ -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<
Expand All @@ -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: {
Expand Down
9 changes: 8 additions & 1 deletion src/components/Avatar/Avatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
) : (
Expand Down
167 changes: 164 additions & 3 deletions src/components/Button/Button.styles.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { LoaderProps } from '../Loader';

import { BaseProps } from '@/types/BaseProps';

type LoaderAppearance = Pick<LoaderProps, 'appearance'>;

export type DefaultButtonConfig = {
appearance?: {
primary?: {
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -207,7 +315,6 @@ const commonConfig = {

const defaultButtonConfig = {
...commonConfig,
borderRadius: '$border-radius-medium',
boxShadow: '$elevation-bottom-100',
appearance: {
primary: {
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 = {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
7 changes: 5 additions & 2 deletions src/components/Button/stylesBuilder/stylesBuilder.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -56,6 +56,9 @@ describe('stylesBuilder', () => {
w: 'fit-content',
whiteSpace: 'nowrap',
},
loader: {
appearance: 'white',
},
});
});
});
39 changes: 38 additions & 1 deletion src/components/Button/stylesBuilder/stylesBuilder.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { LoaderProps } from '../../Loader';
import { ButtonProps } from '../Button.props';
import { defaultConfig } from '../Button.styles';

Expand All @@ -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 = (
Expand All @@ -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(
Expand Down Expand Up @@ -68,5 +101,9 @@ export const stylesBuilder = (
...appearanceStyles,
...intentStyles,
},
loader: getLoaderProps(loader, {
appearance: props.appearance,
intent: props.intent,
}),
};
};
1 change: 1 addition & 0 deletions src/components/Checkbox/Checkbox.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export const defaultConfig = {
alert: {
_: '$color-interaction-border-alert',
hover: '$color-interaction-border-alert',
checked: '$color-interaction-ghost-normal',
},
indeterminate: 'transparent',
},
Expand Down
Loading

0 comments on commit cf85388

Please sign in to comment.