Skip to content

Commit ff0c2b5

Browse files
DianaSuvorovaDianaSuvorova
authored
feat: update tag (#5376)
* feat: update tag * console.log
1 parent fa3470e commit ff0c2b5

9 files changed

Lines changed: 612 additions & 260 deletions

File tree

‎documentation-site/examples/tag/primitive.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,16 @@ export default function Scenario() {
55
return (
66
<React.Fragment>
77
{[
8-
KIND.black,
8+
KIND.gray,
99
KIND.blue,
1010
KIND.green,
1111
KIND.red,
1212
KIND.yellow,
1313
KIND.orange,
1414
KIND.purple,
15-
KIND.brown,
15+
KIND.magenta,
16+
KIND.teal,
17+
KIND.lime,
1618
].map((kind) => (
1719
<div>
1820
<Tag

‎src/tag/constants.ts‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ This source code is licensed under the MIT license found in the
55
LICENSE file in the root directory of this source tree.
66
*/
77
export const SIZE = {
8+
xSmall: 'xSmall',
89
small: 'small',
910
medium: 'medium',
1011
large: 'large',
@@ -15,25 +16,33 @@ export const HIERARCHY = Object.freeze({
1516
secondary: 'secondary',
1617
} as const);
1718

18-
// todo: dynamic identity map generation
19-
export const KIND = {
20-
custom: 'custom',
21-
// semantic
19+
export const DEPRECATED_KIND = Object.freeze({
2220
neutral: 'neutral',
2321
primary: 'primary',
2422
accent: 'accent',
2523
positive: 'positive',
2624
warning: 'warning',
2725
negative: 'negative',
28-
// primitive
2926
black: 'black',
30-
blue: 'blue',
31-
green: 'green',
27+
brown: 'brown',
28+
} as const);
29+
30+
export const SUPPORTED_KIND = Object.freeze({
31+
custom: 'custom',
32+
gray: 'gray',
3233
red: 'red',
33-
yellow: 'yellow',
3434
orange: 'orange',
35+
yellow: 'yellow',
36+
green: 'green',
37+
blue: 'blue',
3538
purple: 'purple',
36-
brown: 'brown',
39+
magenta: 'magenta',
3740
teal: 'teal',
3841
lime: 'lime',
42+
} as const);
43+
44+
// todo: dynamic identity map generation
45+
export const KIND = {
46+
...DEPRECATED_KIND,
47+
...SUPPORTED_KIND,
3948
} as const;

‎src/tag/deprecated-styles.ts‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
// Note: all the styles exported from this file are deprecated and won't be maintained going forward.
2+
// They are kept here for backward compatibility reasons only.
3+
4+
const COLOR_STATE = {
5+
disabled: 'disabled',
6+
primary: 'primary',
7+
secondary: 'secondary',
8+
} as const;
9+
10+
// Probably best to bake this into the theme once we hit our next major.
11+
// @ts-ignore
12+
const pick = (theme, light, dark) => (theme.name && theme.name.includes('dark') ? dark : light);
13+
14+
export const deprecatedNeutralColorStates = {
15+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
16+
// @ts-ignore
17+
[COLOR_STATE.disabled]: (theme, color) => ({
18+
color: theme.colors.tagNeutralFontDisabled,
19+
backgroundColor: pick(theme, theme.colors.gray50, theme.colors.gray100Dark),
20+
borderColor: null,
21+
}),
22+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
23+
// @ts-ignore
24+
[COLOR_STATE.primary]: (theme, color) => ({
25+
color: theme.colors.tagNeutralSolidFont,
26+
backgroundColor: theme.colors.tagNeutralSolidBackground,
27+
borderColor: null,
28+
}),
29+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
30+
// @ts-ignore
31+
[COLOR_STATE.secondary]: (theme, color) => ({
32+
color: theme.colors.tagNeutralOutlinedFont,
33+
backgroundColor: theme.colors.tagNeutralOutlinedBackground,
34+
borderColor: null,
35+
}),
36+
};
37+
38+
export const deprecatedPrimaryColorStates = {
39+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
40+
// @ts-ignore
41+
[COLOR_STATE.disabled]: (theme, color) => ({
42+
color: theme.colors.tagPrimaryFontDisabled,
43+
backgroundColor: pick(theme, theme.colors.gray50, theme.colors.gray100Dark),
44+
borderColor: null,
45+
}),
46+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
47+
// @ts-ignore
48+
[COLOR_STATE.primary]: (theme, color) => ({
49+
color: theme.colors.tagPrimarySolidFont,
50+
backgroundColor: theme.colors.tagPrimarySolidBackground,
51+
borderColor: null,
52+
}),
53+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
54+
// @ts-ignore
55+
[COLOR_STATE.secondary]: (theme, color) => ({
56+
color: theme.colors.tagPrimaryOutlinedFont,
57+
backgroundColor: theme.colors.tagPrimaryOutlinedBackground,
58+
borderColor: null,
59+
}),
60+
};
61+
62+
export const deprecatedBlueColorStates = {
63+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
64+
// @ts-ignore
65+
[COLOR_STATE.disabled]: (theme, color) => ({
66+
color: theme.colors.tagAccentFontDisabled,
67+
backgroundColor: pick(theme, theme.colors.blue50, theme.colors.blue100Dark),
68+
borderColor: null,
69+
}),
70+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
71+
// @ts-ignore
72+
[COLOR_STATE.primary]: (theme, color) => ({
73+
color: theme.colors.tagAccentSolidFont,
74+
backgroundColor: theme.colors.tagAccentSolidBackground,
75+
borderColor: null,
76+
}),
77+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
78+
// @ts-ignore
79+
[COLOR_STATE.secondary]: (theme, color) => ({
80+
color: theme.colors.tagAccentOutlinedFont,
81+
backgroundColor: theme.colors.tagAccentOutlinedBackground,
82+
borderColor: null,
83+
}),
84+
};
85+
86+
export const deprecatedGreenColorStates = {
87+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
88+
// @ts-ignore
89+
[COLOR_STATE.disabled]: (theme, color) => ({
90+
color: theme.colors.tagPositiveFontDisabled,
91+
backgroundColor: pick(theme, theme.colors.green50, theme.colors.green100Dark),
92+
borderColor: null,
93+
}),
94+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
95+
// @ts-ignore
96+
[COLOR_STATE.primary]: (theme, color) => ({
97+
color: theme.colors.tagPositiveSolidFont,
98+
backgroundColor: theme.colors.tagPositiveSolidBackground,
99+
borderColor: null,
100+
}),
101+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
102+
// @ts-ignore
103+
[COLOR_STATE.secondary]: (theme, color) => ({
104+
color: theme.colors.tagPositiveOutlinedFont,
105+
backgroundColor: theme.colors.tagPositiveOutlinedBackground,
106+
borderColor: null,
107+
}),
108+
};
109+
110+
export const deprecatedYellowColorStates = {
111+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
112+
// @ts-ignore
113+
[COLOR_STATE.disabled]: (theme, color) => ({
114+
color: theme.colors.tagWarningFontDisabled,
115+
backgroundColor: pick(theme, theme.colors.yellow50, theme.colors.yellow100Dark),
116+
borderColor: null,
117+
}),
118+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
119+
// @ts-ignore
120+
[COLOR_STATE.primary]: (theme, color) => ({
121+
color: theme.colors.tagWarningSolidFont,
122+
backgroundColor: theme.colors.tagWarningSolidBackground,
123+
borderColor: null,
124+
}),
125+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
126+
// @ts-ignore
127+
[COLOR_STATE.secondary]: (theme, color) => ({
128+
color: theme.colors.tagWarningOutlinedFont,
129+
backgroundColor: theme.colors.tagWarningOutlinedBackground,
130+
borderColor: null,
131+
}),
132+
};
133+
134+
export const deprecatedRedColorStates = {
135+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
136+
// @ts-ignore
137+
[COLOR_STATE.disabled]: (theme, color) => ({
138+
color: theme.colors.tagNegativeFontDisabled,
139+
backgroundColor: pick(theme, theme.colors.red50, theme.colors.red100Dark),
140+
borderColor: null,
141+
}),
142+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
143+
// @ts-ignore
144+
[COLOR_STATE.primary]: (theme, color) => ({
145+
color: theme.colors.tagNegativeSolidFont,
146+
backgroundColor: theme.colors.tagNegativeSolidBackground,
147+
borderColor: null,
148+
}),
149+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
150+
// @ts-ignore
151+
[COLOR_STATE.secondary]: (theme, color) => ({
152+
color: theme.colors.tagNegativeOutlinedFont,
153+
backgroundColor: theme.colors.tagNegativeOutlinedBackground,
154+
borderColor: null,
155+
}),
156+
};
157+
158+
export const deprecatedBrownColorStates = {
159+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
160+
// @ts-ignore
161+
[COLOR_STATE.disabled]: (theme, color) => ({
162+
color: pick(theme, theme.colors.amber200, theme.colors.amber400Dark),
163+
backgroundColor: null,
164+
borderColor: null,
165+
}),
166+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
167+
// @ts-ignore
168+
[COLOR_STATE.primary]: (theme, color) => ({
169+
color: pick(theme, theme.colors.white, theme.colors.gray900Dark),
170+
backgroundColor: pick(theme, theme.colors.amber600, theme.colors.amber400Dark),
171+
borderColor: null,
172+
}),
173+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
174+
// @ts-ignore
175+
[COLOR_STATE.secondary]: (theme, color) => ({
176+
color: pick(theme, theme.colors.amber600, theme.colors.amber600Dark),
177+
backgroundColor: null,
178+
borderColor: null,
179+
}),
180+
};

‎src/tag/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ export {
1111
Action as StyledAction,
1212
Text as StyledText,
1313
} from './styled-components';
14-
export { KIND, HIERARCHY, SIZE } from './constants';
14+
export { KIND, HIERARCHY, SIZE, SUPPORTED_KIND, DEPRECATED_KIND } from './constants';
1515
export * from './types';

0 commit comments

Comments
 (0)