Skip to content

Commit 8d7959a

Browse files
masoudmansonmasoudmanson
committed
Merge branch 'main' of https://github.com/chanzuckerberg/sci-components into prod
2 parents a46098b + 44e6252 commit 8d7959a

File tree

54 files changed

+3051
-134
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+3051
-134
lines changed

‎packages/components/src/common/styles-dictionary/css/variables.css

+18-18
Original file line numberDiff line numberDiff line change
@@ -96,16 +96,16 @@
9696
--sds-color-semantic-base-background-secondary: #f3f3f3;
9797
--sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
9898
--sds-color-semantic-base-background-tertiary: #dfdfdf;
99-
--sds-color-semantic-base-border: #6c6c6c;
100-
--sds-color-semantic-base-border-disabled: #c3c3c3;
101-
--sds-color-semantic-base-border-disabled-inverse: #6c6c6c;
102-
--sds-color-semantic-base-border-hover: #000000;
103-
--sds-color-semantic-base-border-hover-inverse: #ffffff;
104-
--sds-color-semantic-base-border-inverse: #c3c3c3;
99+
--sds-color-semantic-base-border-primary: #6c6c6c;
100+
--sds-color-semantic-base-border-primary-disabled: #c3c3c3;
101+
--sds-color-semantic-base-border-primary-disabled-inverse: #6c6c6c;
102+
--sds-color-semantic-base-border-primary-hover: #000000;
103+
--sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
104+
--sds-color-semantic-base-border-primary-inverse: #c3c3c3;
105105
--sds-color-semantic-base-border-on-fill: #ffffff;
106-
--sds-color-semantic-base-border-pressed: #000000;
107-
--sds-color-semantic-base-border-pressed-inverse: #ffffff;
108-
--sds-color-semantic-base-border-table: #c3c3c3;
106+
--sds-color-semantic-base-border-primary-pressed: #000000;
107+
--sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
108+
--sds-color-semantic-base-border-secondary: #c3c3c3;
109109
--sds-color-semantic-base-divider: #dfdfdf;
110110
--sds-color-semantic-base-divider-inverse: #6c6c6c;
111111
--sds-color-semantic-base-fill-disabled: #dfdfdf;
@@ -606,16 +606,16 @@
606606
--sds-color-semantic-base-background-secondary: #333333;
607607
--sds-color-semantic-base-background-secondary-inverse: #ededed;
608608
--sds-color-semantic-base-background-tertiary: #494949;
609-
--sds-color-semantic-base-border: #cdcdcd;
610-
--sds-color-semantic-base-border-disabled: #696969;
611-
--sds-color-semantic-base-border-disabled-inverse: #cdcdcd;
612-
--sds-color-semantic-base-border-hover: #ffffff;
613-
--sds-color-semantic-base-border-hover-inverse: #000000;
614-
--sds-color-semantic-base-border-inverse: #696969;
609+
--sds-color-semantic-base-border-primary: #cdcdcd;
610+
--sds-color-semantic-base-border-primary-disabled: #696969;
611+
--sds-color-semantic-base-border-primary-disabled-inverse: #cdcdcd;
612+
--sds-color-semantic-base-border-primary-hover: #ffffff;
613+
--sds-color-semantic-base-border-primary-hover-inverse: #000000;
614+
--sds-color-semantic-base-border-primary-inverse: #696969;
615615
--sds-color-semantic-base-border-on-fill: #000000;
616-
--sds-color-semantic-base-border-pressed: #ffffff;
617-
--sds-color-semantic-base-border-pressed-inverse: #000000;
618-
--sds-color-semantic-base-border-table: #696969;
616+
--sds-color-semantic-base-border-primary-pressed: #ffffff;
617+
--sds-color-semantic-base-border-primary-pressed-inverse: #000000;
618+
--sds-color-semantic-base-border-secondary: #696969;
619619
--sds-color-semantic-base-divider: #494949;
620620
--sds-color-semantic-base-divider-inverse: #cdcdcd;
621621
--sds-color-semantic-base-fill-disabled: #494949;

‎packages/components/src/common/styles-dictionary/design-tokens/colors.json

+9-9
Original file line numberDiff line numberDiff line change
@@ -98,43 +98,43 @@
9898
"value": "{sds.color.primitive.gray.200.value}",
9999
"darkValue": "{sds.color.primitive.gray.200.darkValue}"
100100
},
101-
"border": {
101+
"borderPrimary": {
102102
"value": "{sds.color.primitive.gray.600.value}",
103103
"darkValue": "{sds.color.primitive.gray.600.darkValue}"
104104
},
105-
"border-disabled": {
105+
"border-primary-disabled": {
106106
"value": "{sds.color.primitive.gray.300.value}",
107107
"darkValue": "{sds.color.primitive.gray.300.darkValue}"
108108
},
109-
"border-disabled-inverse": {
109+
"border-primary-disabled-inverse": {
110110
"value": "{sds.color.primitive.gray.600.value}",
111111
"darkValue": "{sds.color.primitive.gray.600.darkValue}"
112112
},
113-
"border-hover": {
113+
"border-primary-hover": {
114114
"value": "{sds.color.primitive.gray.900.value}",
115115
"darkValue": "{sds.color.primitive.gray.900.darkValue}"
116116
},
117-
"border-hover-inverse": {
117+
"border-primary-hover-inverse": {
118118
"value": "{sds.color.primitive.gray.50.value}",
119119
"darkValue": "{sds.color.primitive.gray.50.darkValue}"
120120
},
121-
"border-inverse": {
121+
"border-primary-inverse": {
122122
"value": "{sds.color.primitive.gray.300.value}",
123123
"darkValue": "{sds.color.primitive.gray.300.darkValue}"
124124
},
125125
"border-on-fill": {
126126
"value": "{sds.color.primitive.gray.50.value}",
127127
"darkValue": "{sds.color.primitive.gray.50.darkValue}"
128128
},
129-
"border-pressed": {
129+
"border-primary-pressed": {
130130
"value": "{sds.color.primitive.gray.900.value}",
131131
"darkValue": "{sds.color.primitive.gray.900.darkValue}"
132132
},
133-
"border-pressed-inverse": {
133+
"border-primary-pressed-inverse": {
134134
"value": "{sds.color.primitive.gray.50.value}",
135135
"darkValue": "{sds.color.primitive.gray.50.darkValue}"
136136
},
137-
"border-table": {
137+
"border-secondary": {
138138
"value": "{sds.color.primitive.gray.300.value}",
139139
"darkValue": "{sds.color.primitive.gray.300.darkValue}"
140140
},

‎packages/components/src/common/styles-dictionary/json/tailwind.json

+18-18
Original file line numberDiff line numberDiff line change
@@ -1163,16 +1163,16 @@
11631163
"sds-color-semantic-base-background-secondary": "#333333",
11641164
"sds-color-semantic-base-background-secondary-inverse": "#ededed",
11651165
"sds-color-semantic-base-background-tertiary": "#494949",
1166-
"sds-color-semantic-base-border": "#cdcdcd",
1167-
"sds-color-semantic-base-border-disabled": "#696969",
1168-
"sds-color-semantic-base-border-disabled-inverse": "#cdcdcd",
1169-
"sds-color-semantic-base-border-hover": "#ffffff",
1170-
"sds-color-semantic-base-border-hover-inverse": "#000000",
1171-
"sds-color-semantic-base-border-inverse": "#696969",
1166+
"sds-color-semantic-base-border-primary": "#cdcdcd",
1167+
"sds-color-semantic-base-border-primary-disabled": "#696969",
1168+
"sds-color-semantic-base-border-primary-disabled-inverse": "#cdcdcd",
1169+
"sds-color-semantic-base-border-primary-hover": "#ffffff",
1170+
"sds-color-semantic-base-border-primary-hover-inverse": "#000000",
1171+
"sds-color-semantic-base-border-primary-inverse": "#696969",
11721172
"sds-color-semantic-base-border-on-fill": "#000000",
1173-
"sds-color-semantic-base-border-pressed": "#ffffff",
1174-
"sds-color-semantic-base-border-pressed-inverse": "#000000",
1175-
"sds-color-semantic-base-border-table": "#696969",
1173+
"sds-color-semantic-base-border-primary-pressed": "#ffffff",
1174+
"sds-color-semantic-base-border-primary-pressed-inverse": "#000000",
1175+
"sds-color-semantic-base-border-secondary": "#696969",
11761176
"sds-color-semantic-base-divider": "#494949",
11771177
"sds-color-semantic-base-divider-inverse": "#cdcdcd",
11781178
"sds-color-semantic-base-fill-disabled": "#494949",
@@ -1332,16 +1332,16 @@
13321332
"sds-color-semantic-base-background-secondary": "#f3f3f3",
13331333
"sds-color-semantic-base-background-secondary-inverse": "#3b3b3b",
13341334
"sds-color-semantic-base-background-tertiary": "#dfdfdf",
1335-
"sds-color-semantic-base-border": "#6c6c6c",
1336-
"sds-color-semantic-base-border-disabled": "#c3c3c3",
1337-
"sds-color-semantic-base-border-disabled-inverse": "#6c6c6c",
1338-
"sds-color-semantic-base-border-hover": "#000000",
1339-
"sds-color-semantic-base-border-hover-inverse": "#ffffff",
1340-
"sds-color-semantic-base-border-inverse": "#c3c3c3",
1335+
"sds-color-semantic-base-border-primary": "#6c6c6c",
1336+
"sds-color-semantic-base-border-primary-disabled": "#c3c3c3",
1337+
"sds-color-semantic-base-border-primary-disabled-inverse": "#6c6c6c",
1338+
"sds-color-semantic-base-border-primary-hover": "#000000",
1339+
"sds-color-semantic-base-border-primary-hover-inverse": "#ffffff",
1340+
"sds-color-semantic-base-border-primary-inverse": "#c3c3c3",
13411341
"sds-color-semantic-base-border-on-fill": "#ffffff",
1342-
"sds-color-semantic-base-border-pressed": "#000000",
1343-
"sds-color-semantic-base-border-pressed-inverse": "#ffffff",
1344-
"sds-color-semantic-base-border-table": "#c3c3c3",
1342+
"sds-color-semantic-base-border-primary-pressed": "#000000",
1343+
"sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
1344+
"sds-color-semantic-base-border-secondary": "#c3c3c3",
13451345
"sds-color-semantic-base-divider": "#dfdfdf",
13461346
"sds-color-semantic-base-divider-inverse": "#6c6c6c",
13471347
"sds-color-semantic-base-fill-disabled": "#dfdfdf",

‎packages/components/src/common/styles-dictionary/scss/_variables.scss

+18-18
Original file line numberDiff line numberDiff line change
@@ -187,26 +187,26 @@ $sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
187187
$sds-color-semantic-base-background-secondary-inverse-dark: #ededed;
188188
$sds-color-semantic-base-background-tertiary: #dfdfdf;
189189
$sds-color-semantic-base-background-tertiary-dark: #494949;
190-
$sds-color-semantic-base-border: #6c6c6c;
191-
$sds-color-semantic-base-border-dark: #cdcdcd;
192-
$sds-color-semantic-base-border-disabled: #c3c3c3;
193-
$sds-color-semantic-base-border-disabled-dark: #696969;
194-
$sds-color-semantic-base-border-disabled-inverse: #6c6c6c;
195-
$sds-color-semantic-base-border-disabled-inverse-dark: #cdcdcd;
196-
$sds-color-semantic-base-border-hover: #000000;
197-
$sds-color-semantic-base-border-hover-dark: #ffffff;
198-
$sds-color-semantic-base-border-hover-inverse: #ffffff;
199-
$sds-color-semantic-base-border-hover-inverse-dark: #000000;
200-
$sds-color-semantic-base-border-inverse: #c3c3c3;
201-
$sds-color-semantic-base-border-inverse-dark: #696969;
190+
$sds-color-semantic-base-border-primary: #6c6c6c;
191+
$sds-color-semantic-base-border-primary-dark: #cdcdcd;
192+
$sds-color-semantic-base-border-primary-disabled: #c3c3c3;
193+
$sds-color-semantic-base-border-primary-disabled-dark: #696969;
194+
$sds-color-semantic-base-border-primary-disabled-inverse: #6c6c6c;
195+
$sds-color-semantic-base-border-primary-disabled-inverse-dark: #cdcdcd;
196+
$sds-color-semantic-base-border-primary-hover: #000000;
197+
$sds-color-semantic-base-border-primary-hover-dark: #ffffff;
198+
$sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
199+
$sds-color-semantic-base-border-primary-hover-inverse-dark: #000000;
200+
$sds-color-semantic-base-border-primary-inverse: #c3c3c3;
201+
$sds-color-semantic-base-border-primary-inverse-dark: #696969;
202202
$sds-color-semantic-base-border-on-fill: #ffffff;
203203
$sds-color-semantic-base-border-on-fill-dark: #000000;
204-
$sds-color-semantic-base-border-pressed: #000000;
205-
$sds-color-semantic-base-border-pressed-dark: #ffffff;
206-
$sds-color-semantic-base-border-pressed-inverse: #ffffff;
207-
$sds-color-semantic-base-border-pressed-inverse-dark: #000000;
208-
$sds-color-semantic-base-border-table: #c3c3c3;
209-
$sds-color-semantic-base-border-table-dark: #696969;
204+
$sds-color-semantic-base-border-primary-pressed: #000000;
205+
$sds-color-semantic-base-border-primary-pressed-dark: #ffffff;
206+
$sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
207+
$sds-color-semantic-base-border-primary-pressed-inverse-dark: #000000;
208+
$sds-color-semantic-base-border-secondary: #c3c3c3;
209+
$sds-color-semantic-base-border-secondary-dark: #696969;
210210
$sds-color-semantic-base-divider: #dfdfdf;
211211
$sds-color-semantic-base-divider-dark: #494949;
212212
$sds-color-semantic-base-divider-inverse: #6c6c6c;

‎packages/components/src/common/utils.ts

+14
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,17 @@ export function filterProps<T extends Props, K extends keyof T>(
2222

2323
return result;
2424
}
25+
26+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
27+
export const mergeRefs = (refs: any[]) => {
28+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
29+
return (element: any) => {
30+
refs.forEach((ref) => {
31+
if (typeof ref === "function") {
32+
ref(element);
33+
} else if (ref != null) {
34+
ref.current = element;
35+
}
36+
});
37+
};
38+
};

‎packages/components/src/common/warnings.ts

+12
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export enum SDSWarningTypes {
99
TooltipSubtitle = "tooltipSubtitle",
1010
TooltipWidth = "tooltipWidth",
1111
TooltipInvertStyle = "tooltipInvertStyle",
12+
ContentCardActionsOnlyButtons = "contentCardActionsOnlyButtons",
13+
ClickableContentCardNumberOfButtons = "clickableContentCardNumberOfButtons",
1214
}
1315

1416
export const SDS_WARNINGS = {
@@ -58,6 +60,16 @@ export const SDS_WARNINGS = {
5860
message:
5961
"Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!",
6062
},
63+
[SDSWarningTypes.ContentCardActionsOnlyButtons]: {
64+
hasWarned: false,
65+
message:
66+
"Warning: Only SDS buttons could be used within ContentCard Actions component slot!",
67+
},
68+
[SDSWarningTypes.ClickableContentCardNumberOfButtons]: {
69+
hasWarned: false,
70+
message:
71+
"Warning: Clickable Content Cards can only have one or no buttons!",
72+
},
6173
};
6274

6375
export const showWarningIfFirstOccurence = (warningType: SDSWarningTypes) => {

‎packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
5151
// look at the useDetectUserTabbing hook.
5252
&[data-user-is-tabbing="true"]:focus-within {
5353
border-radius: 4px;
54-
outline: 2px solid ${semanticColors?.base?.borderHover};
54+
outline: 2px solid ${semanticColors?.base?.borderPrimaryHover};
5555
outline-offset: 1px;
5656
}
5757

‎packages/components/src/core/Button/style.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
getShadows,
1313
getSpaces,
1414
fontBodySemiboldXxs,
15+
fontBody,
1516
} from "src/core/styles";
1617
import { focusVisibleA11yStyle } from "src/core/styles/common/mixins/a11y";
1718
import { ButtonProps } from ".";
@@ -65,14 +66,16 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => {
6566

6667
const disabledBorder =
6768
variant === "outlined"
68-
? `inset 0 0 0 1px ${semanticColors?.base?.borderDisabled}`
69+
? `inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryDisabled}`
6970
: "none";
7071

7172
const boxshadow =
7273
variant === "outlined"
7374
? `inset 0 0 0 1px ${semanticColors?.accent?.border}`
7475
: "none";
7576

77+
fontBody("xs", "semibold");
78+
7679
return css`
7780
background-color: ${backgroundColor};
7881
border: none;

‎packages/components/src/core/ContentCard/ContentCard.types.ts

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { CardProps } from "@mui/material";
2+
3+
interface BaseContentCardProps extends CardProps {
4+
sdsType?: "wide" | "narrow";
5+
overlineText?: string;
6+
titleText?: string;
7+
subtitleText?: string;
8+
metadataText?: string;
9+
boundingBox?: boolean;
10+
decorativeBorder?: boolean;
11+
children?: React.ReactNode;
12+
clickableCard?: boolean;
13+
buttonsPosition?: "left" | "right";
14+
}
15+
16+
export interface ImageContentCardProps extends BaseContentCardProps {
17+
visualElementType: "image";
18+
image?: React.ReactNode;
19+
imagePosition?: "left" | "right";
20+
imagePadding?: boolean;
21+
imageSize?: number;
22+
icon?: never;
23+
}
24+
25+
export interface IconContentCardProps extends BaseContentCardProps {
26+
visualElementType: "icon";
27+
icon?: React.ReactNode;
28+
image?: never;
29+
imageSize?: never;
30+
imagePosition?: never;
31+
imagePadding?: never;
32+
}
33+
34+
export interface NoneContentCardProps extends BaseContentCardProps {
35+
visualElementType: "none";
36+
icon?: never;
37+
image?: never;
38+
imagePosition?: never;
39+
imagePadding?: never;
40+
imageSize?: never;
41+
}
42+
43+
export type ContentCardProps =
44+
| ImageContentCardProps
45+
| IconContentCardProps
46+
| NoneContentCardProps;
47+
48+
export const CONTENT_CARD_DEFAULT_IMAGE_MEDIA_SIZE = 300;
49+
export const CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_LOW_BOUNDARY = 595;
50+
export const CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_HIGH_BOUNDARY = 605;

0 commit comments

Comments
 (0)