-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ChatbotModal): Add style-able modal for general use
- Loading branch information
1 parent
0019c2e
commit 7cece91
Showing
9 changed files
with
231 additions
and
124 deletions.
There are no files selected for viewing
43 changes: 43 additions & 0 deletions
43
.../module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/ChatbotModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import React from 'react'; | ||
| import { Button, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core'; | ||
| import { ChatbotModal } from '@patternfly/virtual-assistant/dist/dynamic/ChatbotModal'; | ||
| import { ChatbotDisplayMode } from '@patternfly/virtual-assistant/dist/dynamic/Chatbot'; | ||
|
|
||
| export const ChatbotModalExample: React.FunctionComponent = () => { | ||
| const [isModalOpen, setIsModalOpen] = React.useState(false); | ||
|
|
||
| const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => { | ||
| setIsModalOpen(!isModalOpen); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Button onClick={handleModalToggle}>Launch modal</Button> | ||
| <ChatbotModal | ||
| isOpen={isModalOpen} | ||
| displayMode={ChatbotDisplayMode.default} | ||
| onClose={handleModalToggle} | ||
| ouiaId="ChatbotModal" | ||
| aria-labelledby="basic-modal-title" | ||
| aria-describedby="modal-box-body-basic" | ||
| > | ||
| <ModalHeader title="Basic modal" labelId="basic-modal-title" /> | ||
| <ModalBody id="modal-box-body-basic"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore | ||
| magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla | ||
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id | ||
| est laborum. | ||
| </ModalBody> | ||
| <ModalFooter> | ||
| <Button key="confirm" variant="primary" onClick={handleModalToggle}> | ||
| Confirm | ||
| </Button> | ||
| <Button key="cancel" variant="link" onClick={handleModalToggle}> | ||
| Cancel | ||
| </Button> | ||
| </ModalFooter> | ||
| </ChatbotModal> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| .pf-chatbot__chatbot-modal-backdrop { | ||
| position: static; | ||
| } | ||
|
|
||
| .pf-chatbot__chatbot-modal { | ||
| --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--medium); | ||
| position: fixed; | ||
| inset-block-end: var(--pf-t--global--spacer--800); // no associated semantic token | ||
| inset-inline-end: var(--pf-t--global--spacer--lg); | ||
| width: 30rem; | ||
| height: 70vh; | ||
| background-color: var(--pf-t--global--background--color--secondary--default); | ||
|
|
||
| .pf-v6-c-modal-box__title { | ||
| --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--h3); | ||
| } | ||
| .pf-v6-c-button.pf-m-primary.pf-m-block, | ||
| .pf-v6-c-button.pf-m-link.pf-m-block { | ||
| --pf-v6-c-button--FontWeight: 500; | ||
| } | ||
| .pf-v6-c-modal-box__footer { | ||
| padding-block-start: var(--pf-t--global--spacer--xl); | ||
| padding-block-end: var(--pf-t--global--spacer--xl); | ||
| } | ||
| .pf-v6-c-modal-box__header { | ||
| padding-block-end: var(--pf-t--global--spacer--lg); | ||
| } | ||
| } | ||
|
|
||
| // ============================================================================ | ||
| // Chatbot Display Mode - Fullscreen and Embedded | ||
| // ============================================================================ | ||
| @media screen and (max-width: 600px) { | ||
| .pf-chatbot__chatbot-modal--embedded, | ||
| .pf-chatbot__chatbot-modal--fullscreen { | ||
| inset-block-end: 0; | ||
| inset-inline-end: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| } | ||
| } | ||
| @media screen and (min-width: 601px) { | ||
| .pf-chatbot__chatbot-modal--embedded, | ||
| .pf-chatbot__chatbot-modal--fullscreen { | ||
| inset-block-end: 0; | ||
| inset-inline-end: 0; | ||
| width: 50%; | ||
| height: fit-content; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| } | ||
| } | ||
|
|
||
| // ============================================================================ | ||
| // Chatbot Display Mode - Default | ||
| // ============================================================================ | ||
| .pf-chatbot__chatbot-modal--default { | ||
| box-shadow: unset; | ||
| } | ||
|
|
||
| // ============================================================================ | ||
| // Chatbot Display Mode - Docked | ||
| // ============================================================================ | ||
| .pf-chatbot__chatbot-modal--docked { | ||
| height: 100vh; | ||
| inset-block-end: 0; | ||
| inset-inline-end: 0; | ||
| border-radius: 0; | ||
| --pf-v6-c-modal-box--MaxHeight: 100vh; | ||
| box-shadow: unset; | ||
| } | ||
|
|
||
| // ============================================================================ | ||
| // Dark theme | ||
| // ============================================================================ | ||
| .pf-v6-theme-dark { | ||
| .pf-v6-c-modal-box.pf-chatbot__chatbot-modal { | ||
| .pf-v6-c-modal-box__title { | ||
| color: #fff; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // ============================================================================ | ||
| // Backdrop | ||
| // ============================================================================ | ||
| .pf-v6-c-backdrop.pf-chatbot__backdrop { | ||
| position: absolute; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| // ============================================================================ | ||
| // Code Modal - Chatbot Modal with Code Editor | ||
| // ============================================================================ | ||
| import React from 'react'; | ||
|
|
||
| // Import PatternFly components | ||
| import { Modal, ModalProps } from '@patternfly/react-core'; | ||
| import { ChatbotDisplayMode } from '../Chatbot'; | ||
|
|
||
| export interface ChatbotModalProps extends Omit<ModalProps, 'ref'> { | ||
| /** Display mode for the Chatbot parent; this influences the styles applied */ | ||
| displayMode?: ChatbotDisplayMode; | ||
| className?: string; | ||
| } | ||
|
|
||
| export const ChatbotModal: React.FunctionComponent<ChatbotModalProps> = ({ | ||
| children, | ||
| displayMode = ChatbotDisplayMode.default, | ||
| className, | ||
| isOpen, | ||
| ...props | ||
| }: ChatbotModalProps) => { | ||
| const modal = ( | ||
| <Modal | ||
| isOpen={isOpen} | ||
| ouiaId="ChatbotModal" | ||
| aria-labelledby="chatbot-modal-title" | ||
| aria-describedby="chatbot-modal" | ||
| className={`pf-chatbot__chatbot-modal pf-chatbot__chatbot-modal--${displayMode} ${className}`} | ||
| backdropClassName="pf-chatbot__chatbot-modal-backdrop" | ||
| {...props} | ||
| > | ||
| {children} | ||
| </Modal> | ||
| ); | ||
|
|
||
| if ((displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded) && isOpen) { | ||
| return <div className="pf-v6-c-backdrop pf-chatbot__backdrop">{modal}</div>; | ||
| } | ||
| return modal; | ||
| }; | ||
|
|
||
| export default ChatbotModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export { default } from './ChatbotModal'; | ||
|
|
||
| export * from './ChatbotModal'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.