From dafedf84cee50da6faab6077a9b9cd574a2fabbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 23 Sep 2025 14:05:12 +0200 Subject: [PATCH] ToolbarSwitch: Fixes internal border radius and other issues (#111432) --- .../new-toolbar/actions/ToolbarSwitch.tsx | 20 +++++-------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/public/app/features/dashboard-scene/scene/new-toolbar/actions/ToolbarSwitch.tsx b/public/app/features/dashboard-scene/scene/new-toolbar/actions/ToolbarSwitch.tsx index 6d9bac314b3..59262fc152e 100644 --- a/public/app/features/dashboard-scene/scene/new-toolbar/actions/ToolbarSwitch.tsx +++ b/public/app/features/dashboard-scene/scene/new-toolbar/actions/ToolbarSwitch.tsx @@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css'; import { MouseEvent } from 'react'; import { GrafanaTheme2, IconName } from '@grafana/data'; -import { Icon, Tooltip, useStyles2 } from '@grafana/ui'; +import { Icon, styleMixins, Tooltip, useStyles2 } from '@grafana/ui'; interface Props { icon: IconName; @@ -91,28 +91,18 @@ const getStyles = (theme: GrafanaTheme2) => ({ alignItems: 'center', justifyContent: 'center', width: theme.spacing(2.5), - height: theme.spacing(2.5), - borderRadius: theme.shape.radius.default, + height: '100%', transform: 'translateX(0)', position: 'relative', + borderRadius: styleMixins.getInternalRadius(theme, 2), + border: `1px solid ${theme.colors.secondary.border}`, [theme.transitions.handleMotion('no-preference', 'reduce')]: { transition: 'all 0.2s ease-in-out', }, - - '&:after': css({ - content: "''", - position: 'absolute', - top: 0, - left: 0, - right: 0, - bottom: 0, - borderRadius: theme.shape.radius.default, - background: theme.colors.secondary.main, - border: `1px solid ${theme.colors.secondary.border}`, - }), }), boxChecked: css({ transform: `translateX(calc(100% - ${theme.spacing(0.25)}))`, + borderColor: 'transparent', }), });