🪟 🧹 Update ListBox styling according to the DropDown component

[natalyjazzviolin]

What

Closes #20067 which is task 1 of https://github.com/airbytehq/airbyte-internal-issues/issues/2524

How

• Adds story files for the DropDown and ListBox components
• Updates the ListBox component styling in accordance to the DropDown component and Figma files.

Screen.Recording.2022-12-06.at.12.46.13.PM.mov

Recommended reading order

1. airbyte-webapp/src/components/ui/ListBox/ListBox.tsx
2. airbyte-webapp/src/components/ui/ListBox/ListBox.module.scss
3. airbyte-webapp/src/components/ui/DropDown/index.stories.tsx
4. airbyte-webapp/src/components/ui/ListBox/index.stories.tsx

🚨 User Impact 🚨

Are there any breaking changes? What is the end result perceived by the user? If yes, please merge this PR with the 🚨🚨 emoji so changelog authors can further highlight this if needed.

Pre-merge Checklist

Expand the relevant checklist and delete the others.

New Connector

Community member or Airbyter

• Community member? Grant edit access to maintainers (instructions)
• Secrets in the connector's spec are annotated with airbyte_secret
• Unit & integration tests added and passing. Community members, please provide proof of success locally e.g: screenshot or copy-paste unit, integration, and acceptance test output. To run acceptance tests for a Python connector, follow instructions in the README. For java connectors run ./gradlew :airbyte-integrations:connectors:<name>:integrationTest.
• Code reviews completed
• Documentation updated
  • Connector's README.md
  • Connector's bootstrap.md. See description and examples
  • docs/integrations/<source or destination>/<name>.md including changelog. See changelog example
  • docs/integrations/README.md
  • airbyte-integrations/builds.md
• PR name follows PR naming conventions

Airbyter

If this is a community PR, the Airbyte engineer reviewing this PR is responsible for the below items.

• Create a non-forked branch based on this PR and test the below items on it
• Build is successful
• If new credentials are required for use in CI, add them to GSM. Instructions.
• /test connector=connectors/<name> command is passing
• New Connector version released on Dockerhub by running the /publish command described here
• After the connector is published, connector added to connector index as described here
• Seed specs have been re-generated by building the platform and committing the changes to the seed spec files, as described here

Updating a connector

Community member or Airbyter

• Grant edit access to maintainers (instructions)
• Secrets in the connector's spec are annotated with airbyte_secret
• Unit & integration tests added and passing. Community members, please provide proof of success locally e.g: screenshot or copy-paste unit, integration, and acceptance test output. To run acceptance tests for a Python connector, follow instructions in the README. For java connectors run ./gradlew :airbyte-integrations:connectors:<name>:integrationTest.
• Code reviews completed
• Documentation updated
  • Connector's README.md
  • Connector's bootstrap.md. See description and examples
  • Changelog updated in docs/integrations/<source or destination>/<name>.md including changelog. See changelog example
• PR name follows PR naming conventions

Airbyter

If this is a community PR, the Airbyte engineer reviewing this PR is responsible for the below items.

• Create a non-forked branch based on this PR and test the below items on it
• Build is successful
• If new credentials are required for use in CI, add them to GSM. Instructions.
• /test connector=connectors/<name> command is passing
• New Connector version released on Dockerhub and connector version bumped by running the /publish command described here

Connector Generator

• Issue acceptance criteria met
• PR name follows PR naming conventions
• If adding a new generator, add it to the list of scaffold modules being tested
• The generator test modules (all connectors with -scaffold in their name) have been updated with the latest scaffold by running ./gradlew :airbyte-integrations:connector-templates:generator:testScaffoldTemplates then checking in your changes
• Documentation which references the generator is updated as needed

Tests

Unit

Put your unit tests output here.

Integration

Put your integration tests output here.

Acceptance

Put your acceptance tests output here.

[natalyjazzviolin]

This SVG is exported form the dropdown mockup in Figma.

[timroes]

Overall looks good. Left some code style comments.

@lmossman Since the ListBox is atm only used in the connector builder UI, would you mind giving this a very quick test if nothing broke for you there?

[lmossman]

I did notice one issue when I tested this branch out with the connector builder -- the caret was repeated twice:

This is because this PR adds the CaretDownIcon to the ListBox's button in all cases, even if the button is being overridden through the controlButton prop on ListBox.

To fix this I have pushed this commit to this branch: d4610c4
This commit just moves the CaretDownIcon component that was added to ListBox up into the DefaultControlButton component, so that the default control button contains that caret with the default styling, but still allows the entire button to be overridden if the controlButton prop is set, as the StreamSelector in the connector builder does.

With that change, both the connector builder and full story now look as expected

[natalyjazzviolin]

Thanks, @lmossman!