Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Mar 21, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e4e355b
fix(global): rename default status color to custom
mcoker Mar 8, 2023
888b45b
chore(text): update default/custom docs
mcoker Mar 8, 2023
7d68cc6
chore(examples): update example text
mcoker Mar 13, 2023
b991af2
chore(notification-drawer): updated list-item docs
mcoker Mar 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/patternfly/base/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down
22 changes: 18 additions & 4 deletions src/patternfly/components/Alert/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't look like --pf-c-alert--m-inline--m-custom--BackgroundColor is defined anywhere

}

&.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);
Expand Down
26 changes: 12 additions & 14 deletions src/patternfly/components/Alert/examples/Alert.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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. |
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/components/Alert/themes/dark/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
8 changes: 5 additions & 3 deletions src/patternfly/components/AlertGroup/examples/AlertGroup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
| -- | -- | -- |
Expand Down Expand Up @@ -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.
4 changes: 2 additions & 2 deletions src/patternfly/components/Icon/examples/Icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down Expand Up @@ -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. |
6 changes: 3 additions & 3 deletions src/patternfly/components/Icon/icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
}

Expand Down
8 changes: 4 additions & 4 deletions src/patternfly/components/Label/label.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/patternfly/components/Label/themes/dark/label.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
10 changes: 5 additions & 5 deletions src/patternfly/components/ModalBox/examples/ModalBox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"')}}
Expand Down Expand Up @@ -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. |
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/components/ModalBox/modal-box-title-icon.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/components/ModalBox/modal-box-title.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/components/ModalBox/modal-box.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}
Expand Down
6 changes: 3 additions & 3 deletions src/patternfly/components/ModalBox/modal-box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/patternfly/components/NotificationDrawer/examples/NotificationDrawer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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** |
Expand All @@ -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. |
Expand Down
Loading