Adding [x]Props to ProgressIndicators (#1442)

iTwin · Aug 4, 2023 · 16c0019 · 16c0019
1 parent 4e85ba7
commit 16c0019
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.test.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.test.tsx
@@ -81,3 +81,28 @@ it('renders ProgressLinear with 2 labels', () => {
   screen.getByText('Processing...');
   screen.getByText('test.dgn');
 });
+
+it('passes custom props to ProgressLinear parts', () => {
+  const value = 100;
+  const labels = ['Upload done!', '100%'];
+  const status = 'positive';
+  const { container } = render(
+    <ProgressLinear
+      value={value}
+      labels={labels}
+      labelGroupProps={{
+        className: 'custom-label-group-class',
+        style: { fontSize: 12 },
+      }}
+      status={status}
+    />,
+  );
+
+  // Label group test
+
+  const labelGroup = container.querySelector(
+    '.iui-progress-indicator-linear-label.custom-label-group-class',
+  ) as HTMLElement;
+  expect(labelGroup).toBeTruthy;
+  expect(labelGroup.style.fontSize).toBe('12px');
+});
diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx
@@ -31,6 +31,10 @@ type ProgressLinearProps = {
    * Status of progress.
    */
   status?: 'positive' | 'negative';
+  /**
+   * Pass props to ProgressLinear label group.
+   */
+  labelGroupProps?: React.ComponentProps<'div'>;
 };
 
 /**
@@ -56,6 +60,7 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
     isAnimated = false,
     status,
     className,
+    labelGroupProps,
     ...rest
   } = props;
 
@@ -76,7 +81,14 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
       {...rest}
     >
       {labels.length > 0 && (
-        <Box className='iui-progress-indicator-linear-label'>
+        <Box
+          as='div'
+          {...labelGroupProps}
+          className={cx(
+            'iui-progress-indicator-linear-label',
+            labelGroupProps?.className,
+          )}
+        >
           {labels.map((label, index) => (
             <span key={index}>{label}</span>
           ))}