Merge pull request #210 from csandman/default-props

Default Props from Input
csandman · Oct 27, 2022 · c3963ea · c3963ea
2 parents 181ca4f + f154847
commit c3963ea
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git 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 `<Input />` 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 `<Input />` 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 (
   <>
@@ -494,21 +498,24 @@ Default [Chakra `<Select />`](https://chakra-ui.com/docs/form/select) styles exa
 
 ### Theme Styles
 
-As mentioned above, a few of the custom components this package implements either use styles from the global [Chakra component theme](https://chakra-ui.com/docs/styled-system/customize-theme#customizing-component-styles) or are themselves those components. As this package pulls directly from your Chakra theme, any changes you make to those components' themes will propagate to the components in this package. Here is a list of all components that will be affected by changes to your global styles:
-
-| `react-select` component | `chakra-ui` component styles                                                                                    |
-| ------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| `ClearIndicator`         | [`CloseButton`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/close-button.ts) |
-| `Control`                | [`Input`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/input.ts)              |
-| `DropdownIndicator`      | [`InputRightAddon`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/input.ts)    |
-| `GroupHeading`           | [`Menu` group title](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/menu.ts)    |
-| `IndicatorSeparator`     | [`Divider`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/divider.ts)          |
-| `LoadingIndicator`       | [`Spinner`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/spinner.ts)          |
-| `MenuList`               | [`MenuList`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/menu.ts)            |
-| `MultiValueContainer`    | [`Tag`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/tag.ts)                  |
-| `MultiValueLabel`        | [`TagLabel`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/tag.ts)             |
-| `MultiValueRemove`       | [`TagCloseButton`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/tag.ts)       |
-| `Option`                 | [`MenuItem`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/menu.ts)            |
+As mentioned above, a few of the custom components this package implements either use styles from the global [Chakra component theme](https://chakra-ui.com/docs/styled-system/customize-theme#customizing-component-styles) or are themselves those components. As this package pulls directly from your Chakra theme, any changes you make to those components' themes will propagate to the components in this package.
+
+**NOTE:** Some of the theme styles are manually overridden when this package implements them. This is necessary for implementing styles for [`size`](#size--options-sm--md--lg--default-md) variants in components that do not natively have them in Chakra's default theme. This mostly concerns components that make up the `Menu`, but there are a few other cases where this exception applies. There is no alternative to this currently, so if your custom theme styles are not being applied correctly please use [`chakraStyles`](#chakrastyles) to style your components instead. `chakraStyles` always takes highest priority in overriding the styles of a component. See #194 for more info.
+
+Here is a list of all components that will be affected by changes to your theme:
+
+| `react-select` component | `chakra-ui` component styles                                                                                               |
+| ------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
+| `ClearIndicator`         | [`CloseButton`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/close-button.ts) |
+| `Control`                | [`Input`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/input.ts)              |
+| `DropdownIndicator`      | [`InputRightAddon`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/input.ts)    |
+| `GroupHeading`           | [`Menu` group title](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts)    |
+| `LoadingIndicator`       | [`Spinner`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/spinner.ts)          |
+| `MenuList`               | [`MenuList`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts)            |
+| `MultiValueContainer`    | [`Tag`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/tag.ts)                  |
+| `MultiValueLabel`        | [`TagLabel`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/tag.ts)             |
+| `MultiValueRemove`       | [`TagCloseButton`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/tag.ts)       |
+| `Option`                 | [`MenuItem`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts)            |
 
 In addition to specific component styles, any changes you make to your global color scheme will also be reflected in these custom components.
 

diff --git 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
@@ -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<Option, IsMulti, Group>): Props<Option, IsMulti, Group> => {
+  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<Option, IsMulti, Group> = {