@patternfly/patternfly 4.176.2 → 4.176.3

package/components/Dropdown/dropdown.css

@@ -35,6 +35,7 @@
   --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-primary--disabled--Color: var(--pf-global--Color--100);
   --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
@@ -193,6 +194,7 @@
   border-color: var(--pf-c-dropdown__toggle--before--BorderTopColor) var(--pf-c-dropdown__toggle--before--BorderRightColor) var(--pf-c-dropdown__toggle--before--BorderBottomColor) var(--pf-c-dropdown__toggle--before--BorderLeftColor);
 }
 .pf-c-dropdown__toggle.pf-m-disabled, .pf-c-dropdown__toggle:disabled {
+  --pf-c-dropdown__toggle--m-primary--Color: var(--pf-c-dropdown__toggle--m-primary--disabled--Color);
   --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
   pointer-events: none;
 }
@@ -285,14 +287,14 @@
 .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
 }
-.pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
-  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
-  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
-}
 .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
   border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
 }
+.pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
+  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
+  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
+}
 .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
   border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
@@ -320,14 +322,13 @@
   --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
 }
 .pf-c-dropdown__toggle.pf-m-primary {
-  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
-}
-.pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled):not([disabled]) {
   --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
   --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
+  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
 }
-.pf-c-dropdown__toggle.pf-m-primary::before {
+.pf-c-dropdown__toggle.pf-m-primary::before,
+.pf-c-dropdown__toggle.pf-m-primary .pf-c-dropdown__toggle-button::before {
   border: 0;
 }
 .pf-c-dropdown__toggle.pf-m-primary:hover {
@@ -339,7 +340,7 @@
 .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
 }
-.pf-c-dropdown__toggle.pf-m-primary .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
+.pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
 }
 .pf-c-dropdown__toggle.pf-m-secondary {

package/components/Dropdown/dropdown.scss

@@ -42,6 +42,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-primary--disabled--Color: var(--pf-global--Color--100);
 
   // Secondary
   --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
@@ -249,6 +250,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
 
   &.pf-m-disabled,
   &:disabled {
+    --pf-c-dropdown__toggle--m-primary--Color: var(--pf-c-dropdown__toggle--m-primary--disabled--Color);
     --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
 
     pointer-events: none;
@@ -380,22 +382,22 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
     }
   }
 
-  &:not(.pf-m-action):not(.pf-m-secondary):active,
-  &:not(.pf-m-action):not(.pf-m-secondary).pf-m-active,
-  &.pf-m-action .pf-c-dropdown__toggle-button:active {
+  &:not(.pf-m-action):not(.pf-m-secondary):focus,
+  &.pf-m-action .pf-c-dropdown__toggle-button:focus {
     &::before {
-      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
+      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
 
-      border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
+      border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
     }
   }
 
-  &:not(.pf-m-action):not(.pf-m-secondary):focus,
-  &.pf-m-action .pf-c-dropdown__toggle-button:focus {
+  &:not(.pf-m-action):not(.pf-m-secondary):active,
+  &:not(.pf-m-action):not(.pf-m-secondary).pf-m-active,
+  &.pf-m-action .pf-c-dropdown__toggle-button:active {
     &::before {
-      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
+      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
 
-      border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
+      border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
     }
   }
 
@@ -444,15 +446,14 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 
   &.pf-m-primary {
-    &:not(.pf-m-disabled):not([disabled]) {
-      --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
-      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
-      --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
-    }
+    --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
+    --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
+    --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
 
     border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
 
-    &::before {
+    &::before,
+    .pf-c-dropdown__toggle-button::before {
       border: 0;
     }
 
@@ -469,7 +470,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
       --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
     }
 
-    .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
+    .pf-m-expanded > & {
       --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
     }
   }

package/docs/demos/Alert/examples/Alert.md

@@ -5,371 +5,64 @@ section: components
 
 ### Toast
 
-```html isFullscreen
-<div class="pf-c-page" id="alert-toast-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-alert-toast-example"
-  >Skip to content</a>
-  <header class="pf-c-page__header">
-    <div class="pf-c-page__header-brand">
-      <div class="pf-c-page__header-brand-toggle">
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          id="alert-toast-example-nav-toggle"
-          aria-label="Global navigation"
-          aria-expanded="true"
-          aria-controls="alert-toast-example-primary-nav"
-        >
-          <i class="fas fa-bars" aria-hidden="true"></i>
-        </button>
-      </div>
-      <a href="#" class="pf-c-page__header-brand-link">
-        <img
-          class="pf-c-brand"
-          src="/assets/images/PF-Masthead-Logo.svg"
-          alt="PatternFly logo"
-        />
-      </a>
-    </div>
-
-    <div class="pf-c-page__header-tools">
-      <div class="pf-c-page__header-tools-group">
-        <div
-          class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
-        >
-          <button
-            class="pf-c-button pf-m-plain"
-            type="button"
-            aria-label="Settings"
-          >
-            <i class="fas fa-cog" aria-hidden="true"></i>
-          </button>
-        </div>
-        <div
-          class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
-        >
-          <button
-            class="pf-c-button pf-m-plain"
-            type="button"
-            aria-label="Help"
-          >
-            <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
-          </button>
-        </div>
-      </div>
-      <div class="pf-c-page__header-tools-group">
-        <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
-          <div class="pf-c-dropdown">
-            <button
-              class="pf-c-dropdown__toggle pf-m-plain"
-              id="alert-toast-example-dropdown-kebab-1-button"
-              aria-expanded="false"
-              type="button"
-              aria-label="Actions"
-            >
-              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-            </button>
-            <ul
-              class="pf-c-dropdown__menu pf-m-align-right"
-              aria-labelledby="alert-toast-example-dropdown-kebab-1-button"
-              hidden
-            >
-              <li>
-                <a class="pf-c-dropdown__menu-item" href="#">Link</a>
-              </li>
-              <li>
-                <button class="pf-c-dropdown__menu-item" type="button">Action</button>
-              </li>
-              <li>
-                <a
-                  class="pf-c-dropdown__menu-item pf-m-disabled"
-                  href="#"
-                  aria-disabled="true"
-                  tabindex="-1"
-                >Disabled link</a>
-              </li>
-              <li>
-                <button
-                  class="pf-c-dropdown__menu-item"
-                  type="button"
-                  disabled
-                >Disabled action</button>
-              </li>
-              <li class="pf-c-divider" role="separator"></li>
-              <li>
-                <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div
-          class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
-        >
-          <div class="pf-c-dropdown">
-            <button
-              class="pf-c-dropdown__toggle pf-m-plain"
-              id="alert-toast-example-dropdown-kebab-2-button"
-              aria-expanded="false"
-              type="button"
-            >
-              <span class="pf-c-dropdown__toggle-text">John Smith</span>
-              <span class="pf-c-dropdown__toggle-icon">
-                <i class="fas fa-caret-down" aria-hidden="true"></i>
-              </span>
-            </button>
-            <ul
-              class="pf-c-dropdown__menu"
-              aria-labelledby="alert-toast-example-dropdown-kebab-2-button"
-              hidden
-            >
-              <li>
-                <a class="pf-c-dropdown__menu-item" href="#">Link</a>
-              </li>
-              <li>
-                <button class="pf-c-dropdown__menu-item" type="button">Action</button>
-              </li>
-              <li>
-                <a
-                  class="pf-c-dropdown__menu-item pf-m-disabled"
-                  href="#"
-                  aria-disabled="true"
-                  tabindex="-1"
-                >Disabled link</a>
-              </li>
-              <li>
-                <button
-                  class="pf-c-dropdown__menu-item"
-                  type="button"
-                  disabled
-                >Disabled action</button>
-              </li>
-              <li class="pf-c-divider" role="separator"></li>
-              <li>
-                <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <img
-        class="pf-c-avatar"
-        src="/assets/images/img_avatar.svg"
-        alt="Avatar image"
-      />
-    </div>
-  </header>
-  <div class="pf-c-page__sidebar">
-    <div class="pf-c-page__sidebar-body">
-      <nav
-        class="pf-c-nav"
-        id="alert-toast-example-primary-nav"
-        aria-label="Global"
-      >
-        <ul class="pf-c-nav__list">
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">System panel</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a
-              href="#"
-              class="pf-c-nav__link pf-m-current"
-              aria-current="page"
-            >Policy</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Authentication</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Network services</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Server</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-  <main
-    class="pf-c-page__main"
-    tabindex="-1"
-    id="main-content-alert-toast-example"
-  >
-    <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
-      <div class="pf-c-page__main-body">
-        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-          <ol class="pf-c-breadcrumb__list">
-            <li class="pf-c-breadcrumb__item">
-              <a href="#" class="pf-c-breadcrumb__link">Section home</a>
-            </li>
-            <li class="pf-c-breadcrumb__item">
-              <span class="pf-c-breadcrumb__item-divider">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
-              </span>
-
-              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
-            </li>
-            <li class="pf-c-breadcrumb__item">
-              <span class="pf-c-breadcrumb__item-divider">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
-              </span>
-
-              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
-            </li>
-            <li class="pf-c-breadcrumb__item">
-              <span class="pf-c-breadcrumb__item-divider">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
-              </span>
-
-              <a
-                href="#"
-                class="pf-c-breadcrumb__link pf-m-current"
-                aria-current="page"
-              >Section landing</a>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </section>
-    <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
-      <div class="pf-c-page__main-body">
-        <div class="pf-c-content">
-          <h1>Main title</h1>
-          <p>This is a demo of the page component.</p>
-        </div>
-      </div>
-    </section>
-    <section class="pf-c-page__main-section pf-m-limit-width">
-      <div class="pf-c-page__main-body">
-        <div class="pf-l-gallery pf-m-gutter">
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </main>
-</div>
-<ul class="pf-c-alert-group pf-m-toast">
-  <li class="pf-c-alert-group__item">
-    <div class="pf-c-alert pf-m-success" aria-label="Success alert">
-      <div class="pf-c-alert__icon">
-        <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
-      </div>
-      <p class="pf-c-alert__title">
-        <span class="pf-screen-reader">Success alert:</span>
+```hbs isFullscreen
+{{> page-demo-default page-demo-default--id="alert-toast-example"}}
+{{#> alert-group alert-group--modifier="pf-m-toast"}}
+  {{#> alert-item}}
+    {{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
+      {{#> alert-icon alert-icon--type="check-circle"}}
+      {{/alert-icon}}
+      {{#> alert-title}}
+        {{#> screen-reader}}Success alert:{{/screen-reader}}
         Newest notification
-      </p>
-      <div class="pf-c-alert__action">
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-label="Close success alert: Newest notification"
-        >
+      {{/alert-title}}
+      {{#> alert-action}}
+        {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close success alert: Newest notification"'}}
           <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-      <div class="pf-c-alert__description">
-        <p>This is a description of the notification content.</p>
-      </div>
-    </div>
-  </li>
-  <li class="pf-c-alert-group__item">
-    <div class="pf-c-alert pf-m-warning" aria-label="Warning alert">
-      <div class="pf-c-alert__icon">
-        <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
-      </div>
-      <p class="pf-c-alert__title">
-        <span class="pf-screen-reader">Info alert:</span>
+        {{/button}}
+      {{/alert-action}}
+      {{#> alert-description}}
+        This is a description of the notification content.
+      {{/alert-description}}
+    {{/alert}}
+  {{/alert-item}}
+  {{#> alert-item}}
+    {{#> alert alert--modifier="pf-m-warning" alert--attribute='aria-label="Warning alert"'}}
+      {{#> alert-icon alert-icon--type="exclamation-triangle"}}
+      {{/alert-icon}}
+      {{#> alert-title}}
+        {{#> screen-reader}}Info alert:{{/screen-reader}}
         Second newest notification
-      </p>
-      <div class="pf-c-alert__action">
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-label="Close warning alert: second newest notification"
-        >
+      {{/alert-title}}
+      {{#> alert-action}}
+        {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close warning alert: second newest notification"'}}
           <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-      <div class="pf-c-alert__description">
-        <p>This is a description of the notification content.</p>
-      </div>
-    </div>
-  </li>
-  <li class="pf-c-alert-group__item">
-    <div class="pf-c-alert pf-m-danger" aria-label="Danger alert">
-      <div class="pf-c-alert__icon">
-        <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
-      </div>
-      <p class="pf-c-alert__title">
-        <span class="pf-screen-reader">Last notification</span>
+        {{/button}}
+      {{/alert-action}}
+      {{#> alert-description}}
+        This is a description of the notification content.
+      {{/alert-description}}
+    {{/alert}}
+  {{/alert-item}}
+  {{#> alert-item}}
+    {{#> alert alert--modifier="pf-m-danger" alert--attribute='aria-label="Danger alert"'}}
+      {{#> alert-icon alert-icon--type="exclamation-circle"}}
+      {{/alert-icon}}
+      {{#> alert-title}}
+        {{#> screen-reader}}Last notification{{/screen-reader}}
         Last notification
-      </p>
-      <div class="pf-c-alert__action">
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-label="Close danger alert: Last notification"
-        >
+      {{/alert-title}}
+      {{#> alert-action}}
+        {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close danger alert: Last notification"'}}
           <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-      <div class="pf-c-alert__description">
-        <p>This is a description of the notification content.</p>
-      </div>
-    </div>
-  </li>
-</ul>
-
+        {{/button}}
+      {{/alert-action}}
+      {{#> alert-description}}
+        This is a description of the notification content.
+      {{/alert-description}}
+    {{/alert}}
+  {{/alert-item}}
+{{/alert-group}}
 ```
 
 ### Inline Alert in Horizontal Form