IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Frontend: Update frontend styleguide emotion example (#55608)

Browse Source 
* Frontend: Update frontend styleguide emotion example

* Update styling guide

* Fixes

* Add back link to cx

* prettier

* Update contribute/style-guides/frontend.md

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

* prettier

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
This commit is contained in:
Torkel Ödegaard
2022-09-23 08:22:16 +02:00
committed by GitHub
parent 61c50ca1aa
commit c9b5acfefc
2 changed files with 35 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
contribute/style-guides/frontend.md
View File

@@ -166,17 +166,22 @@ interface ModalState {
##### Emotion class names
```typescript
const getStyles = = () => ({
const getStyles = (theme: GrafanaTheme2) => ({
// bad
ElementWrapper: css`...`,
// bad
["element-wrapper"]: css`...`,
['element-wrapper']: css`...`,
// good
elementWrapper: css`...`,
elementWrapper: css({
padding: theme.spacing(1, 2),
background: theme.colors.background.secondary,
}),
});
```
Use hook useStyles2(getStyles) to memoize the styles generation and try to avoid passing props to the the getStyles function and instead compose classes using emotion cx function.
#### Use `ALL_CAPS` for constants.
```typescript