diff --git a/packages/module/src/Chatbot/Chatbot.scss b/packages/module/src/Chatbot/Chatbot.scss
index ccee03c9..8ee8f6a8 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 a4cf7fff..3c86cf39 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 {
diff --git a/packages/module/src/ChatbotModal/ChatbotModal.scss b/packages/module/src/ChatbotModal/ChatbotModal.scss
index b3715b89..0b186395 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 02f70f8f..d29a4fd0 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(