feat(Chatbot): Add support for high contrast (#711)

Add borders to container that show in high contrast mode. Also fixes an older drawer bug pointed out by @srambach - it was adding a border to the 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.

Author: rebeccaalpert

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%;
@@ -125,12 +136,23 @@
   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
+:root:where(.pf-v6-theme-high-contrast) {
+  .pf-chatbot--drawer {
+    border: unset;
+  }
 }
 
 // ============================================================================

packages/module/src/ChatbotFooter/ChatbotFooter.scss

@@ -66,3 +66,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);
+        }
+      }
+    }
+  }
+}

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);
+      }
+    }
+  }
+}