Skip to content

Commit

Permalink
feat(notification-badge): added expanded state (#5048)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcoker
mcoker committed Sep 1, 2022
1 parent 5561e94 commit ae9f524
Show file tree
Hide file tree
Showing 9 changed files with 135 additions and 147 deletions.
2 changes: 1 addition & 1 deletion src/patternfly/components/Button/button.hbs
View file
Expand Up @@ -6,7 +6,7 @@
{{else}}
type="button"
{{/if}}
{{#if button--IsExpanded}}
{{#if (concat button--IsExpanded button--IsAriaExpanded)}}
aria-expanded="true"
{{/if}}
{{#if button--IsInlineLinkSpan}}
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/components/Masthead/masthead.scss
View file
Expand Up @@ -245,7 +245,7 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
}

.pf-c-button.pf-m-plain {
@include pf-t-dark(--pf-global--Color--200); // for all plain buttons, especially inside other components (.pf-c-input-group), for dark mode
@include pf-t-dark(--pf-c-button--m-plain--Color); // for all plain buttons, especially inside other components (.pf-c-input-group), for dark mode
}
}

Expand Down
116 changes: 38 additions & 78 deletions src/patternfly/components/NotificationBadge/examples/NotificationBadge.md
View file
Expand Up @@ -12,108 +12,68 @@ import './NotificationBadge.css'

```hbs
<div class="pf-t-dark">
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Notifications"'}}
{{#> notification-badge notification-badge--modifier="pf-m-read"}}
<i class="pf-icon-bell" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Unread notifications"'}}
{{#> notification-badge notification-badge--modifier="pf-m-unread"}}
<i class="pf-icon-bell" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Attention notifications"'}}
{{#> notification-badge notification-badge--modifier="pf-m-attention"}}
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
<br><br>
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Tasks"'}}
{{#> notification-badge notification-badge--modifier="pf-m-read"}}
<i class="pf-icon-task" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Unread tasks"'}}
{{#> notification-badge notification-badge--modifier="pf-m-unread"}}
<i class="pf-icon-task" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Attention tasks"'}}
{{#> notification-badge notification-badge--modifier="pf-m-attention"}}
<i class="pf-icon-task" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
{{> notification-badge notification-badge--aria-label="Notifications"}}
{{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label="Unread notifications"}}
{{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label="Attention notifications"}}
<br><br>
{{#> wrapper notification-badge--IsTask="true"}}
{{> notification-badge notification-badge--aria-label="Tasks"}}
{{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label="Unread tasks"}}
{{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label="Attention tasks"}}
{{/wrapper}}
</div>
```

### With count

```hbs
<div class="pf-t-dark">
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Notifications"'}}
{{#> notification-badge notification-badge--modifier="pf-m-read" notification-badge--count="24"}}
<i class="pf-icon-bell" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Unread notifications"'}}
{{#> notification-badge notification-badge--modifier="pf-m-unread" notification-badge--count="25"}}
<i class="pf-icon-bell" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Attention notifications"'}}
{{#> notification-badge notification-badge--modifier="pf-m-attention" notification-badge--count="26"}}
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
<br><br>
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Tasks"'}}
{{#> notification-badge notification-badge--modifier="pf-m-read" notification-badge--count="24"}}
<i class="pf-icon-task" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
{{#> wrapper notification-badge--count="24"}}
{{> notification-badge notification-badge--aria-label=(concat notification-badge--count " notifications")}}
{{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label=(concat notification-badge--count " unread notifications")}}
{{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label=(concat notification-badge--count " attention notifications")}}
<br><br>
{{#> wrapper notification-badge--IsTask="true"}}
{{> notification-badge notification-badge--aria-label=(concat notification-badge--count " tasks")}}
{{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label=(concat notification-badge--count " unread tasks")}}
{{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label=(concat notification-badge--count " attention tasks")}}
{{/wrapper}}
{{/wrapper}}
</div>
```

{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Unread tasks"'}}
{{#> notification-badge notification-badge--modifier="pf-m-unread" notification-badge--count="25"}}
<i class="pf-icon-task" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
### Expanded

{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Attention tasks"'}}
{{#> notification-badge notification-badge--modifier="pf-m-attention" notification-badge--count="26"}}
<i class="pf-icon-task" aria-hidden="true"></i>
{{/notification-badge}}
{{/button}}
```hbs
<div class="pf-t-dark">
{{#> wrapper notification-badge--IsExpanded="true"}}
{{> notification-badge notification-badge--aria-label="Notifications"}}
{{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label="Unread notifications"}}
{{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label="Attention notifications"}}
<br><br>
{{#> wrapper notification-badge--IsTask="true"}}
{{> notification-badge notification-badge--aria-label="Tasks"}}
{{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label="Unread tasks"}}
{{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label="Attention tasks"}}
{{/wrapper}}
{{/wrapper}}
</div>
```

## Documentation

### Overview

Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).

Note: The [page component](/components/page) currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).

### Accessibility

Be sure that the component associated with this indicator handles screen reader text indicating read or unread notifications.

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-c-notification-badge` | `<div>` | Initiates a notification badge. **Always use it with a modifier class.** |
| `.pf-c-notification-badge__count` | `<span>` | Initiates a notification badge count. |
| `.pf-m-read` | `.pf-c-notification-badge` | Applies read notification badge styling. |
| `.pf-m-unread` | `.pf-c-notification-badge` | Applies unread notification badge styling. |
| `.pf-m-attention` | `.pf-c-notification-badge` | Applies attention notification badge styling. |
| `.pf-m-expanded` | `.pf-c-notification-badge` | Applies expanded notification badge styling. |
41 changes: 32 additions & 9 deletions src/patternfly/components/NotificationBadge/notification-badge.hbs
View file
@@ -1,9 +1,32 @@
<span class="pf-c-notification-badge{{#if notification-badge--modifier}} {{notification-badge--modifier}}{{/if}}"
{{#if notification-badge--attribute}}
{{{notification-badge--attribute}}}
{{/if}}>
{{> @partial-block}}
{{#if notification-badge--count}}
<span class="pf-c-notification-badge__count">{{{notification-badge--count}}}</span>
{{/if}}
</span>
{{#> button
button--IsAriaExpanded=notification-badge--IsExpanded
button--modifier="pf-m-plain"
button--attribute=(concat 'aria-label="' notification-badge--aria-label '"')}}
<span class="pf-c-notification-badge
{{~#if notification-badge--IsUnread}} pf-m-unread
{{~else if notification-badge--IsAttention}} pf-m-attention
{{~else}} pf-m-read
{{~/if}}
{{~#if notification-badge--IsExpanded}}
pf-m-expanded
{{~/if}}
{{~#if notification-badge--modifier}} {{notification-badge--modifier}}{{/if}}"
{{#if notification-badge--attribute}}
{{{notification-badge--attribute}}}
{{/if}}>
<i class="
{{~#if notification-badge--IsTask}}
pf-icon-task
{{~else if notification-badge--IsAttention}}
pf-icon-attention-bell
{{~else}}
pf-icon-bell
{{~/if}}"
aria-hidden="true"></i>
{{#if notification-badge--count}}
<span class="pf-c-notification-badge__count">
{{notification-badge--count}}
</span>
{{/if}}
</span>
{{/button}}
14 changes: 13 additions & 1 deletion src/patternfly/components/NotificationBadge/notification-badge.scss
View file
Expand Up @@ -31,16 +31,19 @@
// Modifiers
--pf-c-notification-badge--m-read--after--BorderColor: transparent; // remove at breaking change
--pf-c-notification-badge--m-read--after--BackgroundColor: transparent;
--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);

// Unread
--pf-c-notification-badge--m-unread--Color: var(--pf-global--Color--light-100);
--pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--active-color--100);
--pf-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-global--primary-color--200);
--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--200);

// Attention
--pf-c-notification-badge--m-attention--Color: var(--pf-global--Color--light-100);
--pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--100);
--pf-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-global--danger-color--200);
--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-global--danger-color--200);
--pf-c-notification-badge__count--MarginLeft: var(--pf-global--spacer--xs);

// Attention icon
Expand Down Expand Up @@ -90,6 +93,8 @@
&.pf-m-read {
--pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-read--after--BackgroundColor);
--pf-c-notification-badge--after--BorderColor: var(--pf-c-notification-badge--m-read--after--BorderColor);

color: var(--pf-c-notification-badge--m-read--Color, inherit);
}

&.pf-m-unread {
Expand All @@ -108,9 +113,16 @@
color: var(--pf-c-notification-badge--m-attention--Color);

&:hover {
--pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
--pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
}
}

&.pf-m-expanded {
--pf-c-notification-badge--m-read--Color: var(--pf-global--Color--light-100);
--pf-c-notification-badge--m-read--after--BackgroundColor: var(--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
--pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
--pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
}
}

.pf-c-notification-badge__count {
Expand Down
2 changes: 2 additions & 0 deletions src/patternfly/components/NotificationBadge/themes/dark/notification-badge.scss
View file
Expand Up @@ -2,6 +2,8 @@

@mixin pf-theme-dark-notification-badge() {
.pf-c-notification-badge {
--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--400);
--pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
--pf-c-notification-badge--m-attention--Color: var(--pf-global--palette--black-900);
}
}
16 changes: 5 additions & 11 deletions src/patternfly/demos/Masthead/masthead-template-content-icon-group.hbs
View file
@@ -1,15 +1,9 @@
{{#> toolbar-group toolbar-group--id=(concat masthead-template--id '-icon-group-') toolbar-group--modifier="pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"}}
{{#> toolbar-item}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Notifications"'}}
{{#> notification-badge}}
{{#if masthead-template-content-icon-group--notification-badge--IsAttention}}
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
{{else}}
<i class="pf-icon-bell" aria-hidden="true"></i>
{{/if}}
{{/notification-badge}}
{{/button}}
{{/toolbar-item}}
{{#if masthead-template--HasNotificationDrawer}}
{{#> toolbar-item}}
{{> notification-badge notification-badge--IsExpanded=notification-drawer--IsExpanded notification-badge--IsAttention=notification-drawer--IsAttention notification-badge--IsUnread=notification-drawer--IsUnread}}
{{/toolbar-item}}
{{/if}}
{{#> toolbar-group toolbar-group--modifier=(concat 'pf-m-icon-button-group pf-m-hidden pf-m-visible-on-' masthead-template-content-icon-group--breakpoint)}}
{{#> toolbar-item}}
{{> masthead-template-application-launcher app-launcher--id=(concat toolbar-group--id '-app-launcher')}}
Expand Down
29 changes: 17 additions & 12 deletions src/patternfly/demos/NotificationDrawer/examples/NotificationDrawer.md
View file
Expand Up @@ -7,36 +7,40 @@ section: components

### Collapsed
```hbs isFullscreen
{{> notification-drawer-template notification-drawer-template--id="drawer-collapsed-example"}}
{{> notification-drawer-template
notification-drawer-template--id="drawer-collapsed-example"
notification-drawer--IsRead="true"
notification-badge--aria-label="Notifications"
}}
```

### Expanded read
```hbs isFullscreen
{{> notification-drawer-template
notification-drawer-template--id="drawer-expanded-read-example"
notification-drawer-basic-list--AllRead="true"
notification-badge--modifier="pf-m-read"
drawer-panel--IsOpen="true"
notification-drawer--IsExpanded="true"
notification-drawer--IsRead="true"
notification-badge--aria-label="Notifications"
}}
```

### Expanded unread
```hbs isFullscreen
{{> notification-drawer-template
notification-drawer-template--id="drawer-expanded-unread-example"
notification-badge--modifier="pf-m-unread"
drawer-panel--IsOpen="true"
notification-drawer--IsExpanded="true"
notification-drawer--IsUnread="true"
notification-badge--aria-label="Unread notifications"
}}
```

### Expanded attention
```hbs isFullscreen
{{> notification-drawer-template
notification-drawer-template--id="drawer-expanded-attention-example"
notification-drawer-basic-list--IsAttention="true"
notification-badge--modifier="pf-m-attention"
masthead-template-content-icon-group--notification-badge--IsAttention="true"
drawer-panel--IsOpen="true"
notification-drawer--IsExpanded="true"
notification-drawer--IsAttention="true"
notification-badge--aria-label="Attention notifications"
}}
```

Expand All @@ -45,8 +49,9 @@ section: components
{{> notification-drawer-template
notification-drawer-template--id="drawer-expanded-with-groups-example"
notification-drawer-template--IsGroup="true"
notification-badge--modifier="pf-m-unread"
drawer-panel--IsOpen="true"
notification-drawer--IsExpanded="true"
notification-drawer--IsUnread="true"
notification-badge--aria-label="Unread notifications"
}}
```

Expand Down

0 comments on commit ae9f524

Please sign in to comment.