Refactor

mongodb · Apr 24, 2024 · eec1d40 · eec1d40
1 parent fac01fb
commit eec1d40
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 285 deletions.
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
@@ -2,6 +2,7 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import {
+  color,
   focusRing,
   fontWeights,
   hoverRing,
@@ -55,31 +56,31 @@ export const menuButtonSizeStyle: Record<Size, string> = {
 
 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};
     }
   `,
 };
@@ -116,60 +117,32 @@ 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};
-        border-color: ${palette.gray.light1};
-        color: ${palette.gray.base};
-
-        &:hover,
-        &:active {
-          box-shadow: inherit;
-        }
-
-        > *:last-child {
-          > svg {
-            color: ${palette.gray.base};
-          }
-        }
-      }
-    `,
-  ),
-  [Theme.Dark]: cx(
-    menuButtonDisabledStyles,
-    css`
-      &[aria-disabled='true'] {
-        background-color: ${palette.gray.dark3};
-        border-color: ${palette.gray.dark2};
-        color: ${palette.gray.dark1};
-
-        &:hover,
-        &:active {
-          box-shadow: inherit;
-        }
-
-        > *: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;
@@ -187,54 +160,22 @@ 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};
-
-    &:hover,
-    &:active {
-      box-shadow: ${hoverRing.light.red};
-    }
-  `,
-  [Theme.Dark]: css`
-    border-color: ${errorColor[Theme.Dark]};
+export const getMenuButtonErrorStyle = (theme: Theme) => css`
+  border-color: ${color[theme].border.error.default};
 
-    &:hover,
-    &:active {
-      border-color: ${errorColor[Theme.Dark]};
-      box-shadow: ${hoverRing.dark.red};
-    }
-  `,
-};
-
-export const validColor: Record<Theme, string> = {
-  [Theme.Light]: palette.green.dark1,
-  [Theme.Dark]: palette.green.base,
-};
+  &:hover,
+  &:active {
+    border-color: ${color[theme].border.error.hover};
+    box-shadow: ${hoverRing[theme].red};
+  }
+`;
 
-export const menuButtonValidStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    border-color: ${errorColor[Theme.Light]};
-    background-color: ${palette.white};
+export const getMenuButtonValidStyle = (theme: Theme) => css`
+  border-color: ${color[theme].border.success.default};
 
-    &:hover,
-    &:active {
-      box-shadow: ${hoverRing.light.green};
-    }
-  `,
-  [Theme.Dark]: css`
-    border-color: ${errorColor[Theme.Dark]};
-
-    &:hover,
-    &:active {
-      border-color: ${errorColor[Theme.Dark]};
-      box-shadow: ${hoverRing.dark.green};
-    }
-  `,
-};
+  &:hover,
+  &:active {
+    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
@@ -13,17 +13,17 @@ import { mobileSizeSet } from '../styleSets';
 import { MobileMediaQuery, useForwardedRef } from '../utils';
 
 import {
+  getMenuButtonDisabledThemeStyles,
+  getMenuButtonErrorStyle,
+  getMenuButtonValidStyle,
   menuButtonDeselectedStyles,
-  menuButtonDisabledThemeStyles,
-  menuButtonErrorStyle,
   menuButtonFocusStyle,
   menuButtonModeOverrides,
   menuButtonSizeStyle,
   menuButtonStyleOverrides,
   menuButtonTextClassName,
   menuButtonTextStyle,
   menuButtonTextWrapperStyle,
-  menuButtonValidStyle,
 } from './MenuButton.styles';
 import { MenuButtonProps } from './MenuButton.types';
 
@@ -76,9 +76,9 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
           menuButtonFocusStyle[theme],
           {
             [menuButtonDeselectedStyles[theme]]: deselected,
-            [menuButtonErrorStyle[theme]]: state === State.Error,
-            [menuButtonValidStyle[theme]]: state === State.Valid,
-            [menuButtonDisabledThemeStyles[theme]]: disabled,
+            [getMenuButtonErrorStyle(theme)]: state === State.Error,
+            [getMenuButtonValidStyle(theme)]: state === State.Valid,
+            [getMenuButtonDisabledThemeStyles(theme)]: disabled,
             [css`
               letter-spacing: initial;
             `]: size === ButtonSize.XSmall,

diff --git a/packages/select/src/Select/Select.tsx b/packages/select/src/Select/Select.tsx
@@ -10,6 +10,7 @@ import React, {
 import PropTypes from 'prop-types';
 
 import { css, cx } from '@leafygreen-ui/emotion';
+import { DEFAULT_MESSAGES, FormFieldFeedback } from '@leafygreen-ui/form-field';
 import {
   useEventListener,
   useForwardedRef,
@@ -28,7 +29,6 @@ import ListMenu from '../ListMenu';
 import MenuButton from '../MenuButton';
 import { InternalOption, OptionElement } from '../Option';
 import SelectContext from '../SelectContext';
-import { StateFeedback } from '../StateFeedback';
 import { mobileSizeSet } from '../styleSets';
 import {
   convertToInternalElements,
@@ -63,8 +63,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
       allowDeselect = true,
       usePortal = true,
       placeholder = 'Select',
-      errorMessage = 'This input needs your attention',
-      successMessage = 'Success',
+      errorMessage = DEFAULT_MESSAGES.error,
+      successMessage = DEFAULT_MESSAGES.success,
       state = State.None,
       dropdownWidthBasis = DropdownWidthBasis.Trigger,
       baseFontSize = BaseFontSize.Body1,
@@ -613,12 +613,13 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
               </ListMenu>
             </MenuButton>
           </SelectContext.Provider>
-          <StateFeedback
-            state={state}
+          <FormFieldFeedback
+            disabled={disabled}
             errorMessage={errorMessage}
-            successMessage={successMessage}
             hideFeedback={open}
-            disabled={disabled}
+            size={size}
+            state={state}
+            successMessage={successMessage}
           />
         </div>
       </LeafyGreenProvider>
@@ -643,7 +644,8 @@ Select.propTypes = {
   defaultValue: PropTypes.string,
   onChange: PropTypes.func,
   readOnly: PropTypes.bool,
-  errorMessage: PropTypes.string,
+  errorMessage: PropTypes.node,
+  successMessage: PropTypes.node,
   state: PropTypes.oneOf(Object.values(State)),
   allowDeselect: PropTypes.bool,
   baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),

diff --git a/packages/select/src/Select/Select.types.ts b/packages/select/src/Select/Select.types.ts
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { ButtonProps } from '@leafygreen-ui/button';
+import { FormFieldState } from '@leafygreen-ui/form-field';
 import {
   DarkModeProps,
   Either,
@@ -18,11 +19,7 @@ export const Size = {
 } as const;
 export type Size = (typeof Size)[keyof typeof Size];
 
-export const State = {
-  Error: 'error',
-  None: 'none',
-  Valid: 'valid',
-} as const;
+export const State = FormFieldState;
 export type State = (typeof State)[keyof typeof State];
 
 export const DropdownWidthBasis = {
@@ -89,15 +86,13 @@ export interface BaseSelectProps
 
   /**
    * Error message rendered when the `state` prop is set to `error`.
-   * @default 'This input needs your attention'
    */
-  errorMessage?: string;
+  errorMessage?: React.ReactNode;
 
   /**
    * Success message rendered when the `state` prop is set to `valid`.
-   * @default 'Success'
    */
-  successMessage?: string;
+  successMessage?: React.ReactNode;
 
   /**
    * Determines whether the component should be rendered in an error state.

diff --git a/packages/select/src/StateFeedback/StateFeedback.styles.ts b/packages/select/src/StateFeedback/StateFeedback.styles.ts