Chore: Use theme.shape.radius.circle everywhere (#70896)

* use theme.shape.radius.circle everywhere

* add useTheme2 import
This commit is contained in:
Ashley Harrison 2023-06-29 13:56:05 +01:00 committed by GitHub
parent 890316c105
commit 9ee2cc742a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 19 additions and 18 deletions

View File

@ -70,7 +70,7 @@ const getStyles = (
height: swatchSize, height: swatchSize,
background: `${color}`, background: `${color}`,
border, border,
borderRadius: '50%', borderRadius: theme.shape.radius.circle,
outlineOffset: '1px', outlineOffset: '1px',
outline: isFocusVisible ? `2px solid ${theme.colors.primary.main}` : 'none', outline: isFocusVisible ? `2px solid ${theme.colors.primary.main}` : 'none',
boxShadow: isSelected boxShadow: isSelected

View File

@ -66,7 +66,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
width: 6px; width: 6px;
height: 6px; height: 6px;
background-color: ${theme.colors.text.disabled}; background-color: ${theme.colors.text.disabled};
border-radius: 50%; border-radius: ${theme.shape.radius.circle};
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 4px; top: 4px;

View File

@ -234,7 +234,7 @@ const getStyles = (theme: GrafanaTheme2) => {
`, `,
highlight: css` highlight: css`
background-color: ${theme.colors.success.main}; background-color: ${theme.colors.success.main};
border-radius: 50%; border-radius: ${theme.shape.radius.circle};
width: 6px; width: 6px;
height: 6px; height: 6px;
position: absolute; position: absolute;

View File

@ -32,7 +32,7 @@ function getStyles(theme: GrafanaTheme2) {
width: theme.spacing(3), width: theme.spacing(3),
}), }),
round: css({ round: css({
borderRadius: '50%', borderRadius: theme.shape.radius.circle,
}), }),
}; };
} }

View File

@ -22,7 +22,7 @@ const getStyles = (theme: GrafanaTheme2) => {
return { return {
highlight: css` highlight: css`
background-color: ${theme.colors.success.main}; background-color: ${theme.colors.success.main};
border-radius: 50%; border-radius: ${theme.shape.radius.circle};
width: 6px; width: 6px;
height: 6px; height: 6px;
display: inline-block; display: inline-block;

View File

@ -99,7 +99,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
profileButton: css({ profileButton: css({
padding: theme.spacing(0, 0.25), padding: theme.spacing(0, 0.25),
img: { img: {
borderRadius: '50%', borderRadius: theme.shape.radius.circle,
height: '24px', height: '24px',
marginRight: 0, marginRight: 0,
width: '24px', width: '24px',

View File

@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import React from 'react'; import React from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui'; import { useStyles2, useTheme2 } from '@grafana/ui';
const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' }; const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' };
@ -77,6 +77,7 @@ interface CircleProps {
} }
export const Circle = ({ size, style, children }: React.PropsWithChildren<CircleProps>) => { export const Circle = ({ size, style, children }: React.PropsWithChildren<CircleProps>) => {
const theme = useTheme2();
return ( return (
<div <div
style={{ style={{
@ -85,7 +86,7 @@ export const Circle = ({ size, style, children }: React.PropsWithChildren<Circle
position: 'absolute', position: 'absolute',
bottom: 0, bottom: 0,
right: 0, right: 0,
borderRadius: '50%', borderRadius: theme.shape.radius.circle,
...style, ...style,
}} }}
> >

View File

@ -57,7 +57,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
width: ${theme.spacing(4)}; width: ${theme.spacing(4)};
height: ${theme.spacing(4)}; height: ${theme.spacing(4)};
line-height: ${theme.spacing(4)}; line-height: ${theme.spacing(4)};
border-radius: 100%; border-radius: ${theme.shape.radius.circle};
text-align: center; text-align: center;
color: ${theme.colors.text.maxContrast}; color: ${theme.colors.text.maxContrast};
background-color: ${theme.colors.background.canvas}; background-color: ${theme.colors.background.canvas};

View File

@ -28,7 +28,7 @@ const getStyles = (theme: GrafanaTheme2) => {
const common: CSSObject = { const common: CSSObject = {
width: 8, width: 8,
height: 8, height: 8,
borderRadius: '50%', borderRadius: theme.shape.radius.circle,
marginLeft: theme.spacing(1), marginLeft: theme.spacing(1),
position: 'relative', position: 'relative',
top: '-1px', top: '-1px',

View File

@ -40,7 +40,7 @@ function getStyles(theme: GrafanaTheme2) {
height: 10px; height: 10px;
background: ${theme.colors.text.disabled}; background: ${theme.colors.text.disabled};
box-shadow: 0 0 2px ${theme.colors.text.disabled}; box-shadow: 0 0 2px ${theme.colors.text.disabled};
border-radius: 50%; border-radius: ${theme.shape.radius.circle};
position: relative; position: relative;
top: 6px; top: 6px;
right: 1px; right: 1px;

View File

@ -52,7 +52,7 @@ const getStyles = (theme: GrafanaTheme2) => {
font-size: ${theme.typography.bodySmall.fontSize}; font-size: ${theme.typography.bodySmall.fontSize};
`, `,
userAvatar: css` userAvatar: css`
border-radius: 50%; border-radius: ${theme.shape.radius.circle};
box-sizing: content-box; box-sizing: content-box;
width: 22px; width: 22px;
height: 22px; height: 22px;

View File

@ -46,7 +46,7 @@ const getStyles = memoizeOne((theme: GrafanaTheme2) => {
color: ${theme.colors.text.secondary}; color: ${theme.colors.text.secondary};
padding: 0; padding: 0;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: ${theme.shape.radius.circle};
height: ${theme.spacing(theme.components.height.sm)}; height: ${theme.spacing(theme.components.height.sm)};
width: ${theme.spacing(theme.components.height.sm)}; width: ${theme.spacing(theme.components.height.sm)};
svg { svg {

View File

@ -48,7 +48,7 @@ const getStyles = (theme: GrafanaTheme2) => {
background: theme.colors.secondary.main, background: theme.colors.secondary.main,
width: '20px', width: '20px',
height: '20px', height: '20px',
borderRadius: '50%', borderRadius: theme.shape.radius.circle,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',

View File

@ -148,7 +148,7 @@ function getStyles(theme: GrafanaTheme2) {
margin: 0, margin: 0,
padding: theme.spacing(0.5), padding: theme.spacing(0.5),
img: { img: {
borderRadius: '50%', borderRadius: theme.shape.radius.circle,
width: theme.spacing(2), width: theme.spacing(2),
height: theme.spacing(2), height: theme.spacing(2),
}, },

View File

@ -142,7 +142,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
pointer-events: auto; pointer-events: auto;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: ${theme.shape.radius.circle};
display: none; display: none;
z-index: 110; z-index: 110;
`, `,

View File

@ -159,7 +159,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
float: left; float: left;
margin-right: 8px; margin-right: 8px;
opacity: 0.7; opacity: 0.7;
border-radius: 50%; border-radius: ${theme.shape.radius.circle};
} }
`, `,
legendItem: css` legendItem: css`

View File

@ -124,7 +124,7 @@ const getStyles = (theme: GrafanaTheme2) => {
} }
`, `,
avatar: css` avatar: css`
border-radius: 50%; border-radius: ${theme.shape.radius.circle};
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: ${theme.spacing(1)}; margin-right: ${theme.spacing(1)};