LG-4138 | LG-4150: [CCP] Select updates (#2313)

* Update placeholder text color * Update spacing * Remove error icon from inside MenuButton * Add error icon and default error message below select * StateFeedback with errorMessage and successMessage * Select changeset * Refactor
mongodb · Apr 24, 2024 · f304a13 · f304a13
1 parent a5c4168
commit f304a13
Show file tree

Hide file tree

Showing 13 changed files with 126 additions and 184 deletions.
diff --git a/.changeset/modern-spies-behave.md 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
diff --git 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
@@ -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,56 +33,56 @@ export const menuButtonStyleOverrides = css`
 export const menuButtonSizeStyle: Record<Size, string> = {
   [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`
     text-transform: none;
     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, string> = {
   [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};
       }
     }
 
     &:hover,
     &: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<Theme, string> = {
 
 export const menuButtonDeselectedStyles: Record<Theme, string> = {
   [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,56 +119,39 @@ export const menuButtonDeselectedStyles: Record<Theme, string> = {
   `,
 };
 
-export const menuButtonDisabledStyles = css`
+export const getMenuButtonDisabledThemeStyles = (theme: Theme) => css`
   cursor: not-allowed;
   pointer-events: unset;
   box-shadow: unset;
 
   &:active {
     pointer-events: none;
   }
-`;
 
-export const menuButtonDisabledThemeStyles: Record<Theme, string> = {
-  [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, string> = {
-  [Theme.Light]: palette.red.base,
-  [Theme.Dark]: palette.red.light1,
-};
-
-export const menuButtonErrorStyle: Record<Theme, string> = {
-  [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
@@ -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<HTMLButtonElement, MenuButtonProps>(
       readOnly,
       onClose,
       onOpen,
-      errorMessage,
       state,
       baseFontSize,
       __INTERNAL__menuButtonSlot__,
@@ -56,8 +53,6 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
 
     const ref = useForwardedRef(forwardedRef, null);
 
-    const sizeSet = sizeSets[size];
-
     const onClick = useCallback(() => {
       if (open) {
         onClose();
@@ -79,10 +74,9 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
           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<HTMLButtonElement, MenuButtonProps>(
           >
             {text}
           </div>
-          {state === State.Error && errorMessage && (
-            <WarningIcon
-              aria-hidden
-              className={css`
-                color: ${errorColor[theme]};
-              `}
-              size={sizeSet.warningIcon}
-              title="Error"
-            />
-          )}
         </div>
         {children}
       </Component>

diff --git a/packages/select/src/MenuButton/MenuButton.types.ts b/packages/select/src/MenuButton/MenuButton.types.ts
@@ -13,7 +13,6 @@ export interface MenuButtonBaseProps
   readOnly?: boolean;
   onClose: () => void;
   onOpen: () => void;
-  errorMessage?: string;
   state?: State;
   baseFontSize?: BaseFontSize;
   __INTERNAL__menuButtonSlot__?: React.ForwardRefExoticComponent<

diff --git a/packages/select/src/Select/Select.spec.tsx b/packages/select/src/Select/Select.spec.tsx
@@ -936,14 +936,6 @@ describe('packages/select', () => {
       expect(isError).toBeTruthy();
       expect(getErrorMessage()).toBeInTheDocument();
     });
-
-    test('error message is not present if "errorMessage" is empty', () => {
-      const { isError, getErrorMessage } = renderSelect({
-        state: State.Error,
-      });
-      expect(isError).toBeTruthy();
-      expect(getErrorMessage()).not.toBeInTheDocument();
-    });
   });
 
   describe('when the "state" is "none"', () => {

diff --git a/packages/select/src/Select/Select.styles.ts b/packages/select/src/Select/Select.styles.ts
@@ -1,13 +1,5 @@
 import { css } from '@leafygreen-ui/emotion';
-import { palette } from '@leafygreen-ui/palette';
-import {
-  fontFamilies,
-  spacing,
-  transitionDuration,
-  typeScales,
-} from '@leafygreen-ui/tokens';
-
-import { SizeSet } from '../styleSets';
+import { spacing, typeScales } from '@leafygreen-ui/tokens';
 
 export const labelDescriptionContainerStyle = css`
   display: flex;
@@ -24,19 +16,3 @@ export const largeLabelStyles = css`
   font-size: ${typeScales.large.fontSize}px;
   line-height: ${typeScales.large.lineHeight}px;
 `;
-
-export const errorTextStyle = ({
-  darkMode,
-  sizeSet,
-}: {
-  darkMode: boolean;
-  sizeSet: SizeSet;
-}) => css`
-  font-family: ${fontFamilies.default};
-  color: ${darkMode ? palette.red.light1 : palette.red.base};
-  font-size: ${sizeSet.text}px;
-  margin-top: ${spacing[1]}px;
-  padding-left: 2px;
-  transition: color ${transitionDuration.faster}ms ease-in-out;
-  transition-delay: ${transitionDuration.faster}ms;
-`;