fix(global): rename default status color to custom (patternfly#5418)

* fix(global): rename default status color to custom * chore(text): update default/custom docs * chore(examples): update example text * chore(notification-drawer): updated list-item docs removed explicit state classes, unbolded that part to match alert and button, which say the same thing.
mattnolting · Dec 12, 2023 · 47a223d · 47a223d
1 parent c69f9ae
commit 47a223d
Show file tree

Hide file tree

Showing 30 changed files with 109 additions and 95 deletions.
diff --git a/src/patternfly/base/_variables.scss b/src/patternfly/base/_variables.scss
@@ -123,9 +123,9 @@
   --pf-global--primary-color--light-100: #{$pf-global--primary-color--light-100};
   --pf-global--primary-color--dark-100: #{$pf-global--primary-color--dark-100};
   --pf-global--secondary-color--100: #{$pf-global--secondary-color--100};
-  --pf-global--default-color--100: #{$pf-global--default-color--100};
-  --pf-global--default-color--200: #{$pf-global--default-color--200};
-  --pf-global--default-color--300: #{$pf-global--default-color--300};
+  --pf-global--custom-color--100: #{$pf-global--custom-color--100};
+  --pf-global--custom-color--200: #{$pf-global--custom-color--200};
+  --pf-global--custom-color--300: #{$pf-global--custom-color--300};
   --pf-global--success-color--100: #{$pf-global--success-color--100};
   --pf-global--success-color--200: #{$pf-global--success-color--200};
   --pf-global--info-color--100: #{$pf-global--info-color--100};

diff --git a/src/patternfly/components/Alert/alert.scss b/src/patternfly/components/Alert/alert.scss
@@ -8,7 +8,7 @@
     ". description description"
     ". actiongroup actiongroup";
   --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200);
+  --pf-c-alert--BorderTopColor: var(--pf-global--BorderColor--100);
   --pf-c-alert--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-alert--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md);
@@ -25,14 +25,14 @@
   --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition);
 
   // Icon
-  --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
+  --pf-c-alert__icon--Color: var(--pf-global--Color--100);
   --pf-c-alert__icon--MarginTop: #{pf-size-prem(1px)};
   --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);
 
   // Title
   --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold);
-  --pf-c-alert__title--Color: var(--pf-global--default-color--300);
+  --pf-c-alert__title--Color: var(--pf-global--Color--100);
   --pf-c-alert__title--max-lines: 1;
 
   // Action
@@ -51,6 +51,11 @@
   --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
   --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg);
 
+  // Custom
+  --pf-c-alert--m-custom--BorderTopColor: var(--pf-global--custom-color--200);
+  --pf-c-alert--m-custom__icon--Color: var(--pf-global--custom-color--200);
+  --pf-c-alert--m-custom__title--Color: var(--pf-global--custom-color--300);
+
   // Success
   --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100);
   --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100);
@@ -73,7 +78,9 @@
 
   // Inline
   --pf-c-alert--m-inline--BoxShadow: none;
-  --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50);
+
+  // Inline custom
+  --pf-c-alert--m-inline--m-custom--BackgroundColor: var(--pf-global--palette--cyan-50);
 
   // Inline success
   --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50);
@@ -119,6 +126,13 @@
   border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
   box-shadow: var(--pf-c-alert--BoxShadow);
 
+  &.pf-m-custom {
+    --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-custom--BorderTopColor);
+    --pf-c-alert__icon--Color: var(--pf-c-alert--m-custom__icon--Color);
+    --pf-c-alert__title--Color: var(--pf-c-alert--m-custom__title--Color);
+    --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-custom--BackgroundColor);
+  }
+
   &.pf-m-success {
     --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
     --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);

diff --git a/src/patternfly/components/Alert/examples/Alert.md b/src/patternfly/components/Alert/examples/Alert.md
@@ -7,11 +7,11 @@ cssPrefix: pf-c-alert
 ## Examples
 ### Types
 ```hbs
-{{#> alert alert--attribute='aria-label="Default alert"'}}
+{{#> alert alert--modifier="pf-m-custom" alert--attribute='aria-label="Custom alert"'}}
   {{> alert-icon alert-icon--type="bell"}}
   {{#> alert-title}}
-    {{#> screen-reader}}Default alert:{{/screen-reader}}
-    Default alert title
+    {{#> screen-reader}}Custom alert:{{/screen-reader}}
+    Custom alert title
   {{/alert-title}}
 {{/alert}}
 <br>
@@ -157,11 +157,11 @@ cssPrefix: pf-c-alert
 
 ### Inline types
 ```hbs
-{{#> alert alert--modifier="pf-m-inline" alert--attribute='aria-label="Inline default alert"'}}
+{{#> alert alert--modifier="pf-m-custom pf-m-inline" alert--attribute='aria-label="Inline custom alert"'}}
   {{> alert-icon alert-icon--type="bell"}}
   {{#> alert-title}}
-    {{#> screen-reader}}Default inline alert:{{/screen-reader}}
-    Default inline alert title
+    {{#> screen-reader}}Custom inline alert:{{/screen-reader}}
+    Custom inline alert title
   {{/alert-title}}
 {{/alert}}
 <br>
@@ -404,24 +404,22 @@ cssPrefix: pf-c-alert
 ```
 
 ## Documentation
-### Overview
-Add a modifier class to the default alert to change the color: `.pf-m-success`, `.pf-m-danger`, `.pf-m-warning`, or `.pf-m-info`.
-
 ### Usage
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-c-alert` | `<div>` | Applies default alert styling. Always use with a modifier class. **Required** |
+| `.pf-c-alert` | `<div>` | Initiates the alert component. Always use with a status modifier class. **Required** |
 | `.pf-c-alert__toggle` | `<div>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
 | `.pf-c-alert__toggle-icon` | `<span>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
 | `.pf-c-alert__icon` | `<div>` | Defines the alert icon. **Required** |
 | `.pf-c-alert__title` | `<p>, <h1-h6>` | Defines the alert title. **Required** |
 | `.pf-c-alert__description` | `<div>` | Defines the alert description area. |
 | `.pf-c-alert__action` | `<div>` | Defines the action button wrapper. Should contain `.pf-c-button.pf-m-plain` for close action or `.pf-c-button.pf-m-link` for link text. It should only include one action. |
 | `.pf-c-alert__action-group` | `<div>` | Defines the action button group. Should contain `.pf-c-button.pf-m-link.pf-m-inline` for inline link text. **Note:** only inline link buttons are supported in the alert action group. |
-| `.pf-m-success` | `.pf-c-alert` | Applies success styling. |
-| `.pf-m-danger` | `.pf-c-alert` | Applies danger styling. |
-| `.pf-m-warning` | `.pf-c-alert` | Applies warning styling. |
-| `.pf-m-info` | `.pf-c-alert` | Applies info styling. |
+| `.pf-m-custom` | `.pf-c-alert` | Applies custom status styling. |
+| `.pf-m-success` | `.pf-c-alert` | Applies success status styling. |
+| `.pf-m-danger` | `.pf-c-alert` | Applies danger status styling. |
+| `.pf-m-warning` | `.pf-c-alert` | Applies warning status styling. |
+| `.pf-m-info` | `.pf-c-alert` | Applies info status styling. |
 | `.pf-m-inline` | `.pf-c-alert` | Applies inline styling. |
 | `.pf-m-plain` | `.pf-c-alert.pf-m-inline` | Applies plain styling to an inline alert. |
 | `.pf-m-expandable` | `.pf-c-alert` | Applies expandable styles to the alert. |

diff --git a/src/patternfly/components/Alert/themes/dark/alert.scss b/src/patternfly/components/Alert/themes/dark/alert.scss
@@ -3,7 +3,7 @@
 @mixin pf-theme-dark-alert() {
   .pf-c-alert {
     --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
-    --pf-c-alert__title--Color: var(--pf-global--default-color--200);
+    --pf-c-alert__title--Color: var(--pf-global--custom-color--200);
     --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100);
     --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100);
     --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100);

diff --git a/src/patternfly/components/AlertGroup/examples/AlertGroup.md b/src/patternfly/components/AlertGroup/examples/AlertGroup.md
@@ -48,6 +48,7 @@ cssPrefix: pf-c-alert-group
 
 ### Overview
 `.pf-c-alert-group` is optional when only one alert is needed. It becomes required when more than one alert is used in a list.
+
 ### Usage
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
@@ -125,11 +126,12 @@ For sighted users, interactive elements can be included in this message in one o
 - Using a link to the Builds page: “The build is complete. Go to the [Builds]() page to download” using `<a href="url">Builds</a>`
 - Using a button to download: “The build is complete. Go to the Builds page to [download]()" using `<button class="pf-c-button pf-m-link pf-m-inline type="button">download</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.
+
 ### Modifiers
 | 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.
diff --git a/src/patternfly/components/Icon/examples/Icon.md b/src/patternfly/components/Icon/examples/Icon.md
@@ -80,7 +80,7 @@ cssPrefix: pf-c-icon
   {{/icon-content}}
 {{/icon}}
 {{#> icon}}
-  {{#> icon-content icon-content--modifier="pf-m-default"}}
+  {{#> icon-content icon-content--modifier="pf-m-custom"}}
     <i class="fas fa-bell" aria-hidden="true"></i>
   {{/icon-content}}
 {{/icon}}
@@ -213,4 +213,4 @@ Refer to the [icons](/guidelines/icons) page for information about the PatternFl
 | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
 | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon__content`, `pf-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
 | `.pf-m-in-progress` | `.pf-c-icon` | Shows the progress element in place of the icon content.  |
-| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-default`  | `.pf-c-icon__content` | Modifies the icon content to use a status color.  |
+| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom`  | `.pf-c-icon__content` | Modifies the icon content to use a status color.  |
diff --git a/src/patternfly/components/Icon/icon.scss b/src/patternfly/components/Icon/icon.scss
@@ -25,7 +25,7 @@
   --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
   --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
   --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
-  --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
+  --pf-c-icon__content--m-custom--Color: var(--pf-global--custom-color--100);
   --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
   --pf-c-icon--m-inline__content--FontSize: 1em;
   --pf-c-icon__content--svg--VerticalAlign: -.125em;
@@ -135,8 +135,8 @@
     --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
   }
 
-  &.pf-m-default {
-    --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
+  &.pf-m-custom {
+    --pf-c-icon__content--Color: var(--pf-c-icon__content--m-custom--Color);
   }
 }
 

diff --git a/src/patternfly/components/Label/label.scss b/src/patternfly/components/Label/label.scss
@@ -93,11 +93,11 @@
 
   // Cyan
   --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
-  --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
-  --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
+  --pf-c-label--m-cyan__icon--Color: var(--pf-global--custom-color--200);
+  --pf-c-label--m-cyan__content--Color: var(--pf-global--custom-color--300);
   --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
-  --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
-  --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
+  --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--custom-color--200);
+  --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--custom-color--200);
   --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
   --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
   --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change

diff --git a/src/patternfly/components/Label/themes/dark/label.scss b/src/patternfly/components/Label/themes/dark/label.scss
@@ -38,8 +38,8 @@
     --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
     --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
     --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
-    --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
-    --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
+    --pf-c-label--m-cyan__content--Color: var(--pf-global--custom-color--200);
+    --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--custom-color--200);
     --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
     --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
     --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);

diff --git a/src/patternfly/components/ModalBox/examples/ModalBox.md b/src/patternfly/components/ModalBox/examples/ModalBox.md
@@ -189,14 +189,14 @@ import './ModalBox.css'
 {{/modal-example}}
 ```
 
-### Default alert
+### Custom alert
 ```hbs isFullscreen
-{{#> modal-example modal-example--id="default-alert"}}
-  {{#> modal-box modal-box--attribute=(concat 'aria-labelledby="' modal-example--id '-title" aria-describedby="' modal-example--id '-description"') modal-box--IsAlert="true" modal-box--IsDefaultAlert="true"}}
+{{#> modal-example modal-example--id="custom-alert"}}
+  {{#> modal-box modal-box--attribute=(concat 'aria-labelledby="' modal-example--id '-title" aria-describedby="' modal-example--id '-description"') modal-box--IsAlert="true" modal-box--IsCustomAlert="true"}}
     {{> modal-box-close}}
     {{#> modal-box-header}}
       {{#> modal-box-title modal-box-title--IsIcon="true" modal-box-title--attribute=(concat 'id="' modal-example--id '-title"')}}
-        Default alert modal title
+        Custom alert modal title
       {{/modal-box-title}}
     {{/modal-box-header}}
     {{#> modal-box-body modal-box-body--attribute=(concat 'id="' modal-example--id '-description"')}}
@@ -327,7 +327,7 @@ A modal box is a generic rectangular container that can be used to build modals.
 | `.pf-m-lg` | `.pf-c-modal-box` | Modifies for a large modal box width. |
 | `.pf-m-align-top` | `.pf-c-modal-box` | Modifies for top alignment.  |
 | `.pf-m-icon` | `.pf-c-modal-box__title` | Modifies the title layout to accommodate an icon. |
-| `.pf-m-default` | `.pf-c-modal-box` | Modifies for the default alert state. |
+| `.pf-m-custom` | `.pf-c-modal-box` | Modifies for the custom alert state. |
 | `.pf-m-info` | `.pf-c-modal-box` | Modifies for the info alert state. |
 | `.pf-m-success` | `.pf-c-modal-box` | Modifies for the success alert state. |
 | `.pf-m-warning` | `.pf-c-modal-box` | Modifies for the warning alert state. |

diff --git a/src/patternfly/components/ModalBox/modal-box-title-icon.hbs b/src/patternfly/components/ModalBox/modal-box-title-icon.hbs
@@ -2,7 +2,7 @@
   {{#if modal-box-title-icon--attribute}}
     {{{modal-box-title-icon--attribute}}}
   {{/if}}>
-  {{#if modal-box--IsDefaultAlert}}
+  {{#if modal-box--IsCustomAlert}}
     <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
   {{else if modal-box--IsInfoAlert}}
     <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>

diff --git a/src/patternfly/components/ModalBox/modal-box-title.hbs b/src/patternfly/components/ModalBox/modal-box-title.hbs
@@ -7,7 +7,7 @@
   {{/if}}
   {{#if modal-box--IsAlert}}
     <span class="pf-u-screen-reader">
-      {{#if modal-box--IsDefaultAlert}}
+      {{#if modal-box--IsCustomAlert}}
         Default
       {{else if modal-box--IsInfoAlert}}
         Info

diff --git a/src/patternfly/components/ModalBox/modal-box.hbs b/src/patternfly/components/ModalBox/modal-box.hbs
@@ -1,4 +1,4 @@
-<div class="pf-c-modal-box{{#if modal-box--IsDangerAlert}} pf-m-danger{{else if modal-box--IsWarningAlert}} pf-m-warning{{else if modal-box--IsSuccessAlert}} pf-m-success{{else if modal-box--IsInfoAlert}} pf-m-info{{else if modal-box--IsDefaultAlert}} pf-m-default{{/if}}{{#if modal-box--modifier}} {{modal-box--modifier}}{{/if}}"
+<div class="pf-c-modal-box{{#if modal-box--IsDangerAlert}} pf-m-danger{{else if modal-box--IsWarningAlert}} pf-m-warning{{else if modal-box--IsSuccessAlert}} pf-m-success{{else if modal-box--IsInfoAlert}} pf-m-info{{else if modal-box--IsCustomAlert}} pf-m-custom{{/if}}{{#if modal-box--modifier}} {{modal-box--modifier}}{{/if}}"
   role="dialog"
   aria-modal="true"
   {{#if modal-box--attribute}}

diff --git a/src/patternfly/components/ModalBox/modal-box.scss b/src/patternfly/components/ModalBox/modal-box.scss
@@ -19,7 +19,7 @@
   --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
   --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
   --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
-  --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
+  --pf-c-modal-box--m-custom__title-icon--Color: var(--pf-global--custom-color--200);
 
   @media (min-width: $pf-global--breakpoint--xl) {
     --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
@@ -107,8 +107,8 @@
     --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
   }
 
-  &.pf-m-default {
-    --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
+  &.pf-m-custom {
+    --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-custom__title-icon--Color);
   }
 
   &.pf-m-info {

diff --git a/src/patternfly/components/NotificationDrawer/examples/NotificationDrawer.md b/src/patternfly/components/NotificationDrawer/examples/NotificationDrawer.md
@@ -124,7 +124,7 @@ cssPrefix: pf-c-notification-drawer
 | `.pf-c-notification-drawer__header-action-close` | `<div>` | Initiates the notification drawer header action button. |
 | `.pf-c-notification-drawer__body` | `<div>` | Initiates the notification drawer body. **Required** |
 | `.pf-c-notification-drawer__list` | `<ul>` | Initiates a notification list. **Required** |
-| `.pf-c-notification-drawer__list-item` | `<li>` | Initiates a notification list item. **Always use with a state modifier - one of `.pf-m-info`, `.pf-m-warning`, `.pf-m-danger`, `.pf-m-success`.** **Required** |
+| `.pf-c-notification-drawer__list-item` | `<li>` | Initiates a notification list item. Always use with a state modifier class. **Required** |
 | `.pf-c-notification-drawer__list-item-header` | `<div>` | Initiates a notification list item header. **Required** |
 | `.pf-c-notification-drawer__list-item-header-icon` | `<span>` | Initiates a notification list item header icon. **Required** |
 | `.pf-c-notification-drawer__list-item-header-title` | `<h2>` | Initiates a notification list item header title. **Required** |
@@ -137,7 +137,7 @@ cssPrefix: pf-c-notification-drawer
 | `.pf-c-notification-drawer__group-title` | `<div>` | Initiates a notification group toggle title. **Required** |
 | `.pf-c-notification-drawer__group-count` | `<div>` | Initiates a notification group toggle count. |
 | `.pf-c-notification-drawer__group-icon` | `<span>` | Initiates a notification group toggle icon. **Required** |
-| `.pf-m-default` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the default state. |
+| `.pf-m-custom` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the custom state. |
 | `.pf-m-info` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the info state. |
 | `.pf-m-warning` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the warning state. |
 | `.pf-m-danger` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the danger state. |