feat: Adds appearanceVariant prop that reflects chackra-ui variants from inputs and selects

fix: Extra padding when flushed styled was applied

This feature allow users to use different apperances in the same project

Author: vntguva

README.md

@@ -34,6 +34,7 @@ Check out these demos:
 - [Extra Props](#extra-props)
   - [`size`](#size--options-sm-md-lg--default-md)
   - [`colorScheme`](#colorscheme)
+  - [`appearanceVariant`](#appearanceVariant)
   - [`tagVariant`](#tagvariant--options-subtle-solid-outline--default-subtle)
   - [`isInvalid`](#isinvalid--default-false)
   - [`focusBorderColor` / `errorBorderColor`](#focusbordercolor--default-blue500--errorbordercolor--default-red500)
@@ -141,6 +142,16 @@ return (
 );
 ```
 
+#### `appearanceVariant`
+
+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 appearanceVariant="flushed" />
+);
+```
+
 #### `tagVariant` — Options: `subtle`, `solid`, `outline` — Default: `subtle`
 
 You can pass the `tagVariant` prop with either `subtle`, `solid`, or `outline` (default is `subtle`). These will reflect the `variant` prop available on the [Chakra `<Tag />` component](https://chakra-ui.com/docs/components/tag/props).

src/chakra-components/containers.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Box } from "@chakra-ui/layout";
 import type { CSSObject } from "@chakra-ui/system";
+import { useMultiStyleConfig } from "@chakra-ui/system";
 import type {
   ContainerProps,
   GroupBase,
   IndicatorsContainerProps,
   ValueContainerProps,
 } from "react-select";
-import type { SizeProps } from "../types";
 
 export const SelectContainer = <
   Option,
@@ -72,20 +72,22 @@ export const ValueContainer = <
     isMulti,
     hasValue,
     innerProps,
-    selectProps: { size, chakraStyles },
+    selectProps: { size, chakraStyles, appearanceVariant: variant },
   } = props;
 
-  const px: SizeProps = {
-    sm: "0.75rem",
-    md: "1rem",
-    lg: "1rem",
-  };
+  // Getting the css from input instead of select
+  // to fit better with the search input feature
+
+  const chakraInputConfig = useMultiStyleConfig("Input", {
+    size,
+    variant,
+  });
 
   const initialSx: CSSObject = {
     display: "flex",
     alignItems: "center",
     flex: 1,
-    padding: `0.125rem ${px[size || "md"]}`,
+    px: chakraInputConfig.field.px,
     flexWrap: "wrap",
     WebkitOverflowScrolling: "touch",
     position: "relative",

src/chakra-components/control.tsx

@@ -37,13 +37,15 @@ const Control = <
       chakraStyles,
       focusBorderColor,
       errorBorderColor,
+      appearanceVariant: variant,
     },
   } = props;
 
   const inputStyles = useMultiStyleConfig("Input", {
     focusBorderColor,
     errorBorderColor,
     size,
+    variant,
   });
 
   const heights: SizeProps = {

src/module-augmentation.ts

@@ -2,6 +2,7 @@
 import type { CSSObject } from "@chakra-ui/system";
 import type { GroupBase } from "react-select";
 import type {
+  AppearanceVariant,
   ChakraStylesConfig,
   SelectedOptionStyle,
   Size,
@@ -75,6 +76,16 @@ declare module "react-select/dist/declarations/src/Select" {
      */
     colorScheme?: string;
 
+    /**
+     * The `appearanceVariant` 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}
+     */
+    appearanceVariant?: AppearanceVariant;
+
     /**
      * The `variant` prop that will be forwarded to your `MultiValue` component
      * which is represented by a chakra `Tag`

src/types.ts

@@ -40,6 +40,8 @@ export interface SizeProps<PropType = string | number> {
 
 export type Size = "sm" | "md" | "lg";
 
+export type AppearanceVariant = "outline" | "unstyled" | "flushed" | "filled";
+
 export type TagVariant = "subtle" | "solid" | "outline";
 
 export type SelectedOptionStyle = "color" | "check";