@sproutsocial/seeds-react-progress 0.1.0 → 0.2.0

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     3.27 KB
-CJS dist/index.js.map 3.51 KB
-CJS ⚡️ Build success in 14ms
-ESM dist/esm/index.js     1.46 KB
-ESM dist/esm/index.js.map 3.41 KB
-ESM ⚡️ Build success in 14ms
+CJS dist/index.js     3.31 KB
+CJS dist/index.js.map 3.70 KB
+CJS ⚡️ Build success in 111ms
+ESM dist/esm/index.js     1.50 KB
+ESM dist/esm/index.js.map 3.60 KB
+ESM ⚡️ Build success in 112ms
 DTS Build start
-DTS ⚡️ Build success in 3861ms
-DTS dist/index.d.ts  1.11 KB
-DTS dist/index.d.mts 1.11 KB
-Done in 4.84s.
+DTS ⚡️ Build success in 7484ms
+DTS dist/index.d.ts  1.25 KB
+DTS dist/index.d.mts 1.25 KB
+Done in 9.51s.

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @sproutsocial/seeds-react-progress
 
+## 0.2.0
+
+### Minor Changes
+
+- b3744f2: Add trackStyle prop to Progress component
+
+  This change adds a dedicated `trackStyle` prop for styling the track (background bar) of the Progress component, enabling cleaner separation of track and indicator styling.
+
+  **Key Changes:**
+
+  - Add `trackStyle` prop for styling the track (background bar)
+  - Remove generic `style` prop to eliminate API ambiguity
+  - Simplify implementation by removing complex prop merging logic
+  - Update tests, documentation, and Storybook stories
+
+  **Migration:**
+  This is technically a breaking change (removes `style` prop), but has zero impact on existing consumers - only 2 files in web-app-core use Progress, and neither uses the `style` prop.
+
+  **Benefits:**
+
+  - Clear, semantic API with dedicated props for track vs indicator styling
+  - Simpler implementation (no runtime merging overhead)
+  - Better TypeScript type safety
+  - Self-documenting code
+
+  Resolves GROWTH-1932
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/esm/index.js

@@ -31,6 +31,7 @@ var Progress2 = ({
   value,
   max = 100,
   getValueLabel,
+  trackStyle,
   indicatorStyle,
   ...rest
 }) => {
@@ -42,6 +43,7 @@ var Progress2 = ({
       max,
       getValueLabel,
       "data-qa-progress": "",
+      style: trackStyle,
       ...rest,
       children: /* @__PURE__ */ jsx(
         StyledIndicator,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Progress.tsx","../../src/styles.ts","../../src/ProgressTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { StyledRoot, StyledIndicator } from \"./styles\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\nexport const Progress = ({\n  value,\n  max = 100,\n  getValueLabel,\n  indicatorStyle,\n  ...rest\n}: TypeProgressProps) => {\n  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n  return (\n    <StyledRoot\n      value={value}\n      max={max}\n      getValueLabel={getValueLabel}\n      data-qa-progress=\"\"\n      {...rest}\n    >\n      <StyledIndicator\n        style={{\n          transform: `translateX(-${100 - percentage}%)`,\n          ...indicatorStyle,\n        }}\n      />\n    </StyledRoot>\n  );\n};\n","import styled from \"styled-components\";\nimport * as Progress from \"@radix-ui/react-progress\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledRoot = styled(Progress.Root).attrs({\n  className: \"Progress\",\n})`\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 8px;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const StyledIndicator = styled(Progress.Indicator)`\n  height: 100%;\n  width: 100%;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.icon.base};\n  transition: transform 150ms ease;\n`;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeAriaLabel =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: string; \"aria-labelledby\": string };\n\nexport type TypeProgressProps = TypeStyledComponentsCommonProps &\n  TypeSystemCommonProps &\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> &\n  TypeAriaLabel & {\n    /** The current progress value */\n    value: number;\n    /** The maximum progress value. Defaults to 100 */\n    max?: number;\n    /** A function to get the accessible label text representing the current value. Defaults to \"{value}%\" */\n    getValueLabel?: (value: number, max: number) => string;\n    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */\n    indicatorStyle?: React.CSSProperties;\n  };\n","import { Progress } from \"./Progress\";\n\nexport default Progress;\nexport { Progress };\nexport * from \"./ProgressTypes\";\n"],"mappings":";AAAA,OAAuB;;;ACAvB,OAAO,YAAY;AACnB,YAAY,cAAc;AAC1B,SAAS,cAAc;AAEhB,IAAM,aAAa,OAAgB,aAAI,EAAE,MAAM;AAAA,EACpD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKkB,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAE7D,MAAM;AAAA;AAGH,IAAM,kBAAkB,OAAgB,kBAAS;AAAA;AAAA;AAAA,mBAGrC,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;;;ADA/C;AAjBC,IAAMA,YAAW,CAAC;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,aAAa,MAAM,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,GAAG,IAAI;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAiB;AAAA,MAChB,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,WAAW,eAAe,MAAM,UAAU;AAAA,YAC1C,GAAG;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AE7BA,OAAuB;;;ACEvB,IAAO,gBAAQC;","names":["Progress","Progress"]}
+{"version":3,"sources":["../../src/Progress.tsx","../../src/styles.ts","../../src/ProgressTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { StyledRoot, StyledIndicator } from \"./styles\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\nexport const Progress = ({\n  value,\n  max = 100,\n  getValueLabel,\n  trackStyle,\n  indicatorStyle,\n  ...rest\n}: TypeProgressProps) => {\n  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n  return (\n    <StyledRoot\n      value={value}\n      max={max}\n      getValueLabel={getValueLabel}\n      data-qa-progress=\"\"\n      style={trackStyle}\n      {...rest}\n    >\n      <StyledIndicator\n        style={{\n          transform: `translateX(-${100 - percentage}%)`,\n          ...indicatorStyle,\n        }}\n      />\n    </StyledRoot>\n  );\n};\n","import styled from \"styled-components\";\nimport * as Progress from \"@radix-ui/react-progress\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledRoot = styled(Progress.Root).attrs({\n  className: \"Progress\",\n})`\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 8px;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const StyledIndicator = styled(Progress.Indicator)`\n  height: 100%;\n  width: 100%;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.icon.base};\n  transition: transform 150ms ease;\n`;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeAriaLabel =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: string; \"aria-labelledby\": string };\n\nexport type TypeProgressProps = TypeStyledComponentsCommonProps &\n  TypeSystemCommonProps &\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"style\"> &\n  TypeAriaLabel & {\n    /** The current progress value */\n    value: number;\n    /** The maximum progress value. Defaults to 100 */\n    max?: number;\n    /** A function to get the accessible label text representing the current value. Defaults to \"{value}%\" */\n    getValueLabel?: (value: number, max: number) => string;\n    /** Custom CSS for the track (background) element, e.g. backgroundColor */\n    trackStyle?: React.CSSProperties;\n    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */\n    indicatorStyle?: React.CSSProperties;\n  };\n","import { Progress } from \"./Progress\";\n\nexport default Progress;\nexport { Progress };\nexport * from \"./ProgressTypes\";\n"],"mappings":";AAAA,OAAuB;;;ACAvB,OAAO,YAAY;AACnB,YAAY,cAAc;AAC1B,SAAS,cAAc;AAEhB,IAAM,aAAa,OAAgB,aAAI,EAAE,MAAM;AAAA,EACpD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKkB,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAE7D,MAAM;AAAA;AAGH,IAAM,kBAAkB,OAAgB,kBAAS;AAAA;AAAA;AAAA,mBAGrC,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;;;ADE/C;AAnBC,IAAMA,YAAW,CAAC;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,aAAa,MAAM,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,GAAG,IAAI;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAiB;AAAA,MACjB,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,WAAW,eAAe,MAAM,UAAU;AAAA,YAC1C,GAAG;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AE/BA,OAAuB;;;ACEvB,IAAO,gBAAQC;","names":["Progress","Progress"]}

package/dist/index.d.mts

@@ -9,17 +9,19 @@ type TypeAriaLabel = {
     "aria-label"?: string;
     "aria-labelledby": string;
 };
-type TypeProgressProps = TypeStyledComponentsCommonProps & TypeSystemCommonProps & Omit<React.ComponentPropsWithoutRef<"div">, "color"> & TypeAriaLabel & {
+type TypeProgressProps = TypeStyledComponentsCommonProps & TypeSystemCommonProps & Omit<React.ComponentPropsWithoutRef<"div">, "color" | "style"> & TypeAriaLabel & {
     /** The current progress value */
     value: number;
     /** The maximum progress value. Defaults to 100 */
     max?: number;
     /** A function to get the accessible label text representing the current value. Defaults to "{value}%" */
     getValueLabel?: (value: number, max: number) => string;
+    /** Custom CSS for the track (background) element, e.g. backgroundColor */
+    trackStyle?: React.CSSProperties;
     /** Custom CSS for the indicator (fill) element, e.g. a gradient background */
     indicatorStyle?: React.CSSProperties;
 };
 
-declare const Progress: ({ value, max, getValueLabel, indicatorStyle, ...rest }: TypeProgressProps) => react_jsx_runtime.JSX.Element;
+declare const Progress: ({ value, max, getValueLabel, trackStyle, indicatorStyle, ...rest }: TypeProgressProps) => react_jsx_runtime.JSX.Element;
 
 export { Progress, type TypeProgressProps, Progress as default };

package/dist/index.d.ts

@@ -9,17 +9,19 @@ type TypeAriaLabel = {
     "aria-label"?: string;
     "aria-labelledby": string;
 };
-type TypeProgressProps = TypeStyledComponentsCommonProps & TypeSystemCommonProps & Omit<React.ComponentPropsWithoutRef<"div">, "color"> & TypeAriaLabel & {
+type TypeProgressProps = TypeStyledComponentsCommonProps & TypeSystemCommonProps & Omit<React.ComponentPropsWithoutRef<"div">, "color" | "style"> & TypeAriaLabel & {
     /** The current progress value */
     value: number;
     /** The maximum progress value. Defaults to 100 */
     max?: number;
     /** A function to get the accessible label text representing the current value. Defaults to "{value}%" */
     getValueLabel?: (value: number, max: number) => string;
+    /** Custom CSS for the track (background) element, e.g. backgroundColor */
+    trackStyle?: React.CSSProperties;
     /** Custom CSS for the indicator (fill) element, e.g. a gradient background */
     indicatorStyle?: React.CSSProperties;
 };
 
-declare const Progress: ({ value, max, getValueLabel, indicatorStyle, ...rest }: TypeProgressProps) => react_jsx_runtime.JSX.Element;
+declare const Progress: ({ value, max, getValueLabel, trackStyle, indicatorStyle, ...rest }: TypeProgressProps) => react_jsx_runtime.JSX.Element;
 
 export { Progress, type TypeProgressProps, Progress as default };

package/dist/index.js

@@ -68,6 +68,7 @@ var Progress2 = ({
   value,
   max = 100,
   getValueLabel,
+  trackStyle,
   indicatorStyle,
   ...rest
 }) => {
@@ -79,6 +80,7 @@ var Progress2 = ({
       max,
       getValueLabel,
       "data-qa-progress": "",
+      style: trackStyle,
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         StyledIndicator,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Progress.tsx","../src/styles.ts","../src/ProgressTypes.ts"],"sourcesContent":["import { Progress } from \"./Progress\";\n\nexport default Progress;\nexport { Progress };\nexport * from \"./ProgressTypes\";\n","import * as React from \"react\";\nimport { StyledRoot, StyledIndicator } from \"./styles\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\nexport const Progress = ({\n  value,\n  max = 100,\n  getValueLabel,\n  indicatorStyle,\n  ...rest\n}: TypeProgressProps) => {\n  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n  return (\n    <StyledRoot\n      value={value}\n      max={max}\n      getValueLabel={getValueLabel}\n      data-qa-progress=\"\"\n      {...rest}\n    >\n      <StyledIndicator\n        style={{\n          transform: `translateX(-${100 - percentage}%)`,\n          ...indicatorStyle,\n        }}\n      />\n    </StyledRoot>\n  );\n};\n","import styled from \"styled-components\";\nimport * as Progress from \"@radix-ui/react-progress\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledRoot = styled(Progress.Root).attrs({\n  className: \"Progress\",\n})`\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 8px;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const StyledIndicator = styled(Progress.Indicator)`\n  height: 100%;\n  width: 100%;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.icon.base};\n  transition: transform 150ms ease;\n`;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeAriaLabel =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: string; \"aria-labelledby\": string };\n\nexport type TypeProgressProps = TypeStyledComponentsCommonProps &\n  TypeSystemCommonProps &\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> &\n  TypeAriaLabel & {\n    /** The current progress value */\n    value: number;\n    /** The maximum progress value. Defaults to 100 */\n    max?: number;\n    /** A function to get the accessible label text representing the current value. Defaults to \"{value}%\" */\n    getValueLabel?: (value: number, max: number) => string;\n    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */\n    indicatorStyle?: React.CSSProperties;\n  };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,kBAAAA;AAAA,EAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAmB;AACnB,eAA0B;AAC1B,sCAAuB;AAEhB,IAAM,iBAAa,yBAAAC,SAAgB,aAAI,EAAE,MAAM;AAAA,EACpD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKkB,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAE7D,sCAAM;AAAA;AAGH,IAAM,sBAAkB,yBAAAA,SAAgB,kBAAS;AAAA;AAAA;AAAA,mBAGrC,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;;;ADA/C;AAjBC,IAAMC,YAAW,CAAC;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,aAAa,MAAM,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,GAAG,IAAI;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAiB;AAAA,MAChB,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,WAAW,eAAe,MAAM,UAAU;AAAA,YAC1C,GAAG;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AE7BA,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQC;","names":["Progress","styled","Progress","React","Progress"]}
+{"version":3,"sources":["../src/index.ts","../src/Progress.tsx","../src/styles.ts","../src/ProgressTypes.ts"],"sourcesContent":["import { Progress } from \"./Progress\";\n\nexport default Progress;\nexport { Progress };\nexport * from \"./ProgressTypes\";\n","import * as React from \"react\";\nimport { StyledRoot, StyledIndicator } from \"./styles\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\nexport const Progress = ({\n  value,\n  max = 100,\n  getValueLabel,\n  trackStyle,\n  indicatorStyle,\n  ...rest\n}: TypeProgressProps) => {\n  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n  return (\n    <StyledRoot\n      value={value}\n      max={max}\n      getValueLabel={getValueLabel}\n      data-qa-progress=\"\"\n      style={trackStyle}\n      {...rest}\n    >\n      <StyledIndicator\n        style={{\n          transform: `translateX(-${100 - percentage}%)`,\n          ...indicatorStyle,\n        }}\n      />\n    </StyledRoot>\n  );\n};\n","import styled from \"styled-components\";\nimport * as Progress from \"@radix-ui/react-progress\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledRoot = styled(Progress.Root).attrs({\n  className: \"Progress\",\n})`\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 8px;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const StyledIndicator = styled(Progress.Indicator)`\n  height: 100%;\n  width: 100%;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.icon.base};\n  transition: transform 150ms ease;\n`;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeAriaLabel =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: string; \"aria-labelledby\": string };\n\nexport type TypeProgressProps = TypeStyledComponentsCommonProps &\n  TypeSystemCommonProps &\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"style\"> &\n  TypeAriaLabel & {\n    /** The current progress value */\n    value: number;\n    /** The maximum progress value. Defaults to 100 */\n    max?: number;\n    /** A function to get the accessible label text representing the current value. Defaults to \"{value}%\" */\n    getValueLabel?: (value: number, max: number) => string;\n    /** Custom CSS for the track (background) element, e.g. backgroundColor */\n    trackStyle?: React.CSSProperties;\n    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */\n    indicatorStyle?: React.CSSProperties;\n  };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,kBAAAA;AAAA,EAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAmB;AACnB,eAA0B;AAC1B,sCAAuB;AAEhB,IAAM,iBAAa,yBAAAC,SAAgB,aAAI,EAAE,MAAM;AAAA,EACpD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKkB,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAE7D,sCAAM;AAAA;AAGH,IAAM,sBAAkB,yBAAAA,SAAgB,kBAAS;AAAA;AAAA;AAAA,mBAGrC,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;;;ADE/C;AAnBC,IAAMC,YAAW,CAAC;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,aAAa,MAAM,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,GAAG,IAAI;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAiB;AAAA,MACjB,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,WAAW,eAAe,MAAM,UAAU;AAAA,YAC1C,GAAG;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AE/BA,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQC;","names":["Progress","styled","Progress","React","Progress"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-progress",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Seeds React Progress",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/Progress.stories.tsx

@@ -81,3 +81,18 @@ export const CustomGradient: Story = {
     },
   },
 };
+
+export const CustomTrackAndIndicator: Story = {
+  args: {
+    value: 67,
+    "aria-label": "Progress",
+    trackStyle: {
+      backgroundColor: "#F59E0B",
+    },
+    indicatorStyle: {
+      backgroundColor: "#059669",
+    },
+  },
+};
+
+CustomTrackAndIndicator.storyName = "Custom Track and Indicator";

package/src/Progress.tsx

@@ -6,6 +6,7 @@ export const Progress = ({
   value,
   max = 100,
   getValueLabel,
+  trackStyle,
   indicatorStyle,
   ...rest
 }: TypeProgressProps) => {
@@ -17,6 +18,7 @@ export const Progress = ({
       max={max}
       getValueLabel={getValueLabel}
       data-qa-progress=""
+      style={trackStyle}
       {...rest}
     >
       <StyledIndicator

package/src/ProgressTypes.ts

@@ -10,7 +10,7 @@ type TypeAriaLabel =
 
 export type TypeProgressProps = TypeStyledComponentsCommonProps &
   TypeSystemCommonProps &
-  Omit<React.ComponentPropsWithoutRef<"div">, "color"> &
+  Omit<React.ComponentPropsWithoutRef<"div">, "color" | "style"> &
   TypeAriaLabel & {
     /** The current progress value */
     value: number;
@@ -18,6 +18,8 @@ export type TypeProgressProps = TypeStyledComponentsCommonProps &
     max?: number;
     /** A function to get the accessible label text representing the current value. Defaults to "{value}%" */
     getValueLabel?: (value: number, max: number) => string;
+    /** Custom CSS for the track (background) element, e.g. backgroundColor */
+    trackStyle?: React.CSSProperties;
     /** Custom CSS for the indicator (fill) element, e.g. a gradient background */
     indicatorStyle?: React.CSSProperties;
   };

package/src/__tests__/Progress.test.tsx

@@ -117,4 +117,17 @@ describe("Progress", () => {
       screen.getByRole("progressbar").closest("[data-qa-progress]")
     ).toBeTruthy();
   });
+
+  it("should apply trackStyle to the track", () => {
+    const { container } = render(
+      <Progress
+        value={50}
+        aria-label="Credits remaining"
+        trackStyle={{ backgroundColor: "red" }}
+      />
+    );
+
+    const track = container.querySelector(".Progress");
+    expect(track).toHaveStyle("background-color: red");
+  });
 });