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 80fb7a9b8deae08efdf0907511f2d9cd8c246305 Mon Sep 17 00:00:00 2001 From: AaronPatterson1 Date: Sun, 5 Jan 2025 15:56:13 -0500 Subject: [PATCH 3/3] Fixing sizing mistake --- packages/button/lib/index.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/button/lib/index.tsx b/packages/button/lib/index.tsx index c6900b3..0392b21 100644 --- a/packages/button/lib/index.tsx +++ b/packages/button/lib/index.tsx @@ -72,6 +72,10 @@ const styles = stylex.create({ transition: "background-color var(--transition-speed, 0.2s) ease", }, + fullWidth: { + width: "100%", + }, + disabled: { opacity: "0.75", cursor: "not-allowed", @@ -162,25 +166,21 @@ const styles = stylex.create({ [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", }, }); @@ -188,6 +188,7 @@ const styles = stylex.create({ export interface ButtonProps extends React.ButtonHTMLAttributes { // size?: any; variant?: ButtonVariants; + fullWidth?: boolean; size?: ButtonSizes; loading?: boolean; disabled?: boolean; @@ -218,6 +219,7 @@ const Button = forwardRef(({ extend, variant = ButtonVariants.CREATE, // TODO: add size variants, + fullWidth, loading = false, disabled, asChild = false, @@ -233,6 +235,7 @@ const Button = forwardRef(({ styles.base, // TODO: ({ size}) styles[variant], + fullWidth && styles.fullWidth, disabled && styles.disabled, extend, styles[size]