fix: alert follows fiori3

docs/pages/components/alert.md

@@ -20,7 +20,7 @@ The alert provides information that is useful and relevant, but not critical. It
 
 {% capture default-alert %}
 <div class="fd-alert fd-alert--dismissible" role="alert"  id="ZvPBg609" >
-  <button class="fd-alert__close" aria-controls="ZvPBg609" aria-label="Close"></button>
+  <button class="fd-button fd-button--light fd-button--compact fd-alert__close" aria-controls="ZvPBg609" aria-label="Close"></button>
   <p class="fd-alert__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et mattis erat vel aliquet in sem urna et sagittis diam in vehicula. <a href="#" class="fd-link">Learn More</a>
   </p>
@@ -35,7 +35,7 @@ Add the modifier class `fd-alert--information` for Information alert.
 
 {% capture information-alert %}
 <div class="fd-alert fd-alert--information fd-alert--dismissible" role="alert"  id="JwPcf464" >
-  <button class="fd-alert__close" aria-controls="JwPcf464" aria-label="Close"></button>
+  <button class="fd-button fd-button--light fd-button--compact fd-alert__close" aria-controls="JwPcf464" aria-label="Close"></button>
   <p class="fd-alert__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. <a href="#" class="fd-link">Learn More</a>
   </p>
@@ -51,7 +51,7 @@ Add the modifier class `fd-alert--success` for Success alert.
 
 {% capture success-alert %}
 <div class="fd-alert fd-alert--success fd-alert--dismissible" role="alert" id="ulr5z216">
-  <button class="fd-alert__close" aria-controls="ulr5z216" aria-label="Close"></button>
+  <button class="fd-button fd-button--light fd-button--compact fd-alert__close" aria-controls="ulr5z216" aria-label="Close"></button>
   <p class="fd-alert__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
@@ -67,7 +67,7 @@ Add the modifier class `fd-alert--warning` for Warning alert.
 
 {% capture warning-alert %}
 <div class="fd-alert fd-alert--warning fd-alert--dismissible" role="alert" id="fwYq4606">
-  <button class="fd-alert__close" aria-controls="fwYq4606" aria-label="Close"></button>
+  <button class="fd-button fd-button--light fd-button--compact fd-alert__close" aria-controls="fwYq4606" aria-label="Close"></button>
   <p class="fd-alert__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
@@ -83,7 +83,7 @@ Add the modifier class `fd-alert--error` for Error alert.
 
 {% capture error-alert %}
 <div class="fd-alert fd-alert--error fd-alert--dismissible" role="alert" id="SsoiW591">
-  <button class="fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
+  <button class="fd-button fd-button--light fd-button--compact fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
   <p class="fd-alert__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
@@ -99,31 +99,31 @@ Add the modifier class `fd-alert--no-icon` to render alert without any icon
 {% capture no-icon %}
 <div class="fd-alert fd-alert--information fd-alert--no-icon fd-alert--dismissible" 
      role="alert" id="SsoiW591">
-  <button class="fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
+  <button class="fd-button fd-button--light fd-button--compact fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
   <p class="fd-alert__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
 </div>
 <br />
 <div class="fd-alert fd-alert--success fd-alert--no-icon fd-alert--dismissible" 
      role="alert" id="SsoiW591">
-  <button class="fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
+  <button class="fd-button fd-button--light fd-button--compact fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
   <p class="fd-alert__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
 </div>
 <br />
 <div class="fd-alert fd-alert--warning fd-alert--no-icon fd-alert--dismissible" 
      role="alert" id="SsoiW591">
-  <button class="fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
+  <button class="fd-button fd-button--light fd-button--compact fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
   <p class="fd-alert__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
 </div>
 <br />
 <div class="fd-alert fd-alert--error fd-alert--no-icon fd-alert--dismissible" 
      role="alert" id="SsoiW591">
-  <button class="fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
+  <button class="fd-button fd-button--light fd-button--compact fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
   <p class="fd-alert__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
@@ -139,11 +139,11 @@ If right to left text direction is provided, the dismiss button moves to left si
 
 {% capture default-alert %}
 <div class="fd-alert fd-alert--error fd-alert--dismissible" role="alert" id="BQ6WP516" dir="rtl">
-  <button class="fd-alert__close" aria-controls="BQ6WP516" aria-label="Close"></button>
+  <button class="fd-button fd-button--light fd-button--compact fd-alert__close" aria-controls="BQ6WP516" aria-label="Close"></button>
   <p class="fd-alert__text">
    حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره أو يتجنب الشعور بالسعادة، ولكن بفضل هؤلاء الأشخاص الذين لا يدركون بأن السعادة لا بد أن نستشعرها بصورة أكثر عقلانيأسي.
    </p>
 </div>
 {% endcapture %}
 
-{% include display-component.html component=default-alert %}
+{% include display-component.html component=default-alert %}

src/alert.scss

@@ -12,7 +12,7 @@ $block: #{$fd-namespace}-alert;
 .#{$block} {
   $fd-alert-border: 1px solid;
   $fd-alert-border-radius: 0.25rem;
-  $fd-alert-padding: 0.5rem 1rem;
+  $fd-alert-padding: 0.4375rem 1rem;
   $fd-alert-padding-default: 1rem;
   $fd-alert-padding-dismissible: 2.5rem;
   $fd-alert-padding-status: 2.5rem;
@@ -21,16 +21,14 @@ $block: #{$fd-namespace}-alert;
   @mixin fd-alert-icon-container {
     position: absolute;
     width: 2.5rem;
-    top: 0.625rem;
+    top: 0.4375rem;
     left: 0;
   }
 
   @mixin fd-alert-close-btn-container {
     position: absolute;
-    width: 2rem;
-    height: 1.625rem;
-    top: 0.375rem;
-    right: 0.125rem;
+    top: 0.0625rem;
+    right: 0.0625rem;
   }
 
   // SUCCESS
@@ -58,16 +56,17 @@ $block: #{$fd-namespace}-alert;
   // Block
   @include fd-reset();
 
+  font-size: var(--sapFontSize);
   position: relative;
   color: $fd-alert-text-color;
   background-color: $fd-alert-background-color;
   border: $fd-alert-border;
   border-color: $fd-alert-border-color;
   border-radius: $fd-alert-border-radius;
   padding: $fd-alert-padding;
-  min-height: 2.5rem;
   display: flex;
   align-items: center;
+  min-height: 2rem;
 
   // DEPRECATE v1.6 (brute force embedded solution to adopt new styles)
   .sap-icon--message-error,
@@ -79,9 +78,9 @@ $block: #{$fd-namespace}-alert;
 
   // Elements
   &__close {
+    @include fd-button-reset();
     @include fd-alert-close-btn-container();
     @include fd-icon("decline", "m");
-    @include fd-button-reset();
     @include fd-focus();
 
     @include fd-rtl() {
@@ -222,5 +221,7 @@ $block: #{$fd-namespace}-alert;
 
   &__text {
     @include fd-reset();
+
+    line-height: 1rem;
   }
 }

test/templates/alert/component.njk

@@ -7,7 +7,7 @@
 {%- set _id = utils.id() %}
 <div class="fd-alert{{ modifier.block | modifier('alert') }}{{ 'dismissible' | modifier('alert') if properties.dismissible }}" role="alert" {{ ' id="'+_id+'"' if properties.dismissible }} {{ ' dir="rtl"' if properties.rtl }}>
   {%- if properties.dismissible %}
-  <button class="fd-alert__close" aria-controls="{{ _id }}" aria-label="Close"></button>
+  <button class="fd-button fd-button--light fd-button--compact fd-alert__close" aria-controls="{{ _id }}" aria-label="Close"></button>
   {%- endif %}
   {{ properties.text }}
 </div>