(superset) branch master updated: fix(dashboard): match auto-refresh paused-dot outline to icon color (#39909)

[ri...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

richardfogaca pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 8088c5d1dea fix(dashboard): match auto-refresh paused-dot outline to icon color (#39909)
8088c5d1dea is described below

commit 8088c5d1dea9d34a095dcb3ba62365cd8ced1e64
Author: Richard Fogaca Nienkotter <63...@users.noreply.github.com>
AuthorDate: Thu May 7 13:07:52 2026 -0300

    fix(dashboard): match auto-refresh paused-dot outline to icon color (#39909)
---
 .../components/AutoRefreshStatus/StatusIndicatorDot.test.tsx | 12 +++++++++++-
 .../components/AutoRefreshStatus/StatusIndicatorDot.tsx      | 12 ++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.test.tsx b/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.test.tsx
index 544dbf2a2c4..e085fb25ff9 100644
--- a/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.test.tsx
+++ b/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.test.tsx
@@ -17,7 +17,8 @@
  * under the License.
  */
 import { render, screen, act } from 'spec/helpers/testing-library';
-import { StatusIndicatorDot } from './StatusIndicatorDot';
+import { supersetTheme } from '@apache-superset/core/theme';
+import { getStatusConfig, StatusIndicatorDot } from './StatusIndicatorDot';
 import { AutoRefreshStatus } from '../../types/autoRefresh';
 
 afterEach(() => {
@@ -62,6 +63,15 @@ test('renders with paused status', () => {
   expect(dot).toHaveAttribute('data-status', AutoRefreshStatus.Paused);
 });
 
+test('uses the icon color for the paused status outline', () => {
+  expect(
+    getStatusConfig(supersetTheme, AutoRefreshStatus.Paused),
+  ).toMatchObject({
+    needsBorder: true,
+    outlineColor: 'currentColor',
+  });
+});
+
 test('has correct accessibility attributes', () => {
   render(<StatusIndicatorDot status={AutoRefreshStatus.Success} />);
   const dot = screen.getByTestId('status-indicator-dot');
diff --git a/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.tsx b/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.tsx
index 6d1766c1052..39a33546cb9 100644
--- a/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.tsx
+++ b/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.tsx
@@ -39,9 +39,10 @@ export interface StatusIndicatorDotProps {
 interface StatusConfig {
   color: string;
   needsBorder: boolean;
+  outlineColor?: string;
 }
 
-const getStatusConfig = (
+export const getStatusConfig = (
   theme: ReturnType<typeof useTheme>,
   status: AutoRefreshStatus,
 ): StatusConfig => {
@@ -75,6 +76,7 @@ const getStatusConfig = (
       return {
         color: theme.colorBgContainer,
         needsBorder: true,
+        outlineColor: 'currentColor',
       };
     default:
       return {
@@ -136,13 +138,15 @@ export const StatusIndicatorDot: FC<StatusIndicatorDotProps> = ({
       width: ${size}px;
       height: ${size}px;
       border-radius: 50%;
+      color: ${theme.colorTextSecondary};
       background-color: ${statusConfig.color};
       transition:
         background-color ${theme.motionDurationMid} ease-in-out,
         border-color ${theme.motionDurationMid} ease-in-out;
-      border: ${statusConfig.needsBorder
-        ? `1px solid ${theme.colorBorder}`
-        : 'none'};
+      border: ${statusConfig.needsBorder ? '1px solid' : 'none'};
+      border-color: ${statusConfig.needsBorder
+        ? statusConfig.outlineColor
+        : 'transparent'};
       box-shadow: ${statusConfig.needsBorder
         ? 'none'
         : `0 0 0 2px ${theme.colorBgContainer}`};