From 7643cec278145d432b3539cbfead3c1b0816a87e Mon Sep 17 00:00:00 2001 From: Gabi Podolnikova Date: Wed, 4 Nov 2026 13:27:15 +0100 Subject: [PATCH 1/2] fix(ChatbotModal): Drop custom styles --- .../module/src/ChatbotModal/ChatbotModal.scss | 29 +---------- .../src/ChatbotModal/ChatbotModal.test.tsx | 49 +++++++++++++++++++ 2 files changed, 50 insertions(+), 28 deletions(-) diff --git a/packages/module/src/ChatbotModal/ChatbotModal.scss b/packages/module/src/ChatbotModal/ChatbotModal.scss index b3715b89a..0b186395f 100644 --- a/packages/module/src/ChatbotModal/ChatbotModal.scss +++ b/packages/module/src/ChatbotModal/ChatbotModal.scss @@ -3,30 +3,14 @@ } .pf-chatbot__chatbot-modal { - --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--medium) !important; - --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default); position: fixed !important; inset-block-end: var(--pf-t--global--spacer--800); // no associated semantic token inset-inline-end: var(--pf-t--global--spacer--lg); width: 30rem !important; height: 70vh; - - .pf-v6-c-modal-box__title { - --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--h3); - } - - .pf-v6-c-modal-box__footer { - padding-block-start: var(--pf-t--global--spacer--xl); - padding-block-end: var(--pf-t--global--spacer--xl); - border-top: var(--pf-t--global--border--width--high-contrast--regular) solid - var(--pf-t--global--border--color--high-contrast); - } - - .pf-v6-c-modal-box__header { - padding-block-end: var(--pf-t--global--spacer--sm); - } } +// Keep code and attachment editor backgrounds opaque in the glass theme (see #925). :root:where(.pf-v6-theme-glass) .pf-chatbot__code-modal { --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default); } @@ -70,17 +54,6 @@ --pf-v6-c-modal-box--MaxHeight: 100vh !important; } -// ============================================================================ -// Dark theme -// ============================================================================ -.pf-v6-theme-dark { - .pf-v6-c-modal-box.pf-chatbot__chatbot-modal { - .pf-v6-c-modal-box__title { - color: #fff; - } - } -} - // ============================================================================ // Backdrop // ============================================================================ diff --git a/packages/module/src/ChatbotModal/ChatbotModal.test.tsx b/packages/module/src/ChatbotModal/ChatbotModal.test.tsx index 02f70f8f3..d29a4fd0c 100644 --- a/packages/module/src/ChatbotModal/ChatbotModal.test.tsx +++ b/packages/module/src/ChatbotModal/ChatbotModal.test.tsx @@ -2,8 +2,57 @@ import { render, screen } from '@testing-library/react'; import ChatbotModal from './ChatbotModal'; import '@testing-library/jest-dom'; import { ModalBody, ModalHeader } from '@patternfly/react-core'; +import { ChatbotDisplayMode } from '../Chatbot'; describe('ChatbotModal', () => { + it.each(Object.values(ChatbotDisplayMode))('preserves the %s display mode and custom classes', (displayMode) => { + render( + + + + Modal content + + + ); + + expect(screen.getByRole('dialog', { name: 'Chatbot modal' })).toHaveClass( + 'pf-chatbot__chatbot-modal', + `pf-chatbot__chatbot-modal--${displayMode}`, + 'custom-modal' + ); + expect(screen.getByText('Modal content')).toBeVisible(); + }); + + it.each(Object.values(ChatbotDisplayMode))('preserves the %s backdrop behavior', (displayMode) => { + const { container, rerender } = render( + + Modal content + + ); + + const backdrop = container.querySelector('.pf-chatbot__backdrop'); + if (displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded) { + expect(backdrop).toBeInTheDocument(); + } else { + expect(backdrop).not.toBeInTheDocument(); + } + + rerender( + + Modal content + + ); + + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); + expect(container.querySelector('.pf-chatbot__backdrop')).not.toBeInTheDocument(); + }); + it('should render compact modal', () => { render( From aac59330cc3a844716ecee3b6a7e11c1faa0059b Mon Sep 17 00:00:00 2001 From: Gabi Podolnikova Date: Fri, 6 Nov 2026 09:41:42 +0100 Subject: [PATCH 2/2] fix(Chatbot): Match modal border radius --- packages/module/src/Chatbot/Chatbot.scss | 4 ++-- .../ChatbotConversationHistoryNav.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/module/src/Chatbot/Chatbot.scss b/packages/module/src/Chatbot/Chatbot.scss index ccee03c92..8ee8f6a85 100644 --- a/packages/module/src/Chatbot/Chatbot.scss +++ b/packages/module/src/Chatbot/Chatbot.scss @@ -10,7 +10,7 @@ width: 30rem; height: 70vh; background-color: var(--pf-t--global--background--color--floating--secondary--default); - border-radius: var(--pf-t--global--border--radius--medium); + border-radius: var(--pf-t--global--border--radius--large); box-shadow: var(--pf-t--global--box-shadow--lg); z-index: var(--pf-t--global--z-index--md); -webkit-font-smoothing: antialiased; @@ -127,7 +127,7 @@ width: 100%; display: flex; flex-direction: column; - border-radius: var(--pf-t--global--border--radius--medium); + border-radius: var(--pf-t--global--border--radius--large); overflow: hidden; // Hide chatbot diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss index a4cf7fff4..3c86cf39f 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss @@ -4,7 +4,7 @@ .pf-chatbot__history { .pf-chatbot__drawer-backdrop { position: absolute; - border-radius: var(--pf-t--global--border--radius--medium); + border-radius: var(--pf-t--global--border--radius--large); } .pf-chatbot__heading-divider {