fix(overlay-alert): more styling fixes

momentum-design · Oct 3, 2023 · f4a2929 · f4a2929
1 parent b816f1a
commit f4a2929
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 15 deletions.
diff --git a/src/components/OverlayAlert/OverlayAlert.stories.tsx b/src/components/OverlayAlert/OverlayAlert.stories.tsx
@@ -134,4 +134,56 @@ WithoutTitle.parameters = {
 
 WithoutTitle.args = { ...{ details: coreArgs.details } };
 
-export { Example, WithoutActions, WithoutControls, WithoutTitle };
+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 };
diff --git a/src/components/OverlayAlert/OverlayAlert.style.scss b/src/components/OverlayAlert/OverlayAlert.style.scss
@@ -1,6 +1,6 @@
 .md-overlay-alert-wrapper {
   > :first-child {
-    max-width: 32rem;
+    max-width: 25rem;
     min-width: 20rem;
 
     > :first-child {
@@ -18,7 +18,7 @@
     }
 
     > :not(:first-child):not(:last-child) {
-      padding: 0.5rem 1rem 0;
+      padding: 0.5rem 1.25rem 0;
       width: 100%;
 
       > .md-overlay-alert-details {
@@ -30,7 +30,7 @@
     > :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
@@ -50,7 +50,7 @@ const OverlayAlert: FC<Props> = (props: Props) => {
           {children
             ? children
             : !!details && (
-                <Text className={classnames(STYLE.details)} type="body-secondary">
+                <Text className={classnames(STYLE.details)} type="body-primary">
                   {details}
                 </Text>
               )}

diff --git a/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap b/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap
@@ -904,12 +904,12 @@ exports[`<OverlayAlert /> snapshot should match snapshot with details 1`] = `
                     <div />
                   </div>
                   <div>
-                    <small
+                    <p
                       class="md-text-wrapper md-overlay-alert-details"
-                      data-type="body-secondary"
+                      data-type="body-primary"
                     >
                       example-details
-                    </small>
+                    </p>
                   </div>
                   <div />
                 </div>
@@ -944,12 +944,12 @@ exports[`<OverlayAlert /> snapshot should match snapshot with details 1`] = `
                       <div />
                     </div>
                     <div>
-                      <small
+                      <p
                         class="md-text-wrapper md-overlay-alert-details"
-                        data-type="body-secondary"
+                        data-type="body-primary"
                       >
                         example-details
-                      </small>
+                      </p>
                     </div>
                     <div />
                   </div>
@@ -983,14 +983,14 @@ exports[`<OverlayAlert /> snapshot should match snapshot with details 1`] = `
               <div>
                 <Text
                   className="md-overlay-alert-details"
-                  type="body-secondary"
+                  type="body-primary"
                 >
-                  <small
+                  <p
                     className="md-text-wrapper md-overlay-alert-details"
-                    data-type="body-secondary"
+                    data-type="body-primary"
                   >
                     example-details
-                  </small>
+                  </p>
                 </Text>
               </div>
               <div />