feat: add no-icon modifier for alert to match UI Kit v1.4.3

docs/_data/versions.yml

@@ -69,7 +69,7 @@ panel-grid:
 
 alert:
   since: 1.0.0
-  updated: 1.4.0
+  updated: 1.6.0
 
 button:
   since: 1.0.0

docs/pages/components/alert.md

@@ -82,6 +82,39 @@ Add the modifier class `fd-alert--error` for Error alert.
 
 {% include display-component.html component=error-alert %}
 
+## No Icons
+
+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>
+  Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
+</div>
+
+<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>
+  Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
+</div>
+
+<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>
+  Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
+</div>
+
+<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>
+  Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
+</div>
+{% endcapture %}
+
+{% include display-component.html component=no-icon class='no-icon' %}
+
+
 ## Right to left support
 If right to left text direction is provided, the dismiss button moves to left side.
 
@@ -93,3 +126,9 @@ If right to left text direction is provided, the dismiss button moves to left si
 {% endcapture %}
 
 {% include display-component.html component=default-alert %}
+
+<style>
+  .docs-component__no-icon .fd-alert--no-icon{
+    margin-bottom: 20px;
+  }
+</style>

scss/components/alert.scss

@@ -27,7 +27,7 @@ $block: #{$fd-namespace}-alert;
     --fd-alert-border-color: var(--fd-color-neutral-4);
     --fd-alert-action-color: var(--fd-color-action-1);
 
-    $fd-alert-padding-x: fd-space("xxs") !default;
+    $fd-alert-padding-x: fd-space(2.25) !default;
     $fd-alert-padding-y: fd-space("xs") !default;
 
     // Block
@@ -51,12 +51,11 @@ $block: #{$fd-namespace}-alert;
       position: absolute;
       right: 0;
       top: 0;
-      @include fd-icon("decline", "l");
+      @include fd-icon("decline", "m");
       @include fd-button-reset();
       @include fd-var-color("color", $fd-alert-action-color, --fd-alert-action-color);
-
       width: fd-space(9);
-      height: fd-space(9);
+      height: fd-space(9.5);
       @include fd-focus();
       @include fd-rtl() {
         left: 0;
@@ -77,13 +76,20 @@ $block: #{$fd-namespace}-alert;
     &--information,
     &--success,
     &--error {
+      &::before {
+        margin-top: fd-space(.75);
+      }
       padding-left: fd-space("large");
       @include fd-rtl() {
         padding-right: fd-space("large");
         padding-left: $fd-alert-padding-x;
         &::before {
           display: none;
         }
+        &::after {
+          margin-top: fd-space(.5);
+          display: none;
+        }
       }
       &.#{$block}--dismissible {
         padding-right: fd-space("large");
@@ -113,9 +119,9 @@ $block: #{$fd-namespace}-alert;
       }
       @include fd-var-color("background-color", $fd-alert-background-color--warning, --fd-alert-background-color);
       @include fd-var-color("border-color", $fd-alert-border-color--warning, --fd-alert-border-color);
-      @include fd-icon("message-warning", "l");
+      @include fd-icon("message-warning", "m");
       @include fd-rtl() {
-        @include fd-icon("message-warning", "l", "after");
+        @include fd-icon("message-warning", "m", "after");
       }
     }
     &--error {
@@ -127,9 +133,9 @@ $block: #{$fd-namespace}-alert;
       }
       @include fd-var-color("background-color", $fd-alert-background-color--error, --fd-alert-background-color);
       @include fd-var-color("border-color", $fd-alert-border-color--error, --fd-alert-border-color);
-      @include fd-icon("message-error", "l");
+      @include fd-icon("message-error", "m");
       @include fd-rtl() {
-        @include fd-icon("message-error", "l", "after");
+        @include fd-icon("message-error", "m", "after");
       }
     }
     &--success {
@@ -141,9 +147,9 @@ $block: #{$fd-namespace}-alert;
       }
       @include fd-var-color("background-color", $fd-alert-background-color--success, --fd-alert-background-color);
       @include fd-var-color("border-color", $fd-alert-border-color--success, --fd-alert-border-color);
-      @include fd-icon("message-success", "l");
+      @include fd-icon("message-success", "m");
       @include fd-rtl() {
-        @include fd-icon("message-success", "l", "after");
+        @include fd-icon("message-success", "m", "after");
       }
     }
     &--information {
@@ -155,9 +161,21 @@ $block: #{$fd-namespace}-alert;
       }
       @include fd-var-color("background-color", $fd-alert-background-color--information, --fd-alert-background-color);
       @include fd-var-color("border-color", $fd-alert-border-color--information, --fd-alert-border-color);
-      @include fd-icon("message-information", "l");
+      @include fd-icon("message-information", "m");
       @include fd-rtl() {
-        @include fd-icon("message-information", "l", "after");
+        @include fd-icon("message-information", "m", "after");
+      }
+    }
+    &--no-icon {
+      padding-left: $fd-alert-padding-x;
+      &::before {
+        display: none;
+      }
+      @include fd-rtl() {
+        padding-right: $fd-alert-padding-x;
+        &::after {
+          display: none;
+        }
       }
     }
 }

test/templates/alert/index.njk

@@ -71,6 +71,71 @@
 
 <br><br>
 
+<h1>alert --no-icon</h1>
+
+<!-- output the component example and the code snippet -->
+{% set example %}
+{{  alert(
+        properties={
+            text: '<p>Integer turpis augue, tincidunt dignissim mauris id, rhoncus dapibus purus. Maecenas et enim odio. Nullam massa metus, varius quis vehicula sed, pharetra mollis erat. Sed bibendum, sapien at posuere interdum, libero est sollicitudin magna, ac gravida tellus purus eu ipsum. Proin ut quam arcu. <a href="#" class="fd-link">Learn More</a></p>',
+            dismissible: false
+        },
+        modifier={
+            block: []
+        }
+    )
+}}
+<br>
+{{  alert(
+        properties={
+            text: '<p>Integer turpis augue, tincidunt dignissim mauris id, rhoncus dapibus purus. Maecenas et enim odio. Nullam massa metus, varius quis vehicula sed, pharetra mollis erat. Sed bibendum, sapien at posuere interdum, libero est sollicitudin magna, ac gravida tellus purus eu ipsum. Proin ut quam arcu. <a href="#" class="fd-link">Learn More</a></p>',
+            dismissible: false
+        },
+        modifier={
+            block: ["information", "no-icon"]
+        }
+    )
+}}
+<br>
+{{  alert(
+        properties={
+            text: '<p>Integer turpis augue, tincidunt dignissim mauris id, rhoncus dapibus purus. Maecenas et enim odio. Nullam massa metus, varius quis vehicula sed, pharetra mollis erat. Sed bibendum, sapien at posuere interdum, libero est sollicitudin magna, ac gravida tellus purus eu ipsum. Proin ut quam arcu.',
+            dismissible: false
+        },
+        modifier={
+            block: ["success", "no-icon"]
+        }
+    )
+}}
+<br>
+{{  alert(
+        properties={
+            text: '<p>Integer turpis augue, tincidunt dignissim mauris id, rhoncus dapibus purus. Maecenas et enim odio. Nullam massa metus, varius quis vehicula sed, pharetra mollis erat. Sed bibendum, sapien at posuere interdum, libero est sollicitudin magna, ac gravida tellus purus eu ipsum. Proin ut quam arcu.',
+            dismissible: false
+        },
+        modifier={
+            block: ["warning", "no-icon"]
+        }
+    )
+}}
+<br>
+{{  alert(
+        properties={
+            text: '<p>Integer turpis augue, tincidunt dignissim mauris id, rhoncus dapibus purus. Maecenas et enim odio. Nullam massa metus, varius quis vehicula sed, pharetra mollis erat. Sed bibendum, sapien at posuere interdum, libero est sollicitudin magna, ac gravida tellus purus eu ipsum. Proin ut quam arcu.',
+            dismissible: false
+        },
+        modifier={
+            block: ["error", "no-icon"]
+        }
+    )
+}}
+<br>
+
+{% endset %}
+{{- format(example) -}}
+
+<br><br>
+
 <h1>dismissible</h1>
 
 {% set example %}
@@ -132,6 +197,68 @@
 {{- format(example) -}}
 
 <br><br>
+<h1>dismissible + no-icon</h1>
+
+{% set example %}
+{{  alert(
+        properties={
+            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>',
+            dismissible: true
+        },
+        modifier={
+            block: []
+        }
+    )
+}}
+<br>
+{{  alert(
+        properties={
+            text: 'Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. <a href="#" class="fd-link">Learn More</a>',
+            dismissible: true
+        },
+        modifier={
+            block: ["information", "no-icon"]
+        }
+    )
+}}
+<br>
+{{  alert(
+        properties={
+            text: 'Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. <a href="#" class="fd-link">Learn More</a>',
+            dismissible: true
+        },
+        modifier={
+            block: ["success", "no-icon"]
+        }
+    )
+}}
+<br>
+{{  alert(
+        properties={
+            text: 'Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. <a href="#" class="fd-link">Learn More</a>',
+            dismissible: true
+        },
+        modifier={
+            block: ["warning", "no-icon"]
+        }
+    )
+}}
+<br>
+{{  alert(
+        properties={
+            text: 'Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. Pellentesque metus in sem lacus commodo eget justo ut rutrum varius nunc. Sed non rhoncus risus. <a href="#" class="fd-link">Learn More</a>',
+            dismissible: true
+        },
+        modifier={
+            block: ["error", "no-icon"]
+        }
+    )
+}}
+{% endset %}
+{{- format(example) -}}
+
+<br><br>
+
 <h1>dismissible right to left</h1>
 {% set example %}
 {{  alert(

test/templates/button-group/index.njk

@@ -57,6 +57,23 @@
           }}
   {%- endcall %}
 
+  {% call button_group() -%}
+    {{-  button(
+      { label: 'First' },
+        modifier={ block: [size] },
+        aria={ disabled: true, selected: true })
+      }}
+    {{-  button(
+        { label: 'Second' },
+          modifier={ block: [size] },
+          aria={ })
+        }}
+    {{-  button(
+          { label: 'Third' },
+            modifier={ block: [size] },
+            aria={ disabled: true })
+          }}
+  {%- endcall %}
 
     {% endset %}
     {{ format(example) }}