remove non-synth colors, add borderedMultiValue styles SingleSelect (#1196)

Author: jasonbasuil

src/Select/SingleSelect.jsx

@@ -4,13 +4,15 @@ import Select from 'react-select';
 import propTypes from 'prop-types';
 
 import zStack from 'src/Styles/zStack';
-import './select.scss';
 
-import { defaultTheme, defaultStyles, SELECT_SIZES } from './styles';
+import {
+ borderedMultiValueStyles, defaultTheme, defaultStyles, SELECT_SIZES,
+} from './styles';
 
 const SingleSelect = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
+  borderedMultiValue,
   className,
   closeMenuOnSelect,
   components,
@@ -57,6 +59,7 @@ const SingleSelect = ({
     placeholder={placeholder}
     styles={{
       ...defaultStyles({ menuWidth, size }),
+      ...borderedMultiValueStyles(borderedMultiValue),
       menuPortal: (base) => (
         modal ?
         { ...base, zIndex: zStack.zIndexModalBackdrop + 1 } :
@@ -72,6 +75,7 @@ const SingleSelect = ({
 SingleSelect.propTypes = {
   'aria-label': propTypes.string,
   'aria-labelledby': propTypes.string,
+  borderedMultiValue: propTypes.bool,
   className: propTypes.string,
   closeMenuOnSelect: propTypes.bool,
   components: propTypes.any,
@@ -103,6 +107,7 @@ SingleSelect.propTypes = {
 SingleSelect.defaultProps = {
   'aria-label': undefined,
   'aria-labelledby': undefined,
+  borderedMultiValue: undefined,
   className: undefined,
   closeMenuOnSelect: true,
   components: undefined,

src/Select/SingleSelect.mdx

@@ -12,18 +12,11 @@ import Option from './Option';
 import OptionWithDescription from './OptionWithDescription';
 import ValueContainer from './ValueContainer';
 
-import mdx from './SingleSelect.mdx';
-
 const onChange = () => action('Change');
 
 export default {
   title: 'Components/Selects/Single',
   component: SingleSelect,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
 };
 
 const options = [
@@ -33,6 +26,13 @@ const options = [
   { label: 'Unmoderated task', value: 4 },
 ];
 
+const peopleOptions = [
+  { label: 'Riley Researcher', value: 5 },
+  { label: 'Mickey Moderator', value: 6 },
+  { label: 'Connie Collaborator', value: 7 },
+  { label: 'Ozzy Observer', value: 8 },
+];
+
 export const Default = () => (
   <FormGroup
     label="Default select"
@@ -74,6 +74,21 @@ export const MultipleSelect = () => (
   </FormGroup>
 );
 
+export const MultipleSelectBorderedPill = () => (
+  <FormGroup
+    label="Multiple select bordered pill"
+    labelHtmlFor="multi-select-bordered-pill"
+  >
+    <SingleSelect
+      borderedMultiValue
+      inputId="multi-select-bordered-pill"
+      isMulti
+      options={peopleOptions}
+      onChange={onChange}
+    />
+  </FormGroup>
+);
+
 export const InModal = () => {
   const [isOpen, setIsOpen] = useState(false);
 

src/Select/SingleSelect.stories.jsx

@@ -51,8 +51,8 @@ const defaultStyles = ({ menuWidth, size }) => ({
     indicatorSeparator: (styles) => ({ ...styles, display: 'none' }),
     multiValue: (styles) => ({
       ...styles,
-      backgroundColor: systemColors.UX_BLUE_100,
-      color: systemColors.UX_BLUE_700,
+      backgroundColor: systemColors.SYNTH_HOVER_STATE,
+      color: systemColors.SYNTH_SUCCESS_GREEN_DARK,
       borderRadius: '4px',
     }),
     menu: (styles) => ({
@@ -61,20 +61,20 @@ const defaultStyles = ({ menuWidth, size }) => ({
     }),
     multiValueLabel: (styles) => ({
       ...styles,
-      color: systemColors.UX_BLUE_700,
+      color: systemColors.SYNTH_SUCCESS_GREEN_DARK,
       fontSize: '0.875rem',
       fontWeight: 400,
       lineHeight: '1.25rem',
       paddingLeft: '8px',
     }),
     multiValueRemove: (styles) => ({
       ...styles,
-      color: systemColors.UX_BLUE,
+      color: systemColors.SYNTH_SUCCESS_GREEN_DARK,
       cursor: 'pointer',
       ':hover': {
         ...styles[':hover'],
-        backgroundColor: systemColors.selectOptionFocusedBg,
-        color: systemColors.UX_BLUE_700,
+        backgroundColor: systemColors.SYNTH_SELECTED_STATE_GREEN,
+        color: systemColors.SYNTH_SUCCESS_GREEN_DARK,
       },
     }),
     placeholder: (styles) => ({
@@ -91,10 +91,12 @@ const defaultStyles = ({ menuWidth, size }) => ({
     }),
     option: (styles, {
       isDisabled,
+      isFocused,
       isSelected,
     }) => ({
         ...styles,
-        backgroundColor: isSelected ? systemColors.UX_BLUE_200 : styles.backgroundColor,
+        backgroundColor: isSelected || isFocused ?
+          systemColors.SYNTH_HOVER_STATE : styles.backgroundColor,
         color: systemColors.UX_GRAY_900,
         fontWeight: fontWeights.light,
         fontSize: '0.875rem',
@@ -108,11 +110,39 @@ const defaultStyles = ({ menuWidth, size }) => ({
 
         ':hover': {
           ...styles[':hover'],
-          backgroundColor: isSelected ? systemColors.UX_BLUE_200 : systemColors.UX_BLUE_100,
+          backgroundColor: isSelected ?
+            systemColors.SYNTH_SELECTED_STATE_GREEN : systemColors.SYNTH_HOVER_STATE,
         },
       }),
 });
 
+const borderedMultiValueStyles = (borderedMultiValue) => borderedMultiValue ? {
+  multiValue: (styles) => (
+    {
+      ...styles,
+      border: `1px solid ${systemColors.SYNTH_DARK_BACKGROUND_SELECTED_BLUE}`,
+      borderRadius: '4px',
+      backgroundColor: systemColors.UX_WHITE,
+    }
+  ),
+  multiValueLabel: (styles) => (
+    {
+      ...styles,
+      color: systemColors.SYNTH_DARK_BACKGROUND_SELECTED_BLUE,
+    }
+  ),
+  multiValueRemove: (styles) => (
+    {
+      ...styles,
+      color: systemColors.SYNTH_DARK_BACKGROUND_SELECTED_BLUE,
+      ':hover': {
+        backgroundColor: systemColors.UX_NAVY_500,
+        color: systemColors.UX_WHITE,
+      },
+    }
+  ),
+} : {};
+
 const defaultTheme = (theme) => ({
   ...theme,
   colors: {
@@ -122,6 +152,7 @@ const defaultTheme = (theme) => ({
 });
 
 export {
+  borderedMultiValueStyles,
   defaultStyles,
   defaultTheme,
 };