314c22bc5b
* Use newPanelChromeUI feature flag in DashboardPanel panel rendering * just render the PanelChromeUI instead of the PanelChrome * add new props to PanelChrome; have ChromePanel from grafana/ui in DashboardPanel for testing (will remove before finished); * put icons next to the title of PanelChrome header space * arrange PanelChrome's title icons into view/edit/status sections * icons next to title in PanelChrome are surrounded by square focusable space * items to be render in Header in PanelChrome come in as props * PanelChrome accepts items next to title from the outside; currently them being ordered in the left side is okay, right side not so much * revert local changes to DashboardPanel * cleanup unused imports * simple PanelChrome render without any header props * CSS function * add test PanelChrome prop padding * add icons next to title if they are passed to PanelChrome * fixed PanelChrome header: hoverHeader, having a menu prop; * only show icons with correct icon names; show menu icon only on hover over panel container; minor other fixes * attempt to resolve hovering in an RTL test for the menu icon to work as expected * menu opens in a Dropdown if provided as prop * fixing tooltips and aria-labels * Fixed issue with light theme in storybook * comment out props and tests that are not yet used * Fixed issue where content was overflowing the boundaries Co-authored-by: Torkel Ödegaard <torkel@grafana.com> |
||
|---|---|---|
| .. | ||
| .storybook | ||
| scripts | ||
| src | ||
| .eslintrc | ||
| CHANGELOG.md | ||
| 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.