Update Multiselect Menu atom to conform to the styleguide

[mihaildu]

The Multiselect Menu molecule should look like the one in the styleguide (Select Menu with Keywords).

Tasks

Sub components within react-select:

• [x] 1. Update styling of input field
  • [x] border changes based on validation status
  • [x] font family, font colour & other border variables
  • [x] spacing - padding/margin
• [x] 2. Update styling of menu options
  • [x] font colour on hover
  • [x] background colour on hover
  • [x] spacing
• [x] 3. Update styling of tags (aka keywords)
  • [x] font size
  • [x] font colour
  • [x] overwrite react-select hover behaviour
  • [x] spacing

---

Right now we don't have any Multiselect Menu component. We have a Subject Area Dropdown which should probably get more modular and be moved to molecules.

[jsms90]

@dryhten the Subject Area Dropdown component is a specific version of the generic multiselect dropdown that has already been created in the react-select library. I disagree that we should create a generic multiselect menu component in molecules as an extra middle step.

We currently only have one implementation of a multiselect menu in our application. Until we have more multiselect dropdowns in our app, I'm not sure that a middle abstraction is useful/necessary?

With that in mind, I'm adding "Tasks" to the top comment, with the view to simply styling the SubjectAreaDropdown component as per invision.

[jsms90]

Progress update

Styling any of the components within react-select is likely to be the most problematic, which is why I'm starting there (task 1).

We achieve this by passing in a custom styles object. I've done the smallest bit of customisation already - styling the background colour of the tags. So you can see this in our existing codebase. I'm following the guide in the react-select docs) to extend our custom styles further.

So! I'm currently grappling with how to customise the border colour of the input field. As per the designs above, the border colour needs to change based on the validation status (error/success/warning/default). validationStatus is a prop, being passed in from ValidatedField.

I'm looking to replicate the code that's already being used in TextArea:

const borderColor = ({ theme, validationStatus = 'default' }) =>
  ({
    error: theme.colorError,
    success: theme.colorSuccess,
    warning: theme.colorWarning,
    default: theme.colorBorder,
  }[validationStatus])

but it's not working for me. Unsure why.

Investigating potential issues:

1. Not using react-select's custom styles object correctly?
2. Difference between emotion vs styled components? Can't use functions like borderColor above?
3. Something else?

[jsms90]

1. First step - make sure I'm using the custom styles object in react-select correctly.

The sub-component that needs the custom styles is called Control, so I've added borderColor like this:

this.customReactSelectStyles = {
      multiValue: (base, state) => ({
        ...base,
        backgroundColor: this.props.theme.colorPrimary,
      }),
      control: (base, state) => ({
        ...base,
        borderColor: 'green'
      }),
    }

It works. The border is green, except on hover & on focus.

Went digging in the source code, to see what else from the base styles I needed to replace - this code here

So:

this.customReactSelectStyles = {
      multiValue: (base, state) => ({
        ...base,
        backgroundColor: this.props.theme.colorPrimary,
      }),
      control: (base, { isDisabled, isFocused }) => ({
        ...base,
        borderColor: isFocused ? 'none' : 'green',
        '&:hover': {
          borderColor: isFocused ? 'none' : 'green',
        },
      }),
    }

Hard coding this works :+1: - so potential issue no.1 isn't it.

[jsms90]

Forgot to say - the problem above was about using styled components vs emotion differently

• needed to pass in this.props rather than just props to the borderColor function
• was also defining the borderColor function outside of the stateful component itself (but in the same file)