From 5fb1be9e93fb76f7113a880377ffc880576e4b3a Mon Sep 17 00:00:00 2001 From: Clay Miller Date: Fri, 30 Apr 2021 17:23:27 -0400 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20Don=E2=80=99t=20clip=20'Confirmation?= =?UTF-8?q?Dialog'=20button=20outlines?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Dialog/ConfirmationDialog.tsx | 16 +++++++++++++++- src/Dialog/Dialog.tsx | 1 - 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx index 4b733228971..2f01532929f 100644 --- a/src/Dialog/ConfirmationDialog.tsx +++ b/src/Dialog/ConfirmationDialog.tsx @@ -77,7 +77,6 @@ const StyledConfirmationFooter = styled(Box)` button { font-size: ${get('fontSizes.1')}; flex: 1 1 0; - border-radius: 0; border-bottom: 0; margin: 0; border-right: 0; @@ -89,6 +88,21 @@ const StyledConfirmationFooter = styled(Box)` z-index: 1; } } + button:first-of-type { + // All except border-bottom-left-radius, which should follow the curvature of the container + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + button:last-of-type { + // All except border-bottom-right-radius, which should follow the curvature of the container + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + } + button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } ` const ConfirmationFooter: React.FC = ({footerButtons}) => { const {containerRef: footerRef} = useFocusZone({ diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index 7ca39f627b7..0e3afe9451a 100644 --- a/src/Dialog/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -189,7 +189,6 @@ const StyledDialog = styled.div widthMap[props.width ?? ('xl' as const)]}; height: ${props => heightMap[props.height ?? ('auto' as const)]}; border-radius: 12px; - overflow: hidden; opacity: 1; animation: overlay--dialog-appear ${ANIMATION_DURATION} ${get('animation.easeOutCubic')}; From b2bdb6665b35fef3dcecd41d128b88e456438ddc Mon Sep 17 00:00:00 2001 From: Clay Miller Date: Sun, 2 May 2021 15:42:42 -0400 Subject: [PATCH 2/2] fix: Handle a single-button footer --- src/Dialog/ConfirmationDialog.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx index 2f01532929f..aab3cf5bb3d 100644 --- a/src/Dialog/ConfirmationDialog.tsx +++ b/src/Dialog/ConfirmationDialog.tsx @@ -88,18 +88,23 @@ const StyledConfirmationFooter = styled(Box)` z-index: 1; } } - button:first-of-type { + button:first-of-type:not(:last-of-type) { // All except border-bottom-left-radius, which should follow the curvature of the container border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } - button:last-of-type { + button:last-of-type:not(:first-of-type) { // All except border-bottom-right-radius, which should follow the curvature of the container border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; } + button:first-of-type:last-of-type { + // When the footer contains a single button, it should follow the curvature of the container + border-top-left-radius: 0; + border-top-right-radius: 0; + } button:not(:first-of-type):not(:last-of-type) { border-radius: 0; }