diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx b/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx index 3ebe2481aad..c68dcbbea8d 100644 --- a/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx +++ b/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx @@ -111,6 +111,14 @@ export function States() { ); } +export function StatesInsideFieldsetDisabled() { + return ( +
+ +
+ ); +} + export function ColorsIndex() { return (
diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts b/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts index a3a01ed777b..bcdddd77d69 100644 --- a/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts +++ b/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', diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.test.tsx b/src/mantine-core/src/ActionIcon/ActionIcon.test.tsx index cd683545b30..07d86fc98f3 100644 --- a/src/mantine-core/src/ActionIcon/ActionIcon.test.tsx +++ b/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( +
+ $ +
+ ); + expect(screen.getByRole('button')).toBeDisabled(); + }); }); diff --git a/src/mantine-core/src/Button/Button.story.tsx b/src/mantine-core/src/Button/Button.story.tsx index 767e2e5c504..4211e7de476 100644 --- a/src/mantine-core/src/Button/Button.story.tsx +++ b/src/mantine-core/src/Button/Button.story.tsx @@ -128,6 +128,16 @@ export function States() { ); } +/** + * All buttons should be disabled + */ +export function StatesInFieldsetDisabled() { + return ( +
+ +
+ ); +} export function CustomComponent() { return (
diff --git a/src/mantine-core/src/Button/Button.styles.ts b/src/mantine-core/src/Button/Button.styles.ts index 294e895ee4a..85d043c7351 100644 --- a/src/mantine-core/src/Button/Button.styles.ts +++ b/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', diff --git a/src/mantine-core/src/Button/Button.test.tsx b/src/mantine-core/src/Button/Button.test.tsx index 93b89ab6609..6bd4abac8b0 100644 --- a/src/mantine-core/src/Button/Button.test.tsx +++ b/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( +
+
+ ); + expect(screen.getByRole('button')).toBeDisabled(); + }); });