From bd68039496a65032b7d5d3a8b5cc8e8bef2242e5 Mon Sep 17 00:00:00 2001 From: ryuhangyeong Date: Wed, 3 Aug 2022 19:25:15 +0900 Subject: [PATCH 1/5] [@mantine/core] ButtonGroup: Fix overlap between buttons --- src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts b/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts index a231352a570..5938b7cafca 100644 --- a/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts +++ b/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts @@ -33,6 +33,10 @@ export default createStyles( [orientation === 'vertical' ? 'borderBottomWidth' : 'borderRightWidth']: buttonBorderWidth / 2, }, + + '& + [data-button]': { + [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -1, + }, }, }, }) From 223b26676357ec94ae4d444079ede6ae8c95256f Mon Sep 17 00:00:00 2001 From: ryuhangyeong Date: Wed, 3 Aug 2022 19:37:02 +0900 Subject: [PATCH 2/5] fix: add buttonBorderWidth --- src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts b/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts index 5938b7cafca..06823dad92b 100644 --- a/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts +++ b/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts @@ -35,7 +35,7 @@ export default createStyles( }, '& + [data-button]': { - [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -1, + [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -buttonBorderWidth, }, }, }, From dd8538084e93ed0a23a7772a7078348666606da7 Mon Sep 17 00:00:00 2001 From: ryuhangyeong Date: Sun, 7 Aug 2022 20:39:59 +0900 Subject: [PATCH 3/5] fix: Change border size based on dpi --- src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts b/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts index 06823dad92b..7cdcc2a2fec 100644 --- a/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts +++ b/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts @@ -36,6 +36,9 @@ export default createStyles( '& + [data-button]': { [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -buttonBorderWidth, + '@media only screen and (min-resolution: 300dpi)': { + [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -buttonBorderWidth / 2, + }, }, }, }, From ee986d90cee04666588d30598bfa9fecedca305f Mon Sep 17 00:00:00 2001 From: ryuhangyeong Date: Sun, 7 Aug 2022 20:57:45 +0900 Subject: [PATCH 4/5] fix: Change media query condition --- src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts b/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts index 7cdcc2a2fec..313c50a323a 100644 --- a/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts +++ b/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts @@ -36,7 +36,7 @@ export default createStyles( '& + [data-button]': { [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -buttonBorderWidth, - '@media only screen and (min-resolution: 300dpi)': { + '@media (min-resolution: 300dpi)': { [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -buttonBorderWidth / 2, }, }, From 71beaa52ab6e48fe88f2e7de91e03768cc7c4fa3 Mon Sep 17 00:00:00 2001 From: Vitaly Rtishchev Date: Sun, 7 Aug 2022 15:34:31 +0300 Subject: [PATCH 5/5] [@mantine/core] Fix incorrect media query --- src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts b/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts index 313c50a323a..1a8628b23d0 100644 --- a/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts +++ b/src/mantine-core/src/Button/ButtonGroup/ButtonGroup.styles.ts @@ -36,8 +36,8 @@ export default createStyles( '& + [data-button]': { [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -buttonBorderWidth, - '@media (min-resolution: 300dpi)': { - [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -buttonBorderWidth / 2, + '@media (min-resolution: 192dpi)': { + [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: 0, }, }, },