From e22d30bcd53f5bd02dd5eac1304d205c6dfa2672 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Thu, 18 Jan 2024 13:35:34 -0500
Subject: [PATCH 1/3] feat(NotificationBadge): refactor to use status buttons
 for penta

---
 .../NotificationBadge/NotificationBadge.tsx   | 19 ++++++++-------
 .../__tests__/NotificationBadge.test.tsx      |  8 +++----
 .../NotificationBadge.test.tsx.snap           | 24 ++++++++-----------
 .../examples/NotificationBadge.md             |  1 -
 .../examples/NotificationBadgeBasic.tsx       |  4 ++--
 .../examples/NotificationBadgeWithCount.tsx   |  4 ++--
 .../examples/notificationBadge.css            |  4 ----
 7 files changed, 28 insertions(+), 36 deletions(-)
 delete mode 100644 packages/react-core/src/components/NotificationBadge/examples/notificationBadge.css

diff --git a/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx b/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx
index 34d00d83357..4a0dd12c30d 100644
--- a/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx
+++ b/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Button, ButtonVariant, ButtonProps } from '../Button';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/NotificationBadge/notification-badge';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
@@ -49,13 +47,16 @@ export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps>
     notificationChild = attentionIcon;
   }
   return (
-    <Button variant={ButtonVariant.plain} className={className} aria-expanded={isExpanded} {...props}>
-      <span
-        className={css(styles.notificationBadge, styles.modifiers[variant], isExpanded && styles.modifiers.expanded)}
-      >
-        {notificationChild}
-        {count > 0 && <span className={css(`${styles.notificationBadge}__count`)}>{count}</span>}
-      </span>
+    <Button
+      variant={ButtonVariant.stateful}
+      className={className}
+      aria-expanded={isExpanded}
+      state={variant}
+      isClicked={isExpanded}
+      icon={notificationChild}
+      {...props}
+    >
+      {count > 0 && count}
     </Button>
   );
 };
diff --git a/packages/react-core/src/components/NotificationBadge/__tests__/NotificationBadge.test.tsx b/packages/react-core/src/components/NotificationBadge/__tests__/NotificationBadge.test.tsx
index 9090d062955..d94a1c45ff6 100644
--- a/packages/react-core/src/components/NotificationBadge/__tests__/NotificationBadge.test.tsx
+++ b/packages/react-core/src/components/NotificationBadge/__tests__/NotificationBadge.test.tsx
@@ -30,14 +30,14 @@ test('Renders with aria-expanded="true" when isExpanded is passed in.', () => {
   expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
 });
 
-test('Does not render with .pf-m-expanded when isExpanded is not passed in.', () => {
+test('Does not render with .pf-m-clicked when isExpanded is not passed in.', () => {
   render(<NotificationBadge />);
 
-  expect(screen.getByRole('button').firstChild).not.toHaveClass('pf-m-expanded');
+  expect(screen.getByRole('button')).not.toHaveClass('pf-m-clicked');
 });
 
-test('Renders with .pf-m-expanded when isExpanded is passed in.', () => {
+test('Renders with .pf-m-clicked when isExpanded is passed in.', () => {
   render(<NotificationBadge isExpanded />);
 
-  expect(screen.getByRole('button').firstChild).toHaveClass('pf-m-expanded');
+  expect(screen.getByRole('button')).toHaveClass('pf-m-clicked');
 });
diff --git a/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap b/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap
index 4b10037ed99..c877c284637 100644
--- a/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap
+++ b/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap
@@ -5,14 +5,14 @@ exports[`NotificationBadge count 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
-    class="pf-v5-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-3"
+    class="pf-v5-c-button pf-m-stateful pf-m-read"
+    data-ouia-component-id="OUIA-Generated-Button-stateful-3"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
     <span
-      class="pf-v5-c-notification-badge pf-m-read"
+      class="pf-v5-c-button__icon pf-m-start"
     >
       <svg
         aria-hidden="true"
@@ -27,12 +27,8 @@ exports[`NotificationBadge count 1`] = `
           d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
         />
       </svg>
-      <span
-        class="pf-v5-c-notification-badge__count"
-      >
-        3
-      </span>
     </span>
+    3
   </button>
 </DocumentFragment>
 `;
@@ -42,14 +38,14 @@ exports[`false NotificationBadge needs attention 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
-    class="pf-v5-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-2"
+    class="pf-v5-c-button pf-m-stateful pf-m-attention"
+    data-ouia-component-id="OUIA-Generated-Button-stateful-2"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
     <span
-      class="pf-v5-c-notification-badge pf-m-attention"
+      class="pf-v5-c-button__icon pf-m-start"
     >
       does not need attention Badge
     </span>
@@ -62,14 +58,14 @@ exports[`true NotificationBadge needs attention 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
-    class="pf-v5-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-1"
+    class="pf-v5-c-button pf-m-stateful pf-m-attention"
+    data-ouia-component-id="OUIA-Generated-Button-stateful-1"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
     <span
-      class="pf-v5-c-notification-badge pf-m-attention"
+      class="pf-v5-c-button__icon pf-m-start"
     >
       needs attention Badge
     </span>
diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md
index 6b0ebe5e526..f3a0c72d4f6 100644
--- a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md
+++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md
@@ -6,7 +6,6 @@ propComponents: ['NotificationBadge']
 ---
 
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import './notificationBadge.css';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx
index eeffbdd6d43..510ce8c4376 100644
--- a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx
+++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx
@@ -19,7 +19,7 @@ export const NotificationBadgeBasic: React.FunctionComponent = () => {
   };
 
   return (
-    <div className="pf-t-dark">
+    <>
       <NotificationBadge
         variant={NotificationBadgeVariant.read}
         onClick={onReadClick}
@@ -38,6 +38,6 @@ export const NotificationBadgeBasic: React.FunctionComponent = () => {
         aria-label="Basic notification badge with attention variant"
         isExpanded={attentionExpanded}
       />
-    </div>
+    </>
   );
 };
diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx
index 411c2ce5fc1..68c1b0220c5 100644
--- a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx
+++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx
@@ -19,7 +19,7 @@ export const NotificationBadgeWithCount: React.FunctionComponent = () => {
   };
 
   return (
-    <div className="pf-t-dark">
+    <>
       <NotificationBadge
         variant={NotificationBadgeVariant.read}
         onClick={onReadClick}
@@ -41,6 +41,6 @@ export const NotificationBadgeWithCount: React.FunctionComponent = () => {
         isExpanded={attentionExpanded}
         count={10}
       />
-    </div>
+    </>
   );
 };
diff --git a/packages/react-core/src/components/NotificationBadge/examples/notificationBadge.css b/packages/react-core/src/components/NotificationBadge/examples/notificationBadge.css
deleted file mode 100644
index 562a46f51c3..00000000000
--- a/packages/react-core/src/components/NotificationBadge/examples/notificationBadge.css
+++ /dev/null
@@ -1,4 +0,0 @@
-#ws-react-c-notification-badge-basic,
-#ws-react-c-notification-badge-with-count {
-  background-color: var(--pf-v5-global--BackgroundColor--dark-100);
-}

From 595d659f6b26bb7f3d99f2749df2d569320dbaa2 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Thu, 18 Jan 2024 14:09:39 -0500
Subject: [PATCH 2/3] chore(NotificationBadge): update integration test

---
 .../cypress/integration/notificationbadge.spec.ts      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-integration/cypress/integration/notificationbadge.spec.ts b/packages/react-integration/cypress/integration/notificationbadge.spec.ts
index a19465a314d..21472dff214 100644
--- a/packages/react-integration/cypress/integration/notificationbadge.spec.ts
+++ b/packages/react-integration/cypress/integration/notificationbadge.spec.ts
@@ -4,15 +4,15 @@ describe('Notification Badge Demo Test', () => {
   });
 
   it('Verify notification badge is unread', () => {
-    cy.get('.pf-v5-c-notification-badge').first().should('have.class', 'pf-m-unread');
-    cy.get('.pf-v5-c-notification-badge').last().should('have.class', 'pf-m-attention');
-    cy.get('.pf-v5-c-notification-badge__count').contains('30');
+    cy.get('#notification-demo-badge1').should('have.class', 'pf-m-unread');
+    cy.get('#notification-demo-badge2').should('have.class', 'pf-m-attention');
+    cy.get('#notification-demo-badge2').contains('30');
   });
 
   it('Verify notification badge is read after click', () => {
     cy.get('#notification-demo-badge1').click();
-    cy.get('.pf-v5-c-notification-badge').first().should('have.class', 'pf-m-read');
+    cy.get('#notification-demo-badge1').should('have.class', 'pf-m-read');
     cy.get('#notification-demo-badge2').click();
-    cy.get('.pf-v5-c-notification-badge').last().should('have.class', 'pf-m-read');
+    cy.get('#notification-demo-badge2').should('have.class', 'pf-m-read');
   });
 });

From f89141d2969ff173f973fba98f819757255b1ae1 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Mon, 29 Jan 2024 16:16:44 -0500
Subject: [PATCH 3/3] chore(NotificationBadge): fix bug causing icon to not be
 centered

---
 .../NotificationBadge/NotificationBadge.tsx   | 19 +++++++++++--------
 .../NotificationBadge.test.tsx.snap           | 12 ++----------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx b/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx
index 4a0dd12c30d..4bedc1d1f4e 100644
--- a/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx
+++ b/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx
@@ -40,12 +40,15 @@ export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps>
   isExpanded = false,
   ...props
 }: NotificationBadgeProps) => {
-  let notificationChild = icon;
-  if (children !== undefined) {
-    notificationChild = children;
-  } else if (variant === NotificationBadgeVariant.attention) {
-    notificationChild = attentionIcon;
-  }
+  const hasCount = count > 0;
+  const hasChildren = children !== undefined;
+  const isAttention = variant === NotificationBadgeVariant.attention;
+
+  const notificationIcon = isAttention ? attentionIcon : icon;
+  const notificationContent = hasChildren ? children : notificationIcon;
+
+  const [iconProp, notificationChild] = hasCount ? [notificationContent, count] : [undefined, notificationContent];
+
   return (
     <Button
       variant={ButtonVariant.stateful}
@@ -53,10 +56,10 @@ export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps>
       aria-expanded={isExpanded}
       state={variant}
       isClicked={isExpanded}
-      icon={notificationChild}
+      icon={iconProp}
       {...props}
     >
-      {count > 0 && count}
+      {notificationChild}
     </Button>
   );
 };
diff --git a/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap b/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap
index c877c284637..861ea96ea4a 100644
--- a/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap
+++ b/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap
@@ -44,11 +44,7 @@ exports[`false NotificationBadge needs attention 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    <span
-      class="pf-v5-c-button__icon pf-m-start"
-    >
-      does not need attention Badge
-    </span>
+    does not need attention Badge
   </button>
 </DocumentFragment>
 `;
@@ -64,11 +60,7 @@ exports[`true NotificationBadge needs attention 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    <span
-      class="pf-v5-c-button__icon pf-m-start"
-    >
-      needs attention Badge
-    </span>
+    needs attention Badge
   </button>
 </DocumentFragment>
 `;