@patternfly/patternfly 6.0.0-alpha.213 → 6.0.0-alpha.215

package/sass-utilities/namespaces-components.scss

@@ -152,9 +152,6 @@ $multiple-file-upload: #{$pf-prefix} + 'c-multiple-file-upload';
 // Nav
 $nav: #{$pf-prefix} + 'c-nav';
 
-// Notification Badge
-$notification-badge: #{$pf-prefix} + 'c-notification-badge';
-
 // Notification Drawer
 $notification-drawer: #{$pf-prefix} + 'c-notification-drawer';
 

package/components/NotificationBadge/notification-badge.css

@@ -1,87 +0,0 @@
-:where(:root, .pf-v6-c-notification-badge) {
-  --pf-v6-c-notification-badge--BackgroundColor: transparent;
-  --pf-v6-c-notification-badge--MinWidth: 40px;
-  --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
-  --pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
-  --pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
-  --pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
-  --pf-v6-c-notification-badge--before--BorderColor: transparent;
-  --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
-  --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
-  --pf-v6-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
-  --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
-  --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
-  --pf-v6-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
-  --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
-  --pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
-  --pf-v6-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
-  --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
-  --pf-v6-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
-  --pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
-}
-
-.pf-v6-c-notification-badge {
-  display: inline-flex;
-  gap: var(--pf-v6-c-notification-badge--Gap);
-  align-items: center;
-  justify-content: center;
-  padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
-  margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
-  margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
-  margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
-  margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
-  background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
-  border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
-}
-.pf-v6-c-notification-badge::before {
-  position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  content: "";
-  border: var(--pf-v6-c-notification-badge--before--BorderWidth) solid var(--pf-v6-c-notification-badge--before--BorderColor);
-  border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
-  transform: translate(var(--pf-v6-c-notification-badge--before--TranslateX), var(--pf-v6-c-notification-badge--before--TranslateY));
-}
-.pf-v6-c-notification-badge.pf-m-read {
-  --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--BackgroundColor);
-  --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--before--BorderColor);
-  color: var(--pf-v6-c-notification-badge--m-read--Color, inherit);
-}
-.pf-v6-c-notification-badge.pf-m-read:hover {
-  --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--hover--before--BorderColor);
-}
-.pf-v6-c-notification-badge.pf-m-unread {
-  --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--BackgroundColor);
-  color: var(--pf-v6-c-notification-badge--m-unread--Color);
-}
-.pf-v6-c-notification-badge.pf-m-unread:hover {
-  --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--hover--BackgroundColor);
-}
-.pf-v6-c-notification-badge.pf-m-attention {
-  --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--BackgroundColor);
-  color: var(--pf-v6-c-notification-badge--m-attention--Color);
-}
-.pf-v6-c-notification-badge.pf-m-attention:hover {
-  --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--hover--BackgroundColor);
-}
-.pf-v6-c-notification-badge.pf-m-expanded {
-  --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor);
-  --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor);
-  --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor);
-  --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor);
-}

package/components/NotificationBadge/notification-badge.scss

@@ -1,108 +0,0 @@
-@use '../../sass-utilities' as *;
-
-:where(:root, .#{$notification-badge}) {
-  --#{$notification-badge}--BackgroundColor: transparent;
-  --#{$notification-badge}--MinWidth: 40px;
-  --#{$notification-badge}--Gap: var(--pf-t--global--spacer--xs);
-  --#{$notification-badge}--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --#{$notification-badge}--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --#{$notification-badge}--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --#{$notification-badge}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-  --#{$notification-badge}--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
-  --#{$notification-badge}--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
-  --#{$notification-badge}--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
-  --#{$notification-badge}--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
-
-  // ::before border treatment
-  --#{$notification-badge}--before--BorderColor: transparent;
-  --#{$notification-badge}--BorderRadius: var(--pf-t--global--border--radius--small);
-  --#{$notification-badge}--before--BorderWidth: var(--pf-t--global--border--width--control--default);
-
-  // Modifiers
-  --#{$notification-badge}--m-read--Color: var(--pf-t--global--text--color--regular);
-  --#{$notification-badge}--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
-  --#{$notification-badge}--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
-  --#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
-  --#{$notification-badge}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --#{$notification-badge}--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
-
-  // Unread
-  --#{$notification-badge}--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
-  --#{$notification-badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
-  --#{$notification-badge}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
-  --#{$notification-badge}--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
-
-  // Attention
-  --#{$notification-badge}--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
-  --#{$notification-badge}--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
-  --#{$notification-badge}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
-  --#{$notification-badge}--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
-}
-
-.#{$notification-badge} {
-  display: inline-flex;
-  gap: var(--#{$notification-badge}--Gap);
-  align-items: center;
-  justify-content: center;
-  padding-block-start: var(--#{$notification-badge}--PaddingBlockStart);
-  padding-block-end: var(--#{$notification-badge}--PaddingBlockEnd);
-  padding-inline-start: var(--#{$notification-badge}--PaddingInlineStart);
-  padding-inline-end: var(--#{$notification-badge}--PaddingInlineEnd);
-  margin-block-start: var(--#{$notification-badge}--MarginBlockStart);
-  margin-block-end: var(--#{$notification-badge}--MarginBlockEnd);
-  margin-inline-start: var(--#{$notification-badge}--MarginInlineStart);
-  margin-inline-end: var(--#{$notification-badge}--MarginInlineEnd);
-  background-color: var(--#{$notification-badge}--BackgroundColor);
-  border-radius: var(--#{$notification-badge}--BorderRadius);
-
-  &::before {
-    position: absolute;
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    content: "";
-    border: var(--#{$notification-badge}--before--BorderWidth) solid var(--#{$notification-badge}--before--BorderColor);
-    border-radius: var(--#{$notification-badge}--BorderRadius);
-    transform: translate(var(--#{$notification-badge}--before--TranslateX), var(--#{$notification-badge}--before--TranslateY));
-  }
-
-  &.pf-m-read {
-    --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-read--BackgroundColor);
-    --#{$notification-badge}--before--BorderColor: var(--#{$notification-badge}--m-read--before--BorderColor);
-
-    color: var(--#{$notification-badge}--m-read--Color, inherit);
-
-    &:hover {
-      --#{$notification-badge}--before--BorderColor: var(--#{$notification-badge}--m-read--hover--before--BorderColor);
-    }
-  }
-
-  &.pf-m-unread {
-    --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-unread--BackgroundColor);
-
-    color: var(--#{$notification-badge}--m-unread--Color);
-
-    &:hover {
-      --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-unread--hover--BackgroundColor);
-    }
-  }
-
-  &.pf-m-attention {
-    --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-attention--BackgroundColor);
-
-    color: var(--#{$notification-badge}--m-attention--Color);
-
-    &:hover {
-      --#{$notification-badge}--m-attention--BackgroundColor: var(--#{$notification-badge}--m-attention--hover--BackgroundColor);
-    }
-  }
-
-  &.pf-m-expanded {
-    --#{$notification-badge}--m-read--BackgroundColor: var(--#{$notification-badge}--m-read--m-expanded--BackgroundColor);
-    --#{$notification-badge}--m-read--before--BorderColor: var(--#{$notification-badge}--m-read--m-expanded--before--BorderColor);
-    --#{$notification-badge}--m-unread--BackgroundColor: var(--#{$notification-badge}--m-unread--m-expanded--BackgroundColor);
-    --#{$notification-badge}--m-attention--BackgroundColor: var(--#{$notification-badge}--m-attention--m-expanded--BackgroundColor);
-  }
-}

package/docs/components/NotificationBadge/examples/NotificationBadge.md

@@ -1,258 +0,0 @@
----
-id: Notification badge
-section: components
-cssPrefix: pf-v6-c-notification-badge
----## Examples
-
-### Basic
-
-```html
-<div>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-label="Notifications"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-read">
-        <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-label="Unread notifications"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-unread">
-        <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-label="Attention notifications"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-attention">
-        <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-  <br />
-  <br />
-  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Tasks">
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-read">
-        <i class="pf-v6-pficon-task" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-label="Unread tasks"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-unread">
-        <i class="pf-v6-pficon-task" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-label="Attention tasks"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-attention">
-        <i class="pf-v6-pficon-task" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-</div>
-
-```
-
-### With count
-
-```html
-<div>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-label="24 notifications"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-read">
-        <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
-        <span class="pf-v6-c-notification-badge__count">24</span>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-label="24 unread notifications"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-unread">
-        <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
-        <span class="pf-v6-c-notification-badge__count">24</span>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-label="24 attention notifications"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-attention">
-        <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
-        <span class="pf-v6-c-notification-badge__count">24</span>
-      </span>
-    </span>
-  </button>
-  <br />
-  <br />
-  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="24 tasks">
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-read">
-        <i class="pf-v6-pficon-task" aria-hidden="true"></i>
-        <span class="pf-v6-c-notification-badge__count">24</span>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-label="24 unread tasks"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-unread">
-        <i class="pf-v6-pficon-task" aria-hidden="true"></i>
-        <span class="pf-v6-c-notification-badge__count">24</span>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-label="24 attention tasks"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-attention">
-        <i class="pf-v6-pficon-task" aria-hidden="true"></i>
-        <span class="pf-v6-c-notification-badge__count">24</span>
-      </span>
-    </span>
-  </button>
-</div>
-
-```
-
-### Expanded
-
-```html
-<div>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-expanded="true"
-    aria-label="Notifications"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-read pf-m-expanded">
-        <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-expanded="true"
-    aria-label="Unread notifications"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded">
-        <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-expanded="true"
-    aria-label="Attention notifications"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-attention pf-m-expanded">
-        <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-  <br />
-  <br />
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-expanded="true"
-    aria-label="Tasks"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-read pf-m-expanded">
-        <i class="pf-v6-pficon-task" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-expanded="true"
-    aria-label="Unread tasks"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded">
-        <i class="pf-v6-pficon-task" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-  <button
-    class="pf-v6-c-button pf-m-plain"
-    type="button"
-    aria-expanded="true"
-    aria-label="Attention tasks"
-  >
-    <span class="pf-v6-c-button__text">
-      <span class="pf-v6-c-notification-badge pf-m-attention pf-m-expanded">
-        <i class="pf-v6-pficon-task" aria-hidden="true"></i>
-      </span>
-    </span>
-  </button>
-</div>
-
-```
-
-## Documentation
-
-### Overview
-
-Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v6-c-notification-badge` on its own.
-
-### 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-v6-c-notification-badge` | `<div>` |  Initiates a notification badge. **Always use it with a modifier class.** |
-| `.pf-v6-c-notification-badge__count` | `<span>` |  Initiates a notification badge count. |
-| `.pf-m-read` | `.pf-v6-c-notification-badge` |  Applies read notification badge styling. |
-| `.pf-m-unread` | `.pf-v6-c-notification-badge` |  Applies unread notification badge styling. |
-| `.pf-m-attention` | `.pf-v6-c-notification-badge` |  Applies attention notification badge styling. |
-| `.pf-m-expanded` | `.pf-v6-c-notification-badge` |  Applies expanded notification badge styling. |