Clockface: Update the type ahead dropdown component to allow for custom color selection

[juliajames12]

We would like to update the Type Ahead Dropdown component so it can handle custom color selection. We'll be using it for selecting colors for Slack alerts and potentially elsewhere in the app.

This updated component should do the following:

• A user should be able to select from the list of prepopulated colors. List items should show HEX code, not color name, along with the corresponding color swatch.
• When a user starts typing in a hex code of their choice, the prepopulated hex codes should be displayed until the hex code doesn't match.
• When a user types in their own custom HEX code, the field should accept that hex code.
• When a user leaves a notebook and then comes back to it, the selected HEX code should persist unless the user selects another color from the dropdown or types in a new hex code.

Prepopulated colors:

• DC4E58

• FFB94A

• 2FA74D

• 0098F0

• 8E1FC3

Design Figma

[jzahnd]

@appletreeisyellow is going to reach out to Dumplings for some help getting up to speed on this.

[appletreeisyellow]

Seems like we are using Color Picker instead of Type Ahead Dropdown for color selection specifically in issue #2572. Are we planning to modify the clockface component Color Picker or Type Ahead Dropdown to support custom color selection?

[juliajames12]

@appletreeisyellow I believe we'd need to modify the Type Ahead Dropdown component to support custom color selection.

[appletreeisyellow]

After a review with @hoorayimhelping last week on the current "Type Ahead Dropdown" component, we think it will introduce complex usage to this component if we modify on it, so I created a new component in clockface called "Creatable Type Dropdown" in the above PR