From 03acb1bf86a706f3029e908d0efff9e50eec8b9f Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Tue, 14 Oct 2025 16:12:34 -0400 Subject: [PATCH 1/3] feat(Chatbot): Add support for high contrast Add borders to container that show in high contrast mode. --- packages/module/src/Chatbot/Chatbot.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/module/src/Chatbot/Chatbot.scss b/packages/module/src/Chatbot/Chatbot.scss index 5e5ba1eb1..c7efd5110 100644 --- a/packages/module/src/Chatbot/Chatbot.scss +++ b/packages/module/src/Chatbot/Chatbot.scss @@ -28,6 +28,9 @@ opacity: 1; transform: translateY(0); } + // for high contrast support + border: var(--pf-t--global--border--width--high-contrast--regular) solid + var(--pf-t--global--border--color--high-contrast); // 32 rem is the width of the overlay chatbot plus the insets // if the screen is smaller, we want to be 100% @@ -46,6 +49,10 @@ // Chatbot Display Mode - Docked // ============================================================================ .pf-chatbot--docked { + // for high contrast support + border: unset; + border-left: var(--pf-t--global--border--width--high-contrast--regular) solid + var(--pf-t--global--border--color--high-contrast); inset-block-end: 0; inset-inline-end: 0; padding: 0; @@ -65,6 +72,8 @@ // Chatbot Display Mode - Fullscreen // ============================================================================ .pf-chatbot--fullscreen { + // for high contrast support + border: unset; inset-block-end: 0; inset-inline-end: 0; padding: 0; @@ -78,6 +87,8 @@ // Chatbot Display Mode - Embedded // ============================================================================ .pf-chatbot--embedded { + // for high contrast support + border: unset; position: static; width: 100%; min-height: 100%; @@ -127,6 +138,9 @@ box-shadow: none; border-left: var(--pf-t--global--border--width--divider--default) solid; border-color: var(--pf-t--global--border--color--default); + // for high contrast support + border-left: var(--pf-t--global--border--width--high-contrast--regular) solid + var(--pf-t--global--border--color--high-contrast); .pf-chatbot-container { border-radius: var(--pf-t--global--border--radius--sharp); From 5cfd85e5c01e21c6da2d70cdb28c5bfacd15b703 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Thu, 23 Oct 2025 10:05:52 -0400 Subject: [PATCH 2/3] Address feedback from Sarah --- packages/module/src/Chatbot/Chatbot.scss | 10 +++++++--- .../module/src/ChatbotFooter/ChatbotFooter.scss | 17 +++++++++++++++++ .../module/src/ChatbotHeader/ChatbotHeader.scss | 15 +++++++++++++++ 3 files changed, 39 insertions(+), 3 deletions(-) diff --git a/packages/module/src/Chatbot/Chatbot.scss b/packages/module/src/Chatbot/Chatbot.scss index c7efd5110..e52fc8180 100644 --- a/packages/module/src/Chatbot/Chatbot.scss +++ b/packages/module/src/Chatbot/Chatbot.scss @@ -138,15 +138,19 @@ box-shadow: none; border-left: var(--pf-t--global--border--width--divider--default) solid; border-color: var(--pf-t--global--border--color--default); - // for high contrast support - border-left: var(--pf-t--global--border--width--high-contrast--regular) solid - var(--pf-t--global--border--color--high-contrast); .pf-chatbot-container { border-radius: var(--pf-t--global--border--radius--sharp); } } +// for high contrast support +:root:where(.pf-v6-theme-high-contrast) { + .pf-chatbot--drawer { + border: unset; + } +} + // ============================================================================ // Information density styles // ============================================================================ diff --git a/packages/module/src/ChatbotFooter/ChatbotFooter.scss b/packages/module/src/ChatbotFooter/ChatbotFooter.scss index e07680184..acafc1b98 100644 --- a/packages/module/src/ChatbotFooter/ChatbotFooter.scss +++ b/packages/module/src/ChatbotFooter/ChatbotFooter.scss @@ -62,3 +62,20 @@ padding: 0 var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm); row-gap: var(--pf-t--global--spacer--sm); } + +// ============================================================================ +// High contrast +// ============================================================================ +:root:where(.pf-v6-theme-high-contrast) { + // Chatbot Display Mode - Fullscreen and Embedded + @media screen and (min-width: 64rem) { + .pf-chatbot--embedded, + .pf-chatbot--fullscreen { + .pf-chatbot__footer { + .pf-v6-c-divider { + display: var(--pf-v6-hidden-visible--Display); + } + } + } + } +} diff --git a/packages/module/src/ChatbotHeader/ChatbotHeader.scss b/packages/module/src/ChatbotHeader/ChatbotHeader.scss index 6c975738b..276faf7a1 100644 --- a/packages/module/src/ChatbotHeader/ChatbotHeader.scss +++ b/packages/module/src/ChatbotHeader/ChatbotHeader.scss @@ -162,3 +162,18 @@ .pf-chatbot__header .pf-chatbot__actions .pf-v6-c-menu-toggle.pf-m-secondary.pf-m-compact { width: initial; } + +// ============================================================================ +// High contrast +// ============================================================================ +:root:where(.pf-v6-theme-high-contrast) { + // Chatbot Display Mode - Fullscreen and Embedded + @media screen and (min-width: 64rem) { + .pf-chatbot--fullscreen, + .pf-chatbot--embedded { + .pf-chatbot__header__divider { + display: var(--pf-v6-hidden-visible--Display); + } + } + } +} From 9d74080e7a703287cebe663c7efbb0b450acf668 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Mon, 27 Oct 2025 14:48:12 -0400 Subject: [PATCH 3/3] Fix drawer bug Drawer was adding border to ChatBot on mobile, when drawer styling changes from inline to more of a block layout. We should add it only when we need it on the drawer. --- packages/module/src/Chatbot/Chatbot.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/module/src/Chatbot/Chatbot.scss b/packages/module/src/Chatbot/Chatbot.scss index e52fc8180..d6d7587b9 100644 --- a/packages/module/src/Chatbot/Chatbot.scss +++ b/packages/module/src/Chatbot/Chatbot.scss @@ -136,12 +136,16 @@ height: 100%; border-radius: 0; box-shadow: none; - border-left: var(--pf-t--global--border--width--divider--default) solid; border-color: var(--pf-t--global--border--color--default); .pf-chatbot-container { border-radius: var(--pf-t--global--border--radius--sharp); } + + @media screen and (min-width: 768px) { + // only want if drawer open - drawer closes/stops being inline on mobile + border-left: var(--pf-t--global--border--width--divider--default) solid; + } } // for high contrast support