[@mantine/core] Button: Button is disabled when inside fieldset disabled

src/mantine-core/src/ActionIcon/ActionIcon.story.tsx

@@ -111,6 +111,14 @@ export function States() {
   );
 }
 
+export function StatesInsideFieldsetDisabled() {
+  return (
+    <fieldset disabled>
+      <States />
+    </fieldset>
+  );
+}
+
 export function ColorsIndex() {
   return (
     <div style={{ padding: 40 }}>

src/mantine-core/src/ActionIcon/ActionIcon.styles.ts

@@ -84,7 +84,7 @@ export default createStyles(
 
       '&:active': theme.activeStyles,
 
-      '&[data-disabled]': {
+      '&:disabled, &[data-disabled]': {
         color: theme.colors.gray[theme.colorScheme === 'dark' ? 6 : 4],
         cursor: 'not-allowed',
         backgroundColor:
@@ -96,6 +96,7 @@ export default createStyles(
             ? undefined
             : theme.fn.themeColor('gray', theme.colorScheme === 'dark' ? 8 : 1),
         backgroundImage: 'none',
+        pointerEvents: 'none',
 
         '&:active': {
           transform: 'none',

src/mantine-core/src/ActionIcon/ActionIcon.test.tsx

@@ -64,4 +64,13 @@ describe('@mantine/core/ActionIcon', () => {
     expect(loading.querySelectorAll('.test-icon')).toHaveLength(0);
     expect(loading.querySelectorAll('svg')).toHaveLength(1);
   });
+
+  it('is disabled when inside fieldset disabled', () => {
+    render(
+      <fieldset disabled>
+        <ActionIcon>$</ActionIcon>
+      </fieldset>
+    );
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
 });

src/mantine-core/src/Button/Button.story.tsx

@@ -128,6 +128,16 @@ export function States() {
   );
 }
 
+/**
+ * All buttons should be disabled
+ */
+export function StatesInFieldsetDisabled() {
+  return (
+    <fieldset disabled>
+      <States />
+    </fieldset>
+  );
+}
 export function CustomComponent() {
   return (
     <div style={{ padding: 40 }}>

src/mantine-core/src/Button/Button.styles.ts

@@ -135,12 +135,13 @@ export default createStyles(
 
       '&:active': theme.activeStyles,
 
-      '&[data-disabled]': {
+      '&:disabled, &[data-disabled]': {
         borderColor: 'transparent',
         backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
         color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
         cursor: 'not-allowed',
         backgroundImage: 'none',
+        pointerEvents: 'none',
 
         '&:active': {
           transform: 'none',

src/mantine-core/src/Button/Button.test.tsx

@@ -52,4 +52,13 @@ describe('@mantine/core/Button', () => {
   it('exposes ButtonGroup as static component', () => {
     expect(Button.Group).toBe(ButtonGroup);
   });
+
+  it('is disabled when inside fieldset disabled', () => {
+    render(
+      <fieldset disabled>
+        <Button type="submit" />
+      </fieldset>
+    );
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
 });