Merge pull request #851 from rebeccaalpert/icon

thatblindgeye · web-flow · commit a106a49592f7 · 2026-06-23T17:01:18.000-04:00
fix(ChatbotToggle): Adjust icon
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "@octokit/rest": "^18.0.0",
     "@patternfly/documentation-framework": "6.28.9",
     "@patternfly/patternfly": "^6.1.0",
-    "@patternfly/react-icons": "^6.1.0",
+    "@patternfly/react-icons": "^6.5.1",
     "@patternfly/react-table": "^6.1.0",
     "@swc/core": "1.3.96",
     "@testing-library/dom": "^9.3.4",
diff --git a/packages/module/package.json b/packages/module/package.json
@@ -35,7 +35,7 @@
   "dependencies": {
     "@patternfly/react-code-editor": "^6.1.0",
     "@patternfly/react-core": "^6.1.0",
-    "@patternfly/react-icons": "^6.1.0",
+    "@patternfly/react-icons": "^6.5.1",
     "@patternfly/react-styles": "^6.1.0",
     "@patternfly/react-table": "^6.1.0",
     "@segment/analytics-next": "^1.76.0",
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/SecondaryChatbotToggle.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/SecondaryChatbotToggle.tsx
@@ -0,0 +1,15 @@
+import { FunctionComponent, useState } from 'react';
+import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
+
+export const SecondaryChatbotToggle: FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(false);
+
+  return (
+    <ChatbotToggle
+      tooltipLabel="Virtual assistant"
+      isChatbotVisible={chatbotVisible}
+      onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
+      colorVariant="secondary"
+    />
+  );
+};
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md
@@ -165,6 +165,14 @@ To allow users to open and close the ChatBot window as needed, add a toggle.
 
 ```
 
+### Secondary color toggle
+
+Use `colorVariant="secondary"` for a light gray toggle with a default border. This is useful when the floating default style does not match the surrounding UI.
+
+```js file="./SecondaryChatbotToggle.tsx" isFullscreen
+
+```
+
 ### Custom toggle icon
 
 A custom icon can be passed to the toggle. To ensure the icon is visible in both light and dark themes, use an SVG image and set `fill="currentColor"`.
diff --git a/packages/module/src/ChatbotToggle/ChatbotToggle.scss b/packages/module/src/ChatbotToggle/ChatbotToggle.scss
@@ -5,14 +5,17 @@
   position: fixed;
   inset-block-end: var(--pf-t--global--spacer--md);
   inset-inline-end: var(--pf-t--global--spacer--md);
-  background-color: var(--pf-t--global--background--color--inverse--default);
-  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
+  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
+  --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--floating--clicked);
+  --pf-v6-c-button--m-plain--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-plain--BorderWidth: 1px;
+  --pf-v6-c-button--m-plain--hover--BorderWidth: 1px;
+  --pf-v6-c-button--m-plain--m-clicked--BorderWidth: 1px;
   padding: var(--pf-t--global--spacer--md);
-
-  &:hover,
-  &:focus {
-    background-color: var(--pf-t--color--gray--70);
-  }
+  box-shadow: var(--pf-t--global--box-shadow--sm);
 
   .pf-v6-c-button__icon {
     display: contents;
@@ -23,6 +26,20 @@
     width: var(--pf-t--global--spacer--lg);
     height: var(--pf-t--global--spacer--lg);
   }
+
+  &--active {
+    --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--floating--clicked);
+  }
+
+  &--secondary {
+    --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+    --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--secondary--clicked);
+
+    &.pf-chatbot__button--active {
+      --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--secondary--clicked);
+    }
+  }
 }
 
 .pf-chatbot__button--round {
diff --git a/packages/module/src/ChatbotToggle/ChatbotToggle.test.tsx b/packages/module/src/ChatbotToggle/ChatbotToggle.test.tsx
@@ -43,4 +43,8 @@ describe('ChatbotToggle', () => {
     expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
     expect(screen.getByRole('button')).toHaveClass('test');
   });
+  it('should handle colorVariant secondary correctly', () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" colorVariant="secondary" />);
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button--secondary');
+  });
 });
diff --git a/packages/module/src/ChatbotToggle/ChatbotToggle.tsx b/packages/module/src/ChatbotToggle/ChatbotToggle.tsx
@@ -5,7 +5,7 @@ import type { Ref, FunctionComponent } from 'react';
 
 import { forwardRef } from 'react';
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 
 export interface ChatbotToggleProps extends ButtonProps {
   /** Contents of the tooltip applied to the toggle button */
@@ -28,24 +28,23 @@ export interface ChatbotToggleProps extends ButtonProps {
   className?: string;
   /** Test id applied to default open icon */
   openIconTestId?: string;
+  /** Color variant applied to the toggle button */
+  colorVariant?: 'default' | 'secondary';
 }
 
 const ChatIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-    <path
-      fill="var(--pf-t--global--icon--color--inverse)"
-      stroke="var(--pf-t--global--icon--color--inverse)"
-      strokeLinejoin="round"
-      strokeWidth=".75"
-      d="M3.577 14.382c0 .198.12.38.31.46l.19.04a.492.492 0 0 0 .349-.143l3.028-3.028h8.513a.489.489 0 0 0 .492-.492V2.491A.489.489 0 0 0 15.967 2H1.691a.489.489 0 0 0-.492.491v8.728c0 .135.056.262.143.349a.498.498 0 0 0 .349.143h1.878v2.663h.008v.008ZM2.19 10.72V2.983h13.278v7.729H7.24a.512.512 0 0 0-.35.143l-2.322 2.322v-1.974a.498.498 0 0 0-.142-.348.492.492 0 0 0-.35-.143H2.19v.008Z"
-    />
-    <path
-      fill="var(--pf-t--global--text--color--inverse)"
-      stroke="var(--pf-t--global--text--color--inverse)"
-      strokeLinejoin="round"
-      strokeWidth=".75"
-      d="M22.301 9.135h-3.963a.489.489 0 0 0-.492.491c0 .27.222.492.492.492h3.472v7.737h-1.88a.404.404 0 0 0-.348.134.492.492 0 0 0-.143.35v1.973l-2.322-2.323a.492.492 0 0 0-.349-.142H8.532v-4.265a.489.489 0 0 0-.492-.492.494.494 0 0 0-.491.492v4.756c0 .277.222.492.491.492h8.514l3.028 3.028a.492.492 0 0 0 .349.142l.19-.04a.502.502 0 0 0 .31-.459V18.83h1.878c.111-.008.262-.048.349-.135a.491.491 0 0 0 .142-.349v-8.72a.489.489 0 0 0-.491-.491h-.008Z"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" width="33" height="31" viewBox="0 0 33 31" fill="none">
+    <g clipPath="url(#clip0_11685_20917)">
+      <path
+        d="M29.7 11.0714H17.6V7.75H19.525C20.2834 7.75 20.9 7.12939 20.9 6.36607V1.38393C20.9 0.620609 20.2834 0 19.525 0H13.475C12.7166 0 12.1 0.620609 12.1 1.38393V6.36607C12.1 7.12939 12.7166 7.75 13.475 7.75H15.4V11.0714H3.3C1.48027 11.0714 0 12.5613 0 14.3929V27.6786C0 29.5101 1.48027 31 3.3 31H29.7C31.5197 31 33 29.5101 33 27.6786V14.3929C33 12.5613 31.5197 11.0714 29.7 11.0714ZM14.3 2.21429H18.7V5.53571H14.3V2.21429ZM30.8 27.6786C30.8 28.2894 30.3069 28.7857 29.7 28.7857H3.3C2.6936 28.7857 2.2 28.2894 2.2 27.6786V14.3929C2.2 13.7825 2.6936 13.2857 3.3 13.2857H29.7C30.3069 13.2857 30.8 13.7825 30.8 14.3929V27.6786ZM8.525 17.7143V19.9286C8.525 20.387 8.15547 20.7589 7.7 20.7589H5.5C5.04453 20.7589 4.675 20.387 4.675 19.9286V17.7143C4.675 17.2559 5.04453 16.8839 5.5 16.8839H7.7C8.15547 16.8839 8.525 17.2559 8.525 17.7143ZM28.325 17.7143V19.9286C28.325 20.387 27.9555 20.7589 27.5 20.7589H25.3C24.8445 20.7589 24.475 20.387 24.475 19.9286V17.7143C24.475 17.2559 24.8445 16.8839 25.3 16.8839H27.5C27.9555 16.8839 28.325 17.2559 28.325 17.7143ZM20.5691 22.6683C20.8893 23.0965 20.8033 23.703 20.3779 24.0241C19.2521 24.8761 17.9115 25.3259 16.5 25.3259C15.0885 25.3259 13.7473 24.8761 12.6215 24.0241C12.1961 23.703 12.1107 23.0965 12.4298 22.6683C12.7494 22.2391 13.3536 22.1526 13.7774 22.4759C15.3576 23.6695 17.6408 23.6695 19.2221 22.4759C19.6475 22.1515 20.2512 22.2402 20.5691 22.6683Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_11685_20917">
+        <rect width="33" height="31" fill="currentColor" />
+      </clipPath>
+    </defs>
   </svg>
 );
 
@@ -60,11 +59,12 @@ const ChatbotToggleBase: FunctionComponent<ChatbotToggleProps> = ({
   isRound = true,
   className,
   openIconTestId,
+  colorVariant = 'default',
   ...props
 }: ChatbotToggleProps) => {
   // Configure icon
   const closedIcon = ClosedToggleIcon ? <ClosedToggleIcon /> : <ChatIcon />;
-  const icon = isChatbotVisible ? <AngleDownIcon data-testid={openIconTestId} /> : closedIcon;
+  const icon = isChatbotVisible ? <RhMicronsCaretDownIcon data-testid={openIconTestId} /> : closedIcon;
 
   return (
     <Tooltip
@@ -74,7 +74,7 @@ const ChatbotToggleBase: FunctionComponent<ChatbotToggleProps> = ({
       {...tooltipProps}
     >
       <Button
-        className={`pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`}
+        className={`pf-chatbot__button ${colorVariant === 'secondary' ? 'pf-chatbot__button--secondary' : ''} ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`}
         variant="plain"
         aria-label={toggleButtonLabel || `${tooltipLabel} toggle`}
         onClick={onToggleChatbot}
diff --git a/packages/module/src/LoadingMessage/__snapshots__/LoadingMessage.test.tsx.snap b/packages/module/src/LoadingMessage/__snapshots__/LoadingMessage.test.tsx.snap
@@ -20,12 +20,24 @@ exports[`LoadingMessage should render loading message 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 640 512"
             width="1em"
           >
-            <path
-              d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"
-            />
+            <svg
+              class="pf-v6-icon-default"
+              viewBox="0 0 640 512"
+            >
+              <path
+                d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"
+              />
+            </svg>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="M29 22.5V29a1 1 0 1 1-2 0v-6H5v6a1 1 0 1 1-2 0v-6.5c0-.827.673-1.5 1.5-1.5h23c.827 0 1.5.673 1.5 1.5ZM3 11a1 1 0 0 1 1-1h2V5.5C6 4.673 6.673 4 7.5 4H12V2a1 1 0 1 1 2 0v2h4V2a1 1 0 1 1 2 0v2h4.5c.827 0 1.5.673 1.5 1.5V10h2a1 1 0 1 1 0 2h-2v4.5c0 .827-.673 1.5-1.5 1.5h-17c-.827 0-1.5-.673-1.5-1.5V12H4a1 1 0 0 1-1-1Zm5 5h16V6H8v10Zm5-6.612a1.626 1.626 0 1 0 .001 3.251A1.626 1.626 0 0 0 13 9.388Zm6-.01a1.626 1.626 0 1 0 .001 3.251A1.626 1.626 0 0 0 19 9.378Z"
+              />
+            </svg>
           </svg>
         </span>
       </span>
