From 546bcebe27c0c4e940a706a9d5aa98f163fe395e Mon Sep 17 00:00:00 2001 From: AaronPatterson1 Date: Sat, 4 Jan 2025 15:48:24 -0500 Subject: [PATCH 1/3] Adding sizing options for button component --- packages/button/lib/index.tsx | 38 +++++++++++++++++++++++++++++++---- 1 file changed, 34 insertions(+), 4 deletions(-) diff --git a/packages/button/lib/index.tsx b/packages/button/lib/index.tsx index 38a4cbd..5893626 100644 --- a/packages/button/lib/index.tsx +++ b/packages/button/lib/index.tsx @@ -16,6 +16,12 @@ enum ButtonVariants { LINK = "link", } +enum ButtonSizes { + SMALL = "small", + MEDIUM = "medium", + LARGE = "large", + XLARGE = "xlarge", +} const loadingFlash = stylex.keyframes({ "0%": { opacity: 1 }, "50%": { opacity: 0.5 }, @@ -57,9 +63,6 @@ const styles = stylex.create({ cursor: "pointer", - // height: "2rem", - // minWidth: "4rem", - display: "flex", justifyContent: "center", alignItems: "center", @@ -160,12 +163,37 @@ const styles = stylex.create({ backgroundColor: "var(--cds-white, #FCFCFC)", color: "var(--cds-white, #FCFCFC)", }, + + [ButtonSizes.SMALL]: { + height: "1.5rem", + minWidth: "3rem", + fontSize: "0.75rem", + }, + + [ButtonSizes.MEDIUM]: { + height: "2rem", + minWidth: "4rem", + fontSize: "1rem", + }, + + [ButtonSizes.LARGE]: { + height: "3rem", + minWidth: "6rem", + fontSize: "1.5rem", + }, + + [ButtonSizes.XLARGE]: { + height: "4rem", + minWidth: "8rem", + fontSize: "2rem", + }, }); export interface ButtonProps extends React.ButtonHTMLAttributes { // size?: any; variant?: ButtonVariants; fullWidth?: boolean; + size?: ButtonSizes; loading?: boolean; disabled?: boolean; asChild?: boolean; @@ -200,6 +228,7 @@ const Button = forwardRef(({ disabled, asChild = false, children, + size = ButtonSizes.MEDIUM, ...props }, ref,) => { const Comp = asChild ? Slot : "button"; @@ -213,6 +242,7 @@ const Button = forwardRef(({ fullWidth && styles.fullWidth, disabled && styles.disabled, extend, + styles[size] )} disabled={disabled} {...props} @@ -225,4 +255,4 @@ const Button = forwardRef(({ ); Button.displayName = "Button"; -export { Button, ButtonVariants }; +export { Button, ButtonVariants, ButtonSizes }; From 041291cc2917612d3135dcd583992b1127040223 Mon Sep 17 00:00:00 2001 From: AaronPatterson1 Date: Sat, 4 Jan 2025 15:56:00 -0500 Subject: [PATCH 2/3] Removing max width for button --- packages/button/lib/index.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/button/lib/index.tsx b/packages/button/lib/index.tsx index 5893626..c6900b3 100644 --- a/packages/button/lib/index.tsx +++ b/packages/button/lib/index.tsx @@ -72,10 +72,6 @@ const styles = stylex.create({ transition: "background-color var(--transition-speed, 0.2s) ease", }, - fullWidth: { - width: "100%", - }, - disabled: { opacity: "0.75", cursor: "not-allowed", @@ -192,7 +188,6 @@ const styles = stylex.create({ export interface ButtonProps extends React.ButtonHTMLAttributes { // size?: any; variant?: ButtonVariants; - fullWidth?: boolean; size?: ButtonSizes; loading?: boolean; disabled?: boolean; @@ -223,7 +218,6 @@ const Button = forwardRef(({ extend, variant = ButtonVariants.CREATE, // TODO: add size variants, - fullWidth, loading = false, disabled, asChild = false, @@ -239,7 +233,6 @@ const Button = forwardRef(({ styles.base, // TODO: ({ size}) styles[variant], - fullWidth && styles.fullWidth, disabled && styles.disabled, extend, styles[size] From c125e08d6acf1629053f6550ac6fc3d1e393e9a2 Mon Sep 17 00:00:00 2001 From: AaronPatterson1 Date: Sat, 4 Jan 2025 17:22:10 -0500 Subject: [PATCH 3/3] Adding sizing options for checkbox component --- packages/checkbox/lib/index.tsx | 57 +++++++++++++++++++-------------- 1 file changed, 33 insertions(+), 24 deletions(-) diff --git a/packages/checkbox/lib/index.tsx b/packages/checkbox/lib/index.tsx index dd71a89..0c14f92 100644 --- a/packages/checkbox/lib/index.tsx +++ b/packages/checkbox/lib/index.tsx @@ -5,7 +5,17 @@ import * as stylex from "@stylexjs/stylex"; import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; // import { CheckIcon } from "@radix-ui/react-icons"; -type ExtendProps = { extend?: stylex.StyleXStyles }; +type ExtendProps = { + extend?: stylex.StyleXStyles; + size?: CheckBoxSizes; +}; + +enum CheckBoxSizes { + XSMALL = "xsmall", + SMALL = "small", + MEDIUM = "medium", + LARGE = "large", +} const styles = stylex.create({ root: { @@ -59,35 +69,34 @@ const styles = stylex.create({ color: "currentColor", }, - // TODO: size variants - // xsmall { - // height: "0.25rem", - // width: "0.25rem", - // } - - // small { - // height: "0.5rem", - // width: "0.5rem", - // } - - // medium { - // height: "0.75rem", - // width: "0.75rem", - // } - - // large { - // height: "1rem", - // width: "1rem", - // } + [CheckBoxSizes.XSMALL]: { + height: "0.75rem", + width: "0.75rem", + }, + + [CheckBoxSizes.SMALL]: { + height: "1rem", + width: "1rem", + }, + + [CheckBoxSizes.MEDIUM]: { + height: "1.25rem", + width: "1.25rem", + }, + + [CheckBoxSizes.LARGE]: { + height: "1.5rem", + width: "1.5rem", + }, }); const Checkbox = forwardRef< ElementRef, ComponentPropsWithoutRef & ExtendProps ->(({ extend, ...props }, ref) => ( +>(({ extend, size = CheckBoxSizes.MEDIUM, ...props }, ref) => ( @@ -112,4 +121,4 @@ const Checkbox = forwardRef< )); Checkbox.displayName = CheckboxPrimitive.Root.displayName; -export { Checkbox }; +export { Checkbox, CheckBoxSizes };