Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Default Props from Input #210

Merged
merged 3 commits into from Oct 27, 2022
Merged

Default Props from Input #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be924e8
Use default component theme styles from `Input`
csandman Oct 27, 2022
ff89d88
Update documentation about theme styles
csandman Oct 27, 2022
f154847
Fix the grouping of a nullish coalless
csandman Oct 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
37 changes: 22 additions & 15 deletions README.md
View file
Open in desktop
Expand Up @@ -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 (
<>
Expand Down Expand Up @@ -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 (
<>
Expand Down Expand Up @@ -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.

Expand Down
6 changes: 4 additions & 2 deletions src/chakra-components/control.tsx
View file
Open in desktop
Expand Up @@ -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 = {
Expand Down
19 changes: 12 additions & 7 deletions src/use-chakra-select-props.ts
View file
Open in desktop
@@ -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";
Expand All @@ -10,7 +11,7 @@ const useChakraSelectProps = <
>({
components = {},
theme,
size = "md",
size,
colorScheme = "gray",
isDisabled,
isInvalid,
Expand All @@ -21,7 +22,7 @@ const useChakraSelectProps = <
hasStickyGroupHeaders = false,
selectedOptionStyle = "color",
selectedOptionColor = "blue",
variant = "outline",
variant,
focusBorderColor,
errorBorderColor,
chakraStyles = {},
Expand All @@ -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
Expand All @@ -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";
}

Expand Down Expand Up @@ -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> = {
Expand Down