Add a slider and range slider component

The variants of accordions is not used and needs to be deprecated.

• add a view component similar to https://react-spectrum.adobe.com/react-spectrum/View.html
• needed to support https://github.com/Arize-ai/arize/issues/19434

• blue
• green
• orange
• red
• celery
• chartreuse
• Cyan
• Fusia
• Indico
• Magenta
• Purple 🟢
• Sea-foam
• Yellow

For use in the new wizard

Create a toggle component

we only use compact - deprecate it entirely.

replace grommet modal

largely overlaps with card - however this is probably the semantically right component to build.

• should have collapsing support
• be smaller than card

When publishing, you need to downgrade to [email protected]

sindresorhus/np#665

migrate white70 -> text-700 etc.

Need a drop component that allows you to expand a sub-menu. Needed to get off of grommet drop

https://www.figma.com/file/XrLQXXeO8mFrSaIAm27KDm/H1-23---Monitors?node-id=1%3A9487&t=J8I1q9ylv05hpEHt-0

dom error:
react-dom.development.js:86 Warning: React does not recognize the hideArrow prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase hidearrow instead. If you accidentally passed it from a parent component, remove it from the DOM element.

similar to textfield, build in the labeling for picker and dropdown.

https://www.figma.com/file/XrLQXXeO8mFrSaIAm27KDm/H1-23---Monitors?node-id=114%3A13882&t=5TJmghyJsPAIXAkj-0

Functional equivalent of a select where you pick 1 value

Picker natively selects multi-select but it only works with small number of items.

Problems with old design:

• No clear way to select "All"
• Tokens have non-uniform stylesJ

Picker problems

• Summary line can't capture enough

expose icons

https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=309%3A0

Use entirely the context colors as a mechanism by which to style things

• #190
• [theming] move font sizing to css variables

Need to add all the text colors to the global variables.

Add a contextual help component that is first class in the components

bodyStyle={{ padding 0 }} is everywhere - this should be the default

Add eslint checks to set a standard on coding style and health

add all gray variants to colors

Components

• action tooltip
• alerts
• #177
• Empty
• FieldColorDesignation
• List
• Modal
• NavList
• Notice
• ProgressCircle
• SlideOver
• TabbedCard

Other

• deprecate the use of theme

Dropdown Menu with support for keyboard access. Needed for grommet deprecation

Roughly based on Apple form-selector

see: https://www.apple.com/shop/buy-iphone/iphone-12

Right now you cannot conveniently create calculate a threshold without metricDefinition, primaryMetricWindow etc. It is too coupled to the existence of a monitor

https://github.com/Arize-ai/arize/blob/c2befc74472b68b155a859175636f7b8faceb4b5/arizeweb/server/metrics/types.flow.js#L166

overlayd component to display a fleeting notification