IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-07-30 00:08:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Buttons: replace usage of .btn classnames (#33226)

Browse Source 
* refactor(loginpage): migrate custom button styles to use Button component

* refactor(certificationkey): prefer grafana-ui form elements over html elements and classnames

* refactor(axisselector): prefer grafana-ui Button component over html button element

* refactor(input-datasource): replace use of btn class with grafana-ui components

* chore(grafana-ui): delete deprecated ToggleButtonGroup component

* refactor: replace btn and cta-form__close class usage with IconButton

* chore(closebutton): post master merge use v2 theme

* refactor(permissionlist): remove usage of .btn classname

* Wip

* docs(styling): update styling and theme docs import paths

* refactor(alerting): remote btn classnames from TestRuleResult

* refactor(apikeys): prefer grafana-ui Button components over btn classNames

* refactor(folders): prefer grafana-ui Button components over btn classNames

* refactor(teams): prefer grafana-ui Button components over btn classNames

* refactor(datasources): prefer grafana-ui Button components over btn classNames

* refactor: prefer grafana-ui Button components over btn classNames

* Minor style tweak to service buttons

* test: update snapshots related to button changes

* chore(input-datasource): remove unused import declaration

* refactor(loginservicebuttons): rename theme.palette to theme.colors

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Jack Westbrook
2021-04-23 10:06:42 +02:00
committed by GitHub
co-authored by Torkel Ödegaard
parent 6034bf37c6
commit c809d63065
36 changed files with 335 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contribute/style-guides/styling.md
+7 -9
View File
@@ -10,7 +10,7 @@ For styling components, use [Emotion's `css` function](https://emotion.sh/docs/e
```tsx
import React from 'react';
import { css } from 'emotion';
import { css } from '@emotion/css';
const ComponentA = () => (
<div
@@ -33,14 +33,13 @@ To access the theme in your styles, use the `useStyles` hook. It provides basic
import React, { FC } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { useStyles } from '@grafana/ui';
import { css } from 'emotion';
import { css } from '@emotion/css';
const Foo: FC<FooProps> = () => {
const styles = useStyles(getStyles);
// Use styles with classNames
return <div className={styles}>...</div>
return <div className={styles}>...</div>;
};
const getStyles = (theme: GrafanaTheme) => css`
@@ -56,15 +55,15 @@ Let's say you need to style a component that has a different background dependin
```tsx
import React from 'react';
import { css } from 'emotion';
import { css } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant, stylesFactory, useTheme } from '@grafana/ui';
interface ComponentAProps {
isActive: boolean
isActive: boolean;
}
const ComponentA: React.FC<ComponentAProps> = ({isActive}) => {
const ComponentA: React.FC<ComponentAProps> = ({ isActive }) => {
const theme = useTheme();
const styles = getStyles(theme, isActive);
@@ -76,7 +75,6 @@ const ComponentA: React.FC<ComponentAProps> = ({isActive}) => {
);
};
// Mind, that you can pass multiple arguments, theme included
const getStyles = stylesFactory((theme: GrafanaTheme, isActive: boolean) => {
const backgroundColor = isActive ? theme.colors.red : theme.colors.blue;
@@ -100,7 +98,7 @@ For class composition, use [Emotion's `cx` function](https://emotion.sh/docs/emo
```tsx
import React from 'react';
import { css, cx } from 'emotion';
import { css, cx } from '@emotion/css';
interface Props {
className?: string;