Tweak the Docs and code for new variant prop

Author: csandman

README.md

@@ -38,9 +38,9 @@ Check out these demos:
   - [`isInvalid`](#isinvalid--default-false)
   - [`focusBorderColor` / `errorBorderColor`](#focusbordercolor--default-blue500--errorbordercolor--default-red500)
   - [`useBasicStyles`](#usebasicstyles--default-false)
-  - [`variant`](#variant)
   - [`selectedOptionStyle`](#selectedoptionstyle--options-color--check--default-color)
   - [`selectedOptionColor`](#selectedoptioncolor--default-blue)
+  - [`variant`](#variant--options-outline--filled--flushed--unstyled--default-outline)
   - [`hasStickyGroupHeaders`](#hasstickygroupheaders--default-false)
   - [`isFixed`](#isfixed)
 - [Styling](#styling)
@@ -252,16 +252,6 @@ return (
 
 [![CS-JS]](https://codesandbox.io/s/chakra-react-select-border-selectedoptionstyle-yxkcos?file=/example.js)
 
-#### `variant`
-
-You can set `outline`, `unstyled`, `flushed` or `filled`, which will reflect the same styles of Chakra-Ui select possible appearances [Check chakra-ui variants styles](https://chakra-ui.com/docs/components/select#changing-the-appearance)!
-
-```js
-return (
-  <Select variant="flushed" />
-);
-```
-
 #### `selectedOptionColor` — 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.
@@ -281,6 +271,35 @@ 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 `unstyled` to change the overall styling of the `Select`. These will reflect the various appearances available for [Chakra's `<Input />` component](https://chakra-ui.com/docs/components/input#changing-the-size-of-the-input).
+
+```js
+return (
+  <>
+    <Select variant="outline" /> {/* Default */}
+    <Select variant="filled" />
+    <Select variant="flushed" />
+    <Select variant="unstyled" />
+  </>
+);
+```
+
+![variant in light mode](./github/variant-light.png)
+
+![variant in dark mode](./github/variant-dark.png)
+
+By default, the `flushed` and `unstyled` variants look a bit strange in combination with the `DropdownIndicator`. An easy way to make these styles look more natural is to pass the [`useBasicStyles`](#usebasicstyles--default-false) prop along with them to remove the background from the indicator. Or alternatively, you could hide the indicator completely using [`chakraStyles`](#chakrastyles).
+
+![variant with useBasicStyles](./github/variant-use-basic-styles.png)
+
+Another thing to note is that the default styling for `variant="filled"` and `isMulti` results in the select and selected option tags having the same background color when the select is not focused. The easiest solution for this is to pass the [`tagVariant`](#tagvariant--options-subtle--solid--outline--default-subtle) or [`colorScheme`](#colorscheme) prop to add some contrast between the two elements.
+
+![variant with useBasicStyles](./github/filled-variant.png)
+
+[![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 group headers. It adds a border to the bottom of the header and keeps it in view while its corresponding group of options is visible. This can be very nice for when you have long lists of grouped options so you can always tell which group of options you're looking at. To add it, pass the `hasStickyGroupHeaders` prop to the select component.

github/filled-variant.png

@@ -73,9 +73,8 @@ export const ValueContainer = <
   } = props;
 
   // Getting the css from input instead of select
-  // to fit better with the search input feature
-
-  const chakraInputConfig = useMultiStyleConfig("Input", {
+  // to fit better with each of the variants
+  const inputStyles = useMultiStyleConfig("Input", {
     size,
     variant,
   });
@@ -84,7 +83,8 @@ export const ValueContainer = <
     display: "flex",
     alignItems: "center",
     flex: 1,
-    px: chakraInputConfig.field.px,
+    paddingY: "2px",
+    paddingX: inputStyles.field.px,
     flexWrap: "wrap",
     WebkitOverflowScrolling: "touch",
     position: "relative",

github/variant-dark.png

@@ -102,12 +102,12 @@ export const IndicatorSeparator = <
   const {
     className,
     cx,
-    selectProps: { chakraStyles, useBasicStyles },
+    selectProps: { chakraStyles, useBasicStyles, variant },
   } = props;
 
   const initialSx: CSSObject = {
     opacity: 1,
-    ...(useBasicStyles && { display: "none" }),
+    ...(useBasicStyles || variant !== "outline" ? { display: "none" } : {}),
   };
 
   const sx = chakraStyles?.indicatorSeparator

github/variant-light.png

@@ -76,16 +76,6 @@ declare module "react-select/dist/declarations/src/Select" {
      */
     colorScheme?: string;
 
-    /**
-     * The `variant` prop that changes the select main style
-     *
-     * Options: "outline" | "unstyled" | "flushed" | "filled"
-     *
-     * @defaultValue `outline`
-     * @see {@link https://chakra-ui.com/docs/components/select#changing-the-appearance}
-     */
-    variant?: Variant;
-
     /**
      * The `variant` prop that will be forwarded to your `MultiValue` component
      * which is represented by a chakra `Tag`
@@ -168,6 +158,17 @@ declare module "react-select/dist/declarations/src/Select" {
      * @see {@link https://chakra-ui.com/docs/components/select}
      */
     useBasicStyles?: boolean;
+
+    /**
+     * The main style variant of the `Select` component
+     *
+     * Options: `outline` | `filled` | `flushed` | `unstyled`
+     *
+     * @defaultValue `outline`
+     * @see {@link https://chakra-ui.com/docs/components/select#changing-the-appearance}
+     * @see {@link https://github.com/csandman/chakra-react-select#variant--options-outline--filled--flushed--unstyled--default-outline}
+     */
+    variant?: Variant;
   }
 }
 

github/variant-use-basic-styles.png

@@ -40,12 +40,12 @@ export interface SizeProps<PropType = string | number> {
 
 export type Size = "sm" | "md" | "lg";
 
-export type Variant = "outline" | "unstyled" | "flushed" | "filled";
-
 export type TagVariant = "subtle" | "solid" | "outline";
 
 export type SelectedOptionStyle = "color" | "check";
 
+export type Variant = "outline" | "filled" | "flushed" | "unstyled";
+
 export type StylesFunction<ComponentProps> = (
   provided: CSSObject,
   state: ComponentProps

src/chakra-components/containers.tsx

@@ -1,7 +1,7 @@
 import { useFormControl } from "@chakra-ui/form-control";
 import type { GroupBase, Props } from "react-select";
 import chakraComponents from "./chakra-components";
-import type { SelectedOptionStyle, Size, TagVariant } from "./types";
+import type { SelectedOptionStyle, Size, TagVariant, Variant } from "./types";
 
 const useChakraSelectProps = <
   Option,
@@ -21,6 +21,7 @@ const useChakraSelectProps = <
   hasStickyGroupHeaders = false,
   selectedOptionStyle = "color",
   selectedOptionColor = "blue",
+  variant = "outline",
   focusBorderColor,
   errorBorderColor,
   chakraStyles = {},
@@ -75,6 +76,17 @@ const useChakraSelectProps = <
     realSelectedOptionColor = "blue";
   }
 
+  let realVariant: Variant = variant;
+  const variantOptions: Variant[] = [
+    "outline",
+    "filled",
+    "flushed",
+    "unstyled",
+  ];
+  if (!variantOptions.includes(variant)) {
+    realVariant = "outline";
+  }
+
   const select: Props<Option, IsMulti, Group> = {
     // Allow overriding of custom components
     components: {
@@ -87,6 +99,7 @@ const useChakraSelectProps = <
     tagVariant: realTagVariant,
     selectedOptionStyle: realSelectedOptionStyle,
     selectedOptionColor: realSelectedOptionColor,
+    variant: realVariant,
     hasStickyGroupHeaders,
     chakraStyles,
     focusBorderColor,