update type

Author: kendallgassner

packages/react/src/ProgressBar/ProgressBar.features.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type {Meta} from '@storybook/react'
-import {ProgressBar, Text} from '..'
+import {ProgressBar} from '..'
 
 export default {
   title: 'Components/ProgressBar/Features',

packages/react/src/ProgressBar/ProgressBar.stories.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect} from 'react'
 import type {Meta} from '@storybook/react'
-import {ProgressBar, type ProgressBarProps} from '..'
+import {ProgressBar} from '..'
+import type {ProgressBarBaseProps} from './ProgressBar'
 
 const sectionColorsDefault = [
   'success.emphasis',
@@ -18,7 +19,7 @@ export default {
 
 export const Default = () => <ProgressBar aria-label="Upload test.png" />
 
-export const Playground = ({sections, ...args}: ProgressBarProps & {sections: number}) => {
+export const Playground = ({sections, ...args}: ProgressBarBaseProps & {sections: number}) => {
   const [sectionColors, setSectionColors] = React.useState(sectionColorsDefault)
 
   useEffect(() => {
@@ -31,9 +32,9 @@ export const Playground = ({sections, ...args}: ProgressBarProps & {sections: nu
     return <ProgressBar {...args} sx={args.inline ? {width: '100px'} : {}} aria-label="Upload test.png" />
   } else {
     return (
-      <ProgressBar aria-label="Upload test.png">
+      <ProgressBar>
         {[...Array(sections).keys()].map(i => (
-          <ProgressBar.Item key={i} progress={100 / sections} bg={sectionColors[i]} />
+          <ProgressBar.Item key={i} progress={100 / sections} bg={sectionColors[i]} aria-label="Upload test.png" />
         ))}
       </ProgressBar>
     )

packages/react/src/ProgressBar/ProgressBar.tsx

@@ -73,7 +73,7 @@ const ProgressContainer = toggleStyledComponent(
 )
 
 export type ProgressBarItems = React.HTMLAttributes<HTMLSpanElement> & {
-  'aria-label'?: string
+  'aria-label': string
   className?: string
 } & ProgressProp &
   SxProp
@@ -127,63 +127,75 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
 
 Item.displayName = 'ProgressBar.Item'
 
-export type ProgressBarProps = React.HTMLAttributes<HTMLSpanElement> & {
-  bg?: string
-  className?: string
-} & StyledProgressContainerProps &
-  ProgressProp
-
-export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
-  (
-    {
-      animated,
-      progress,
-      bg = 'success.emphasis',
-      barSize = 'default',
-      children,
-      'aria-label': ariaLabel,
-      'aria-valuenow': ariaValueNow,
-      'aria-valuetext': ariaValueText,
-      className,
-      ...rest
-    }: ProgressBarProps,
-    forwardRef,
-  ) => {
-    if (children && progress) {
-      throw new Error('You should pass `progress` or children, not both.')
-    }
-
-    // Get the number of non-empty nodes passed as children, this will exclude
-    // booleans, null, and undefined
-    const validChildren = React.Children.toArray(children).length
-    const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+export type ProgressBarBaseProps = Omit<
+  React.HTMLAttributes<HTMLSpanElement> & {
+    bg?: string
+    className?: string
+  } & StyledProgressContainerProps &
+    ProgressProp,
+  'children' | 'aria-label'
+>
+
+export type WithChildren = {
+  children: React.ReactNode
+  'aria-label'?: never
+}
 
-    const cssModulesProps = !enabled
-      ? {barSize}
-      : {'data-progress-display': rest.inline ? 'inline' : 'block', 'data-progress-bar-size': barSize}
+export type WithoutChildren = {
+  children?: never
+  'aria-label': string
+}
 
-    return (
-      <ProgressContainer
-        ref={forwardRef}
-        className={clsx(className, {[classes.ProgressBarContainer]: enabled})}
-        {...cssModulesProps}
-        {...rest}
-      >
-        {validChildren ? (
-          children
-        ) : (
-          <Item
-            data-animated={animated}
-            progress={progress}
-            aria-label={ariaLabel}
-            aria-valuenow={ariaValueNow}
-            aria-valuetext={ariaValueText}
-            bg={bg}
-          />
-        )}
-      </ProgressContainer>
-    )
-  },
-)
+export type ProgressBarProps = ProgressBarBaseProps & (WithChildren | WithoutChildren)
+
+export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>((props, forwardRef) => {
+  const {
+    animated,
+    progress,
+    bg = 'success.emphasis',
+    barSize = 'default',
+    children,
+    'aria-label': ariaLabel,
+    'aria-valuenow': ariaValueNow,
+    'aria-valuetext': ariaValueText,
+    className,
+    ...rest
+  } = props
+
+  if (children && progress) {
+    throw new Error('You should pass `progress` or children, not both.')
+  }
+
+  // Get the number of non-empty nodes passed as children, this will exclude
+  // booleans, null, and undefined
+  const validChildren = React.Children.toArray(children).length
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
+  const cssModulesProps = !enabled
+    ? {barSize}
+    : {'data-progress-display': rest.inline ? 'inline' : 'block', 'data-progress-bar-size': barSize}
+
+  return (
+    <ProgressContainer
+      ref={forwardRef}
+      className={clsx(className, {[classes.ProgressBarContainer]: enabled})}
+      {...cssModulesProps}
+      {...rest}
+    >
+      {validChildren ? (
+        children
+      ) : (
+        <Item
+          data-animated={animated}
+          progress={progress}
+          aria-label={ariaLabel as string}
+          aria-valuenow={ariaValueNow}
+          aria-valuetext={ariaValueText}
+          bg={bg}
+        />
+      )}
+    </ProgressContainer>
+  )
+})
 
 ProgressBar.displayName = 'ProgressBar'