Skip to content

Commit

Permalink
fix(SendButton): Adjust disabled state
Browse files Browse the repository at this point in the history
Adjusted disabled state and also added a demo for always-shown send button, with an explanation on how to use it.
  • Loading branch information
rebeccaalpert committed Dec 6, 2024
1 parent 57da18a commit 5fa2ad5
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -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}
/>
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 based on whether there is text in the message bar. Sending via the enter key will also be disabled when this is passed in, demonstrated in the example below. Whether text is present in teh 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.
Expand Down
5 changes: 5 additions & 0 deletions packages/module/src/MessageBar/SendButton.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
}
}

.pf-v6-c-button:disabled.pf-chatbot__button--send {
color: var(--pf-t--global--icon--color--disabled);
background-color: initial;
}

@keyframes motionSendButton {
0% {
opacity: 0;
Expand Down

0 comments on commit 5fa2ad5

Please sign in to comment.