Skip to content

Commit

Permalink
Fix the multi value tag styles once more
Browse files Browse the repository at this point in the history
  • Loading branch information
@csandman
csandman committed Dec 9, 2024
1 parent 22db50e commit cfe5e27
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 22 deletions.
37 changes: 19 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -473,9 +473,10 @@ component that is rendered:
- `menuList` - `Box` (uses theme styles for Chakra's `select.content`)
- `multiValue` - `Span` (uses theme styles for Chakra's `tag.root`)
- `multiValueLabel` - `Span` (uses theme styles for Chakra's `tag.label`)
- `multiValueRemove` - `Box` (uses theme styles for Chakra's `tag.endElement`,
and wraps a `Box` with the `tag.closeTrigger` styles on it as it's direct
child)
- `multiValueEndElement` - `Box` (uses theme styles for Chakra's
`tag.endElement`. This is new to Chakra v3 due to the extra wrapping element
around the close button)
- `multiValueRemove` - `Box` (uses theme styles for Chakra's `tag.closeTrigger`)
- `noOptionsMessage` - `Box`
- `option` - `Box` (uses theme styles for Chakra's `select.item`)
- `placeholder` - `Box`
Expand Down Expand Up @@ -617,21 +618,21 @@ the components in this package.
Here is a list of all components that will be affected by changes to your theme:

| `react-select` component | `chakra-ui` |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `ClearIndicator` | [`select.clearTrigger`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `Control` | [`input`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/input.ts) |
| `DropdownIndicator` | [`select.indicator`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `Group` | [`select.itemGroup`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `GroupHeading` | [`select.itemGroupLabel`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `IndicatorsContainer` | [`select.indicatorGroup`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `LoadingIndicator` | [`spinner`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/spinner.ts) |
| `MenuList` | [`select.content`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `MultiValueContainer` | [`tag.root`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/tag.ts) |
| `MultiValueLabel` | [`tag.label`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/tag.ts) |
| `MultiValueRemove` | [`tag.endElement` / `tag.closeTrigger`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/tag.ts) (this is a special case, because the `MultiValueRemove` renders both the a `Box` with the `tag.endElement` styles on it, as well as a box with the `tag.closeTrigger` styles on it as it's direct child) |
| `Option` | [`select.item`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `SelectContainer` | [`select.root`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `react-select` component | `chakra-ui` |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ClearIndicator` | [`select.clearTrigger`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `Control` | [`input`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/input.ts) |
| `DropdownIndicator` | [`select.indicator`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `Group` | [`select.itemGroup`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `GroupHeading` | [`select.itemGroupLabel`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `IndicatorsContainer` | [`select.indicatorGroup`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `LoadingIndicator` | [`spinner`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/spinner.ts) |
| `MenuList` | [`select.content`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `MultiValueContainer` | [`tag.root`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/tag.ts) |
| `MultiValueLabel` | [`tag.label`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/tag.ts) |
| `MultiValueRemove` | [`tag.endElement` / `tag.closeTrigger`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/tag.ts) (this is a special case, because the `MultiValueRemove` renders both the a `Box` with the `tag.endElement` styles on it, as well as an inner `Box` with the `tag.closeTrigger` styles on it as it's direct child) |
| `Option` | [`select.item`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |
| `SelectContainer` | [`select.root`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts) |

In addition to specific component styles, any changes you make to your global
color palette will also be reflected in these custom components.
Expand Down
20 changes: 16 additions & 4 deletions src/chakra-components/multi-value.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,15 @@ export const MultiValue = <
? chakraStyles.multiValueLabel(labelInitialCss, props)
: labelInitialCss;

const removeInitialCss: SystemStyleObject = {
const endElementInitialCss: SystemStyleObject = {
...tagStyles.endElement,
};
const endElementCss = chakraStyles?.multiValueEndElement
? chakraStyles.multiValueEndElement(endElementInitialCss, props)
: endElementInitialCss;

const removeInitialCss: SystemStyleObject = {
...tagStyles.closeTrigger,
cursor: "pointer",
};
const removeCss = chakraStyles?.multiValueRemove
Expand Down Expand Up @@ -146,6 +153,7 @@ export const MultiValue = <
"aria-label": `Remove ${children || "option"}`,
...removeProps,
}}
endElementCss={endElementCss}
css={removeCss}
selectProps={selectProps}
isFocused={isFocused}
Expand Down Expand Up @@ -193,11 +201,15 @@ export const MultiValueRemove = <
>(
props: MultiValueRemoveProps<Option, IsMulti, Group>
) => {
const { children, innerProps, isFocused, css } = props;
const { children, innerProps, isFocused, endElementCss, css } = props;

return (
<Span css={css} {...innerProps}>
<Span data-focus-visible={isFocused ? true : undefined}>
<Span css={endElementCss} {...innerProps}>
<Span
role="button"
css={css}
data-focus-visible={isFocused ? true : undefined}
>
{children || <CloseIcon />}
</Span>
</Span>
Expand Down
1 change: 1 addition & 0 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,7 @@ declare module "react-select" {
Group extends GroupBase<Option> = GroupBase<Option>,
> {
isFocused: boolean;
endElementCss: SystemStyleObject;
css: SystemStyleObject;
}

Expand Down
3 changes: 3 additions & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,9 @@ export interface ChakraStylesConfig<
menuList?: StylesFunction<MenuListProps<Option, IsMulti, Group>>;
multiValue?: StylesFunction<MultiValueProps<Option, IsMulti, Group>>;
multiValueLabel?: StylesFunction<MultiValueProps<Option, IsMulti, Group>>;
multiValueEndElement?: StylesFunction<
MultiValueProps<Option, IsMulti, Group>
>;
multiValueRemove?: StylesFunction<MultiValueProps<Option, IsMulti, Group>>;
noOptionsMessage?: StylesFunction<NoticeProps<Option, IsMulti, Group>>;
option?: StylesFunction<OptionProps<Option, IsMulti, Group>>;
Expand Down

0 comments on commit cfe5e27

Please sign in to comment.