From 8ecbf64d1b638210fda2efa68b885a2084d8ed4e Mon Sep 17 00:00:00 2001 From: Colin Read Date: Mon, 2 Oct 2023 13:06:24 +0100 Subject: [PATCH] fix(overlay-alert): fix spacing and corners of overlay alert --- .../OverlayAlert/OverlayAlert.stories.tsx | 16 +- .../OverlayAlert/OverlayAlert.style.scss | 3 - src/components/OverlayAlert/OverlayAlert.tsx | 16 +- .../OverlayAlert/OverlayAlert.unit.test.tsx | 4 +- .../OverlayAlert.unit.test.tsx.snap | 266 +++++++----------- 5 files changed, 123 insertions(+), 182 deletions(-) diff --git a/src/components/OverlayAlert/OverlayAlert.stories.tsx b/src/components/OverlayAlert/OverlayAlert.stories.tsx index be0364eec9..d223a9e8e3 100644 --- a/src/components/OverlayAlert/OverlayAlert.stories.tsx +++ b/src/components/OverlayAlert/OverlayAlert.stories.tsx @@ -66,7 +66,8 @@ function Template(): Story { style={{ alignItems: 'center', backgroundColor: 'var(--mds-color-theme-background-solid-primary-normal)', - border: '1px var(--md-globals-border-style-solid) var(--mds-color-theme-outline-secondary-normal)', + border: + '1px var(--md-globals-border-style-solid) var(--mds-color-theme-outline-secondary-normal)', display: 'flex', height: '80%', paddingLeft: '4rem', @@ -122,4 +123,15 @@ WithoutControls.parameters = { WithoutControls.args = { ...coreArgs }; -export { Example, WithoutActions, WithoutControls }; +const WithoutTitle = Template().bind({}); + +WithoutTitle.argTypes = { ...argTypes }; + +WithoutTitle.parameters = { + hasActions: true, + hasControls: true, +}; + +WithoutTitle.args = { ...{ details: coreArgs.details } }; + +export { Example, WithoutActions, WithoutControls, WithoutTitle }; diff --git a/src/components/OverlayAlert/OverlayAlert.style.scss b/src/components/OverlayAlert/OverlayAlert.style.scss index 54a39dca57..9454b5bf2b 100644 --- a/src/components/OverlayAlert/OverlayAlert.style.scss +++ b/src/components/OverlayAlert/OverlayAlert.style.scss @@ -4,9 +4,6 @@ min-width: 20rem; > :first-child { - align-items: flex-end; - display: flex; - justify-content: space-between; width: 100%; > .md-overlay-alert-title { diff --git a/src/components/OverlayAlert/OverlayAlert.tsx b/src/components/OverlayAlert/OverlayAlert.tsx index 057a2627ca..39e8aef964 100644 --- a/src/components/OverlayAlert/OverlayAlert.tsx +++ b/src/components/OverlayAlert/OverlayAlert.tsx @@ -35,17 +35,17 @@ const OverlayAlert: FC = (props: Props) => { color={overlayColor} {...other} > - +
-
- {!!title && ( - - {title} - - )} -
{controls}
+ {!!title && ( +
+ + {title} + +
+ )}
{children ? children diff --git a/src/components/OverlayAlert/OverlayAlert.unit.test.tsx b/src/components/OverlayAlert/OverlayAlert.unit.test.tsx index 4e50c68e25..c673cf9a50 100644 --- a/src/components/OverlayAlert/OverlayAlert.unit.test.tsx +++ b/src/components/OverlayAlert/OverlayAlert.unit.test.tsx @@ -264,7 +264,7 @@ describe('', () => { expect(target.innerHTML.includes(title)).toBe(true); }); - it('should still render a empty div with the appropriate class when no title is provided', () => { + it('should not render an empty div when no title is provided', () => { expect.assertions(1); const component = mount().find(`.${OVERLAY_STYLE.wrapper}`); @@ -273,7 +273,7 @@ describe('', () => { .getDOMNode() .getElementsByClassName(OVERLAY_ALERT_CONSTANTS.STYLE.title)[0]; - expect(target.classList.contains(OVERLAY_ALERT_CONSTANTS.STYLE.title)).toBe(true); + expect(target).toBeUndefined(); }); it('should have provided children when details and children are provided', () => { diff --git a/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap b/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap index 7fa9823f40..b2699fbcd9 100644 --- a/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap +++ b/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap @@ -74,12 +74,9 @@ exports[` snapshot should match snapshot 1`] = ` data-color="primary" data-elevation="0" data-padded="false" - data-round="0" + data-round="75" >
-
@@ -110,12 +107,9 @@ exports[` snapshot should match snapshot 1`] = ` data-color="primary" data-elevation="0" data-padded="false" - data-round="0" + data-round="75" >
-
@@ -135,18 +129,17 @@ exports[` snapshot should match snapshot 1`] = ` data-color="secondary" data-fullscreen={false} > - +
-
@@ -255,12 +248,9 @@ exports[` snapshot should match snapshot with actions 1`] = ` data-color="primary" data-elevation="0" data-padded="false" - data-round="0" + data-round="75" >
-
@@ -308,12 +298,9 @@ exports[` snapshot should match snapshot with actions 1`] = ` data-color="primary" data-elevation="0" data-padded="false" - data-round="0" + data-round="75" >
-
@@ -350,18 +337,17 @@ exports[` snapshot should match snapshot with actions 1`] = ` data-color="secondary" data-fullscreen={false} > - +
-
@@ -518,12 +504,9 @@ exports[` snapshot should match snapshot with className 1`] = ` data-color="primary" data-elevation="0" data-padded="false" - data-round="0" + data-round="75" >
-
@@ -554,12 +537,9 @@ exports[` snapshot should match snapshot with className 1`] = ` data-color="primary" data-elevation="0" data-padded="false" - data-round="0" + data-round="75" >
-
@@ -579,18 +559,17 @@ exports[` snapshot should match snapshot with className 1`] = ` data-color="secondary" data-fullscreen={false} > - +
-
@@ -699,12 +678,9 @@ exports[` snapshot should match snapshot with controls 1`] = ` data-color="primary" data-elevation="0" data-padded="false" - data-round="0" + data-round="75" >
-