From be924e8f8e49fba95d9a419dbefa9433dfba21d8 Mon Sep 17 00:00:00 2001 From: Chris Sandvik Date: Thu, 27 Oct 2022 14:36:38 -0400 Subject: [PATCH 1/3] Use default component theme styles from `Input` --- README.md | 4 ++++ src/chakra-components/control.tsx | 6 ++++-- src/use-chakra-select-props.ts | 19 ++++++++++++------- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index b205647..faa5471 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,8 @@ Implementing this component in your application should be almost identical to ho You can pass the `size` prop with either `sm`, `md`, or `lg` (default is `md`). These will reflect the sizes available on the [Chakra `` component](https://chakra-ui.com/docs/components/input#changing-the-size-of-the-input) (with the exception of `xs` because it's too small to work). +If no `size` is passed, it will default to `defaultProps.size` from the theme for Chakra's `Input` component. If your component theme for `Input` is not modified, it will be `md`. + ```js return ( <> @@ -279,6 +281,8 @@ return ( You can pass the `variant` prop with any of `outline`, `filled`, `flushed`, or `unstyled` to change the overall styling of the `Select`. These will reflect the various appearances available for [Chakra's `` component](https://chakra-ui.com/docs/components/input#changing-the-size-of-the-input). +If no `variant` is passed, it will default to `defaultProps.variant` from the theme for Chakra's `Input` component. If your component theme for `Input` is not modified, it will be `outline`. + ```js return ( <> diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx index 5687d14..26e6347 100644 --- a/src/chakra-components/control.tsx +++ b/src/chakra-components/control.tsx @@ -146,18 +146,20 @@ export const DropdownIndicator = < cx, innerProps, selectProps: { - size, chakraStyles, useBasicStyles, + size, focusBorderColor, errorBorderColor, + variant, }, } = props; const inputStyles = useMultiStyleConfig("Input", { + size, focusBorderColor, errorBorderColor, - size, + variant, }); const iconSizes: SizeProps = { diff --git a/src/use-chakra-select-props.ts b/src/use-chakra-select-props.ts index bb75895..ce30a03 100644 --- a/src/use-chakra-select-props.ts +++ b/src/use-chakra-select-props.ts @@ -1,4 +1,5 @@ import { useFormControl } from "@chakra-ui/form-control"; +import { useTheme } from "@chakra-ui/system"; import type { GroupBase, Props } from "react-select"; import chakraComponents from "./chakra-components"; import type { SelectedOptionStyle, Size, TagVariant, Variant } from "./types"; @@ -10,7 +11,7 @@ const useChakraSelectProps = < >({ components = {}, theme, - size = "md", + size, colorScheme = "gray", isDisabled, isInvalid, @@ -21,7 +22,7 @@ const useChakraSelectProps = < hasStickyGroupHeaders = false, selectedOptionStyle = "color", selectedOptionColor = "blue", - variant = "outline", + variant, focusBorderColor, errorBorderColor, chakraStyles = {}, @@ -30,6 +31,10 @@ const useChakraSelectProps = < menuIsOpen, ...props }: Props): Props => { + const chakraTheme = useTheme(); + const { variant: defaultVariant, size: defaultSize } = + chakraTheme.components.Input.defaultProps; + /** * Combine the props passed into the component with the props that can be set * on a surrounding form control to get the values of `isDisabled` and @@ -50,9 +55,9 @@ const useChakraSelectProps = < menuIsOpen ?? (inputProps.readOnly ? false : undefined); /** Ensure that the size used is one of the options, either `sm`, `md`, or `lg` */ - let realSize: Size = size; + let realSize: Size = size ?? defaultSize === "xs" ? "sm" : defaultSize; const sizeOptions: Size[] = ["sm", "md", "lg"]; - if (!sizeOptions.includes(size)) { + if (!sizeOptions.includes(realSize)) { realSize = "md"; } @@ -81,15 +86,15 @@ const useChakraSelectProps = < realSelectedOptionColor = "blue"; } - let realVariant: Variant = variant; + let realVariant: Variant = variant ?? defaultVariant; const variantOptions: Variant[] = [ "outline", "filled", "flushed", "unstyled", ]; - if (!variantOptions.includes(variant)) { - realVariant = "outline"; + if (!variantOptions.includes(realVariant)) { + realVariant = defaultVariant; } const select: Props = { From ff89d88cf514d10abd754a14ba2a413e5982603a Mon Sep 17 00:00:00 2001 From: Chris Sandvik Date: Thu, 27 Oct 2022 14:36:59 -0400 Subject: [PATCH 2/3] Update documentation about theme styles --- README.md | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index faa5471..063bd3a 100644 --- a/README.md +++ b/README.md @@ -498,21 +498,24 @@ Default [Chakra `