From 8ecbf64d1b638210fda2efa68b885a2084d8ed4e Mon Sep 17 00:00:00 2001
From: Colin Read <coread@cisco.com>
Date: Mon, 2 Oct 2023 13:06:24 +0100
Subject: [PATCH 1/3] 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<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
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: 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
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('<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', () => {
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[`<OverlayAlert /> snapshot should match snapshot 1`] = `
                   data-color="primary"
                   data-elevation="0"
                   data-padded="false"
-                  data-round="0"
+                  data-round="75"
                 >
                   <div>
-                    <div
-                      class="md-overlay-alert-title"
-                    />
                     <div />
                   </div>
                   <div />
@@ -110,12 +107,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot 1`] = `
                     data-color="primary"
                     data-elevation="0"
                     data-padded="false"
-                    data-round="0"
+                    data-round="75"
                   >
                     <div>
-                      <div
-                        class="md-overlay-alert-title"
-                      />
                       <div />
                     </div>
                     <div />
@@ -135,18 +129,17 @@ exports[`<OverlayAlert /> snapshot should match snapshot 1`] = `
           data-color="secondary"
           data-fullscreen={false}
         >
-          <ModalContainer>
+          <ModalContainer
+            round={75}
+          >
             <div
               className="md-modal-container-wrapper"
               data-color="primary"
               data-elevation={0}
               data-padded={false}
-              data-round={0}
+              data-round={75}
             >
               <div>
-                <div
-                  className="md-overlay-alert-title"
-                />
                 <div />
               </div>
               <div />
@@ -255,12 +248,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with actions 1`] = `
                   data-color="primary"
                   data-elevation="0"
                   data-padded="false"
-                  data-round="0"
+                  data-round="75"
                 >
                   <div>
-                    <div
-                      class="md-overlay-alert-title"
-                    />
                     <div />
                   </div>
                   <div />
@@ -308,12 +298,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with actions 1`] = `
                     data-color="primary"
                     data-elevation="0"
                     data-padded="false"
-                    data-round="0"
+                    data-round="75"
                   >
                     <div>
-                      <div
-                        class="md-overlay-alert-title"
-                      />
                       <div />
                     </div>
                     <div />
@@ -350,18 +337,17 @@ exports[`<OverlayAlert /> snapshot should match snapshot with actions 1`] = `
           data-color="secondary"
           data-fullscreen={false}
         >
-          <ModalContainer>
+          <ModalContainer
+            round={75}
+          >
             <div
               className="md-modal-container-wrapper"
               data-color="primary"
               data-elevation={0}
               data-padded={false}
-              data-round={0}
+              data-round={75}
             >
               <div>
-                <div
-                  className="md-overlay-alert-title"
-                />
                 <div />
               </div>
               <div />
@@ -518,12 +504,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with className 1`] = `
                   data-color="primary"
                   data-elevation="0"
                   data-padded="false"
-                  data-round="0"
+                  data-round="75"
                 >
                   <div>
-                    <div
-                      class="md-overlay-alert-title"
-                    />
                     <div />
                   </div>
                   <div />
@@ -554,12 +537,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with className 1`] = `
                     data-color="primary"
                     data-elevation="0"
                     data-padded="false"
-                    data-round="0"
+                    data-round="75"
                   >
                     <div>
-                      <div
-                        class="md-overlay-alert-title"
-                      />
                       <div />
                     </div>
                     <div />
@@ -579,18 +559,17 @@ exports[`<OverlayAlert /> snapshot should match snapshot with className 1`] = `
           data-color="secondary"
           data-fullscreen={false}
         >
-          <ModalContainer>
+          <ModalContainer
+            round={75}
+          >
             <div
               className="md-modal-container-wrapper"
               data-color="primary"
               data-elevation={0}
               data-padded={false}
-              data-round={0}
+              data-round={75}
             >
               <div>
-                <div
-                  className="md-overlay-alert-title"
-                />
                 <div />
               </div>
               <div />
@@ -699,12 +678,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with controls 1`] = `
                   data-color="primary"
                   data-elevation="0"
                   data-padded="false"
-                  data-round="0"
+                  data-round="75"
                 >
                   <div>
-                    <div
-                      class="md-overlay-alert-title"
-                    />
                     <div>
                       <button
                         class="md-button-control-wrapper md-button-simple-wrapper"
@@ -740,12 +716,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with controls 1`] = `
                     data-color="primary"
                     data-elevation="0"
                     data-padded="false"
-                    data-round="0"
+                    data-round="75"
                   >
                     <div>
-                      <div
-                        class="md-overlay-alert-title"
-                      />
                       <div>
                         <button
                           class="md-button-control-wrapper md-button-simple-wrapper"
@@ -770,18 +743,17 @@ exports[`<OverlayAlert /> snapshot should match snapshot with controls 1`] = `
           data-color="secondary"
           data-fullscreen={false}
         >
-          <ModalContainer>
+          <ModalContainer
+            round={75}
+          >
             <div
               className="md-modal-container-wrapper"
               data-color="primary"
               data-elevation={0}
               data-padded={false}
-              data-round={0}
+              data-round={75}
             >
               <div>
-                <div
-                  className="md-overlay-alert-title"
-                />
                 <div>
                   <ButtonControl
                     control="close"
@@ -926,12 +898,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with details 1`] = `
                   data-color="primary"
                   data-elevation="0"
                   data-padded="false"
-                  data-round="0"
+                  data-round="75"
                 >
                   <div>
-                    <div
-                      class="md-overlay-alert-title"
-                    />
                     <div />
                   </div>
                   <div>
@@ -969,12 +938,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with details 1`] = `
                     data-color="primary"
                     data-elevation="0"
                     data-padded="false"
-                    data-round="0"
+                    data-round="75"
                   >
                     <div>
-                      <div
-                        class="md-overlay-alert-title"
-                      />
                       <div />
                     </div>
                     <div>
@@ -1001,18 +967,17 @@ exports[`<OverlayAlert /> snapshot should match snapshot with details 1`] = `
           data-color="secondary"
           data-fullscreen={false}
         >
-          <ModalContainer>
+          <ModalContainer
+            round={75}
+          >
             <div
               className="md-modal-container-wrapper"
               data-color="primary"
               data-elevation={0}
               data-padded={false}
-              data-round={0}
+              data-round={75}
             >
               <div>
-                <div
-                  className="md-overlay-alert-title"
-                />
                 <div />
               </div>
               <div>
@@ -1129,12 +1094,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with details and childr
                   data-color="primary"
                   data-elevation="0"
                   data-padded="false"
-                  data-round="0"
+                  data-round="75"
                 >
                   <div>
-                    <div
-                      class="md-overlay-alert-title"
-                    />
                     <div />
                   </div>
                   <div>
@@ -1167,12 +1129,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with details and childr
                     data-color="primary"
                     data-elevation="0"
                     data-padded="false"
-                    data-round="0"
+                    data-round="75"
                   >
                     <div>
-                      <div
-                        class="md-overlay-alert-title"
-                      />
                       <div />
                     </div>
                     <div>
@@ -1194,18 +1153,17 @@ exports[`<OverlayAlert /> snapshot should match snapshot with details and childr
           data-color="secondary"
           data-fullscreen={false}
         >
-          <ModalContainer>
+          <ModalContainer
+            round={75}
+          >
             <div
               className="md-modal-container-wrapper"
               data-color="primary"
               data-elevation={0}
               data-padded={false}
-              data-round={0}
+              data-round={75}
             >
               <div>
-                <div
-                  className="md-overlay-alert-title"
-                />
                 <div />
               </div>
               <div>
@@ -1314,12 +1272,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with id 1`] = `
                   data-color="primary"
                   data-elevation="0"
                   data-padded="false"
-                  data-round="0"
+                  data-round="75"
                 >
                   <div>
-                    <div
-                      class="md-overlay-alert-title"
-                    />
                     <div />
                   </div>
                   <div />
@@ -1351,12 +1306,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with id 1`] = `
                     data-color="primary"
                     data-elevation="0"
                     data-padded="false"
-                    data-round="0"
+                    data-round="75"
                   >
                     <div>
-                      <div
-                        class="md-overlay-alert-title"
-                      />
                       <div />
                     </div>
                     <div />
@@ -1377,18 +1329,17 @@ exports[`<OverlayAlert /> snapshot should match snapshot with id 1`] = `
           data-fullscreen={false}
           id="example-id"
         >
-          <ModalContainer>
+          <ModalContainer
+            round={75}
+          >
             <div
               className="md-modal-container-wrapper"
               data-color="primary"
               data-elevation={0}
               data-padded={false}
-              data-round={0}
+              data-round={75}
             >
               <div>
-                <div
-                  className="md-overlay-alert-title"
-                />
                 <div />
               </div>
               <div />
@@ -1508,12 +1459,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with multiple actions 1
                   data-color="primary"
                   data-elevation="0"
                   data-padded="false"
-                  data-round="0"
+                  data-round="75"
                 >
                   <div>
-                    <div
-                      class="md-overlay-alert-title"
-                    />
                     <div />
                   </div>
                   <div />
@@ -1596,12 +1544,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with multiple actions 1
                     data-color="primary"
                     data-elevation="0"
                     data-padded="false"
-                    data-round="0"
+                    data-round="75"
                   >
                     <div>
-                      <div
-                        class="md-overlay-alert-title"
-                      />
                       <div />
                     </div>
                     <div />
@@ -1673,18 +1618,17 @@ exports[`<OverlayAlert /> snapshot should match snapshot with multiple actions 1
           data-color="secondary"
           data-fullscreen={false}
         >
-          <ModalContainer>
+          <ModalContainer
+            round={75}
+          >
             <div
               className="md-modal-container-wrapper"
               data-color="primary"
               data-elevation={0}
               data-padded={false}
-              data-round={0}
+              data-round={75}
             >
               <div>
-                <div
-                  className="md-overlay-alert-title"
-                />
                 <div />
               </div>
               <div />
@@ -1967,12 +1911,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with multiple controls
                   data-color="primary"
                   data-elevation="0"
                   data-padded="false"
-                  data-round="0"
+                  data-round="75"
                 >
                   <div>
-                    <div
-                      class="md-overlay-alert-title"
-                    />
                     <div>
                       <button
                         class="md-button-control-wrapper md-button-simple-wrapper"
@@ -2019,12 +1960,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with multiple controls
                     data-color="primary"
                     data-elevation="0"
                     data-padded="false"
-                    data-round="0"
+                    data-round="75"
                   >
                     <div>
-                      <div
-                        class="md-overlay-alert-title"
-                      />
                       <div>
                         <button
                           class="md-button-control-wrapper md-button-simple-wrapper"
@@ -2060,18 +1998,17 @@ exports[`<OverlayAlert /> snapshot should match snapshot with multiple controls
           data-color="secondary"
           data-fullscreen={false}
         >
-          <ModalContainer>
+          <ModalContainer
+            round={75}
+          >
             <div
               className="md-modal-container-wrapper"
               data-color="primary"
               data-elevation={0}
               data-padded={false}
-              data-round={0}
+              data-round={75}
             >
               <div>
-                <div
-                  className="md-overlay-alert-title"
-                />
                 <div>
                   <ButtonControl
                     control="close"
@@ -2311,12 +2248,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with style 1`] = `
                   data-color="primary"
                   data-elevation="0"
                   data-padded="false"
-                  data-round="0"
+                  data-round="75"
                 >
                   <div>
-                    <div
-                      class="md-overlay-alert-title"
-                    />
                     <div />
                   </div>
                   <div />
@@ -2348,12 +2282,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with style 1`] = `
                     data-color="primary"
                     data-elevation="0"
                     data-padded="false"
-                    data-round="0"
+                    data-round="75"
                   >
                     <div>
-                      <div
-                        class="md-overlay-alert-title"
-                      />
                       <div />
                     </div>
                     <div />
@@ -2378,18 +2309,17 @@ exports[`<OverlayAlert /> snapshot should match snapshot with style 1`] = `
             }
           }
         >
-          <ModalContainer>
+          <ModalContainer
+            round={75}
+          >
             <div
               className="md-modal-container-wrapper"
               data-color="primary"
               data-elevation={0}
               data-padded={false}
-              data-round={0}
+              data-round={75}
             >
               <div>
-                <div
-                  className="md-overlay-alert-title"
-                />
                 <div />
               </div>
               <div />
@@ -2494,21 +2424,21 @@ exports[`<OverlayAlert /> snapshot should match snapshot with title 1`] = `
                   data-color="primary"
                   data-elevation="0"
                   data-padded="false"
-                  data-round="0"
+                  data-round="75"
                 >
                   <div>
-                    <div
-                      class="md-overlay-alert-title"
-                    >
-                      <h3
-                        class="md-text-wrapper md-overlay-alert-title"
-                        data-type="header-primary"
-                      >
-                        example-title
-                      </h3>
-                    </div>
                     <div />
                   </div>
+                  <div
+                    class="md-overlay-alert-title"
+                  >
+                    <h3
+                      class="md-text-wrapper md-overlay-alert-title"
+                      data-type="header-primary"
+                    >
+                      example-title
+                    </h3>
+                  </div>
                   <div />
                   <div />
                 </div>
@@ -2537,21 +2467,21 @@ exports[`<OverlayAlert /> snapshot should match snapshot with title 1`] = `
                     data-color="primary"
                     data-elevation="0"
                     data-padded="false"
-                    data-round="0"
+                    data-round="75"
                   >
                     <div>
-                      <div
-                        class="md-overlay-alert-title"
-                      >
-                        <h3
-                          class="md-text-wrapper md-overlay-alert-title"
-                          data-type="header-primary"
-                        >
-                          example-title
-                        </h3>
-                      </div>
                       <div />
                     </div>
+                    <div
+                      class="md-overlay-alert-title"
+                    >
+                      <h3
+                        class="md-text-wrapper md-overlay-alert-title"
+                        data-type="header-primary"
+                      >
+                        example-title
+                      </h3>
+                    </div>
                     <div />
                     <div />
                   </div>
@@ -2569,31 +2499,33 @@ exports[`<OverlayAlert /> snapshot should match snapshot with title 1`] = `
           data-color="secondary"
           data-fullscreen={false}
         >
-          <ModalContainer>
+          <ModalContainer
+            round={75}
+          >
             <div
               className="md-modal-container-wrapper"
               data-color="primary"
               data-elevation={0}
               data-padded={false}
-              data-round={0}
+              data-round={75}
             >
               <div>
-                <div
+                <div />
+              </div>
+              <div
+                className="md-overlay-alert-title"
+              >
+                <Text
                   className="md-overlay-alert-title"
+                  type="header-primary"
                 >
-                  <Text
-                    className="md-overlay-alert-title"
-                    type="header-primary"
+                  <h3
+                    className="md-text-wrapper md-overlay-alert-title"
+                    data-type="header-primary"
                   >
-                    <h3
-                      className="md-text-wrapper md-overlay-alert-title"
-                      data-type="header-primary"
-                    >
-                      example-title
-                    </h3>
-                  </Text>
-                </div>
-                <div />
+                    example-title
+                  </h3>
+                </Text>
               </div>
               <div />
               <div />

From 0419b7ad6a4ae5b7cdaca541e070fb92c54bf78c Mon Sep 17 00:00:00 2001
From: Colin Read <coread@cisco.com>
Date: Mon, 2 Oct 2023 15:02:31 +0100
Subject: [PATCH 2/3] fix(overlay-alert): more styling fixes

---
 .../OverlayAlert/OverlayAlert.stories.tsx     | 54 ++++++++++++++++++-
 .../OverlayAlert/OverlayAlert.style.scss      |  6 +--
 src/components/OverlayAlert/OverlayAlert.tsx  |  2 +-
 .../OverlayAlert.unit.test.tsx.snap           | 20 +++----
 4 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/src/components/OverlayAlert/OverlayAlert.stories.tsx b/src/components/OverlayAlert/OverlayAlert.stories.tsx
index d223a9e8e3..8d0a621ad2 100644
--- 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
index 9454b5bf2b..94921cfbed 100644
--- 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
index 39e8aef964..2a4223b6ce 100644
--- 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
index b2699fbcd9..23dae87829 100644
--- 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 />

From e1a22d9dd3d68003fcbeb902e5586b6ddd46fe62 Mon Sep 17 00:00:00 2001
From: Colin Read <coread@cisco.com>
Date: Tue, 3 Oct 2023 10:49:30 +0100
Subject: [PATCH 3/3] feat(overlay-alert): update color

---
 src/components/OverlayAlert/OverlayAlert.style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/OverlayAlert/OverlayAlert.style.scss b/src/components/OverlayAlert/OverlayAlert.style.scss
index 94921cfbed..04c7a1ea3f 100644
--- a/src/components/OverlayAlert/OverlayAlert.style.scss
+++ b/src/components/OverlayAlert/OverlayAlert.style.scss
@@ -24,6 +24,7 @@
       > .md-overlay-alert-details {
         display: block;
         line-height: 1.25rem;
+        color: var(--mds-color-theme-text-secondary-normal);
       }
     }