diff --git a/.changeset/modern-spies-behave.md b/.changeset/modern-spies-behave.md
new file mode 100644
index 0000000000..42cdc11f5e
--- /dev/null
+++ b/.changeset/modern-spies-behave.md
@@ -0,0 +1,16 @@
+---
+'@leafygreen-ui/select': major
+---
+
+[LG-4138](https://jira.mongodb.org/browse/LG-4138)
+
+1. Updated styling:
+ - updated spacing for `'xsmall'`, `'small'`, and `'large'` size variants
+ - updated placeholder text color
+ - removed validation icon from inside the input
+
+2. Added default `errorMessage` of `'This input needs your attention'`
+
+3. Added `valid` state variant and `successMessage` prop
+ - `successMessage` will render a default of `'Success'` and can be customized
+ - `successMessage` will only render when `state=valid`
diff --git a/packages/select/README.md b/packages/select/README.md
index 97354ac7c3..aa23326af2 100644
--- a/packages/select/README.md
+++ b/packages/select/README.md
@@ -44,34 +44,35 @@ import { Option, OptionGroup, Select, Size } from '@leafygreen-ui/select';
## Select Properties
-| Prop | Type | Description | Default |
-| -------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `children` | `node` | `` | `'none'` |
-| `errorMessage` | `string` | Text that shows when the `state` is set to `error`. | |
-| `baseFontSize` | `'13'`, `'16'` | Determines the base font size if sizeVariant is set to `default` | `'13'` |
-| `dropdownWidthBasis` | `'option'` \| `'trigger'` | Determines the width of the dropdown. `trigger` will make the dropdown width the width of the menu trigger. `option` will make the dropdown width as wide as the widest option. | `trigger` |
+| `aria-label` | `string` | Must be provided if and only if neither `label` nor `aria-labelledby` is not provided. | |
+| `description` | `React.ReactNode` | Text that gives more detail about the requirements for the input. | |
+| `placeholder` | `string` | The placeholder text shown in the input element when an option is not selected. | `'Select'` |
+| `disabled` | `boolean` | Disables the component from being edited. | `false` |
+| `value` | `string` | Sets the `` | `'none'` |
+| `errorMessage` | `string` | Text that shows when the `state` is set to `error`. | `'This input needs your attention'` |
+| `successMessage` | `string` | Text that shows when the `state` is set to `valid`. | `'Success'` |
+| `baseFontSize` | `'13'`, `'16'` | Determines the base font size if sizeVariant is set to `default` | `'13'` |
+| `dropdownWidthBasis` | `'option'` \| `'trigger'` | Determines the width of the dropdown. `trigger` will make the dropdown width the width of the menu trigger. `option` will make the dropdown width as wide as the widest option. | `trigger` |
# Option
diff --git a/packages/select/package.json b/packages/select/package.json
index fce7c780bd..3994a745b1 100644
--- a/packages/select/package.json
+++ b/packages/select/package.json
@@ -24,6 +24,7 @@
"dependencies": {
"@leafygreen-ui/button": "^21.2.0",
"@leafygreen-ui/emotion": "^4.0.8",
+ "@leafygreen-ui/form-field": "^1.1.1",
"@leafygreen-ui/hooks": "^8.1.3",
"@leafygreen-ui/icon": "^12.1.0",
"@leafygreen-ui/input-option": "^1.1.3",
diff --git a/packages/select/src/MenuButton/MenuButton.styles.ts b/packages/select/src/MenuButton/MenuButton.styles.ts
index 6643768b17..d868ffd7c4 100644
--- a/packages/select/src/MenuButton/MenuButton.styles.ts
+++ b/packages/select/src/MenuButton/MenuButton.styles.ts
@@ -1,7 +1,8 @@
-import { css, cx } from '@leafygreen-ui/emotion';
+import { css } from '@leafygreen-ui/emotion';
import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
import { palette } from '@leafygreen-ui/palette';
import {
+ color,
focusRing,
fontWeights,
hoverRing,
@@ -10,6 +11,8 @@ import {
typeScales,
} from '@leafygreen-ui/tokens';
+import { State } from '../Select/Select.types';
+
export const menuButtonTextClassName = createUniqueClassName('select-menu');
export const menuButtonStyleOverrides = css`
@@ -30,17 +33,17 @@ export const menuButtonStyleOverrides = css`
export const menuButtonSizeStyle: Record = {
[Size.Default]: css`
> *:last-child {
- padding: 0 12px;
+ padding: 0 ${spacing[300]}px;
}
`,
[Size.Large]: css`
> *:last-child {
- padding: 0 12px 0 ${spacing[3]}px;
+ padding: 0 ${spacing[300]}px;
}
`,
[Size.Small]: css`
> *:last-child {
- padding: 0 ${spacing[2]}px 0 10px;
+ padding: 0 ${spacing[200]}px;
}
`,
[Size.XSmall]: css`
@@ -48,30 +51,30 @@ export const menuButtonSizeStyle: Record = {
font-size: ${typeScales.body1.fontSize}px;
line-height: ${typeScales.body1.lineHeight}px;
> *:last-child {
- padding: 0 ${spacing[1]}px 0 10px;
+ padding: 0 ${spacing[200]}px;
}
`,
};
export const menuButtonModeOverrides: Record = {
[Theme.Light]: css`
- background-color: ${palette.white};
+ background-color: ${color.light.background.primary.default};
// Override button default color
> *:last-child {
> svg {
- color: ${palette.gray.dark2};
+ color: ${color.light.icon.primary.default};
}
}
`,
[Theme.Dark]: css`
- border-color: ${palette.gray.base};
+ border-color: ${color.dark.border.primary.default};
background-color: ${palette.gray.dark4};
- color: ${palette.gray.light3};
+ color: ${color.dark.text.primary.default};
// Override button default color
> *:last-child {
> svg {
- color: ${palette.gray.light1};
+ color: ${color.dark.icon.primary.default};
}
}
@@ -79,7 +82,7 @@ export const menuButtonModeOverrides: Record = {
&:active,
&:focus {
background-color: ${palette.gray.dark4};
- color: ${palette.gray.light3};
+ color: ${color.dark.text.primary.hover};
}
`,
};
@@ -103,10 +106,10 @@ export const menuButtonFocusStyle: Record = {
export const menuButtonDeselectedStyles: Record = {
[Theme.Light]: css`
- color: ${palette.gray.dark1};
+ color: ${palette.gray.base};
`,
[Theme.Dark]: css`
- color: ${palette.gray.light1};
+ color: ${palette.gray.dark1};
&:hover,
&:active,
@@ -116,7 +119,7 @@ export const menuButtonDeselectedStyles: Record = {
`,
};
-export const menuButtonDisabledStyles = css`
+export const getMenuButtonDisabledThemeStyles = (theme: Theme) => css`
cursor: not-allowed;
pointer-events: unset;
box-shadow: unset;
@@ -124,48 +127,31 @@ export const menuButtonDisabledStyles = css`
&:active {
pointer-events: none;
}
-`;
-export const menuButtonDisabledThemeStyles: Record = {
- [Theme.Light]: cx(
- menuButtonDisabledStyles,
- css`
- &[aria-disabled='true'] {
- background-color: ${palette.gray.light2};
- color: ${palette.gray.base};
-
- > *:last-child {
- > svg {
- color: ${palette.gray.base};
- }
- }
- }
- `,
- ),
- [Theme.Dark]: cx(
- menuButtonDisabledStyles,
- css`
- &[aria-disabled='true'] {
- background-color: ${palette.gray.dark3};
- color: ${palette.gray.dark1};
- border-color: ${palette.gray.dark2};
-
- > *:last-child {
- > svg {
- color: ${palette.gray.dark1};
- }
- }
+ &[aria-disabled='true'] {
+ background-color: ${color[theme].background.disabled.default};
+ border-color: ${color[theme].border.disabled.default};
+ color: ${color[theme].text.disabled.default};
+
+ &:hover,
+ &:active {
+ box-shadow: inherit;
+ }
+
+ > *:last-child {
+ > svg {
+ color: ${color[theme].icon.disabled.default};
}
- `,
- ),
-};
+ }
+ }
+`;
export const menuButtonTextWrapperStyle = css`
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
- gap: ${spacing[1]}px;
+ gap: ${spacing[100]}px;
overflow: hidden;
`;
@@ -176,28 +162,24 @@ export const menuButtonTextStyle = css`
max-width: 100%;
`;
-export const errorColor: Record = {
- [Theme.Light]: palette.red.base,
- [Theme.Dark]: palette.red.light1,
-};
-
-export const menuButtonErrorStyle: Record = {
- [Theme.Light]: css`
- border-color: ${errorColor[Theme.Light]};
- background-color: ${palette.white};
+export const getMenuButtonStateStyles = (theme: Theme) => ({
+ [State.Error]: css`
+ border-color: ${color[theme].border.error.default};
&:hover,
&:active {
- box-shadow: ${hoverRing.light.red};
+ border-color: ${color[theme].border.error.hover};
+ box-shadow: ${hoverRing[theme].red};
}
`,
- [Theme.Dark]: css`
- border-color: ${errorColor[Theme.Dark]};
+ [State.None]: css``,
+ [State.Valid]: css`
+ border-color: ${color[theme].border.success.default};
&:hover,
&:active {
- border-color: ${errorColor[Theme.Dark]};
- box-shadow: ${hoverRing.dark.red};
+ border-color: ${color[theme].border.success.hover};
+ box-shadow: ${hoverRing[theme].green};
}
`,
-};
+});
diff --git a/packages/select/src/MenuButton/MenuButton.tsx b/packages/select/src/MenuButton/MenuButton.tsx
index 1c1df9e5f1..967734ca03 100644
--- a/packages/select/src/MenuButton/MenuButton.tsx
+++ b/packages/select/src/MenuButton/MenuButton.tsx
@@ -3,21 +3,19 @@ import React, { useCallback, useContext } from 'react';
import Button, { Size as ButtonSize, Variant } from '@leafygreen-ui/button';
import { css, cx } from '@leafygreen-ui/emotion';
import CaretDownIcon from '@leafygreen-ui/icon/dist/CaretDown';
-import WarningIcon from '@leafygreen-ui/icon/dist/Warning';
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
import { Theme } from '@leafygreen-ui/lib';
import { LGIDS_SELECT } from '../constants';
import { State } from '../Select/Select.types';
import SelectContext from '../SelectContext';
-import { mobileSizeSet, sizeSets } from '../styleSets';
+import { mobileSizeSet } from '../styleSets';
import { MobileMediaQuery, useForwardedRef } from '../utils';
import {
- errorColor,
+ getMenuButtonDisabledThemeStyles,
+ getMenuButtonStateStyles,
menuButtonDeselectedStyles,
- menuButtonDisabledThemeStyles,
- menuButtonErrorStyle,
menuButtonFocusStyle,
menuButtonModeOverrides,
menuButtonSizeStyle,
@@ -42,7 +40,6 @@ const MenuButton = React.forwardRef(
readOnly,
onClose,
onOpen,
- errorMessage,
state,
baseFontSize,
__INTERNAL__menuButtonSlot__,
@@ -56,8 +53,6 @@ const MenuButton = React.forwardRef(
const ref = useForwardedRef(forwardedRef, null);
- const sizeSet = sizeSets[size];
-
const onClick = useCallback(() => {
if (open) {
onClose();
@@ -79,10 +74,9 @@ const MenuButton = React.forwardRef(
menuButtonSizeStyle[size],
menuButtonFocusStyle[theme],
{
+ [getMenuButtonStateStyles(theme)[state || State.None]]: !!state,
[menuButtonDeselectedStyles[theme]]: deselected,
- [menuButtonDisabledThemeStyles[theme]]: disabled,
- [menuButtonErrorStyle[theme]]:
- state === State.Error && !!errorMessage,
+ [getMenuButtonDisabledThemeStyles(theme)]: disabled,
[css`
letter-spacing: initial;
`]: size === ButtonSize.XSmall,
@@ -130,16 +124,6 @@ const MenuButton = React.forwardRef(
>
{text}
- {state === State.Error && errorMessage && (
- (
allowDeselect = true,
usePortal = true,
placeholder = 'Select',
- errorMessage = '',
+ errorMessage = DEFAULT_MESSAGES.error,
+ successMessage = DEFAULT_MESSAGES.success,
state = State.None,
dropdownWidthBasis = DropdownWidthBasis.Trigger,
baseFontSize = BaseFontSize.Body1,
@@ -118,8 +119,6 @@ export const Select = forwardRef(
const menuButtonId = useIdAllocator({ prefix: 'select' });
const listMenuRef = useStateRef(null);
- const sizeSet = sizeSets[size];
-
const providerData = useMemo(() => {
return { size, open, disabled };
}, [size, open, disabled]);
@@ -592,7 +591,6 @@ export const Select = forwardRef(
aria-describedby={descriptionId}
aria-invalid={state === State.Error}
aria-disabled={disabled}
- errorMessage={errorMessage}
state={state}
baseFontSize={baseFontSize}
__INTERNAL__menuButtonSlot__={__INTERNAL__menuButtonSlot__}
@@ -615,29 +613,14 @@ export const Select = forwardRef(
- {state === State.Error && errorMessage && (
-
- {errorMessage}
-
- )}
+ (
element,
- `[data-lgid=${LGIDS_SELECT.errorMessage}]`,
+ `[data-lgid=${LGIDS_FORM_FIELD.errorMessage}]`,
);
/**
diff --git a/packages/select/tsconfig.json b/packages/select/tsconfig.json
index 1ea0710258..09d0116646 100644
--- a/packages/select/tsconfig.json
+++ b/packages/select/tsconfig.json
@@ -28,6 +28,9 @@
{
"path": "../emotion"
},
+ {
+ "path": "../form-field"
+ },
{
"path": "../hooks"
},
diff --git a/yarn.lock b/yarn.lock
index f1714d625d..a798f010f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7432,9 +7432,9 @@ camelcase@^7.0.0:
integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001585, caniuse-lite@^1.0.30001587:
- version "1.0.30001611"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001611.tgz#4dbe78935b65851c2d2df1868af39f709a93a96e"
- integrity sha512-19NuN1/3PjA3QI8Eki55N8my4LzfkMCRLgCVfrl/slbSAchQfV0+GwjPrK3rq37As4UCLlM/DHajbKkAqbv92Q==
+ version "1.0.30001612"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz#d34248b4ec1f117b70b24ad9ee04c90e0b8a14ae"
+ integrity sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==
case-sensitive-paths-webpack-plugin@^2.4.0:
version "2.4.0"