diff --git a/src/components/OverlayAlert/OverlayAlert.stories.tsx b/src/components/OverlayAlert/OverlayAlert.stories.tsx index be0364eec9..8d0a621ad2 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,67 @@ 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 } }; + +const FigmaExample: Story = (args: OverlayAlertProps) => { + const [isOpen, setIsOpen] = useState(false); + + const open = () => { + setIsOpen(true); + }; + + const close = () => { + setIsOpen(false); + }; + + const actions = [ + + Secondary + , + + Primary + , + ]; + + const controls = []; + + return ( +
+ Open + {isOpen && ( + {actions}} + controls={<>{controls}} + {...args} + /> + )} +
+ ); +}; + +FigmaExample.argTypes = { ...argTypes }; + +export { Example, WithoutActions, WithoutControls, WithoutTitle, FigmaExample }; diff --git a/src/components/OverlayAlert/OverlayAlert.style.scss b/src/components/OverlayAlert/OverlayAlert.style.scss index 54a39dca57..04c7a1ea3f 100644 --- a/src/components/OverlayAlert/OverlayAlert.style.scss +++ b/src/components/OverlayAlert/OverlayAlert.style.scss @@ -1,12 +1,9 @@ .md-overlay-alert-wrapper { > :first-child { - max-width: 32rem; + max-width: 25rem; min-width: 20rem; > :first-child { - align-items: flex-end; - display: flex; - justify-content: space-between; width: 100%; > .md-overlay-alert-title { @@ -21,19 +18,20 @@ } > :not(:first-child):not(:last-child) { - padding: 0.5rem 1rem 0; + padding: 0.5rem 1.25rem 0; width: 100%; > .md-overlay-alert-details { display: block; line-height: 1.25rem; + color: var(--mds-color-theme-text-secondary-normal); } } > :last-child { display: flex; justify-content: flex-end; - padding: 1rem 1.5rem; + padding: 1.25rem 1.25rem; width: 100%; > * { diff --git a/src/components/OverlayAlert/OverlayAlert.tsx b/src/components/OverlayAlert/OverlayAlert.tsx index 057a2627ca..2a4223b6ce 100644 --- a/src/components/OverlayAlert/OverlayAlert.tsx +++ b/src/components/OverlayAlert/OverlayAlert.tsx @@ -35,22 +35,22 @@ const OverlayAlert: FC = (props: Props) => { color={overlayColor} {...other} > - +
-
- {!!title && ( - - {title} - - )} -
{controls}
+ {!!title && ( +
+ + {title} + +
+ )}
{children ? children : !!details && ( - + {details} )} 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..23dae87829 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" >
-