From f7daaf8fba5c3cd43e9d04afe1c2767cb9b964fc Mon Sep 17 00:00:00 2001 From: Josiah Ayres Date: Wed, 14 Sep 2022 18:19:39 +1200 Subject: [PATCH 1/4] Fixes #2428 --- src/mantine-core/src/Button/Button.story.tsx | 99 ++++++++++++++++++++ src/mantine-core/src/Button/Button.styles.ts | 9 ++ src/mantine-core/src/Button/Button.test.tsx | 9 ++ 3 files changed, 117 insertions(+) diff --git a/src/mantine-core/src/Button/Button.story.tsx b/src/mantine-core/src/Button/Button.story.tsx index 767e2e5c504..874662d5a3c 100644 --- a/src/mantine-core/src/Button/Button.story.tsx +++ b/src/mantine-core/src/Button/Button.story.tsx @@ -128,6 +128,105 @@ export function States() { ); } +/** + * All buttons should be disabled + */ +export function StatesInFieldsetDisabled() { + const theme = useMantineTheme(); + + const sharedStyles: CSSProperties = { + padding: '10px 20px', + border: `1px solid ${ + theme.colorScheme === 'light' ? theme.colors.gray[1] : theme.colors.dark[6] + }`, + }; + + const states = [ + { + name: 'enabled', + props: undefined, + }, + { + name: 'disabled', + props: { + disabled: true, + }, + }, + { + name: 'loading', + props: { + loading: true, + }, + }, + ]; + + return ( +
+
+ + + + + + {BUTTON_VARIANTS.map((variant) => ( + + ))} + + + + {states.map((state) => ( + + + + {BUTTON_VARIANTS.map((variant) => ( + + ))} + + ))} + +
+   + + {variant} +
+ {state.name} + +
+ +
+
+
+
+ ); +} 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..9cbdff94447 100644 --- a/src/mantine-core/src/Button/Button.styles.ts +++ b/src/mantine-core/src/Button/Button.styles.ts @@ -135,6 +135,15 @@ export default createStyles( '&:active': theme.activeStyles, + '&: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', + }, + '&[data-disabled]': { borderColor: 'transparent', backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2], 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(); + }); }); From a7f214cda38bcb3b9db6d0e21a56dfa8ad2e437c Mon Sep 17 00:00:00 2001 From: Josiah Ayres Date: Wed, 14 Sep 2022 18:23:24 +1200 Subject: [PATCH 2/4] Cleaner storybook example --- src/mantine-core/src/Button/Button.story.tsx | 91 +------------------- 1 file changed, 1 insertion(+), 90 deletions(-) diff --git a/src/mantine-core/src/Button/Button.story.tsx b/src/mantine-core/src/Button/Button.story.tsx index 874662d5a3c..4211e7de476 100644 --- a/src/mantine-core/src/Button/Button.story.tsx +++ b/src/mantine-core/src/Button/Button.story.tsx @@ -132,98 +132,9 @@ export function States() { * All buttons should be disabled */ export function StatesInFieldsetDisabled() { - const theme = useMantineTheme(); - - const sharedStyles: CSSProperties = { - padding: '10px 20px', - border: `1px solid ${ - theme.colorScheme === 'light' ? theme.colors.gray[1] : theme.colors.dark[6] - }`, - }; - - const states = [ - { - name: 'enabled', - props: undefined, - }, - { - name: 'disabled', - props: { - disabled: true, - }, - }, - { - name: 'loading', - props: { - loading: true, - }, - }, - ]; - return (
-
- - - - - - {BUTTON_VARIANTS.map((variant) => ( - - ))} - - - - {states.map((state) => ( - - - - {BUTTON_VARIANTS.map((variant) => ( - - ))} - - ))} - -
-   - - {variant} -
- {state.name} - -
- -
-
-
+
); } From 4fe9551d08e02a7f3c8fdb3081cbc6c35c19bf32 Mon Sep 17 00:00:00 2001 From: Josiah Ayres Date: Thu, 15 Sep 2022 08:57:54 +1200 Subject: [PATCH 3/4] Update existing disabled style for button and action icon --- src/mantine-core/src/ActionIcon/ActionIcon.styles.ts | 3 ++- src/mantine-core/src/Button/Button.styles.ts | 10 +--------- 2 files changed, 3 insertions(+), 10 deletions(-) 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/Button/Button.styles.ts b/src/mantine-core/src/Button/Button.styles.ts index 9cbdff94447..85d043c7351 100644 --- a/src/mantine-core/src/Button/Button.styles.ts +++ b/src/mantine-core/src/Button/Button.styles.ts @@ -135,21 +135,13 @@ export default createStyles( '&:active': theme.activeStyles, - '&: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', - }, - - '&[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', '&:active': { transform: 'none', From 7d88ac606ba3db007970eb8198db79b9e29c3936 Mon Sep 17 00:00:00 2001 From: Josiah Ayres Date: Thu, 15 Sep 2022 09:02:13 +1200 Subject: [PATCH 4/4] Add extra test and story for action icon inside disabled fieldset --- src/mantine-core/src/ActionIcon/ActionIcon.story.tsx | 8 ++++++++ src/mantine-core/src/ActionIcon/ActionIcon.test.tsx | 9 +++++++++ 2 files changed, 17 insertions(+) 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.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(); + }); });