Spike: Bring the DS Single and Multiselect into Storybook

[natalia-fitzgerald]

Explore implementing DSR Select components by matching the Design System's HTML layout instead of attempting to replicate the styling using the react-select library.

Variants

• Single select
• Multi-select

We want to understand

• What are the Pros / Cons of using primarily HTML instead of the React library?
• Any blockers?

[meissadia]

Single select

I've been able to integrate the Single select successfully.

Multiselect

The DS multiselect is a highly customized version of the HTML select and has been more difficult but we're close.

Issues in progress

• How can we access the internal state of which items are selected?
  • The internal DS select state is not accessible
  • I've implemented a workaround for tracking selected items in the React wrapper's state, which seems to be working well
    • Cons: It's a very hacky workaround and I would still need to implement keyboard accessibility
    • Pros: It gets us one step close to using the DS Multiselect
• How can we get the icons in the selected Pills to display correctly?
  • Icon gets rendered as a path string instead of the SVG (option 4)
  • I've been able to get as far as stripping out that string but not able to get the actual icon to render (option 2, 3)
  • 
  • Potential workaround: Render the pills ourselves, similar to what we were doing with the react-select version of the Dropdown
    • Pros: We still use most of the DS multiselect logic and styles
    • Cons:
      • May need to reimplement accessibility (thought I think that was already addressed)
      • Would need to hide DS multiselect's rendered pills
      • Would need to render our own pills using the same classnames to be able to reuse DS styles

Pending functionality/issues/questions

• [Single] Support a default selected option?
• [Single] Support placeholder text?
• [Multi] Support default selected options?
• [Multi] Can we adjust the number of selections allowed (currently 5)?
• [Multi] Can we adjust the placeholder text?
• [Multi] Is there a way to tie into the mouse/keyboard events? I see the addEventListener function but added event handlers don't seem to be triggered upon Multiselect interaction.

[meissadia]

Next steps in DS:

• Explore splitting Tag rendering into separate component from Multiselect
• Explore exposing the Multiselect model for easier integration

Update:

• We have a Draft PR that allows for the conditional rendering of Tags and exposes the underlying model.
  • Multiselect: Enable configuration at instantiation design-system#1801

[meissadia]

Status as of 11/7:

• (Local) integration of the DS Select and Multiselect into DSR has been successful!
• Work here is blocked by Multiselect: Enable configuration at instantiation design-system#1801, which provides the modifications to the DS Select that we need in order to properly integrate this component into the DSR
• Unit tests have been written 👍🏾

Last Pending issue from above:

• [Multi] Support default selected options?

[meissadia]

• Tried adding a jest.config.js to apply 'jest-svg-transformer'

FAIL src/components/Select/Select.test.tsx [ src/components/Select/Select.test.tsx ]
FAIL src/components/TextIntroduction/TextIntroduction.test.tsx [src/components/TextIntroduction/TextIntroduction.test.tsx ]
FAIL src/components/Link/Link.test.tsx [ src/components/Link/Link.test.tsx ]
FAIL src/components/Well/Well.test.tsx [ src/components/Well/Well.test.tsx ]
FAIL src/components/Alert/Alert.test.tsx [ src/components/Alert/Alert.test.tsx ]
FAIL src/components/TextInput/TextInput.test.tsx [ src/components/TextInput/TextInput.test.tsx ]
FAIL src/components/Table/Table.test.tsx [ src/components/Table/Table.test.tsx ]

[meissadia]

• Tried all the resolutions I found online, none worked for us.
  • error.svg is only directly used in DS Multiselect?
  • In DS the SVG gets directly injected as code: https://cfpb.github.io/design-system/components/selects#multiselect

[meissadia]

Interesting point of note: The following fixes the issue of DS icons not rendering in Vite!!! I don't know the wider implications of using this approach, but it does allow DS rendered icons to show up correctly in DSR.

In vite.config.ts

svgLoader({
  defaultImport: 'raw'
}),