feat: implement style api for progress bar component

build-tools/utils/custom-css-properties.js

@@ -116,5 +116,10 @@ const customCssPropertiesList = [
   'alertFocusRingBorderWidth',
   'alertFocusRingBoxShadow',
   'alertIconColor',
+  // Progress bar style properties
+  'progressBarBackgroundColor',
+  'progressBarBorderRadius',
+  'progressBarHeight',
+  'progressValueBackgroundColor',
 ];
 module.exports = customCssPropertiesList;

pages/progress-bar/style-permutations.page.tsx

@@ -0,0 +1,104 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ProgressBar, { ProgressBarProps } from '~components/progress-bar';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+
+const permutations = createPermutations<ProgressBarProps>([
+  {
+    value: [45, 75, 99, 100],
+    status: ['in-progress'],
+    style: [
+      {
+        progressBar: {
+          backgroundColor: '#ccfbf1',
+          borderRadius: '8px',
+          height: '8px',
+        },
+        progressValue: {
+          backgroundColor: '#14b8a6',
+        },
+        progressPercentage: {
+          color: 'light-dark(#0d5c54, #5eead4)',
+          fontSize: '14px',
+          fontWeight: '600',
+        },
+      },
+      {
+        progressBar: {
+          backgroundColor: '#fee2e2',
+          borderRadius: '4px',
+          height: '10px',
+        },
+        progressValue: {
+          backgroundColor: '#ef4444',
+        },
+        progressPercentage: {
+          color: 'light-dark(#7f1d1d, #fca5a5)',
+          fontSize: '14px',
+          fontWeight: '600',
+        },
+      },
+      {
+        progressBar: {
+          backgroundColor: '#fef3c7',
+          borderRadius: '16px',
+          height: '10px',
+        },
+        progressValue: {
+          backgroundColor: '#f59e0b',
+        },
+        progressPercentage: {
+          color: 'light-dark(#78350f, #fcd34d)',
+          fontSize: '16px',
+          fontWeight: '700',
+        },
+      },
+      {
+        progressBar: {
+          backgroundColor: '#dbeafe',
+          borderRadius: '4px',
+          height: '6px',
+        },
+        progressValue: {
+          backgroundColor: '#3b82f6',
+        },
+        progressPercentage: {
+          color: 'light-dark(#1e40af, #93c5fd)',
+          fontSize: '12px',
+          fontWeight: '500',
+        },
+      },
+      {
+        progressBar: {
+          backgroundColor: '#f3e8ff',
+          borderRadius: '0px',
+          height: '12px',
+        },
+        progressValue: {
+          backgroundColor: '#a855f7',
+        },
+        progressPercentage: {
+          color: 'light-dark(#6b21a8, #d8b4fe)',
+          fontSize: '16px',
+          fontWeight: '700',
+        },
+      },
+    ],
+  },
+]);
+
+export default function ProgressBarStylePermutations() {
+  return (
+    <>
+      <h1>Progress Bar Style permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView permutations={permutations} render={permutation => <ProgressBar {...permutation} />} />
+      </ScreenshotArea>
+    </>
+  );
+}

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -18381,6 +18381,88 @@ Add a button using the \`action\` property of the flashbar item instead.",
       "optional": true,
       "type": "string",
     },
+    {
+      "inlineType": {
+        "name": "ProgressBarProps.Style",
+        "properties": [
+          {
+            "inlineType": {
+              "name": "object",
+              "properties": [
+                {
+                  "name": "backgroundColor",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "borderRadius",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "height",
+                  "optional": true,
+                  "type": "string",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "progressBar",
+            "optional": true,
+            "type": "{ backgroundColor?: string | undefined; borderRadius?: string | undefined; height?: string | undefined; }",
+          },
+          {
+            "inlineType": {
+              "name": "{ color?: string | undefined; fontSize?: string | undefined; fontWeight?: string | undefined; }",
+              "properties": [
+                {
+                  "name": "color",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "fontSize",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "fontWeight",
+                  "optional": true,
+                  "type": "string",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "progressPercentage",
+            "optional": true,
+            "type": "{ color?: string | undefined; fontSize?: string | undefined; fontWeight?: string | undefined; }",
+          },
+          {
+            "inlineType": {
+              "name": "{ backgroundColor?: string | undefined; }",
+              "properties": [
+                {
+                  "name": "backgroundColor",
+                  "optional": true,
+                  "type": "string",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "progressValue",
+            "optional": true,
+            "type": "{ backgroundColor?: string | undefined; }",
+          },
+        ],
+        "type": "object",
+      },
+      "name": "style",
+      "optional": true,
+      "systemTags": [
+        "core",
+      ],
+      "type": "ProgressBarProps.Style",
+    },
     {
       "defaultValue": "0",
       "description": "Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.",

src/progress-bar/__tests__/styles.test.tsx

@@ -0,0 +1,138 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import customCssProps from '../../internal/generated/custom-css-properties';
+import { getProgressPercentageStyles, getProgressStyles, getProgressValueStyles } from '../styles';
+
+// Mock the environment module
+jest.mock('../../internal/environment', () => ({
+  SYSTEM: 'core',
+}));
+
+describe('getProgressStyles', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  test('returns undefined when no style is provided', () => {
+    expect(getProgressStyles(undefined)).toBeUndefined();
+    expect(getProgressStyles({})).toBeUndefined();
+  });
+
+  test('returns progress bar styles when provided', () => {
+    const style = {
+      progressBar: {
+        backgroundColor: '#e0e0e0',
+        borderRadius: '8px',
+        height: '8px',
+      },
+    };
+
+    expect(getProgressStyles(style)).toEqual({
+      [customCssProps.progressBarBackgroundColor]: '#e0e0e0',
+      [customCssProps.progressBarBorderRadius]: '8px',
+      [customCssProps.progressBarHeight]: '8px',
+    });
+  });
+
+  test('returns undefined when SYSTEM is not core', async () => {
+    jest.resetModules();
+    jest.doMock('../../internal/environment', () => ({
+      SYSTEM: 'visual-refresh',
+    }));
+
+    const { getProgressStyles: getProgressStylesNonCore } = await import('../styles');
+
+    const style = {
+      progressBar: {
+        backgroundColor: '#e0e0e0',
+      },
+    };
+
+    expect(getProgressStylesNonCore(style)).toBeUndefined();
+  });
+});
+
+describe('getProgressValueStyles', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  test('returns undefined when no style is provided', () => {
+    expect(getProgressValueStyles(undefined)).toBeUndefined();
+    expect(getProgressValueStyles({})).toBeUndefined();
+  });
+
+  test('returns progress value styles when provided', () => {
+    const style = {
+      progressValue: {
+        backgroundColor: '#0073bb',
+      },
+    };
+
+    expect(getProgressValueStyles(style)).toEqual({
+      [customCssProps.progressValueBackgroundColor]: '#0073bb',
+    });
+  });
+
+  test('returns undefined when SYSTEM is not core', async () => {
+    jest.resetModules();
+    jest.doMock('../../internal/environment', () => ({
+      SYSTEM: 'visual-refresh',
+    }));
+
+    const { getProgressValueStyles: getProgressValueStylesNonCore } = await import('../styles');
+
+    const style = {
+      progressValue: {
+        backgroundColor: '#0073bb',
+      },
+    };
+
+    expect(getProgressValueStylesNonCore(style)).toBeUndefined();
+  });
+});
+
+describe('getProgressPercentageStyles', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  test('returns undefined when no style is provided', () => {
+    expect(getProgressPercentageStyles(undefined)).toBeUndefined();
+    expect(getProgressPercentageStyles({})).toBeUndefined();
+  });
+
+  test('returns progress percentage styles when provided', () => {
+    const style = {
+      progressPercentage: {
+        color: '#0073bb',
+        fontSize: '14px',
+        fontWeight: '600',
+      },
+    };
+
+    expect(getProgressPercentageStyles(style)).toEqual({
+      color: '#0073bb',
+      fontSize: '14px',
+      fontWeight: '600',
+    });
+  });
+
+  test('returns undefined when SYSTEM is not core', async () => {
+    jest.resetModules();
+    jest.doMock('../../internal/environment', () => ({
+      SYSTEM: 'visual-refresh',
+    }));
+
+    const { getProgressPercentageStyles: getProgressPercentageStylesNonCore } = await import('../styles');
+
+    const style = {
+      progressPercentage: {
+        color: '#0073bb',
+      },
+    };
+
+    expect(getProgressPercentageStylesNonCore(style)).toBeUndefined();
+  });
+});

src/progress-bar/index.tsx

@@ -35,6 +35,7 @@ export default function ProgressBar({
   additionalInfo,
   resultText,
   onResultButtonClick,
+  style,
   ...rest
 }: ProgressBarProps) {
   const { __internalRootRef } = useBaseComponent('ProgressBar', {
@@ -96,6 +97,7 @@ export default function ProgressBar({
                   ariaDescribedby
                 )}
                 isInFlash={isInFlash}
+                style={style}
               />
               <InternalLiveRegion hidden={true} tagName="span" delay={0}>
                 {label}

src/progress-bar/interfaces.ts

@@ -82,9 +82,30 @@ export interface ProgressBarProps extends BaseComponentProps {
    * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.
    */
   onResultButtonClick?: NonCancelableEventHandler;
+
+  /**
+   * @awsuiSystem core
+   */
+  style?: ProgressBarProps.Style;
 }
 
 export namespace ProgressBarProps {
   export type Status = 'in-progress' | 'success' | 'error';
   export type Variant = 'standalone' | 'flash' | 'key-value';
+
+  export interface Style {
+    progressBar?: {
+      backgroundColor?: string;
+      borderRadius?: string;
+      height?: string;
+    };
+    progressValue?: {
+      backgroundColor?: string;
+    };
+    progressPercentage?: {
+      color?: string;
+      fontSize?: string;
+      fontWeight?: string;
+    };
+  }
 }