Skip to content

Commit 28d94d9

Browse files
adrian-potepaadrian-potepa
authored
Revert "fix: components visual fixes and improvements with updated tokens (#98)" (#99)
This reverts commit 0d18440.
1 parent 9384954 commit 28d94d9

26 files changed

+93
-352
lines changed

‎src/components/Avatar/Avatar.styles.ts

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
1-
import type { AvatarAppearance, AvatarShape, AvatarSize } from './types';
1+
import type { AvatarAppearance, AvatarShape } from './types';
22

33
import type { BaseProps } from '@/types/BaseProps';
44
import { Emphasis } from '@/types/Emphasis';
55
import { Size } from '@/types/Size';
66

77
export type AvatarConfig = {
8-
shape?: Partial<
9-
Record<
10-
AvatarShape,
11-
BaseProps & {
12-
size?: Partial<Record<AvatarSize, BaseProps>>;
13-
}
14-
>
15-
>;
8+
shape?: Partial<Record<AvatarShape, BaseProps>>;
169
size?: Partial<Record<Size, BaseProps>>;
1710
appearance?: Partial<
1811
Record<
@@ -38,11 +31,7 @@ export const defaultConfig = {
3831
borderRadius: '$border-radius-full',
3932
},
4033
square: {
41-
borderRadius: {
42-
_: '$border-radius-large',
43-
'&[data-size="xSmall"]': '$border-radius-medium',
44-
'&[data-size="2xSmall"]': '$border-radius-medium',
45-
},
34+
borderRadius: '$border-radius-large',
4635
},
4736
},
4837
size: {

‎src/components/Avatar/Avatar.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,7 @@ export const Avatar: FC<AvatarProps & MarginProps> = ({
2626
);
2727

2828
return (
29-
<tet.div
30-
{...styles.container}
31-
data-testid="avatar"
32-
data-size={size}
33-
// if we have a single letter, we don't want to add letter spacing to better center the letter
34-
letterSpacing={initials?.length === 1 ? 'normal' : undefined}
35-
{...restProps}
36-
>
29+
<tet.div {...styles.container} data-testid="avatar" {...restProps}>
3730
{img ? (
3831
<tet.img {...styles.image} data-testid="avatar-image" {...img} />
3932
) : (

‎src/components/Button/Button.styles.ts

Lines changed: 3 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import { LoaderProps } from '../Loader';
2-
31
import { BaseProps } from '@/types/BaseProps';
42

5-
type LoaderAppearance = Pick<LoaderProps, 'appearance'>;
6-
73
export type DefaultButtonConfig = {
84
appearance?: {
95
primary?: {
@@ -43,37 +39,6 @@ export type DefaultButtonConfig = {
4339
hasAfterIcon?: BaseProps;
4440
} & BaseProps;
4541
};
46-
innerElements?: {
47-
loader?: {
48-
appearance?: {
49-
primary?:
50-
| LoaderAppearance
51-
| {
52-
intent?: {
53-
none?: LoaderAppearance;
54-
success?: LoaderAppearance;
55-
destructive?: LoaderAppearance;
56-
};
57-
};
58-
secondary?:
59-
| LoaderAppearance
60-
| {
61-
intent?: {
62-
none?: LoaderAppearance;
63-
success?: LoaderAppearance;
64-
destructive?: LoaderAppearance;
65-
};
66-
};
67-
inverted?:
68-
| LoaderAppearance
69-
| {
70-
intent?: {
71-
none?: LoaderAppearance;
72-
};
73-
};
74-
};
75-
};
76-
};
7742
} & BaseProps;
7843

7944
export type GhostButtonConfig = {
@@ -118,42 +83,6 @@ export type GhostButtonConfig = {
11883
hasAfterIcon?: BaseProps;
11984
} & BaseProps;
12085
};
121-
innerElements?: {
122-
loader?: {
123-
appearance?: {
124-
primary?:
125-
| LoaderAppearance
126-
| {
127-
intent?: {
128-
none?: LoaderAppearance;
129-
success?: LoaderAppearance;
130-
destructive?: LoaderAppearance;
131-
};
132-
};
133-
secondary?:
134-
| LoaderAppearance
135-
| {
136-
intent?: {
137-
none?: LoaderAppearance;
138-
};
139-
};
140-
inverted?:
141-
| LoaderAppearance
142-
| {
143-
intent?: {
144-
none?: LoaderAppearance;
145-
};
146-
};
147-
reverseInverted?:
148-
| LoaderAppearance
149-
| {
150-
intent?: {
151-
none?: LoaderAppearance;
152-
};
153-
};
154-
};
155-
};
156-
};
15786
} & BaseProps;
15887

15988
export type BareButtonConfig = {
@@ -193,42 +122,6 @@ export type BareButtonConfig = {
193122
hasAfterIcon?: BaseProps;
194123
} & BaseProps;
195124
};
196-
innerElements?: {
197-
loader?: {
198-
appearance?: {
199-
primary?:
200-
| LoaderAppearance
201-
| {
202-
intent?: {
203-
none?: LoaderAppearance;
204-
success?: LoaderAppearance;
205-
destructive?: LoaderAppearance;
206-
};
207-
};
208-
secondary?:
209-
| LoaderAppearance
210-
| {
211-
intent?: {
212-
none?: LoaderAppearance;
213-
};
214-
};
215-
inverted?:
216-
| LoaderAppearance
217-
| {
218-
intent?: {
219-
none?: LoaderAppearance;
220-
};
221-
};
222-
reverseInverted?:
223-
| LoaderAppearance
224-
| {
225-
intent?: {
226-
none?: LoaderAppearance;
227-
};
228-
};
229-
};
230-
};
231-
};
232125
} & BaseProps;
233126

234127
const size = {
@@ -285,8 +178,7 @@ const size = {
285178

286179
const commonConfig = {
287180
display: 'inline-flex',
288-
borderRadius: '$border-radius-large',
289-
gap: '$space-component-gap-small',
181+
gap: '$space-component-gap-xSmall',
290182
w: 'fit-content',
291183
justifyContent: 'center',
292184
alignItems: 'center',
@@ -315,6 +207,7 @@ const commonConfig = {
315207

316208
const defaultButtonConfig = {
317209
...commonConfig,
210+
borderRadius: '$border-radius-medium',
318211
boxShadow: '$elevation-bottom-100',
319212
appearance: {
320213
primary: {
@@ -407,25 +300,11 @@ const defaultButtonConfig = {
407300
},
408301
},
409302
size,
410-
innerElements: {
411-
loader: {
412-
appearance: {
413-
primary: {
414-
appearance: 'white',
415-
},
416-
secondary: {
417-
appearance: 'greyscale',
418-
},
419-
inverted: {
420-
appearance: 'greyscale',
421-
},
422-
},
423-
},
424-
},
425303
} satisfies DefaultButtonConfig;
426304

427305
const ghostButtonConfig = {
428306
...commonConfig,
307+
borderRadius: '$border-radius-large',
429308
backgroundColor: {
430309
_: 'transparent',
431310
hover: '$color-action-ghost-hover',
@@ -505,26 +384,6 @@ const ghostButtonConfig = {
505384
},
506385
},
507386
size,
508-
innerElements: {
509-
loader: {
510-
appearance: {
511-
primary: {
512-
appearance: 'greyscale',
513-
intent: {
514-
none: {
515-
appearance: 'primary',
516-
},
517-
},
518-
},
519-
secondary: {
520-
appearance: 'greyscale',
521-
},
522-
inverted: {
523-
appearance: 'greyscale',
524-
},
525-
},
526-
},
527-
},
528387
} satisfies GhostButtonConfig;
529388

530389
const bareButtonConfig = {
@@ -614,26 +473,6 @@ const bareButtonConfig = {
614473
hasAfterIcon: {},
615474
},
616475
},
617-
innerElements: {
618-
loader: {
619-
appearance: {
620-
primary: {
621-
appearance: 'greyscale',
622-
intent: {
623-
none: {
624-
appearance: 'primary',
625-
},
626-
},
627-
},
628-
secondary: {
629-
appearance: 'greyscale',
630-
},
631-
inverted: {
632-
appearance: 'greyscale',
633-
},
634-
},
635-
},
636-
},
637476
} satisfies BareButtonConfig;
638477

639478
export type ButtonConfig = {

‎src/components/Button/Button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,13 @@ export const Button: FC<ButtonProps & MarginProps> = ({
5757
<tet.button
5858
data-testid="button"
5959
{...styles.container}
60-
disabled={state ? ['disabled', 'loading'].includes(state) : false}
60+
disabled={['disabled', 'loading'].includes(state ?? '')}
6161
data-state={state}
6262
style={{ textUnderlineOffset: '3px', textDecorationThickness: '1px' }}
6363
{...rest}
6464
>
6565
{state === 'loading' && (
66-
<Loader {...styles.loader} size="small" shape="circle" />
66+
<Loader appearance="greyscale" size="small" shape="circle" />
6767
)}
6868
{beforeIcon && state !== 'loading' && <Icon name={beforeIcon} />}
6969
{children}

‎src/components/Button/stylesBuilder/stylesBuilder.test.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ describe('stylesBuilder', () => {
2323
loading: '$color-action-primary-loading',
2424
selected: '$color-action-primary-selected',
2525
},
26-
borderRadius: '$border-radius-large',
26+
borderRadius: '$border-radius-medium',
2727
boxShadow: '$elevation-bottom-100',
2828
color: '$color-action-inverted-normal',
2929
display: 'inline-flex',
30-
gap: '$space-component-gap-small',
30+
gap: '$space-component-gap-xSmall',
3131
justifyContent: 'center',
3232
opacity: {
3333
disabled: '$opacity-disabled',
@@ -56,9 +56,6 @@ describe('stylesBuilder', () => {
5656
w: 'fit-content',
5757
whiteSpace: 'nowrap',
5858
},
59-
loader: {
60-
appearance: 'white',
61-
},
6259
});
6360
});
6461
});

‎src/components/Button/stylesBuilder/stylesBuilder.ts

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { LoaderProps } from '../../Loader';
21
import { ButtonProps } from '../Button.props';
32
import { defaultConfig } from '../Button.styles';
43

@@ -18,32 +17,6 @@ type ButtonStylesBulderInput = {
1817

1918
type ButtonStylesBuilder = {
2019
container: BaseProps;
21-
loader: Pick<LoaderProps, 'appearance'>;
22-
};
23-
24-
const getLoaderProps = (
25-
loader: object,
26-
props: Pick<ButtonStylesBulderInput, 'appearance' | 'intent'>,
27-
) => {
28-
let loaderProps: Pick<LoaderProps, 'appearance'> = {};
29-
30-
if (!('appearance' in loader)) return loader;
31-
32-
const loaderAppearance =
33-
loader?.appearance?.[props.appearance as keyof typeof loader.appearance];
34-
35-
if (loaderAppearance) {
36-
if ('intent' in loaderAppearance) {
37-
const { intent: loaderIntent } = loaderAppearance;
38-
39-
loaderProps =
40-
loaderIntent?.[props.intent as keyof typeof loaderIntent] || {};
41-
} else {
42-
loaderProps = loaderAppearance;
43-
}
44-
}
45-
46-
return loaderProps;
4720
};
4821

4922
export const stylesBuilder = (
@@ -53,13 +26,7 @@ export const stylesBuilder = (
5326
defaultConfig,
5427
custom: props.custom,
5528
});
56-
57-
const {
58-
appearance,
59-
size,
60-
innerElements: { loader },
61-
...container
62-
} = variants[props.variant];
29+
const { appearance, size, ...container } = variants[props.variant];
6330

6431
const { hasDropdownIndicator, hasBeforeIcon, hasAfterIcon, ...sizeStyles } =
6532
fallbackKey(
@@ -101,9 +68,5 @@ export const stylesBuilder = (
10168
...appearanceStyles,
10269
...intentStyles,
10370
},
104-
loader: getLoaderProps(loader, {
105-
appearance: props.appearance,
106-
intent: props.intent,
107-
}),
10871
};
10972
};

‎src/components/Checkbox/Checkbox.styles.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ export const defaultConfig = {
6363
alert: {
6464
_: '$color-interaction-border-alert',
6565
hover: '$color-interaction-border-alert',
66-
checked: '$color-interaction-ghost-normal',
6766
},
6867
indeterminate: 'transparent',
6968
},

0 commit comments

Comments
 (0)