From 3f57f976853a3806ff45efbc8ba6316be9a71be7 Mon Sep 17 00:00:00 2001 From: Chris Sandvik Date: Mon, 27 Feb 2023 14:22:09 -0500 Subject: [PATCH 1/6] Add `@deprecation` flags to both the original `styles` and `theme` props --- src/module-augmentation.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/module-augmentation.ts b/src/module-augmentation.ts index fa45db7..fffe03c 100644 --- a/src/module-augmentation.ts +++ b/src/module-augmentation.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import type { SystemStyleObject } from "@chakra-ui/system"; -import type { GroupBase } from "react-select"; +import type { GroupBase, StylesConfig, ThemeConfig } from "react-select"; import type { ChakraStylesConfig, SelectedOptionStyle, @@ -177,6 +177,18 @@ declare module "react-select/dist/declarations/src/Select" { * @see {@link https://github.com/csandman/chakra-react-select#variant--options-outline--filled--flushed--unstyled--default-outline} */ variant?: Variant; + + /** + * @deprecated This prop is not used for `chakra-react-select`, use + * {@link chakraStyles} instead. + */ + styles: StylesConfig; + + /** + * @deprecated This prop is not used for `chakra-react-select`, all theme + * values are pulled from your Chakra UI theme. + */ + theme?: ThemeConfig; } } From 37e10466c8c04773b2524c65d0aa581ac96689dc Mon Sep 17 00:00:00 2001 From: Chris Sandvik Date: Tue, 28 Feb 2023 19:18:51 -0500 Subject: [PATCH 2/6] Slight tweak to deprecated messages --- src/module-augmentation.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/module-augmentation.ts b/src/module-augmentation.ts index fffe03c..b6cfe6f 100644 --- a/src/module-augmentation.ts +++ b/src/module-augmentation.ts @@ -179,13 +179,13 @@ declare module "react-select/dist/declarations/src/Select" { variant?: Variant; /** - * @deprecated This prop is not used for `chakra-react-select`, use + * @deprecated This prop is not used in `chakra-react-select`, use * {@link chakraStyles} instead. */ styles: StylesConfig; /** - * @deprecated This prop is not used for `chakra-react-select`, all theme + * @deprecated This prop is not used in `chakra-react-select`, all theme * values are pulled from your Chakra UI theme. */ theme?: ThemeConfig; From dc971f8daeb5196e1806176a2ecae5651ef8a44e Mon Sep 17 00:00:00 2001 From: Chris Sandvik Date: Tue, 28 Feb 2023 20:35:00 -0500 Subject: [PATCH 3/6] Replace `selectedOptionColor` prop with `selectedOptionColorScheme` --- README.md | 65 ++++++++++++++++++++++++++++------ src/chakra-components/menu.tsx | 6 ++-- src/module-augmentation.ts | 7 +++- src/use-chakra-select-props.ts | 12 ++++--- 4 files changed, 72 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 8bb28b1..0fd5213 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ https://react-select.com/home - [`focusBorderColor` / `errorBorderColor`](#focusbordercolor--default-blue500--errorbordercolor--default-red500) - [`useBasicStyles`](#usebasicstyles--default-false) - [`selectedOptionStyle`](#selectedoptionstyle--options-color--check--default-color) - - [`selectedOptionColor`](#selectedoptioncolor--default-blue) + - [`selectedOptionColorScheme`](#selectedoptioncolorscheme--default-blue) - [`variant`](#variant--options-outline--filled--flushed--unstyled--default-outline) - [`hasStickyGroupHeaders`](#hasstickygroupheaders--default-false) - [`isFixed`](#isfixed) @@ -163,6 +163,8 @@ return ( [![CS-JS]](https://codesandbox.io/s/chakra-react-select-sizes-w9sf8e?file=/example.js) +--- + #### `colorScheme` You can pass the `colorScheme` prop to the select component to change all of the @@ -196,6 +198,8 @@ return ( [![CS-JS]](https://codesandbox.io/s/chakra-react-select-color-schemes-c38jlo?file=/example.js) +--- + #### `tagVariant` — Options: `subtle` | `solid` | `outline` — Default: `subtle` You can pass the `tagVariant` prop with either `subtle`, `solid`, or `outline` @@ -230,6 +234,8 @@ return ( [![CS-JS]](https://codesandbox.io/s/chakra-react-select-tag-variants-w31gnt?file=/example.js) +--- + #### `isInvalid` — Default: `false` | `isReadOnly` - Default: `false` You can pass `isInvalid` to the select component to style it like the Chakra @@ -265,6 +271,8 @@ return ( [![CS-JS]](https://codesandbox.io/s/chakra-react-select-invalid-disabled-0hyl8l?file=/example.js) +--- + #### `focusBorderColor` — Default: `blue.500` | `errorBorderColor` — Default: `red.500` The props `focusBorderColor` and `errorBorderColor` can be passed with Chakra @@ -284,6 +292,8 @@ return ( [![CS-JS]](https://codesandbox.io/s/chakra-react-select-border-colors-gjo4zd?file=/example.js) +--- + #### `useBasicStyles` — Default: `false` If this prop is passed, the dropdown indicator at the right of the component @@ -308,6 +318,8 @@ return ( [![CS-JS]](https://codesandbox.io/s/chakra-react-select-usebasicstyles-jjnqsd?file=/example.js) +--- + #### `selectedOptionStyle` — Options: `color` | `check` — Default: `color` As of `v1.3.0` you can pass the prop `selectedOptionStyle` with either `"color"` @@ -335,19 +347,32 @@ return ( [![CS-JS]](https://codesandbox.io/s/chakra-react-select-border-selectedoptionstyle-yxkcos?file=/example.js) -#### `selectedOptionColor` — Default: `blue` +--- + +#### `selectedOptionColorScheme` — Default: `blue` If you choose to stick with the default `selectedOptionStyle="color"`, you have one additional styling option. If you do not like the default of blue for the -highlight color, you can pass the `selectedOptionColor` prop to change it. This -prop will accept any named color from your color theme, and it will use the -`500` value in light mode or the `300` value in dark mode. +highlight color, you can pass the `selectedOptionColorScheme` prop to change it. +This prop will accept any named color from your theme's color palette, and it +will use the `500` value in light mode or the `300` value in dark mode. + +> **NOTE:** This prop can only be used for named colors from your theme, not +> arbitrary hex/rgb colors. If you would like to use a specific color for the +> background that's not a part of your theme, use the +> [`chakraStyles`](#chakrastyles) prop to customize it (see +> [#99](https://github.com/csandman/chakra-react-select/discussions/99) for an +> example). +> +> Prior to `v4.6.0` this prop was named `selectedOptionColor`, and it was +> renamed to prevent confusion about its purpose. `selectedOptionColor` is still +> available but will be removed in the next major version. ```js return ( <> - + ); ``` @@ -358,6 +383,8 @@ return ( [![CS-JS]](https://codesandbox.io/s/chakra-react-select-border-selectedoptioncolor-yyd321?file=/example.js) +--- + #### `variant` — Options: `outline` | `filled` | `flushed` | `unstyled` — Default: `outline` You can pass the `variant` prop with any of `outline`, `filled`, `flushed`, or @@ -408,6 +435,8 @@ elements. [![CS-JS]](https://codesandbox.io/s/chakra-react-select-variant-5cf755?file=/example.js) +--- + #### `hasStickyGroupHeaders` — Default: `false` One additional feature which isn’t specific to Chakra or react-select is sticky @@ -431,6 +460,8 @@ investigated. ![Sticky Group Headers](./github/sticky-group-headers.png) +--- + #### `isFixed` In your options objects, you can add the key `isFixed: true` to emulate the @@ -458,6 +489,8 @@ return ( ); ``` +--- + If you have any other requests for Chakra-like features that could be added, or problems with the current features, [please start a discussion](https://github.com/csandman/chakra-react-select/discussions/categories/ideas)! @@ -748,7 +781,20 @@ Here is an example of using classNames to style the components: This package has always supported typescript, however until `3.0.0` none of the type inference was working on the props passed into this component. Now that they are, you may need to pass in some generics for your component to work -properly. +properly, but **in most cases you shouldn't need to**. Here is a snippet from +the original documentation on the subject: + +> ### Select generics +> +> There are three generics used by the Select component: `Option`, `IsMulti`, +> and `Group`. All of them are optional and TypeScript attempts to detect them +> automatically, but sometimes it might need some help. Many of the +> `react-select` types include the three generics like this: +> +> — https://react-select.com/typescript + +Read their [full documentation](https://react-select.com/typescript) on the +topic for more info. This package exports all of the named module members of the original `react-select` in case you need their built-in types in any of your variable @@ -789,7 +835,6 @@ import { GroupBase, OptionBase, Select } from "chakra-react-select"; * type OptionBase = { * variant?: string; * colorScheme?: string; - * isFixed?: boolean; * isDisabled?: boolean; * }; * ``` @@ -813,7 +858,7 @@ const colorOptions = [ function CustomMultiSelect() { return { - > + > // <-- None of these generics should be required isMulti name="colors" options={colorOptions} diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx index 1cec5b3..63a9fe0 100644 --- a/src/chakra-components/menu.tsx +++ b/src/chakra-components/menu.tsx @@ -374,7 +374,7 @@ export const Option = < isMulti, hideSelectedOptions, selectedOptionStyle, - selectedOptionColor, + selectedOptionColorScheme, }, } = props; @@ -394,8 +394,8 @@ export const Option = < * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/components/input.ts#L73} */ const selectedBg = useColorModeValue( - `${selectedOptionColor}.500`, - `${selectedOptionColor}.300` + `${selectedOptionColorScheme}.500`, + `${selectedOptionColorScheme}.300` ); const selectedColor = useColorModeValue("white", "black"); diff --git a/src/module-augmentation.ts b/src/module-augmentation.ts index b6cfe6f..1b5d120 100644 --- a/src/module-augmentation.ts +++ b/src/module-augmentation.ts @@ -122,7 +122,12 @@ declare module "react-select/dist/declarations/src/Select" { * and the `300` value in dark mode. * * @defaultValue `blue` - * @see {@link https://github.com/csandman/chakra-react-select#selectedoptioncolor--default-blue} + * @see {@link https://github.com/csandman/chakra-react-select#selectedoptioncolorscheme--default-blue} + */ + selectedOptionColorScheme?: string; + + /** + * @deprecated Replaced by {@link selectedOptionColorScheme} */ selectedOptionColor?: string; diff --git a/src/use-chakra-select-props.ts b/src/use-chakra-select-props.ts index 5360f4b..28a1274 100644 --- a/src/use-chakra-select-props.ts +++ b/src/use-chakra-select-props.ts @@ -10,6 +10,7 @@ const useChakraSelectProps = < Group extends GroupBase