Bug 46353 alert testo a sx (#349)

* fix: fixed classes, margins and paddings of alertBlock to align text to other elements * added release info * fixed test for alert block * fix: added variables
RedTurtle · Sep 21, 2023 · b1266b2 · b1266b2
1 parent 98ec59c
commit b1266b2
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -30,6 +30,12 @@
 - ...
 -->
 
+## Versione X.X.X (dd/mm/yyyy)
+
+### Fix
+
+- Sistemato margine del blocco Alert quando allineato a sinistra
+
 ## Versione 8.7.0 (20/09/2023)
 
 ### Migliorie

diff --git a/src/components/ItaliaTheme/Blocks/Alert/View.jsx b/src/components/ItaliaTheme/Blocks/Alert/View.jsx
@@ -29,7 +29,7 @@ const View = ({ data, pathname }) => {
 
   return (
     <section role="alert" className="block alertblock">
-      <Row className={cx('row-full-width', 'bg-alert-' + data.color)}>
+      <div className={cx('full-width', 'bg-alert-' + data.color)}>
         <Container className="p-4 pt-5 pb-5">
           <Row className="align-items-start">
             {data.image?.data && (
@@ -46,7 +46,7 @@ const View = ({ data, pathname }) => {
             <Col>{content}</Col>
           </Row>
         </Container>
-      </Row>
+      </div>
     </section>
   );
 };

diff --git a/src/components/ItaliaTheme/Blocks/__tests__/Alert.test.jsx b/src/components/ItaliaTheme/Blocks/__tests__/Alert.test.jsx
diff --git a/src/theme/ItaliaTheme/Blocks/_alert.scss b/src/theme/ItaliaTheme/Blocks/_alert.scss
@@ -1,6 +1,10 @@
 .public-ui {
   .block.alertblock,
   .alertblock {
+    .full-width {
+      height: auto;
+    }
+
     .bg-alert-danger {
       background-color: #a32219;
       color: $white;
@@ -67,6 +71,16 @@
       }
     }
 
+    .row {
+      margin-right: calc(var(--bs-gutter-x) * -0.25);
+      margin-left: calc(var(--bs-gutter-x) * -0.25);
+
+      .col {
+        padding-right: calc(var(--bs-gutter-x) * 0.25);
+        padding-left: calc(var(--bs-gutter-x) * 0.25);
+      }
+    }
+
     .DraftEditor-root {
       background: none;
     }