fix(SendButton): Adjust disabled state

Adjusted disabled state and also added a demo for always-shown send button, with an explanation on how to use it.

Author: rebeccaalpert

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarDisabled.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
+import { Checkbox } from '@patternfly/react-core';
+
+export const ChatbotMessageBarDisabledExample: React.FunctionComponent = () => {
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const handleSend = (message) => alert(message);
+
+  return (
+    <>
+      <Checkbox
+        label="Disable send button"
+        isChecked={isDisabled}
+        onChange={() => setIsDisabled(!isDisabled)}
+        id="disabled"
+        name="disabled"
+      />
+      <MessageBar
+        onSendMessage={handleSend}
+        isSendButtonDisabled={isDisabled}
+        alwayShowSendButton
+        hasAttachButton={false}
+      />
+    </>
+  );
+};

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -257,6 +257,14 @@ In this example, the locale is set to to ja-JP. You can try it out by saying "ha
 
 ```
 
+### Message bar with always-shown send button
+
+You can use the `alwaysShowSendButton` prop if you want to always show the send button. You may also wish to apply the `isSendButtonDisabled` prop. Sending via the enter key will be disabled when this is passed in, demonstrated in the example below. You may want to enable or disable the send button based on whether there is text in the message bar. Whether text is present in the input can be detected via the `onChange` prop for `<MessageBar>`.
+
+```js file="./ChatbotMessageBarDisabled.tsx"
+
+```
+
 ### Message bar with attach menu appended to attach button
 
 You can change the behavior of the attach button to open a menu, rather than the default file viewer for your operating system. This menu can display different actions related to attachments.

packages/module/src/MessageBar/SendButton.scss

@@ -7,16 +7,35 @@
   width: 3rem;
   height: 3rem;
 
+  .pf-v6-c-button__icon {
+    --pf-v6-c-button__icon--Color: var(--pf-t--global--color--brand--default);
+  }
+
   &:hover,
   &:focus {
     background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
+    color: var(--pf-t--global--color--brand--hover);
 
     .pf-v6-c-button__icon {
       color: var(--pf-t--chatbot--blue-icon--fill--hover);
     }
   }
 }
 
+.pf-v6-theme-dark {
+  .pf-v6-c-button.pf-chatbot__button--send {
+    background-color: var(--pf-t--global--color--brand--default);
+    .pf-v6-c-button__icon {
+      --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
+    }
+  }
+
+  .pf-v6-c-button.pf-chatbot__button--send:hover,
+  .pf-v6-c-button.pf-chatbot__button--send:focus {
+    background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
+  }
+}
+
 @keyframes motionSendButton {
   0% {
     opacity: 0;

packages/module/src/MessageBar/SendButton.tsx

@@ -37,8 +37,8 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
     {...tooltipProps}
   >
     <Button
+      variant="plain"
       className={`pf-chatbot__button--send ${className ?? ''}`}
-      variant="link"
       aria-label={props['aria-label'] || 'Send button'}
       onClick={onClick}
       icon={

packages/module/src/main.scss

@@ -47,9 +47,9 @@
   --pf-t--chatbot--timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
   --pf-t--chatbot--blue-icon--background--color--hover: rgba(
-    185,
-    218,
-    252,
+    146,
+    197,
+    249,
     0.25
   ); // --pf-t--global--color--nonstatus--blue--default @ 25%
   --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);