Add `classNames` API and `unstyled` prop #5457

nderkim · 2022-11-02T04:26:07Z

This PR adds the classNames API and the unstyled prop as defined in #5451

I've added storybook stories as examples, but no docs (yet)

codesandbox-ci · 2022-11-02T04:26:51Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 56a56c4:

Sandbox	Source
react-codesandboxer-example	Configuration

nderkim · 2022-11-02T04:27:21Z

.changeset/weak-roses-decide.md

@@ -0,0 +1,6 @@
+---
+'react-select': minor
+'@react-select/docs': patch


How do we version docs? Should this be minor too?

No one is consuming the docs as a package, so I probably wouldn't even worry about versioning it.

I've noticed it's at version 3.1.2 though, and no idea how it got there 🤷

nderkim · 2022-11-02T04:40:06Z

packages/react-select/src/Select.tsx

@@ -1078,11 +1093,16 @@ export default class Select<
    key: Key,
    props: StylesProps<Option, IsMulti, Group>[Key]
  ) => {
-    const base = defaultStyles[key](props as any);
+    const { unstyled } = this.props;


I've made unstyled only available on the parent component (for now) because:

It minimises the scope of this PR

What happens if unstyled on the parent component is set to true, but on the inner component it's set to false?

We can easily add it to the inner components later. If we added it now, and decided to change it later, it would be a breaking change.

nderkim · 2022-11-02T04:43:38Z

packages/react-select/src/Select.tsx

+  getClassName = <Key extends keyof StylesProps<Option, IsMulti, Group>>(
+    key: Key,
+    props: StylesProps<Option, IsMulti, Group>[Key]
+  ) => this.props.classNames[key]?.(props as any);


There is a typing issue here (pre-existing) that I'm ignoring for now to keep the scope of this PR down

nderkim · 2022-11-02T04:47:26Z

packages/react-select/src/components/Group.tsx

+>(
+  { theme: { spacing } }: GroupHeadingProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
  label: 'group',
  color: '#999',
  cursor: 'default',
  display: 'block',
  fontSize: '75%',
  fontWeight: 500,
  marginBottom: '0.25em',


I haven't (yet) looked too deeply into why some of these values are hardcoded, so i'm keeping them in the "permanent" section of the styles

I think this was a mistake from when groups got added, they should be using theme variables. If you can line them up with existing theme values, please do 🙏

nderkim · 2022-11-02T04:55:52Z

packages/react-select/src/components/Group.tsx

@@ -101,6 +103,7 @@ interface GroupHeadingPropsDefinedProps<
  selectProps: Props<Option, IsMulti, Group>;
  theme: Theme;
  getStyles: GetStyles<Option, IsMulti, Group>;
+  getClassName: CommonProps<Option, IsMulti, Group>['getClassName'];


Not sure why these types are re-defined here, but just following the existing pattern to simplify this PR

docs/examples/Experimental.tsx

JedWatson · 2022-11-03T01:58:40Z

packages/react-select/src/components/Group.tsx

+>(
+  { theme: { spacing } }: GroupHeadingProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
  label: 'group',
  color: '#999',
  cursor: 'default',
  display: 'block',
  fontSize: '75%',
  fontWeight: 500,
  marginBottom: '0.25em',


I think this was a mistake from when groups got added, they should be using theme variables. If you can line them up with existing theme values, please do 🙏

changeset-bot · 2022-11-03T04:37:21Z

🦋 Changeset detected

Latest commit: 56a56c4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
react-select	Minor
@react-select/docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

lukebennett88 · 2022-11-04T00:59:16Z

docs/index.css

+p > a:visited,
+li > a,
+li > a:hover,
+li > a:visited {


This was a quick and dirty fix for some links being styled differently in the docs.
Fixing it properly would be more work and not sure how long for this world the existing docs site is.

packages/react-select/src/styles.ts

lukebennett88 · 2022-11-07T05:51:30Z

docs/markdown/renderer.tsx

@@ -105,8 +105,7 @@ const Heading = (props: HeadingProps) => {
    store.add(nodeKey, { key: nodeKey, label, level, path: `#${slug}` });
  }
  const css = {
-    marginTop: 0,
-    '&:not(:first-of-type)': { marginTop: 30 },
+    '&:first-child': { marginTop: 0 },


What is the reason behind changing this (other than simplifying things?)

the previous style would result in:

// 0 <h1/> // 0 <h2/> // 0 <h3/> // 30 <h2/> // 30 <h3/>

but i think the intention was to just do:

// 0 <h1/> <h2/> <h3/> <h2/> <h3/>

lukebennett88 · 2022-11-07T06:05:36Z

packages/react-select/src/styles.ts

-  GroupBase<unknown>
-> = {
+export const defaultStyles: {
+  [K in keyof StylesProps<any, any, any>]: (


Suggestion: instead of using any, could we instead not pass a generic here, and provide default values to StylesProps instead? e.g. something like this?

export interface StylesProps< - Option, - IsMulti extends boolean, - Group extends GroupBase<Option> + Option = unknown, + IsMulti extends boolean = boolean, + Group extends GroupBase<Option> = GroupBase<Option>

This was intentional to show that it doesn't matter what we pass in because we are only using the keys, which are unaffected by the generics.

I'd prefer not to use defaults if possible because it just opens up the opportunity to be less explicit.

lukebennett88

Left a few comments, but this LGTM 👍

nderkim commented Nov 2, 2022

View reviewed changes

JedWatson requested changes Nov 3, 2022

View reviewed changes

nderkim force-pushed the alex/with-tailwind branch from 6f00114 to b07f568 Compare November 3, 2022 22:52

lukebennett88 reviewed Nov 4, 2022

View reviewed changes

packages/react-select/src/styles.ts Show resolved Hide resolved

lukebennett88 reviewed Nov 4, 2022

View reviewed changes

packages/react-select/src/styles.ts Outdated Show resolved Hide resolved

nderkim force-pushed the alex/with-tailwind branch 2 times, most recently from 7fa19c0 to 0f57c45 Compare November 4, 2022 05:26

lukebennett88 reviewed Nov 7, 2022

View reviewed changes

lukebennett88 approved these changes Nov 7, 2022

View reviewed changes

JedWatson approved these changes Nov 9, 2022

View reviewed changes

nderkim and others added 12 commits November 16, 2022 11:03

Add classNames API

5d960cc

Add unstyled prop

3aee85c

Add changeset

0773095

PR review changes

edf5265

Add storybook to docs

ed2ee59

Add docs

4cb7b33

Minor fixes to docs

3bc3d6d

Show raw source code in storybook docs

1d0d22f

Export type

2f5f044

Update packages/react-select/src/styles.ts

153107d

Fix lint

b0eb55c

Fix heading style

56a56c4

dcousens force-pushed the alex/with-tailwind branch from bbfdb5e to 56a56c4 Compare November 16, 2022 00:03

nderkim merged commit 9289057 into master Nov 16, 2022

nderkim deleted the alex/with-tailwind branch November 16, 2022 01:08

github-actions bot mentioned this pull request Nov 16, 2022

Version Packages #5487

Merged

github-actions bot mentioned this pull request Nov 18, 2022

Version Packages jdufresne/react-select#1

Open

pianomansam mentioned this pull request Dec 1, 2022

[BUG] React warning in Next.JS: React does not recognize the getClassNames prop on a DOM element csandman/chakra-react-select#223

Closed

6 tasks

Slessi mentioned this pull request Jan 14, 2023

Unable to style input element with the new classNames API in 5.7 #5538

Open

ae95caba mentioned this pull request May 24, 2024

[Snyk] Upgrade react-select from 5.7.0 to 5.8.0 ae95caba/dulce-tentacion-react#81

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `classNames` API and `unstyled` prop #5457

Add `classNames` API and `unstyled` prop #5457

nderkim commented Nov 2, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 2, 2022 •

edited

Loading

nderkim Nov 2, 2022

lukebennett88 Nov 2, 2022

nderkim Nov 2, 2022

nderkim Nov 2, 2022

nderkim Nov 2, 2022

nderkim Nov 2, 2022 •

edited

Loading

JedWatson Nov 3, 2022

nderkim Nov 2, 2022

JedWatson Nov 3, 2022

changeset-bot bot commented Nov 3, 2022 •

edited

Loading

lukebennett88 Nov 4, 2022

lukebennett88 Nov 7, 2022

nderkim Nov 7, 2022

lukebennett88 Nov 7, 2022 •

edited

Loading

nderkim Nov 7, 2022 •

edited

Loading

lukebennett88 left a comment

Add classNames API and unstyled prop #5457

Add classNames API and unstyled prop #5457

Conversation

nderkim commented Nov 2, 2022 • edited Loading

codesandbox-ci bot commented Nov 2, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nderkim Nov 2, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Nov 3, 2022 • edited Loading

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lukebennett88 Nov 7, 2022 • edited Loading

Choose a reason for hiding this comment

nderkim Nov 7, 2022 • edited Loading

Choose a reason for hiding this comment

lukebennett88 left a comment

Choose a reason for hiding this comment

Add `classNames` API and `unstyled` prop #5457

Add `classNames` API and `unstyled` prop #5457

nderkim commented Nov 2, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 2, 2022 •

edited

Loading

nderkim Nov 2, 2022 •

edited

Loading

changeset-bot bot commented Nov 3, 2022 •

edited

Loading

lukebennett88 Nov 7, 2022 •

edited

Loading

nderkim Nov 7, 2022 •

edited

Loading