e7fd41d779
* adds better aria-label for run and interval buttons * enable refreshPicker to be keyboard navigable * adds support for closing menu using esc key * Fix: weird behaviour when navigating menu items * adds focus trapping to refresh picker * WIP: sanitize time interval values for screen readers to pronounce correctly * WIP: improve sanitizeLabel function to work for all use cases * Chore: move label sanitization to refreshPicker component instead * Chore: add fallback label when ariaLabel prop is not set * Chore: fix some type errors * code cleanup * update tests * rename function to be more descriptive * remove unnecessary type casting * WIP: use cleaner solution * WIP: use parseDuration util instead * use more descriptive aria label * fix: modify parseDuration util to output correct interval unit format * fix: move interval unit format logic to refreshPicker * Chore: add back old refreshPicker e2e selectors for backward compatibility * Fix: improve refresh picker to voice out selected interval option * Fix: use appropriate aria roles and states to aid screen reader a11y * Fix: support dropdown expansion using down arrow key * Chore: use better type construct * Fix: add support for tab to close menu * add more context to the deprecation warning message * Chore: use formatDuration util instead to format interval labels * Chore: small syntax fix * chore: syntax fix * syntax fix * Chore: add back lockfile |
||
|---|---|---|
| .. | ||
| .storybook | ||
| src | ||
| .eslintrc | ||
| api-extractor.json | ||
| CHANGELOG.md | ||
| index.js | ||
| LICENSE_APACHE2 | ||
| package.json | ||
| README.md | ||
| rollup.config.ts | ||
| tsconfig.build.json | ||
| tsconfig.json | ||
Grafana UI components library
@grafana/ui is currently in BETA.
@grafana/ui is a collection of components used by Grafana
Our goal is to deliver Grafana's common UI elements for plugins developers and contributors.
Browse the Storybook catalog of the components.
See package source for more details.
Installation
yarn add @grafana/ui
npm install @grafana/ui
Development
For development purposes we suggest using yarn link that will create symlink to @grafana/ui lib. To do so navigate to packages/grafana-ui and run yarn link. Then, navigate to your project and run yarn link @grafana/ui to use the linked version of the lib. To unlink follow the same procedure, but use yarn unlink instead.
Storybook 6.x migration
We've upgraded Storybook to version 6 and with that we will convert to using controls instead of knobs for manipulating components. Controls will not require as much coding as knobs do. Please refer to the storybook style-guide for further information.