Use divs for consistency

mui · Jan 24, 2025 · 3e71a35 · 3e71a35
1 parent 66d6fa1
commit 3e71a35
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/packages/react/src/progress/indicator/ProgressIndicator.test.tsx b/packages/react/src/progress/indicator/ProgressIndicator.test.tsx
@@ -26,15 +26,15 @@ describe('<Progress.Indicator />', () => {
         <ProgressRootContext.Provider value={contextValue}>{node}</ProgressRootContext.Provider>,
       );
     },
-    refInstanceof: window.HTMLSpanElement,
+    refInstanceof: window.HTMLDivElement,
   }));
 
   describe.skipIf(isJSDOM)('internal styles', () => {
     it('determinate', async () => {
       const { getByTestId } = await render(
         <Progress.Root value={33}>
           <Progress.Track>
-            <Progress.Indicator data-testid="indicator" />
+            <Progress.Indicator data-testid="indicator" render={<span />} />
           </Progress.Track>
         </Progress.Root>,
       );
@@ -60,7 +60,7 @@ describe('<Progress.Indicator />', () => {
 
       expect(indicator).toHaveComputedStyle({
         insetInlineStart: '0px',
-        width: '0%',
+        width: '0px',
       });
     });
 

diff --git a/packages/react/src/progress/indicator/ProgressIndicator.tsx b/packages/react/src/progress/indicator/ProgressIndicator.tsx
@@ -10,7 +10,7 @@ import { BaseUIComponentProps } from '../../utils/types';
 
 /**
  * Visualizes the completion status of the task.
- * Renders a `<span>` element.
+ * Renders a `<div>` element.
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
@@ -30,7 +30,7 @@ const ProgressIndicator = React.forwardRef(function ProgressIndicator(
 
   const { renderElement } = useComponentRenderer({
     propGetter: getRootProps,
-    render: render ?? 'span',
+    render: render ?? 'div',
     state,
     className,
     ref: forwardedRef,
@@ -44,7 +44,7 @@ const ProgressIndicator = React.forwardRef(function ProgressIndicator(
 namespace ProgressIndicator {
   export interface State extends ProgressRoot.State {}
 
-  export interface Props extends BaseUIComponentProps<'span', State> {}
+  export interface Props extends BaseUIComponentProps<'div', State> {}
 }
 
 ProgressIndicator.propTypes /* remove-proptypes */ = {

diff --git a/packages/react/src/progress/track/ProgressTrack.test.tsx b/packages/react/src/progress/track/ProgressTrack.test.tsx
@@ -25,6 +25,6 @@ describe('<Progress.Track />', () => {
         <ProgressRootContext.Provider value={contextValue}>{node}</ProgressRootContext.Provider>,
       );
     },
-    refInstanceof: window.HTMLSpanElement,
+    refInstanceof: window.HTMLDivElement,
   }));
 });
diff --git a/packages/react/src/progress/track/ProgressTrack.tsx b/packages/react/src/progress/track/ProgressTrack.tsx
@@ -9,7 +9,7 @@ import { BaseUIComponentProps } from '../../utils/types';
 
 /**
  * Contains the progress bar indicator.
- * Renders a `<span>` element.
+ * Renders a `<div>` element.
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
@@ -22,7 +22,7 @@ const ProgressTrack = React.forwardRef(function ProgressTrack(
   const { state } = useProgressRootContext();
 
   const { renderElement } = useComponentRenderer({
-    render: render ?? 'span',
+    render: render ?? 'div',
     state,
     className,
     ref: forwardedRef,
@@ -36,7 +36,7 @@ const ProgressTrack = React.forwardRef(function ProgressTrack(
 namespace ProgressTrack {
   export interface State extends ProgressRoot.State {}
 
-  export interface Props extends BaseUIComponentProps<'span', State> {}
+  export interface Props extends BaseUIComponentProps<'div', State> {}
 }
 
 ProgressTrack.propTypes /* remove-proptypes */ = {