Merge pull request #361 from rebeccaalpert/send

fix(SendButton): Adjust disabled state

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,18 @@ 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
+
+By default, the send button is only shown once a user has entered a valid message. If you choose to keep the send button visible at all times, disable the button when there is no valid message to send.
+
+To always show the send button in the message bar, use the `alwaysShowSendButton` prop. Use the `isSendButtonDisabled` prop to disable the button as needed. If you want to enable or disable the send button based on the presence of text in the message bar, you can detect text via the `onChange` prop for `<MessageBar>`.
+
+To disable the send button in the following example, select the "Disable send button" checkbox. When the button is disabled, you also cannot send via the enter key.
+
+```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,40 @@
   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:disabled.pf-chatbot__button--send:disabled {
+    --pf-v6-c-button--disabled--Color: var(--pf-t--global--icon--color--disabled);
+    background-color: var(--pf-t--global--background--color--disabled--default);
+  }
+
+  .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);