From d46947ccb22cc40a2c7608ed4d9c67667938c848 Mon Sep 17 00:00:00 2001
From: Abhijnya002 <53806883+Abhijnya002@users.noreply.github.com>
Date: Tue, 6 Jan 2026 19:11:51 -0500
Subject: [PATCH] refactor: move outline style from inline to getSvgStyle CSS

- Move outline: 'none' from inline style prop to CSS styles
- Add outline: 'none' to all svgArg states (normal, highlighted, deemphasized)
- Addresses review feedback on code organization
---
 public/app/plugins/panel/piechart/PieChart.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/panel/piechart/PieChart.tsx b/public/app/plugins/panel/piechart/PieChart.tsx
index 8bf6d1ccbf5..fa10698d487 100644
--- a/public/app/plugins/panel/piechart/PieChart.tsx
+++ b/public/app/plugins/panel/piechart/PieChart.tsx
@@ -505,7 +505,6 @@ function PieSlice({
       onKeyDown={shouldBeFocusable ? handleKeyDown : undefined}
       onFocus={hasDataLinks ? handleFocus : undefined}
       onBlur={hasDataLinks ? handleBlur : undefined}
-      style={{ outline: 'none' }}
       data-testid={selectors.components.Panels.Visualization.PieChart.svgSlice}
     >
       <path d={pie.path({ ...arc })!} fill={fill} stroke={theme.colors.background.primary} strokeWidth={1} />
@@ -692,17 +691,20 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     svgArg: {
       normal: css({
+        outline: 'none',
         [theme.transitions.handleMotion('no-preference')]: {
           transition: 'all 200ms ease-in-out',
         },
       }),
       highlighted: css({
+        outline: 'none',
         [theme.transitions.handleMotion('no-preference')]: {
           transition: 'all 200ms ease-in-out',
         },
         transform: 'scale3d(1.03, 1.03, 1)',
       }),
       deemphasized: css({
+        outline: 'none',
         [theme.transitions.handleMotion('no-preference')]: {
           transition: 'all 200ms ease-in-out',
         },