From 42f895071d9300d2052ef3bc7b309e2b721eed41 Mon Sep 17 00:00:00 2001 From: Gabi Podolnikova Date: Fri, 11 Sep 2026 11:08:22 +0200 Subject: [PATCH 1/2] fix(MessageBar): Replace send button icon --- package-lock.json | 15 ++++++++- packages/module/package.json | 4 +-- .../module/src/MessageBar/SendButton.scss | 33 +------------------ packages/module/src/MessageBar/SendButton.tsx | 4 +-- 4 files changed, 19 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2251cb848..0514d8cc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28296,7 +28296,7 @@ "dependencies": { "@patternfly/react-code-editor": "^6.6.0", "@patternfly/react-core": "^6.6.0", - "@patternfly/react-icons": "^6.6.0", + "@patternfly/react-icons": "6.6.1-prerelease.2", "@patternfly/react-styles": "^6.6.0", "@patternfly/react-table": "^6.6.0", "@segment/analytics-next": "^1.76.0", @@ -28385,6 +28385,19 @@ "victory-voronoi-container": "^37.3.6" } }, + "packages/module/node_modules/@patternfly/react-icons": { + "version": "6.6.1-prerelease.2", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.6.1-prerelease.2.tgz", + "integrity": "sha512-iVk1YmOUnIR3+spCygoEZ+dwTqWxNrJH7PuhFPBB7gjesdJFXfYLKBUOEo/eAcCTO9Mi+zJaRmC9CXihQc6zbw==", + "license": "MIT", + "dependencies": { + "tslib": "^2.8.1" + }, + "peerDependencies": { + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" + } + }, "packages/module/node_modules/@types/unist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", diff --git a/packages/module/package.json b/packages/module/package.json index 619516f2c..ffa2bf5b7 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -35,7 +35,7 @@ "dependencies": { "@patternfly/react-code-editor": "^6.6.0", "@patternfly/react-core": "^6.6.0", - "@patternfly/react-icons": "^6.6.0", + "@patternfly/react-icons": "6.6.1-prerelease.2", "@patternfly/react-styles": "^6.6.0", "@patternfly/react-table": "^6.6.0", "@segment/analytics-next": "^1.76.0", @@ -107,4 +107,4 @@ "**/*.scss", "patternfly-docs/**" ] -} \ No newline at end of file +} diff --git a/packages/module/src/MessageBar/SendButton.scss b/packages/module/src/MessageBar/SendButton.scss index 42732e5d3..ef9ec77d5 100644 --- a/packages/module/src/MessageBar/SendButton.scss +++ b/packages/module/src/MessageBar/SendButton.scss @@ -7,38 +7,7 @@ width: 3rem; height: 3rem; - .pf-v6-c-button__icon { - --pf-v6-c-button__icon--Color: var(--pf-t--global--color--brand--default); - } - - &:hover, - &:focus { - background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%; - color: var(--pf-t--global--color--brand--hover); - - .pf-v6-c-button__icon { - color: var(--pf-t--global--color--brand--hover); - } - } -} - -.pf-v6-theme-dark { - .pf-v6-c-button.pf-chatbot__button--send { - background-color: var(--pf-t--global--color--brand--default); - .pf-v6-c-button__icon { - --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse); - } - } - - .pf-v6-c-button:disabled.pf-chatbot__button--send:disabled { - --pf-v6-c-button--disabled--Color: var(--pf-t--global--icon--color--disabled); - background-color: var(--pf-t--global--background--color--disabled--default); - } - - .pf-v6-c-button.pf-chatbot__button--send:hover, - .pf-v6-c-button.pf-chatbot__button--send:focus { - background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%; - } + --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--color--brand--default); } @keyframes motionSendButton { diff --git a/packages/module/src/MessageBar/SendButton.tsx b/packages/module/src/MessageBar/SendButton.tsx index a9acc8c0b..864d26c8f 100644 --- a/packages/module/src/MessageBar/SendButton.tsx +++ b/packages/module/src/MessageBar/SendButton.tsx @@ -6,7 +6,7 @@ import type { FunctionComponent } from 'react'; // Import PatternFly components import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core'; -import { PaperPlaneIcon } from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon'; +import { RhUiSendIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-send-icon'; export interface SendButtonProps extends ButtonProps { /** Callback for when button is clicked */ @@ -48,7 +48,7 @@ export const SendButton: FunctionComponent = ({ onClick={onClick} icon={ - + } size={isCompact ? 'sm' : undefined} From c5433e88ac17547d9dc395de4e9779ee448b7256 Mon Sep 17 00:00:00 2001 From: Gabi Podolnikova Date: Tue, 15 Sep 2026 10:48:38 +0200 Subject: [PATCH 2/2] fix(MessageBar): Address send button review feedback --- .../module/src/MessageBar/AttachButton.scss | 25 +++---------------- .../module/src/MessageBar/MessageBar.test.tsx | 3 +++ packages/module/src/MessageBar/MessageBar.tsx | 2 ++ packages/module/src/MessageBar/SendButton.tsx | 4 +-- 4 files changed, 11 insertions(+), 23 deletions(-) diff --git a/packages/module/src/MessageBar/AttachButton.scss b/packages/module/src/MessageBar/AttachButton.scss index 6f270b50f..57aa94617 100644 --- a/packages/module/src/MessageBar/AttachButton.scss +++ b/packages/module/src/MessageBar/AttachButton.scss @@ -7,30 +7,13 @@ width: 3rem; height: 3rem; - .pf-v6-c-button__icon { - color: var(--pf-t--global--icon--color--subtle); - } - - // Interactive states - &:hover { - .pf-v6-c-button__icon { - color: var(--pf-t--global--icon--color--regular); - } - } - - &:active, - &:focus { + &.pf-m-clicked, + &.pf-m-clicked:hover, + &.pf-m-clicked:focus { background-color: var(--pf-t--global--color--brand--clicked); .pf-v6-c-button__icon { - color: var(--pf-t--global--icon--color--inverse); - } - - &:hover, - &:focus { - .pf-v6-c-button__icon { - color: var(--pf-t--global--icon--color--inverse); - } + color: var(--pf-t--global--icon--color--on-brand--default); } } } diff --git a/packages/module/src/MessageBar/MessageBar.test.tsx b/packages/module/src/MessageBar/MessageBar.test.tsx index b4c6518be..f9ecd0391 100644 --- a/packages/module/src/MessageBar/MessageBar.test.tsx +++ b/packages/module/src/MessageBar/MessageBar.test.tsx @@ -191,6 +191,9 @@ describe('Message bar', () => { }} /> ); + const attachButton = screen.getByRole('button', { name: 'Attach' }); + expect(attachButton).toHaveClass('pf-m-clicked'); + expect(attachButton).toHaveAttribute('aria-expanded', 'true'); expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy(); expect(screen.getByRole('menuitem', { name: /auth-operator/i })).toBeTruthy(); expect(screen.getByRole('menuitem', { name: /Alerts/i })).toBeTruthy(); diff --git a/packages/module/src/MessageBar/MessageBar.tsx b/packages/module/src/MessageBar/MessageBar.tsx index 70a868b89..0a73a25c2 100644 --- a/packages/module/src/MessageBar/MessageBar.tsx +++ b/packages/module/src/MessageBar/MessageBar.tsx @@ -419,6 +419,8 @@ export const MessageBarBase: FunctionComponent = ({ validator={validator} dropzoneProps={dropzoneProps} {...buttonProps?.attach} + isClicked={attachMenuProps.isAttachMenuOpen} + aria-expanded={attachMenuProps.isAttachMenuOpen} /> ); } diff --git a/packages/module/src/MessageBar/SendButton.tsx b/packages/module/src/MessageBar/SendButton.tsx index 864d26c8f..6016cbc93 100644 --- a/packages/module/src/MessageBar/SendButton.tsx +++ b/packages/module/src/MessageBar/SendButton.tsx @@ -6,7 +6,7 @@ import type { FunctionComponent } from 'react'; // Import PatternFly components import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core'; -import { RhUiSendIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-send-icon'; +import { RhUiSendFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-send-fill-icon'; export interface SendButtonProps extends ButtonProps { /** Callback for when button is clicked */ @@ -48,7 +48,7 @@ export const SendButton: FunctionComponent = ({ onClick={onClick} icon={ - + } size={isCompact ? 'sm' : undefined}