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

* use theme.shape.radius.circle everywhere * add useTheme2 import
2025-02-25 18:55:37 -06:00 · 2023-06-29 13:56:05 +01:00 · 2023-06-29 13:56:05 +01:00 · 9ee2cc742a
commit 9ee2cc742a
parent 890316c105
17 changed files with 19 additions and 18 deletions
--- a/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
@ -70,7 +70,7 @@ const getStyles = (
      height: swatchSize,
      background: `${color}`,
      border,
-      borderRadius: '50%',
+      borderRadius: theme.shape.radius.circle,
      outlineOffset: '1px',
      outline: isFocusVisible ? `2px solid  ${theme.colors.primary.main}` : 'none',
      boxShadow: isSelected
--- a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx
@ -66,7 +66,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
      width: 6px;
      height: 6px;
      background-color: ${theme.colors.text.disabled};
-      border-radius: 50%;
+      border-radius: ${theme.shape.radius.circle};
      display: inline-block;
      position: absolute;
      top: 4px;
--- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
+++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
@ -234,7 +234,7 @@ const getStyles = (theme: GrafanaTheme2) => {
    `,
    highlight: css`
      background-color: ${theme.colors.success.main};
-      border-radius: 50%;
+      border-radius: ${theme.shape.radius.circle};
      width: 6px;
      height: 6px;
      position: absolute;
--- a/public/app/core/components/AppChrome/MegaMenu/NavBarItemIcon.tsx
+++ b/public/app/core/components/AppChrome/MegaMenu/NavBarItemIcon.tsx
@ -32,7 +32,7 @@ function getStyles(theme: GrafanaTheme2) {
      width: theme.spacing(3),
    }),
    round: css({
-      borderRadius: '50%',
+      borderRadius: theme.shape.radius.circle,
    }),
  };
 }
--- a/public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx
+++ b/public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx
@ -22,7 +22,7 @@ const getStyles = (theme: GrafanaTheme2) => {
  return {
    highlight: css`
      background-color: ${theme.colors.success.main};
-      border-radius: 50%;
+      border-radius: ${theme.shape.radius.circle};
      width: 6px;
      height: 6px;
      display: inline-block;
--- a/public/app/core/components/AppChrome/TopBar/TopSearchBar.tsx
+++ b/public/app/core/components/AppChrome/TopBar/TopSearchBar.tsx
@ -99,7 +99,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
  profileButton: css({
    padding: theme.spacing(0, 0.25),
    img: {
-      borderRadius: '50%',
+      borderRadius: theme.shape.radius.circle,
      height: '24px',
      marginRight: 0,
      width: '24px',
--- a/public/app/features/admin/LicenseChrome.tsx
+++ b/public/app/features/admin/LicenseChrome.tsx
@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { useStyles2, useTheme2 } from '@grafana/ui';

 const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' };

@ -77,6 +77,7 @@ interface CircleProps {
 }

 export const Circle = ({ size, style, children }: React.PropsWithChildren<CircleProps>) => {
+  const theme = useTheme2();
  return (
    <div
      style={{
@ -85,7 +86,7 @@ export const Circle = ({ size, style, children }: React.PropsWithChildren<Circle
        position: 'absolute',
        bottom: 0,
        right: 0,
-        borderRadius: '50%',
+        borderRadius: theme.shape.radius.circle,
        ...style,
      }}
    >
--- a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx
@ -57,7 +57,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
    width: ${theme.spacing(4)};
    height: ${theme.spacing(4)};
    line-height: ${theme.spacing(4)};
-    border-radius: 100%;
+    border-radius: ${theme.shape.radius.circle};
    text-align: center;
    color: ${theme.colors.text.maxContrast};
    background-color: ${theme.colors.background.canvas};
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx
@ -28,7 +28,7 @@ const getStyles = (theme: GrafanaTheme2) => {
  const common: CSSObject = {
    width: 8,
    height: 8,
-    borderRadius: '50%',
+    borderRadius: theme.shape.radius.circle,
    marginLeft: theme.spacing(1),
    position: 'relative',
    top: '-1px',
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
@ -40,7 +40,7 @@ function getStyles(theme: GrafanaTheme2) {
      height: 10px;
      background: ${theme.colors.text.disabled};
      box-shadow: 0 0 2px ${theme.colors.text.disabled};
-      border-radius: 50%;
+      border-radius: ${theme.shape.radius.circle};
      position: relative;
      top: 6px;
      right: 1px;
--- a/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
@ -52,7 +52,7 @@ const getStyles = (theme: GrafanaTheme2) => {
      font-size: ${theme.typography.bodySmall.fontSize};
    `,
    userAvatar: css`
-      border-radius: 50%;
+      border-radius: ${theme.shape.radius.circle};
      box-sizing: content-box;
      width: 22px;
      height: 22px;
--- a/public/app/features/logs/components/LogDetailsRow.tsx
+++ b/public/app/features/logs/components/LogDetailsRow.tsx
@ -46,7 +46,7 @@ const getStyles = memoizeOne((theme: GrafanaTheme2) => {
        color: ${theme.colors.text.secondary};
        padding: 0;
        justify-content: center;
-        border-radius: 50%;
+        border-radius: ${theme.shape.radius.circle};
        height: ${theme.spacing(theme.components.height.sm)};
        width: ${theme.spacing(theme.components.height.sm)};
        svg {
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox.tsx
@ -48,7 +48,7 @@ const getStyles = (theme: GrafanaTheme2) => {
      background: theme.colors.secondary.main,
      width: '20px',
      height: '20px',
-      borderRadius: '50%',
+      borderRadius: theme.shape.radius.circle,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
--- a/public/app/plugins/panel/annolist/AnnotationListItem.tsx
+++ b/public/app/plugins/panel/annolist/AnnotationListItem.tsx
@ -148,7 +148,7 @@ function getStyles(theme: GrafanaTheme2) {
      margin: 0,
      padding: theme.spacing(0.5),
      img: {
-        borderRadius: '50%',
+        borderRadius: theme.shape.radius.circle,
        width: theme.spacing(2),
        height: theme.spacing(2),
      },
--- a/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx
+++ b/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx
@ -142,7 +142,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
    pointer-events: auto;
    width: 16px;
    height: 16px;
-    border-radius: 50%;
+    border-radius: ${theme.shape.radius.circle};
    display: none;
    z-index: 110;
  `,
--- a/public/app/plugins/panel/geomap/components/MarkersLegend.tsx
+++ b/public/app/plugins/panel/geomap/components/MarkersLegend.tsx
@ -159,7 +159,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
      float: left;
      margin-right: 8px;
      opacity: 0.7;
-      border-radius: 50%;
+      border-radius: ${theme.shape.radius.circle};
    }
  `,
  legendItem: css`
--- a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx
@ -124,7 +124,7 @@ const getStyles = (theme: GrafanaTheme2) => {
      }
    `,
    avatar: css`
-      border-radius: 50%;
+      border-radius: ${theme.shape.radius.circle};
      width: 16px;
      height: 16px;
      margin-right: ${theme.spacing(1)};