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

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,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<OverlayAlertProps> = (args: OverlayAlertProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = () => {
+    setIsOpen(true);
+  };
+
+  const close = () => {
+    setIsOpen(false);
+  };
+
+  const actions = [
+    <ButtonPill key={0} outline inverted onPress={close} size={32}>
+      Secondary
+    </ButtonPill>,
+    <ButtonPill key={1} onPress={close} size={32}>
+      Primary
+    </ButtonPill>,
+  ];
+
+  const controls = [<ButtonControl key={2} onPress={close} control="close" />];
+
+  return (
+    <div
+      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)',
+        display: 'flex',
+        height: '80%',
+        paddingLeft: '4rem',
+        position: 'relative',
+        width: '80%',
+      }}
+    >
+      <ButtonPill onPress={open}>Open</ButtonPill>
+      {isOpen && (
+        <OverlayAlert
+          details="In ultrices dapibus tortor in posuere. Sed rhoncus mi sem."
+          title="Title"
+          actions={<>{actions}</>}
+          controls={<>{controls}</>}
+          {...args}
+        />
+      )}
+    </div>
+  );
+};
+
+FigmaExample.argTypes = { ...argTypes };
+
+export { Example, WithoutActions, WithoutControls, WithoutTitle, FigmaExample };

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%;
 
       > * {

src/components/OverlayAlert/OverlayAlert.tsx

@@ -35,22 +35,22 @@ 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
             : !!details && (
-                <Text className={classnames(STYLE.details)} type="body-secondary">
+                <Text className={classnames(STYLE.details)} type="body-primary">
                   {details}
                 </Text>
               )}

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', () => {