Used fixed positioning for Alert component (#2044)

Author: gerardo-rodriguez

.changeset/fuzzy-singers-double.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Fixed positioning, bottom-alignment for Alert component

src/components/alert/alert.scss

@@ -68,11 +68,11 @@
   @include theme.styles {
     --theme-color-shadow-inner: #{sass-color.change(
         color.$brand-primary-darker,
-        $alpha: 0.2
+        $alpha: 0.4
       )};
     --theme-color-shadow-outer: #{sass-color.change(
         color.$brand-primary-darker,
-        $alpha: 0.1
+        $alpha: 0.2
       )};
   }
   @include theme.styles(dark) {

src/mixins/_spacing.scss

@@ -36,12 +36,22 @@ $fluid-gap: fluid.fluid-clamp(
   $fluid-spacing-breakpoint-max
 );
 
-@mixin fluid-padding-block() {
-  padding-block: $fluid-spacing-block;
+@mixin fluid-padding-block($factor: 1) {
+  padding-block: fluid.fluid-clamp(
+    $fluid-spacing-block-min * $factor,
+    $fluid-spacing-block-max * $factor,
+    $fluid-spacing-breakpoint-min,
+    $fluid-spacing-breakpoint-max
+  );
 }
 
-@mixin fluid-padding-inline() {
-  padding-inline: $fluid-spacing-inline;
+@mixin fluid-padding-inline($factor: 1) {
+  padding-inline: fluid.fluid-clamp(
+    $fluid-spacing-inline-min * $factor,
+    $fluid-spacing-inline-max * $factor,
+    $fluid-spacing-breakpoint-min,
+    $fluid-spacing-breakpoint-max
+  );
 }
 
 @mixin fluid-margin-inline-negative() {

src/objects/page/demo/example-with-alert.twig

@@ -13,12 +13,34 @@
     </p>
   {% endblock %}
   {% block content %}
-    <p class="u-pad-1">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex
-      enim. Nunc efficitur scelerisque dolor et sollicitudin. Donec finibus
-      lorem elit, eu consectetur quam pellentesque sed. Pellentesque habitant
-      morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-    </p>
+    {% embed '@cloudfour/objects/container/container.twig' with {
+      class: 'o-container--pad'
+    } only %}
+      {% block content %}
+        {% embed '@cloudfour/objects/rhythm/rhythm.twig' only %}
+          {% block content %}
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex
+              enim. Nunc efficitur scelerisque dolor et sollicitudin. Donec finibus
+              lorem elit, eu consectetur quam pellentesque sed. Pellentesque habitant
+              morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex
+              enim. Nunc efficitur scelerisque dolor et sollicitudin. Donec finibus
+              lorem elit, eu consectetur quam pellentesque sed. Pellentesque habitant
+              morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex
+              enim. Nunc efficitur scelerisque dolor et sollicitudin. Donec finibus
+              lorem elit, eu consectetur quam pellentesque sed. Pellentesque habitant
+              morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+            </p>
+          {% endblock %}
+        {% endembed %}
+      {% endblock %}
+    {% endembed %}
   {% endblock %}
   {% block footer %}
     <p class="u-pad-1 t-dark">

src/objects/page/page.scss

@@ -32,16 +32,21 @@
 /**
  * An optional `alert` block can be used to pass an Alert component
  *
- * 1. The alert should overlap the content above slightly
+ * 1. Use a $factor of 0.5 to allow the alert to bleed more into the
+ *    content margins instead of aligning with the content itself.
+ * 2. Match the padding-inline for visual balance.
  */
 
 .o-page__alert {
-  @include spacing.fluid-padding-inline;
+  @include spacing.fluid-padding-inline($factor: 0.5); // 1
+  @include spacing.fluid-padding-block($factor: 0.5); // 2
+
   display: grid;
   grid-row: 2;
-  inset-block-start: calc(size.$overlap-large * -1); // 1
+  inline-size: 100%;
+  inset-block-end: 0;
   justify-content: center;
-  position: relative;
+  position: fixed;
   z-index: z-index.$alert;
 }