diff --git a/package-lock.json b/package-lock.json index 2251cb84..0514d8cc 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 619516f2..ffa2bf5b 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/AttachButton.scss b/packages/module/src/MessageBar/AttachButton.scss index 6f270b50..57aa9461 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 b4c6518b..f9ecd039 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 70a868b8..0a73a25c 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.scss b/packages/module/src/MessageBar/SendButton.scss index 42732e5d..ef9ec77d 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 a9acc8c0..6016cbc9 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 { 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}