Skip to content

Commit 4fe792b

Browse files
jake-slashidikovic
jake-slashid
and
ikovic
authored
React: add Customisation namespace (#225)
* wip * sanitise & validate * better exports * google font imports * Improve types * Ignore the type error * Use generics to fix the type issues * Bring back the commented out code for dev * Revert changes to dev * Introduce the input and button level public vars * Remove references to unused variables * Remove the divider var * Remove otherPublicVariables * Prepare the CSS variables * Fix the type issues * Include the example for checkatrade * Include the latest version to be published in package.json * Include the latest version to be published in package.json * Add tests for validators and fix the regexes * Bump up the prerelease version * Fix the validators * Fix the font validator and add unit tests * Bump up the beta version * Make sure the link elements are an array of strings * Bump up the beta version * Revert the version change --------- Co-authored-by: ikovic <[email protected]>
1 parent d3b9a54 commit 4fe792b

25 files changed

Lines changed: 521 additions & 27 deletions

‎packages/react-primitives/src/components/button/button.css.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { colors, publicVariables, theme } from "../../theme/theme.css";
33

44
const base = style({
55
fontFamily: publicVariables.font.fontFamily,
6-
borderRadius: publicVariables.border.radius,
6+
borderRadius: publicVariables.button.border.radius,
77
fontWeight: theme.font.weight.medium,
88
fontSize: theme.font.size.base,
99
height: theme.input.height,

‎packages/react-primitives/src/components/button/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ type Props = {
1313
testId?: string;
1414
disabled?: boolean;
1515
loading?: boolean;
16+
style?: React.CSSProperties;
1617
};
1718

1819
export const Button = forwardRef<HTMLButtonElement, Props>(
@@ -27,11 +28,13 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
2728
icon,
2829
disabled,
2930
loading = false,
31+
style,
3032
},
3133
forwardedRef
3234
) => {
3335
return (
3436
<button
37+
style={style}
3538
ref={forwardedRef}
3639
data-testid={testId}
3740
type={type}

‎packages/react-primitives/src/components/dropdown/dropdown.css.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ export const trigger = style({
1313
padding: `${theme.input.paddingVertical} ${theme.input.paddingHorizontal}`,
1414
boxSizing: "border-box",
1515
backgroundColor: publicVariables.color.offset,
16-
border: `1px solid ${publicVariables.color.subtle}`,
17-
borderRadius: publicVariables.border.radius,
16+
border: `1px solid ${publicVariables.input.border.color}`,
17+
borderRadius: publicVariables.input.border.radius,
1818
fontFamily: publicVariables.font.fontFamily,
1919
position: "relative",
2020
textAlign: "left",
@@ -37,7 +37,7 @@ export const trigger = style({
3737
export const label = style({
3838
fontSize: theme.font.size.xs,
3939
fontWeight: theme.font.weight.semibold,
40-
color: publicVariables.color.contrast,
40+
color: publicVariables.input.label.color,
4141
});
4242

4343
export const input = style({

‎packages/react-primitives/src/components/input/input.base.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export type BaseInputProps = {
1212
type?: "text" | "email" | "tel" | "password";
1313
value: string;
1414
onChange: ChangeEventHandler<HTMLInputElement>;
15+
style?: React.CSSProperties;
1516
};
1617

1718
export const BaseInput: React.FC<BaseInputProps> = ({
@@ -23,6 +24,7 @@ export const BaseInput: React.FC<BaseInputProps> = ({
2324
value,
2425
onChange,
2526
type = "text",
27+
style,
2628
}) => {
2729
const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
2830
(e) => {
@@ -37,6 +39,7 @@ export const BaseInput: React.FC<BaseInputProps> = ({
3739
{label}
3840
</label>
3941
<input
42+
style={style}
4043
type={type}
4144
id={id}
4245
name={name}

‎packages/react-primitives/src/components/input/input.component.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import * as styles from "./input.css";
66
export type InputProps = BaseInputProps & {
77
type?: "text" | "email";
88
error?: boolean;
9+
style?: React.CSSProperties;
910
};
1011

1112
export const Input: React.FC<InputProps> = ({
@@ -18,6 +19,7 @@ export const Input: React.FC<InputProps> = ({
1819
value,
1920
error,
2021
onChange,
22+
style,
2123
}) => {
2224
return (
2325
<div
@@ -30,6 +32,7 @@ export const Input: React.FC<InputProps> = ({
3032
)}
3133
>
3234
<BaseInput
35+
style={style}
3336
id={id}
3437
name={name}
3538
label={label}

‎packages/react-primitives/src/components/input/input.css.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,12 @@ export const countryHost = style({
5757
export const host = style({
5858
display: "flex",
5959
alignItems: "flex-start",
60-
border: `1px solid ${publicVariables.color.subtle}`,
60+
border: `1px solid ${publicVariables.input.border.color}`,
6161
width: "100%",
6262
minWidth: theme.input.minWidth,
6363
boxSizing: "border-box",
6464
fontFamily: publicVariables.font.fontFamily,
65-
borderRadius: publicVariables.border.radius,
65+
borderRadius: publicVariables.input.border.radius,
6666
height: theme.input.height,
6767

6868
selectors: {
@@ -129,7 +129,7 @@ export const inputHost = styleVariants({
129129
export const label = style({
130130
fontSize: theme.font.size.xs,
131131
fontWeight: theme.font.weight.semibold,
132-
color: publicVariables.color.contrast,
132+
color: publicVariables.input.label.color,
133133
lineHeight: "118%",
134134
});
135135

@@ -163,6 +163,6 @@ export const passwordRevealButton = style({
163163
":focus-visible": {
164164
outline: `4px solid ${publicVariables.color.smooth}`,
165165
outlineOffset: "-8px",
166-
borderRadius: publicVariables.border.radius,
166+
borderRadius: publicVariables.input.border.radius,
167167
},
168168
});

‎packages/react-primitives/src/components/input/input.otp.css.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ export const otpInput = style({
1313
width: "100%",
1414
height: "auto",
1515
aspectRatio: "1/1",
16-
borderRadius: "16px",
16+
borderRadius: publicVariables.input.border.radius,
1717
boxSizing: "border-box",
18-
border: `1px solid ${publicVariables.color.subtle}`,
18+
border: `1px solid ${publicVariables.input.border.color}`,
1919
backgroundColor: publicVariables.color.offset,
2020
fontSize: theme.font.size.base,
2121
fontWeight: theme.font.weight.semibold,

‎packages/react-primitives/src/components/input/input.password.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Eye, EyeReveal } from "../icon";
77

88
export type PasswordInputProps = Omit<BaseInputProps, "type"> & {
99
error?: boolean;
10+
style?: React.CSSProperties;
1011
};
1112

1213
export const PasswordInput: React.FC<PasswordInputProps> = (props) => {
@@ -21,6 +22,7 @@ export const PasswordInput: React.FC<PasswordInputProps> = (props) => {
2122
props.error && styles.error,
2223
props.className
2324
)}
25+
style={props.style}
2426
>
2527
<BaseInput {...props} type={showPassword ? "text" : "password"} />
2628
<button

‎packages/react-primitives/src/main.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { Delayed } from "./components/delayed";
3434

3535
// theming
3636
export * from "./theme/theme.css";
37+
export * from "./theme/theme.types";
3738
export * from "./theme/sprinkles.css";
3839

3940
// components

‎packages/react-primitives/src/theme/theme.css.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,35 @@ export const publicVariables = createGlobalThemeContract(
5353
font: {
5454
fontFamily: "font-family",
5555
},
56+
// TODO deprecate
5657
border: {
5758
radius: "button-border-radius",
5859
width: {
5960
panel: "border-width-panel",
6061
},
6162
},
63+
input: {
64+
border: {
65+
radius: "input-border-radius",
66+
color: "input-border-color",
67+
},
68+
label: {
69+
color: "input-label-color",
70+
},
71+
},
72+
button: {
73+
border: {
74+
radius: "button-border-radius",
75+
},
76+
},
77+
form: {
78+
border: {
79+
radius: "form-border-radius",
80+
},
81+
logo: {
82+
width: "form-logo-width",
83+
},
84+
},
6285
},
6386
// TODO consider using the second argument to generate the names based on the object path
6487
// https://github.com/buildo/bento-design-system/blob/a0bfb585a3216988f1945d5c8c448c32426e61f2/packages/bento-design-system/src/vars.css.ts#L232
@@ -123,12 +146,35 @@ export const defaultVars = {
123146
font: {
124147
fontFamily: "Inter, sans-serif",
125148
},
149+
// TODO deprecate
126150
border: {
127151
radius: "16px",
128152
width: {
129153
panel: "2px",
130154
},
131155
},
156+
input: {
157+
border: {
158+
radius: "8px",
159+
color: publicVariables.color.subtle,
160+
},
161+
label: {
162+
color: publicVariables.color.contrast,
163+
},
164+
},
165+
button: {
166+
border: {
167+
radius: "16px",
168+
},
169+
},
170+
form: {
171+
border: {
172+
radius: "16px",
173+
},
174+
logo: {
175+
width: "auto",
176+
},
177+
},
132178
};
133179

134180
export const darkThemeVars = style({

0 commit comments

Comments
 (0)