fix(overlay-alert): fix spacing and corners of overlay alert

momentum-design · Oct 2, 2023 · 8ecbf64 · 8ecbf64
1 parent 9c1c959
commit 8ecbf64
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 182 deletions.
diff --git a/src/components/OverlayAlert/OverlayAlert.stories.tsx b/src/components/OverlayAlert/OverlayAlert.stories.tsx
@@ -66,7 +66,8 @@ function Template(): Story<OverlayAlertProps> {
         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
@@ -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
@@ -35,17 +35,17 @@ const OverlayAlert: FC<Props> = (props: Props) => {
       color={overlayColor}
       {...other}
     >
-      <ModalContainer color={modalColor}>
+      <ModalContainer round={75} color={modalColor}>
         <div>
-          <div className={classnames(STYLE.title)}>
-            {!!title && (
-              <Text className={classnames(STYLE.title)} type="header-primary">
-                {title}
-              </Text>
-            )}
-          </div>
           <div>{controls}</div>
         </div>
+        {!!title && (
+          <div className={classnames(STYLE.title)}>
+            <Text className={classnames(STYLE.title)} type="header-primary">
+              {title}
+            </Text>
+          </div>
+        )}
         <div>
           {children
             ? children

diff --git a/src/components/OverlayAlert/OverlayAlert.unit.test.tsx b/src/components/OverlayAlert/OverlayAlert.unit.test.tsx
@@ -264,7 +264,7 @@ describe('<OverlayAlert />', () => {
       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(<OverlayAlert />).find(`.${OVERLAY_STYLE.wrapper}`);
@@ -273,7 +273,7 @@ describe('<OverlayAlert />', () => {
         .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', () => {