Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

feat: Add Theme support #290

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.

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

Draft
csandman wants to merge 52 commits into main
base: main
Choose a base branch
Loading
from feat/theming
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
efca401
fix: use correct aria roles for menu
Sep 22, 2023
4ff089b
Update all dependencies
csandman Sep 29, 2023
e0230ff
Add the ability to theme all nested components
csandman Sep 29, 2023
8aa4d89
Add deprecated flag to `useBasicStyles`
csandman Sep 29, 2023
33b5a58
Merge branch 'main' into aria-role-fix
csandman Sep 29, 2023
fc1040f
Merge remote-tracking branch 'origin' into feat/theming
csandman Oct 11, 2023
cf75b0d
Remove `selectedOptionColor` prop and add more specific `ColorScheme`...
csandman Oct 12, 2023
21dc1c2
Update `isRequired` prop doc
csandman Oct 12, 2023
cd785cc
Remove the `useBasicStyles` prop
csandman Oct 12, 2023
a503b7b
Remove `hasStickyGroupHeaders` prop
csandman Oct 12, 2023
a88fd04
Add an initial implementation of a Codemod
csandman Oct 12, 2023
c3cd9cd
Merge remote-tracking branch 'origin' into feat/theming
csandman Oct 17, 2023
0a42c9e
Remove the `colorScheme` prop rename
csandman Oct 17, 2023
761f116
Pull default props from theme
csandman Oct 17, 2023
aabf251
Add aria props to icon
csandman Oct 17, 2023
32f72c6
Add initial theme docs
csandman Oct 17, 2023
5909f99
Add opacity back in
csandman Oct 17, 2023
fa610cc
Readd margin left to dropdown indicator
csandman Oct 17, 2023
76fd90c
Add theme styles to the control
csandman Oct 17, 2023
e571be8
Swap import in the theme example in the README
csandman Oct 17, 2023
b96fd8c
Add missing theme styles the cross icon
csandman Oct 18, 2023
b628c33
Fix group styles
csandman Oct 18, 2023
0079575
Remove extra group heading styles
csandman Oct 18, 2023
785a004
Split up option padding to prevent overriding
csandman Oct 18, 2023
2e6ca7b
Rename sx variable
csandman Oct 18, 2023
8ae6a2a
Switch to passing all props into useMultiStyleConfig calls
csandman Oct 18, 2023
afafd4d
Update readme again
csandman Oct 18, 2023
80720e6
Replace remaining selectProps
csandman Oct 18, 2023
393fdac
Undo _dark styles
csandman Oct 18, 2023
84d25d2
Reorder active styles
csandman Oct 18, 2023
4a855fa
Fix data- props on the control
csandman Oct 18, 2023
fa98dc1
Switch menu styles to use data/aria attributes
csandman Oct 18, 2023
8d1fce3
Add Anatomy for the theming
csandman Oct 18, 2023
95bc70e
Merge branch 'feat/theming' into aria-role-fix
csandman Oct 19, 2023
a7e6efb
Merge pull request #283 from codebutler/aria-role-fix
csandman Oct 19, 2023
2df5e1d
Switch option styling to use `_selected`
csandman Oct 19, 2023
9994d43
Add missing id prop to group heading
csandman Oct 19, 2023
70a20f6
Clean up data- props
csandman Oct 19, 2023
5ef5c15
Add all component props along with the select props
csandman Oct 19, 2023
5c1f5ee
Remove unused babel plugins
csandman Oct 19, 2023
854c44e
5.0.0-rc.0
csandman Oct 19, 2023
7c91bd0
Remove duplicate aria props from the input
csandman Oct 19, 2023
b87e179
5.0.0-rc.1
csandman Oct 19, 2023
8429773
Switch to tsup
csandman Oct 20, 2023
c25b0d6
5.0.0-rc.2
csandman Oct 20, 2023
836f4de
Add minify option and remove extra exports
csandman Oct 20, 2023
5745d75
Merge pull request #294 from csandman/feat/tsup
csandman Oct 20, 2023
8df88ca
Update License dates
csandman Oct 20, 2023
5cea232
Update license type
csandman Oct 20, 2023
988bf8c
Update codemod readme and remove unused color scheme mod
csandman Oct 20, 2023
fd78985
skipNodeModulesBundle
csandman Oct 26, 2023
61b542f
Reorganize README
csandman Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .eslintignore
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
node_modules/
dist/
tmp/
codemod/**/*.js
codemod/**/*.d.ts
13 changes: 12 additions & 1 deletion .eslintrc
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,5 +63,16 @@
}
}
]
}
},
"overrides": [
{
"files": ["codemod/**/*.ts"],
"rules": {
"no-console": "off",
"@typescript-eslint/no-var-requires": "off",
"import/no-dynamic-require": "off",
"global-require": "off"
}
}
]
}
2 changes: 1 addition & 1 deletion LICENSE.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2022 Chris Sandvik
Copyright (c) 2023 Chris Sandvik

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
Expand Down
225 changes: 200 additions & 25 deletions README.md
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,15 +56,17 @@ https://react-select.com/home
- [`tagVariant`](#tagvariant--options-subtle--solid--outline--default-subtle)
- [`isInvalid` / `isReadOnly`](#isinvalid--default-false--isreadonly---default-false)
- [`focusBorderColor` / `errorBorderColor`](#focusbordercolor--default-blue500--errorbordercolor--default-red500)
- [`useBasicStyles`](#usebasicstyles--default-false)
- [`selectedOptionStyle`](#selectedoptionstyle--options-color--check--default-color)
- [`selectedOptionColorScheme`](#selectedoptioncolorscheme--default-blue)
- [`variant`](#variant--options-outline--filled--flushed--unstyled--default-outline)
- [`useBasicStyles` (deprecated)](#usebasicstyles-deprecated)
- [Styling](#styling)
- [`chakraStyles`](#chakrastyles)
- [Caveats](#caveats)
- [Examples](#examples)
- [Theme Styles](#theme-styles)
- [Extending the Theme](#extending-the-theme)
- [Examples](#examples-1)
- [`className`](#classname)
- [TypeScript Support](#typescript-support)
- [Customizing Components](#customizing-components)
Expand Down Expand Up @@ -293,30 +295,6 @@ return (

---

#### `useBasicStyles` — Default: `false`

If this prop is passed, the dropdown indicator at the right of the component
will be styled in the same way
[the original Chakra `Select` component](https://chakra-ui.com/docs/components/select)
is styled, instead of being styled as an
[`InputRightAddon`](https://chakra-ui.com/docs/components/input#left-and-right-addons).
The original purpose of styling it as an addon was to create a visual separation
between the dropdown indicator and the button for clearing the selected options.
However, as this button only appears when `isMulti` is passed, using this style
could make more sense for a single select.

```js
return <Select useBasicStyles />;
```

![useBasicStyles](./github/use-basic-styles.png)

![useBasicStyles dark mode](./github/use-basic-styles-dark.png)

[![CS-JS]](https://codesandbox.io/s/chakra-react-select-usebasicstyles-jjnqsd?file=/example.js)

---

#### `selectedOptionStyle` — Options: `color` | `check` — Default: `color`

As of `v1.3.0` you can pass the prop `selectedOptionStyle` with either `"color"`
Expand Down Expand Up @@ -434,6 +412,14 @@ elements.

---

#### `useBasicStyles` (deprecated)

This prop was removed in `v5.0.0`, as these styles are now the default styles
applied to the component. If you'd like to keep the legacy styles, take a look
at [the example below](#examples-1).

---

If you have any other requests for Chakra-like features that could be added, or
problems with the current features,
[please start a discussion](https://github.com/csandman/chakra-react-select/discussions/categories/ideas)!
Expand Down Expand Up @@ -681,6 +667,195 @@ color scheme will also be reflected in these custom components.
appear in all instances of that component. Otherwise, just change the individual
components' styles using the `chakraStyles` prop.

### Extending the Theme

As of `v5.0.0`, it is now possible to customize your Select instances globally
by extending the Chakra theme! These theme styles are layered on top of the
theme styles pulled from other Chakra components, for backwards compatibility's
sake, but will always override those. They will also be overridden by any styles
passed into [`chakraStyles`](#chakrastyles), so it's somewhat of the middle
layer of styles.

The theme styles can be defined using Chakra's: multipart component style
config:
https://chakra-ui.com/docs/styled-system/component-style#styling-multipart-components

There are a few ways these theme styles can be written, either with static style
objects/functions, or with the `createMultiStyleConfigHelpers` function which
gives you a couple other helper functions to define your styles in a more
type-safe way. The documentation on these style definitions is a bit sparse, so
I highly recommend looking at the source code for some of the built in Chakra
component themes for further examples:

- `Input` -
https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/input.ts
- `Tag` -
https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/tag.ts
- `Menu` -
https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts

Every key that can be used in the `chakraStyles` object can also be used for the
theme styles. Here's an example of how it can be implemented:

```tsx
import { createMultiStyleConfigHelpers, extendTheme } from "@chakra-ui/react";
import { chakraReactSelectAnatomy } from "chakra-react-select";

const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(chakraReactSelectAnatomy.keys);

const ChakraReactSelect = defineMultiStyleConfig({
baseStyle: definePartsStyle({
clearIndicator: {},
container: {},
control: {},
dropdownIndicator: {},
downChevron: {},
crossIcon: {},
group: {},
groupHeading: {},
indicatorsContainer: {},
indicatorSeparator: {},
input: {},
inputContainer: {},
loadingIndicator: {},
loadingMessage: {},
menu: {},
menuList: {},
multiValue: {},
multiValueLabel: {},
multiValueRemove: {},
noOptionsMessage: {},
option: {},
placeholder: {},
singleValue: {},
valueContainer: {},
}),
sizes: {
sm: definePartsStyle((props) => {
// All of the select props are passed into these style functions
// and can be used to modify your final styles.
const { colorScheme: c } = props;

return {
control: {
bg: `colors.${c}.100`,
},
};
}),
md: definePartsStyle({
control: {},
// ...
}),
lg: definePartsStyle({
control: {},
// ...
}),
},
variants: {
outline: definePartsStyle({
control: {},
// ...
}),
filled: definePartsStyle({
// ...
}),
flushed: definePartsStyle({
// ...
}),
unstyled: definePartsStyle({
// ...
}),
// You can also create your own variants
myCustomVariant: definePartsStyle({
// ...
}),
},
defaultProps: {
size: "md",
variant: "outline",
},
});

const theme = extendTheme({
components: {
ChakraReactSelect,
},
});

const Root = () => {
return (
<ChakraProvider theme={theme}>
<App />
</ChakraProvider>
);
};
```

#### Examples

As of `v5.0.0`, a few changes were made to base styles of the component.
Specifically, the [`useBasicStyles`](#usebasicstyles-deprecated) prop was
removed, in favor of making the select look more like Chakra's built-in `Select`
component. This might not be a change people would like to make, however, and
using the new theming it is very easy to add these styles back in to your Select
components globally.

Here's an example of how you can accomplish this:

```tsx
import { createMultiStyleConfigHelpers, extendTheme } from "@chakra-ui/react";
import { chakraReactSelectAnatomy } from "chakra-react-select";

const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(chakraReactSelectAnatomy.keys);

const ChakraReactSelect = defineMultiStyleConfig({
baseStyle: definePartsStyle({
// Legacy dropdown indicator styles
dropdownIndicator: {
margin: 0,
paddingX: 4,
width: "auto",
background: "gray.100",
borderLeftWidth: 1,
_dark: {
background: "whiteAlpha.300",
},
},
}),
sizes: {
sm: {
dropdownIndicator: {
paddingX: 3,
},
},
},
});

const theme = extendTheme({
components: {
ChakraReactSelect,
},
});

export default theme;
```

[![CS-TS]](https://codesandbox.io/s/zr4j7v?file=/theme.ts)

---

One other prop, which was previously deprecated and officially removed in
`v5.0.0` is `hasStickGroupHeaders`. This applied styles to the `GroupHeading`
component, making sure they stay in view as long as their associated group is in
view. This was removed because it was out of place with the rest of this
package, which is not intended to add any non-Chakra related features to the
base React Select package. It also has an issue where navigating up using the up
arrow key will always keep the highlighted option below the header. However, if
this is a style you'd still like to use, it is also simple to add with your
theme.

### `className`

This package implements the same classNames on the sub components as the
Expand Down
21 changes: 0 additions & 21 deletions babel.config.js
View file Open in desktop

This file was deleted.

4 changes: 4 additions & 0 deletions codemod/.gitignore
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
dist
*.d.ts
*.js
*.js.map
20 changes: 20 additions & 0 deletions codemod/LICENSE.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
MIT License

Copyright (c) 2023 Chris Sandvik

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Loading

AltStyle によって変換されたページ (->オリジナル) /