Skip to content

fix(ChatbotModal): Drop custom styles #943

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rebeccaalpert merged 2 commits into from
Nov 6, 2026
Merged

fix(ChatbotModal): Drop custom styles #943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7643cec
fix(ChatbotModal): Drop custom styles
gabipodolnikova Nov 4, 2026
aac5933
fix(Chatbot): Match modal border radius
gabipodolnikova Nov 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/module/src/Chatbot/Chatbot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
29 changes: 1 addition & 28 deletions packages/module/src/ChatbotModal/ChatbotModal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,14 @@
}

.pf-chatbot__chatbot-modal {
--pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--medium) !important;

@rebeccaalpert rebeccaalpert Nov 5, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kaylachumley - do you have feelings about this? It means that there's a slight bit of the ChatBot visible underneath.

Image

@kaylachumley kaylachumley Nov 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm yeah i dont love that the border radius doesnt match perfectly.. what's causing that? is there a custom border radius on the chatbot panel itself thats mismatching it? wdyt? @andrew-ronaldson

@rebeccaalpert rebeccaalpert Nov 5, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! ChatBot has its own border radius. We can change it to match modal if you'd prefer!

@gabipodolnikova gabipodolnikova Nov 6, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the chatbot panel, inner container, and conversation-history backdrop to use the large border radius, it's now matching PatternFly’s modal default as suggested.
Existing square corners in other display modes are unchanged.

@kaylachumley kaylachumley Nov 6, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that update is fine with me and @andrew-ronaldson ! I will need to update the figma file to match these border radius changes. Originally it was at 16px but now the change reflected is 24px (large border radius) for overlay chatbot panel and modals. thank you!

--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);
}
Expand Down Expand Up @@ -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
// ============================================================================
Expand Down
49 changes: 49 additions & 0 deletions packages/module/src/ChatbotModal/ChatbotModal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<ChatbotModal
isOpen
displayMode={displayMode}
className="custom-modal"
aria-labelledby="chatbot-modal-title"
aria-describedby="chatbot-modal"
>
<ModalHeader title="Chatbot modal" labelId="chatbot-modal-title" />
<ModalBody tabIndex={0} id="chatbot-modal">
Modal content
</ModalBody>
</ChatbotModal>
);

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(
<ChatbotModal isOpen displayMode={displayMode} aria-label="Chatbot modal">
<ModalBody tabIndex={0}>Modal content</ModalBody>
</ChatbotModal>
);

const backdrop = container.querySelector('.pf-chatbot__backdrop');
if (displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded) {
expect(backdrop).toBeInTheDocument();
} else {
expect(backdrop).not.toBeInTheDocument();
}

rerender(
<ChatbotModal isOpen={false} displayMode={displayMode} aria-label="Chatbot modal">
<ModalBody tabIndex={0}>Modal content</ModalBody>
</ChatbotModal>
);

expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
expect(container.querySelector('.pf-chatbot__backdrop')).not.toBeInTheDocument();
});

it('should render compact modal', () => {
render(
<ChatbotModal data-testid="modal" isCompact isOpen>
Expand Down
Loading