diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarDisabled.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarDisabled.tsx new file mode 100644 index 00000000..1712882f --- /dev/null +++ b/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 ( + <> + setIsDisabled(!isDisabled)} + id="disabled" + name="disabled" + /> + + + ); +}; 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 index 2f841801..c948f143 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +++ b/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 ``. + +```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. diff --git a/packages/module/src/MessageBar/SendButton.scss b/packages/module/src/MessageBar/SendButton.scss index 548432d4..49b87337 100644 --- a/packages/module/src/MessageBar/SendButton.scss +++ b/packages/module/src/MessageBar/SendButton.scss @@ -7,9 +7,14 @@ 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); @@ -17,6 +22,20 @@ } } +.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; diff --git a/packages/module/src/MessageBar/SendButton.tsx b/packages/module/src/MessageBar/SendButton.tsx index 4e72dc7d..39400437 100644 --- a/packages/module/src/MessageBar/SendButton.tsx +++ b/packages/module/src/MessageBar/SendButton.tsx @@ -37,8 +37,8 @@ export const SendButton: React.FunctionComponent = ({ {...tooltipProps} >