Info component

[hughess]

Description

Adds an Info component which can be used standalone within markdown to display a tooltip, or within components to display information when a description prop is used.

Components covered:

• Column
• Value
• BigValue
• Accordion
• Alert
• Tab
• Checkbox
• Dropdown
• DateRange
• DateInput
• ButtonGroup
• TextArea
• Slider

Note on Charts, DataTable, and DimensionGrid

It's difficult to find a suitable place for the info icon that does not visually clutter a chart. The recommended approach before we have a built-in way to do this (via a description prop) is to do one of the following:

• Add a markdown header above the chart and include an <Info/> component in that line so it appears with the title
• Add a standalone <Input/> component above or below the chart

Standalone example

BigValue

DataTable Columns

Value

Slider

Dropdown

ButtonGroup

Alert

Accordion

To Do

• Decide on className prop
• Add to VS Code extension
• Confirm that there is not an issue with HMR for ButtonGroup, DateRange, and DateInput
  • When testing in docs site, changing title or description seemed to break page, but refreshing fixed it
• Add description prop to docs for relevant components + example usage

Checklist

• For UI or styling changes, I have added a screenshot or gif showing before & after
• I have added a changeset
• I have added to the docs where applicable
• I have added to the VS Code extension where applicable

[hughess]

@timothyhoward I think you were waiting for the DataTable version of this!

[timothyhoward]

@hughess Amazing work! This is just what I've been after! 🎉

[mcrascal]

@hughess some proposed changes in #2995 for your review

[hughess]

@mcrascal nice thanks! Those look perfect

[ItsMeBrianD]

@hughess This component already exists: https://github.com/evidence-dev/evidence/blob/next/packages/ui/core-components/src/lib/atoms/hint/Hint.svelte

[hughess]

For posterity, this component needs to live separately from Hint since there are different spacing requirements in different contexts of the app. Changing Hint would adversely impact our usage of it in the settings menu/elsewhere in the app itself

[archiewood]

assume we should add prop to the docs for supported components?