From 0592d44364c6381490fe678fb2fb50273388baeb Mon Sep 17 00:00:00 2001 From: George Weiler Date: Fri, 2 Dec 2022 20:00:22 -0700 Subject: [PATCH 1/3] Add sequence button variant with isSelected prop --- src/components/Button/index.tsx | 6 ++++++ src/components/index.ts | 1 + src/index.ts | 4 ++++ src/theme/Button.ts | 13 +++++++++++++ src/theme/utils/colors.ts | 1 + 5 files changed, 25 insertions(+) create mode 100644 src/components/Button/index.tsx diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx new file mode 100644 index 0000000..0708c3b --- /dev/null +++ b/src/components/Button/index.tsx @@ -0,0 +1,6 @@ +import { Button as ChakraButton, ButtonProps } from "@chakra-ui/react" +import { FC } from "react" + +export const Button: FC = (props) => { + return +} diff --git a/src/components/index.ts b/src/components/index.ts index ca06fc9..9339eac 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,6 @@ export * from "./AlertBox" export * from "./BoxLabel" +export * from "./Button" export * from "./Card" export * from "./ChecklistGroup" export * from "./ChecklistItem" diff --git a/src/index.ts b/src/index.ts index b557854..22df9e1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,5 @@ import { defaultTheme } from "./theme" +import { Button } from "./components" export * from "@chakra-ui/react" export * from "./components" @@ -7,3 +8,6 @@ export { defaultTheme } from "./theme" export * as ThemeUtils from "./theme/utils" export * from "./hooks" export * from "./utils" + +// Exporting the local components explicitly to override the chakra version +export { Button } diff --git a/src/theme/Button.ts b/src/theme/Button.ts index ee0baf3..fbe9b1e 100644 --- a/src/theme/Button.ts +++ b/src/theme/Button.ts @@ -81,5 +81,18 @@ export const Button = { }, } }, + sequence: (props: any) => { + const { isSelected } = props + const selectedBg = mode("brand.300", "brand.500") + + return { + color: isSelected ? "white" : mode(undefined, "white")(props), + bg: isSelected ? selectedBg : mode("brand.75", "gray.700")(props), + _hover: { + bg: selectedBg, + color: "white", + }, + } + }, }, } diff --git a/src/theme/utils/colors.ts b/src/theme/utils/colors.ts index 6c7ccee..4201519 100644 --- a/src/theme/utils/colors.ts +++ b/src/theme/utils/colors.ts @@ -9,6 +9,7 @@ export const colors = { }, brand: { 50: "#FCF9FF", + 75: "#F2EDFF", 100: "#D5C6FF", // 200 300: "#9974FF", From 016e9ab7581f9a9c7a8c10ca1ab27758650c2575 Mon Sep 17 00:00:00 2001 From: George Weiler Date: Fri, 2 Dec 2022 20:44:42 -0700 Subject: [PATCH 2/3] Fixes button export by using forwardRef --- src/components/Button/index.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 0708c3b..a4e8c47 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -1,6 +1,13 @@ -import { Button as ChakraButton, ButtonProps } from "@chakra-ui/react" -import { FC } from "react" +import { + Button as ChakraButton, + ButtonProps, + forwardRef, +} from "@chakra-ui/react" -export const Button: FC = (props) => { - return +interface IButton extends ButtonProps { + isSelected?: boolean } + +export const Button = forwardRef((props, ref) => ( + +)) From 83abf181571f1ff00c0cf0db770224dca3a348d4 Mon Sep 17 00:00:00 2001 From: George Weiler Date: Mon, 5 Dec 2022 10:54:30 -0700 Subject: [PATCH 3/3] Use isActive prop instead of isSelected --- src/components/Button/index.tsx | 13 ------------- src/components/index.ts | 1 - src/index.ts | 4 ---- src/theme/Button.ts | 13 ++++++++----- 4 files changed, 8 insertions(+), 23 deletions(-) delete mode 100644 src/components/Button/index.tsx diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx deleted file mode 100644 index a4e8c47..0000000 --- a/src/components/Button/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { - Button as ChakraButton, - ButtonProps, - forwardRef, -} from "@chakra-ui/react" - -interface IButton extends ButtonProps { - isSelected?: boolean -} - -export const Button = forwardRef((props, ref) => ( - -)) diff --git a/src/components/index.ts b/src/components/index.ts index 9339eac..ca06fc9 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,6 +1,5 @@ export * from "./AlertBox" export * from "./BoxLabel" -export * from "./Button" export * from "./Card" export * from "./ChecklistGroup" export * from "./ChecklistItem" diff --git a/src/index.ts b/src/index.ts index 22df9e1..b557854 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,4 @@ import { defaultTheme } from "./theme" -import { Button } from "./components" export * from "@chakra-ui/react" export * from "./components" @@ -8,6 +7,3 @@ export { defaultTheme } from "./theme" export * as ThemeUtils from "./theme/utils" export * from "./hooks" export * from "./utils" - -// Exporting the local components explicitly to override the chakra version -export { Button } diff --git a/src/theme/Button.ts b/src/theme/Button.ts index fbe9b1e..a56cb9d 100644 --- a/src/theme/Button.ts +++ b/src/theme/Button.ts @@ -82,14 +82,17 @@ export const Button = { } }, sequence: (props: any) => { - const { isSelected } = props - const selectedBg = mode("brand.300", "brand.500") + const selectedBg = mode("brand.300", "brand.500")(props) return { - color: isSelected ? "white" : mode(undefined, "white")(props), - bg: isSelected ? selectedBg : mode("brand.75", "gray.700")(props), + color: mode(undefined, "white")(props), + backgroundColor: mode("brand.75", "gray.700")(props), + _active: { + color: "white", + backgroundColor: selectedBg, + }, _hover: { - bg: selectedBg, + backgroundColor: selectedBg, color: "white", }, }