feat(alert): added overflow alert button (#4650)

patternfly · Feb 7, 2022 · 2df0466 · 2df0466
1 parent b6ce13f
commit 2df0466
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 1 deletion.
diff --git a/src/patternfly/components/AlertGroup/alert-group-overflow-button.hbs b/src/patternfly/components/AlertGroup/alert-group-overflow-button.hbs
@@ -0,0 +1,11 @@
+<button class="pf-c-alert-group__overflow-button{{#if alert-group-overflow-button--modifier}} {{alert-group-overflow-button--modifier}}{{/if}}"
+  {{#if alert-group-overflow-button--attribute}}
+    {{{alert-group-overflow-button--attribute}}}
+  {{/if}}>
+  {{#if alert-group-overflow-button--text}}
+    {{{alert-group-overflow-button--text}}}
+  {{/if}}
+  {{#if @partial-block}}
+    {{> @partial-block}}
+  {{/if}}
+</button>
diff --git a/src/patternfly/components/AlertGroup/alert-group.scss b/src/patternfly/components/AlertGroup/alert-group.scss
@@ -9,6 +9,22 @@
   --pf-c-alert-group--m-toast--MaxWidth: #{pf-size-prem(600px)};
   --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
 
+  // Overflow button
+  --pf-c-alert-group__overflow-button--BorderWidth: 0;
+  --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
+  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
+  --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
+  --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
+  --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
+  --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
+
   // Spacing between alerts
   > * + * {
     margin-top: var(--pf-c-alert-group__item--MarginTop);
@@ -24,3 +40,28 @@
     max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
   }
 }
+
+.pf-c-alert-group__overflow-button {
+  position: relative;
+  width: 100%;
+  padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft);
+  color: var(--pf-c-alert-group__overflow-button--Color);
+  background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
+  border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
+  box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
+
+  &:hover {
+    --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
+    --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
+  }
+
+  &:focus {
+    --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
+    --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
+  }
+
+  &:active {
+    --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
+    --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
+  }
+}
diff --git a/src/patternfly/components/AlertGroup/examples/AlertGroup.md b/src/patternfly/components/AlertGroup/examples/AlertGroup.md
@@ -107,6 +107,10 @@ cssPrefix: pf-c-alert-group
       {{/alert-action}}
     {{/alert}}
   {{/alert-item}}
+
+  {{#> alert-item}}
+    {{> alert-group-overflow-button alert-group-overflow-button--text="View 3 more notifications"}}
+  {{/alert-item}}
 {{/alert-group}}
 ```
 ### Overview
@@ -125,7 +129,7 @@ For sighted users, interactive elements can be included in this message in one o
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-m-toast`| `.pf-c-alert-group` | Applies toast alert styling to an alert group. |
-
+| `.pf-c-alert-group__overflow-button` | `<button>` | Applies overflow button styling to an alert group overflow button. |
 ## Documentation
 ### Overview
 Alert groups are used to contain and align consecutive alerts. Groups can either be embedded alongside a page's content or in the top-right corner as a toast group using the `.pf-m-toast` modifier.