add loadingPosition* classes to button

mui · Jan 3, 2025 · 0e87a59 · 0e87a59
1 parent 02abe9d
commit 0e87a59
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js
@@ -33,13 +33,11 @@ const useUtilityClasses = (ownerState) => {
       `color${capitalize(color)}`,
       disableElevation && 'disableElevation',
       fullWidth && 'fullWidth',
+      loading && `loadingPosition${capitalize(loadingPosition)}`,
     ],
     startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
     endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`],
-    loadingIndicator: [
-      'loadingIndicator',
-      loading && `loadingPosition${capitalize(loadingPosition)}`,
-    ],
+    loadingIndicator: ['loadingIndicator'],
     loadingWrapper: ['loadingWrapper'],
   };
 

diff --git a/packages/mui-material/src/Button/Button.test.js b/packages/mui-material/src/Button/Button.test.js
@@ -810,5 +810,24 @@ describe('<Button />', () => {
 
       expect(screen.getByRole('button')).to.have.text('loading…Test');
     });
+
+    it('should have loading position class attached to root when `loading`', () => {
+      const { rerender } = render(<Button loading>Test</Button>);
+      expect(screen.getByRole('button')).to.have.class(classes.loadingPositionCenter);
+
+      rerender(
+        <Button loading loadingPosition="start">
+          Test
+        </Button>,
+      );
+      expect(screen.getByRole('button')).to.have.class(classes.loadingPositionStart);
+
+      rerender(
+        <Button loading loadingPosition="end">
+          Test
+        </Button>,
+      );
+      expect(screen.getByRole('button')).to.have.class(classes.loadingPositionEnd);
+    });
   });
 });