PR review changes

JedWatson · Nov 16, 2022 · edf5265 · edf5265
1 parent 0773095
commit edf5265
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 25 deletions.
diff --git a/docs/examples/Experimental.tsx b/docs/examples/Experimental.tsx
@@ -123,7 +123,7 @@ const Group = (props: GroupProps<DateOption, false>) => {
   const {
     Heading,
     getStyles,
-    getClassName,
+    getClassNames,
     children,
     label,
     headingProps,
@@ -137,7 +137,7 @@ const Group = (props: GroupProps<DateOption, false>) => {
         selectProps={selectProps}
         theme={theme}
         getStyles={getStyles}
-        getClassName={getClassName}
+        getClassNames={getClassNames}
         cx={cx}
         {...headingProps}
       >

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
@@ -105,7 +105,7 @@ export interface Props<
    */
   classNamePrefix?: string | null;
   /**
-   * Provide a className based on state for each inner component
+   * Provide classNames based on state for each inner component
    */
   classNames: ClassNamesConfig<Option, IsMulti, Group>;
   /** Close the select menu when the user selects an option */
@@ -1059,7 +1059,7 @@ export default class Select<
       clearValue,
       cx,
       getStyles,
-      getClassName,
+      getClassNames,
       getValue,
       selectOption,
       setValue,
@@ -1072,7 +1072,7 @@ export default class Select<
       clearValue,
       cx,
       getStyles,
-      getClassName,
+      getClassNames,
       getValue,
       hasValue,
       isMulti,
@@ -1101,7 +1101,7 @@ export default class Select<
     const custom = this.props.styles[key];
     return custom ? custom(base, props as any) : base;
   };
-  getClassName = <Key extends keyof StylesProps<Option, IsMulti, Group>>(
+  getClassNames = <Key extends keyof StylesProps<Option, IsMulti, Group>>(
     key: Key,
     props: StylesProps<Option, IsMulti, Group>[Key]
   ) => this.props.classNames[key]?.(props as any);

diff --git a/packages/react-select/src/components/Group.tsx b/packages/react-select/src/components/Group.tsx
@@ -69,7 +69,7 @@ const Group = <
     children,
     cx,
     getStyles,
-    getClassName,
+    getClassNames,
     Heading,
     headingProps,
     innerProps,
@@ -84,7 +84,7 @@ const Group = <
         selectProps={selectProps}
         theme={theme}
         getStyles={getStyles}
-        getClassName={getClassName}
+        getClassNames={getClassNames}
         cx={cx}
       >
         {label}
@@ -103,7 +103,7 @@ interface GroupHeadingPropsDefinedProps<
   selectProps: Props<Option, IsMulti, Group>;
   theme: Theme;
   getStyles: GetStyles<Option, IsMulti, Group>;
-  getClassName: CommonProps<Option, IsMulti, Group>['getClassName'];
+  getClassNames: CommonProps<Option, IsMulti, Group>['getClassNames'];
   cx: CX;
 }
 
@@ -119,22 +119,22 @@ export const groupHeadingCSS = <
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 >(
-  { theme: { spacing } }: GroupHeadingProps<Option, IsMulti, Group>,
+  { theme: { colors, spacing } }: GroupHeadingProps<Option, IsMulti, Group>,
   unstyled: boolean
 ): CSSObjectWithLabel => ({
   label: 'group',
-  color: '#999',
   cursor: 'default',
   display: 'block',
-  fontSize: '75%',
-  fontWeight: 500,
-  marginBottom: '0.25em',
-  textTransform: 'uppercase',
   ...(unstyled
     ? {}
     : {
+        color: colors.neutral40,
+        fontSize: '75%',
+        fontWeight: 500,
+        marginBottom: '0.25em',
         paddingLeft: spacing.baseUnit * 3,
         paddingRight: spacing.baseUnit * 3,
+        textTransform: 'uppercase',
       }),
 });
 

diff --git a/packages/react-select/src/components/MultiValue.tsx b/packages/react-select/src/components/MultiValue.tsx
@@ -69,10 +69,7 @@ export const multiValueLabelCSS = <
   }: MultiValueProps<Option, IsMulti, Group>,
   unstyled: boolean
 ): CSSObjectWithLabel => ({
-  fontSize: '85%',
   overflow: 'hidden',
-  padding: 3,
-  paddingLeft: 6,
   textOverflow:
     cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
   whiteSpace: 'nowrap',
@@ -81,6 +78,9 @@ export const multiValueLabelCSS = <
     : {
         borderRadius: borderRadius / 2,
         color: colors.neutral80,
+        fontSize: '85%',
+        padding: 3,
+        paddingLeft: 6,
       }),
 });
 

diff --git a/packages/react-select/src/types.ts b/packages/react-select/src/types.ts
@@ -82,7 +82,7 @@ export interface CommonProps<
     See the `styles` object for the properties available.
   */
   getStyles: GetStyles<Option, IsMulti, Group>;
-  getClassName: <Key extends keyof StylesProps<Option, IsMulti, Group>>(
+  getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(
     propertyName: Key,
     props: StylesProps<Option, IsMulti, Group>[Key]
   ) => string | undefined;

diff --git a/packages/react-select/src/utils.ts b/packages/react-select/src/utils.ts
@@ -94,7 +94,7 @@ export const cleanCommonProps = <
     clearValue,
     cx,
     getStyles,
-    getClassName,
+    getClassNames,
     getValue,
     hasValue,
     isMulti,
@@ -121,16 +121,16 @@ export const getStyleProps = <
 >(
   props: Pick<
     CommonPropsAndClassName<Option, IsMulti, Group>,
-    'cx' | 'getStyles' | 'getClassName' | 'className'
+    'cx' | 'getStyles' | 'getClassNames' | 'className'
   > &
     StylesProps<Option, IsMulti, Group>[Key],
   name: Key,
   classNamesState?: ClassNamesState
 ) => {
-  const { cx, getStyles, getClassName, className } = props;
+  const { cx, getStyles, getClassNames, className } = props;
   return {
     css: getStyles(name, props),
-    className: cx(classNamesState ?? {}, getClassName(name, props), className),
+    className: cx(classNamesState ?? {}, getClassNames(name, props), className),
   };
 };
 

diff --git a/storybook/stories/UnstyledWithTailwind.stories.tsx b/storybook/stories/UnstyledWithTailwind.stories.tsx
@@ -53,7 +53,15 @@ const Template: ComponentStory<typeof Select> = ({
               isFocused ? 'hover:text-neutral-800' : 'hover:text-neutral-400'
             ),
           group: () => classNames('py-2'),
-          groupHeading: () => classNames('px-3'),
+          groupHeading: () =>
+            classNames(
+              'text-neutral-400',
+              'text-xs',
+              'font-medium',
+              'mb-1',
+              'px-3',
+              'uppercase'
+            ),
           // indicatorsContainer: () => classNames(),
           indicatorSeparator: ({ isDisabled }) =>
             classNames(
@@ -77,7 +85,14 @@ const Template: ComponentStory<typeof Select> = ({
           menuList: () => classNames('py-1'),
           // menuPortal: () => classNames(),
           multiValue: () => classNames('bg-neutral-100', 'rounded-sm', 'm-0.5'),
-          multiValueLabel: () => classNames('rounded-sm', 'text-neutral-800'),
+          multiValueLabel: () =>
+            classNames(
+              'rounded-sm',
+              'text-neutral-800',
+              'text-sm',
+              'p-[3]',
+              'pl-[6]'
+            ),
           multiValueRemove: ({ isFocused }) =>
             classNames(
               'rounded-sm',