From 50c4f4bedb9ccf460b4af06ad4eae5b0e029ddc3 Mon Sep 17 00:00:00 2001 From: physicsSorcererKing Date: Sun, 5 May 2024 20:32:23 +0800 Subject: [PATCH 1/8] fix: button disabled styling, but it's not fit W3C rules --- components/shared/Button/v2/Button.stories.tsx | 3 +++ components/shared/Button/v2/Button.tsx | 11 ++++++++--- pages/login.tsx | 1 + 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/components/shared/Button/v2/Button.stories.tsx b/components/shared/Button/v2/Button.stories.tsx index 4913d9a6..4393d07f 100644 --- a/components/shared/Button/v2/Button.stories.tsx +++ b/components/shared/Button/v2/Button.stories.tsx @@ -46,6 +46,9 @@ const meta: Meta = { control: { type: "select" }, options: buttonTypeOptions, }, + disabled: { + control: { type: "boolean" }, + }, size: { control: { type: "select" }, options: buttonSizeOptions, diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx index bf7817f8..f32537ac 100644 --- a/components/shared/Button/v2/Button.tsx +++ b/components/shared/Button/v2/Button.tsx @@ -22,11 +22,14 @@ export enum ButtonSize { SMALL = "small", } +const commonDisabledClasses = + "disabled:cursor-not-allowed disabled:bg-gray-800 disabled:border-gray-500 disabled:text-gray-200 disabled:stroke-gray-200 disabled:fill-gray-200"; + const buttonTypeClasses: Record = { primary: "text-primary-700 bg-primary-200 hover:text-primary-50 hover:bg-primary-300 active:text-primary-50 active:bg-primary-400", secondary: - "text-primary-200 bg-transparent hover:bg-primary-300/40 active:bg-primary-200/20 disabled:bg-transparent disabled:border-grey-500 disabled:border", + "text-primary-200 bg-transparent hover:bg-primary-300/40 active:bg-primary-200/20 disabled:bg-transparent disabled:border", highlight: "text-primary-50 gradient-purple hover:gradient-purple-2 active:gradient-purple-3", }; @@ -60,7 +63,7 @@ type InnerButtonComponent = ( const iconTypeClasses: Record = { primary: "stroke-primary-700 hover:stroke-primary-50 active:stroke-primary-50", - secondary: "stroke-primary-200", + secondary: "stroke-primary-200 disabled:stroke-gray-500", highlight: "stroke-primary-50", }; @@ -98,7 +101,7 @@ const InteralButton: InnerButtonComponent = ( () => cn( "w-full items-center fz-16-b transition-colors transition-[border-image] ease-in", - "disabled:text-grey-200 disabled:bg-grey-800", + commonDisabledClasses, buttonTypeClasses[variant], buttonSizeClasses[size], iconTypeClasses[variant], @@ -124,6 +127,8 @@ const InteralButton: InnerButtonComponent = ( {...otherButtonAttributes} > { iconName={icon} variant={ButtonType.SECONDARY} onClick={(e: SyntheticEvent) => onLoginClick(e, type)} + disabled > {text} From 1ce9bd889934645c645b103214ef6047aaebccc9 Mon Sep 17 00:00:00 2001 From: physicsSorcererKing Date: Mon, 20 May 2024 21:44:39 +0800 Subject: [PATCH 2/8] fix: disabled styles --- .../shared/Button/v2/Button.stories.tsx | 36 +--------- components/shared/Button/v2/Button.tsx | 72 ++++++------------- pages/login.tsx | 32 ++++----- 3 files changed, 41 insertions(+), 99 deletions(-) diff --git a/components/shared/Button/v2/Button.stories.tsx b/components/shared/Button/v2/Button.stories.tsx index 4393d07f..27782687 100644 --- a/components/shared/Button/v2/Button.stories.tsx +++ b/components/shared/Button/v2/Button.stories.tsx @@ -38,49 +38,19 @@ const meta: Meta = { children: "Button", }, argTypes: { - component: { - control: { type: "select" }, - options: ["button", "a"], - }, - variant: { - control: { type: "select" }, - options: buttonTypeOptions, - }, - disabled: { - control: { type: "boolean" }, - }, - size: { - control: { type: "select" }, - options: buttonSizeOptions, - }, - iconName: { - control: { type: "select" }, - options: buttonIconNameOptions, - description: - "Icon name from `IconV2` component. If `icon` is not `undefinded`, this prop will be ignored.", - }, - icon: { - control: { type: "select" }, - options: buttonIconOptions, - description: - "Custom icons or any prefix component. If `iconName` is not `undefinded`, this prop will be ignored.", - }, - boxFancyClassName: { - control: { type: "text" }, - description: "custom class name for inner div", - defaultValue: "", - }, className: { control: { type: "text" }, description: "custom class name", defaultValue: "", }, + disabled: { + control: { type: "boolean" }, + }, style: { control: { type: "object" }, description: "custom style", defaultValue: {}, }, - ref: { control: { disable: true } }, }, }; diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx index f32537ac..23e6af33 100644 --- a/components/shared/Button/v2/Button.tsx +++ b/components/shared/Button/v2/Button.tsx @@ -1,15 +1,9 @@ -import React, { - ElementType, - ReactNode, - forwardRef, - useCallback, - useMemo, -} from "react"; +import React, { ReactNode, forwardRef, useCallback } from "react"; import { cn } from "@/lib/utils"; import BoxFancy, { BoxFancyBorderGradientVariant } from "../../BoxFancy"; import { IconName } from "@/components/shared/Icon/icons"; import Icon from "@/components/shared/Icon"; -import { PolymorphicComponentProp, PolymorphicRef } from "@/lib/types"; +import { PolymorphicRef } from "@/lib/types"; export enum ButtonType { PRIMARY = "primary", @@ -44,20 +38,14 @@ interface BaseButtonProps { size?: ButtonSize; icon?: ReactNode; iconName?: IconName; - disabled?: boolean; - // inner div className for styling - boxFancyClassName?: string; iconClassName?: string; } -type ButtonProps = PolymorphicComponentProp< - C, - BaseButtonProps ->; +type ButtonProps = BaseButtonProps & React.ComponentPropsWithoutRef<"button">; -type InnerButtonComponent = ( - props: ButtonProps, - ref?: PolymorphicRef +type InnerButtonComponent = ( + props: ButtonProps, + ref?: PolymorphicRef<"button"> ) => React.ReactElement | null; const iconTypeClasses: Record = { @@ -69,14 +57,12 @@ const iconTypeClasses: Record = { const InteralButton: InnerButtonComponent = ( { - component, variant = ButtonType.PRIMARY, size = ButtonSize.REGULAR, icon, iconName, disabled, className, - boxFancyClassName, iconClassName, children, onClick, @@ -84,7 +70,6 @@ const InteralButton: InnerButtonComponent = ( }, ref ) => { - const Component = component || "button"; const handleClick = useCallback( (event: React.MouseEvent) => { if (disabled) { @@ -97,46 +82,33 @@ const InteralButton: InnerButtonComponent = ( [disabled, onClick] ); - const buttonClassName = useMemo( - () => - cn( - "w-full items-center fz-16-b transition-colors transition-[border-image] ease-in", - commonDisabledClasses, - buttonTypeClasses[variant], - buttonSizeClasses[size], - iconTypeClasses[variant], - boxFancyClassName - ), - [boxFancyClassName, size, variant] - ); - - const iconClasses = useMemo( - () => cn("w-6 h-6 stroke-inherit", iconClassName), - [iconClassName] + const boxFancyClassName = cn( + "w-full items-center fz-16-b transition-colors transition-[border-image] ease-in", + commonDisabledClasses, + buttonTypeClasses[variant], + buttonSizeClasses[size], + iconTypeClasses[variant], + className ); + const iconClasses = cn("w-6 h-6 stroke-inherit", iconClassName); const borderGradientColor: BoxFancyBorderGradientVariant = variant === ButtonType.SECONDARY && !disabled ? "purple" : "none"; return ( - - - {icon || (iconName && )} - {children} - - + {icon || (iconName && )} + {children} + ); }; diff --git a/pages/login.tsx b/pages/login.tsx index 1de505c3..db582a77 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -66,22 +66,22 @@ const Login: NextPageWithProps = () => { const loginButtons = useMemo(() => { return LoginMethods.map(({ text, type, icon }) => ( - onLoginClick(e, type)} - disabled - > - {text} - + + onLoginClick(e, type)} + // disabled + > + {text} + + )); }, [internalEndpoint, onLoginClick]); From a7a52e5a12fd9b4e3429890b55c77db4f78b2b09 Mon Sep 17 00:00:00 2001 From: physicsSorcererKing Date: Mon, 20 May 2024 21:53:26 +0800 Subject: [PATCH 3/8] fix: disabled styles for highlight type --- components/shared/Button/v2/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx index 23e6af33..88654ae9 100644 --- a/components/shared/Button/v2/Button.tsx +++ b/components/shared/Button/v2/Button.tsx @@ -17,7 +17,7 @@ export enum ButtonSize { } const commonDisabledClasses = - "disabled:cursor-not-allowed disabled:bg-gray-800 disabled:border-gray-500 disabled:text-gray-200 disabled:stroke-gray-200 disabled:fill-gray-200"; + "disabled:cursor-not-allowed disabled:bg-none disabled:bg-gray-800 disabled:border-gray-500 disabled:text-gray-200 disabled:stroke-gray-200 disabled:fill-gray-200"; const buttonTypeClasses: Record = { primary: From 064ee6496edd0247d08196db7a3cdd5fd71dad9a Mon Sep 17 00:00:00 2001 From: physicsSorcererKing Date: Mon, 20 May 2024 21:57:44 +0800 Subject: [PATCH 4/8] refactor: variant prop name --- components/shared/Button/v2/Button.stories.tsx | 12 ++++++------ components/shared/Button/v2/Button.test.tsx | 4 ++-- components/shared/Button/v2/Button.tsx | 12 ++++++------ pages/login.tsx | 4 ++-- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/components/shared/Button/v2/Button.stories.tsx b/components/shared/Button/v2/Button.stories.tsx index 27782687..6ccc3cfc 100644 --- a/components/shared/Button/v2/Button.stories.tsx +++ b/components/shared/Button/v2/Button.stories.tsx @@ -1,13 +1,13 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { Button, ButtonSize, ButtonType } from "./Button"; +import { Button, ButtonSize, ButtonVariant } from "./Button"; import { ReactNode } from "react"; import Icon from "../../Icon"; -const buttonTypeOptions: (ButtonType | undefined)[] = [ +const buttonVariantOptions: (ButtonVariant | undefined)[] = [ undefined, - ButtonType.PRIMARY, - ButtonType.SECONDARY, - ButtonType.HIGHLIGHT, + ButtonVariant.PRIMARY, + ButtonVariant.SECONDARY, + ButtonVariant.HIGHLIGHT, ]; const buttonSizeOptions: (ButtonSize | undefined)[] = [ @@ -65,7 +65,7 @@ export const Playground: Story = { export const Variant: Story = { render: (args) => ( <> - {buttonTypeOptions.map((variant) => ( + {buttonVariantOptions.map((variant) => ( diff --git a/components/shared/Button/v2/Button.test.tsx b/components/shared/Button/v2/Button.test.tsx index 8d6cc665..7e3c219f 100644 --- a/components/shared/Button/v2/Button.test.tsx +++ b/components/shared/Button/v2/Button.test.tsx @@ -1,7 +1,7 @@ import React from "react"; import { render, screen } from "@testing-library/react"; import "@testing-library/jest-dom"; -import { Button } from "./Button"; +import { Button, ButtonVariant } from "./Button"; describe("ButtonV2", () => { it("should renders button text", () => { @@ -16,7 +16,7 @@ describe("ButtonV2", () => { it("should have correct className", () => { render( - ); diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx index 88654ae9..31b6cbe0 100644 --- a/components/shared/Button/v2/Button.tsx +++ b/components/shared/Button/v2/Button.tsx @@ -5,7 +5,7 @@ import { IconName } from "@/components/shared/Icon/icons"; import Icon from "@/components/shared/Icon"; import { PolymorphicRef } from "@/lib/types"; -export enum ButtonType { +export enum ButtonVariant { PRIMARY = "primary", SECONDARY = "secondary", HIGHLIGHT = "highlight", @@ -19,7 +19,7 @@ export enum ButtonSize { const commonDisabledClasses = "disabled:cursor-not-allowed disabled:bg-none disabled:bg-gray-800 disabled:border-gray-500 disabled:text-gray-200 disabled:stroke-gray-200 disabled:fill-gray-200"; -const buttonTypeClasses: Record = { +const buttonTypeClasses: Record = { primary: "text-primary-700 bg-primary-200 hover:text-primary-50 hover:bg-primary-300 active:text-primary-50 active:bg-primary-400", secondary: @@ -34,7 +34,7 @@ const buttonSizeClasses: Record = { }; interface BaseButtonProps { - variant?: ButtonType; + variant?: ButtonVariant; size?: ButtonSize; icon?: ReactNode; iconName?: IconName; @@ -48,7 +48,7 @@ type InnerButtonComponent = ( ref?: PolymorphicRef<"button"> ) => React.ReactElement | null; -const iconTypeClasses: Record = { +const iconTypeClasses: Record = { primary: "stroke-primary-700 hover:stroke-primary-50 active:stroke-primary-50", secondary: "stroke-primary-200 disabled:stroke-gray-500", @@ -57,7 +57,7 @@ const iconTypeClasses: Record = { const InteralButton: InnerButtonComponent = ( { - variant = ButtonType.PRIMARY, + variant = ButtonVariant.PRIMARY, size = ButtonSize.REGULAR, icon, iconName, @@ -93,7 +93,7 @@ const InteralButton: InnerButtonComponent = ( const iconClasses = cn("w-6 h-6 stroke-inherit", iconClassName); const borderGradientColor: BoxFancyBorderGradientVariant = - variant === ButtonType.SECONDARY && !disabled ? "purple" : "none"; + variant === ButtonVariant.SECONDARY && !disabled ? "purple" : "none"; return ( { "fill-current": type === LoginType.GITHUB, })} iconName={icon} - variant={ButtonType.SECONDARY} + variant={ButtonVariant.SECONDARY} onClick={(e: SyntheticEvent) => onLoginClick(e, type)} // disabled > From 4222fbd907770d2a9d8b9f8f57e7365a17c008d9 Mon Sep 17 00:00:00 2001 From: physicsSorcererKing Date: Mon, 20 May 2024 22:00:23 +0800 Subject: [PATCH 5/8] fix: default ButtonV2 width --- components/shared/Button/v2/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx index 31b6cbe0..c4d11882 100644 --- a/components/shared/Button/v2/Button.tsx +++ b/components/shared/Button/v2/Button.tsx @@ -83,7 +83,7 @@ const InteralButton: InnerButtonComponent = ( ); const boxFancyClassName = cn( - "w-full items-center fz-16-b transition-colors transition-[border-image] ease-in", + "w-fit items-center fz-16-b transition-colors transition-[border-image] ease-in", commonDisabledClasses, buttonTypeClasses[variant], buttonSizeClasses[size], From 831ed2ca71cb97dbf6c317caba0b9510ae7a73b0 Mon Sep 17 00:00:00 2001 From: Nicky Wang <36099986+physicsSorcererKing@users.noreply.github.com> Date: Tue, 28 May 2024 22:41:09 +0800 Subject: [PATCH 6/8] chore: remove useless comment --- pages/login.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/login.tsx b/pages/login.tsx index 71525a98..efdb3cc7 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -77,7 +77,6 @@ const Login: NextPageWithProps = () => { iconName={icon} variant={ButtonVariant.SECONDARY} onClick={(e: SyntheticEvent) => onLoginClick(e, type)} - // disabled > {text} From 113ca5a1d4f2928d129c1255423df8e250c82e9f Mon Sep 17 00:00:00 2001 From: Nicky Wang <36099986+physicsSorcererKing@users.noreply.github.com> Date: Tue, 28 May 2024 22:45:57 +0800 Subject: [PATCH 7/8] feat: can directly input string to variant prop --- components/shared/Button/v2/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx index c4d11882..2e5c3ab2 100644 --- a/components/shared/Button/v2/Button.tsx +++ b/components/shared/Button/v2/Button.tsx @@ -34,7 +34,7 @@ const buttonSizeClasses: Record = { }; interface BaseButtonProps { - variant?: ButtonVariant; + variant?: ButtonVariant | `${ButtonVariant}`; size?: ButtonSize; icon?: ReactNode; iconName?: IconName; From 7d0ffab2f51be4901eea312eedf4f75d53a827ff Mon Sep 17 00:00:00 2001 From: Johnson Mao Date: Mon, 3 Jun 2024 23:05:24 +0800 Subject: [PATCH 8/8] refactor: use v2 icon instead --- components/shared/Button/v2/Button.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx index 2e5c3ab2..a89731df 100644 --- a/components/shared/Button/v2/Button.tsx +++ b/components/shared/Button/v2/Button.tsx @@ -1,8 +1,8 @@ import React, { ReactNode, forwardRef, useCallback } from "react"; import { cn } from "@/lib/utils"; import BoxFancy, { BoxFancyBorderGradientVariant } from "../../BoxFancy"; -import { IconName } from "@/components/shared/Icon/icons"; -import Icon from "@/components/shared/Icon"; +import { IconNameV2 } from "@/components/shared/Icon/v2/icons"; +import Icon from "@/components/shared/Icon/v2"; import { PolymorphicRef } from "@/lib/types"; export enum ButtonVariant { @@ -37,7 +37,7 @@ interface BaseButtonProps { variant?: ButtonVariant | `${ButtonVariant}`; size?: ButtonSize; icon?: ReactNode; - iconName?: IconName; + iconName?: IconNameV2; iconClassName?: string; }