mirror of
https://github.com/grafana/grafana.git
synced 2024-11-26 10:50:37 -06:00
Storybook: Rework the intro page (#77305)
This commit is contained in:
parent
5118ac9abd
commit
7430cce0e0
@ -1,7 +1,5 @@
|
|||||||
# Grafana UI components library
|
# Grafana UI components library
|
||||||
|
|
||||||
> **@grafana/ui is currently in BETA**.
|
|
||||||
|
|
||||||
@grafana/ui is a collection of components used by [Grafana](https://github.com/grafana/grafana)
|
@grafana/ui is a collection of components used by [Grafana](https://github.com/grafana/grafana)
|
||||||
|
|
||||||
Our goal is to deliver Grafana's common UI elements for plugins developers and contributors.
|
Our goal is to deliver Grafana's common UI elements for plugins developers and contributors.
|
||||||
|
@ -2,11 +2,9 @@ import { Meta } from '@storybook/blocks';
|
|||||||
|
|
||||||
<Meta title="Docs Overview/Intro" parameters={{ options: { isToolshown: false }, id: 1 }} />
|
<Meta title="Docs Overview/Intro" parameters={{ options: { isToolshown: false }, id: 1 }} />
|
||||||
|
|
||||||
# Grafana design system
|
# Grafana React Components
|
||||||
|
|
||||||
> **@grafana/ui is currently in BETA**.
|
With @grafana/ui, we want to democratize development. This library of reusable [Grafana](https://github.com/grafana/grafana) components and guidelines is part of the [Saga Design System](https://grafana.com/developers/saga/About/overview) and should help you with contribution and plugin development.
|
||||||
|
|
||||||
With the design system @grafana/ui, we want to democratize development. This library of reusable [Grafana](https://github.com/grafana/grafana) components and guidelines helps you with contribution and plugin development.
|
|
||||||
|
|
||||||
## Our vision
|
## Our vision
|
||||||
|
|
||||||
@ -17,23 +15,19 @@ Grafana Labs started @grafana/ui to make contributing to Grafana as easy as poss
|
|||||||
- A beautiful, visually consistent Grafana experience.
|
- A beautiful, visually consistent Grafana experience.
|
||||||
- Transparency about how we work and what we do.
|
- Transparency about how we work and what we do.
|
||||||
|
|
||||||
### Maintained by Grafana Labs and you
|
|
||||||
|
|
||||||
Grafana Labs has a task force that helps create and maintain components. We make sure that components are documented and easy to use. The current status of the @grafana/ui development is available on [GitHub](https://github.com/grafana/grafana/projects/26). Feel free to contribute!
|
|
||||||
|
|
||||||
### How to get involved
|
### How to get involved
|
||||||
|
|
||||||
When we notice that we need to change something, we determine together what the change should be, then we put the change in place and communicate it publicly. Developers and designers create and improve @grafana/ui together. Throughout the process, we strive to involve you and meet your needs. We are looking forward to discussing your design and improvement ideas on [GitHub](https://github.com/grafana/grafana/projects/26).
|
When we notice that we need to change something, we determine together what the change should be, then we put the change in place and communicate it publicly. Developers and designers create and improve @grafana/ui together. Throughout the process, we strive to involve you and meet your needs. We are looking forward to discussing your design and improvement ideas, find out how you can help in the [Contribution Guidelines](https://grafana.com/developers/saga/contributing).
|
||||||
|
|
||||||
## Get started
|
## Get started
|
||||||
|
|
||||||
- **Explore UI components**
|
- **Explore UI components**
|
||||||
Click on any of the component in the sidebar to see how they look, and how to configure them. Each component pages contains documentation of its properties, as well as code examples for how to use it.
|
Click on any of the components in the sidebar to see how they look, and how to configure them. Each component contains documentation of its properties, as well as code examples for how to use it.
|
||||||
- **Try them out**
|
- **Try them out**
|
||||||
- Experiment with different properties, by clicking **Canvas** at the top of each component page.
|
- Experiment with different properties, by clicking on each component story.
|
||||||
- Change the properties under **Knobs** in the bottom panel.
|
- Change the properties under **Controls** in the side panel.
|
||||||
- **Use them**
|
- **Use them**
|
||||||
Once you've found the right component for your use case, click the **Story** tab to see the code implementation, or look at examples under **Docs**.
|
Once you've found the right component for your use case, click the **Code** tab to see the code implementation, or look at examples under **Docs**.
|
||||||
|
|
||||||
For more details, refer to the [package source](https://github.com/grafana/grafana/tree/main/packages/grafana-ui).
|
For more details, refer to the [package source](https://github.com/grafana/grafana/tree/main/packages/grafana-ui).
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user