add loadingPosition* classes to button

siriwatknp · Jan 3, 2025 · d3d0926 · d3d0926
1 parent 02abe9d
commit d3d0926
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js
@@ -33,6 +33,7 @@ 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)}`],

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);
+    });
   });
 });