Skip to content

chore(messages): migrate demos from radio to select #525

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 18, 2025
Merged

chore(messages): migrate demos from radio to select #525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f8c60ab
chore(messages): migrate demos from radio to select
Mash707 Apr 17, 2025
ab7a5bf
migrated remaining examples
Mash707 Apr 17, 2025
2bffd8d
cleanup
Mash707 Apr 17, 2025
f15d678
match visible text in dropdown
Mash707 Apr 18, 2025
643503c
improved casing
Mash707 Apr 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 74 additions & 104 deletions packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,44 @@ import React from 'react';
import Message from '@patternfly/chatbot/dist/dynamic/Message';
import patternflyAvatar from './patternfly_avatar.jpg';
import squareImg from './PF-social-color-square.svg';
import { AlertActionLink, Form, FormGroup, Radio } from '@patternfly/react-core';
import {
AlertActionLink,
MenuToggle,
MenuToggleElement,
Select,
SelectList,
SelectOption
} from '@patternfly/react-core';

export const BotMessageExample: React.FunctionComponent = () => {
const [variant, setVariant] = React.useState('code');
const [variant, setVariant] = React.useState<string>('Code');
const [isOpen, setIsOpen] = React.useState(false);
const [selected, setSelected] = React.useState<string>('Message content type');

/* eslint-disable indent */
const renderContent = () => {
switch (variant) {
case 'code':
case 'Code':
return code;
case 'heading':
case 'Heading':
return heading;
case 'emphasis':
case 'Emphasis':
return emphasis;
case 'blockQuotes':
case 'Block quotes':
return blockQuotes;
case 'orderedList':
case 'Ordered list':
return orderedList;
case 'unorderedList':
case 'Unordered list':
return unorderedList;
case 'moreComplexList':
case 'More complex list':
return moreComplexList;
case 'inlineCode':
case 'Inline code':
return inlineCode;
case 'link':
case 'Link':
return link;
case 'table':
case 'Table':
return table;
case 'image':
case 'Image':
return image;
default:
return;
Expand Down Expand Up @@ -155,6 +164,32 @@ _Italic text, formatted with single underscores_
)
};

const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
setVariant(value);
setSelected(value as string);
setIsOpen(false);
};

const onToggleClick = () => {
setIsOpen(!isOpen);
};

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
className="pf-v6-u-mb-md"
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
style={
{
width: '200px'
} as React.CSSProperties
}
>
{selected}
</MenuToggle>
);

return (
<>
<Message
Expand Down Expand Up @@ -193,104 +228,39 @@ _Italic text, formatted with single underscores_
timestamp="1 hour ago"
/>
<Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />

<Form>
<FormGroup role="radiogroup" isInline fieldId="bot-message-type" label="Message content type">
<Radio
isChecked={variant === 'code'}
onChange={() => setVariant('code')}
name="bot-message-type"
label="Code"
id="code"
/>
<Radio
isChecked={variant === 'inlineCode'}
onChange={() => setVariant('inlineCode')}
name="bot-message-type"
label="Inline code"
id="inline-code"
/>
<Radio
isChecked={variant === 'heading'}
onChange={() => setVariant('heading')}
name="bot-message-type"
label="Heading"
id="heading"
/>
<Radio
isChecked={variant === 'blockQuotes'}
onChange={() => setVariant('blockQuotes')}
name="bot-message-type"
label="Block quote"
id="block-quotes"
/>
<Radio
isChecked={variant === 'emphasis'}
onChange={() => setVariant('emphasis')}
name="bot-message-type"
label="Emphasis"
id="emphasis"
/>
<Radio
isChecked={variant === 'link'}
onChange={() => setVariant('link')}
name="bot-message-type"
label="Link"
id="link"
/>
<Radio
isChecked={variant === 'unorderedList'}
onChange={() => setVariant('unorderedList')}
name="bot-message-type"
label="Unordered list"
id="unordered-list"
/>
<Radio
isChecked={variant === 'orderedList'}
onChange={() => setVariant('orderedList')}
name="bot-message-type"
label="Ordered list"
id="ordered-list"
/>
<Radio
isChecked={variant === 'moreComplexList'}
onChange={() => setVariant('moreComplexList')}
name="bot-message-type"
label="More complex list"
id="more-complex-list"
/>
<Radio
isChecked={variant === 'table'}
onChange={() => setVariant('table')}
name="bot-message-type"
label="Table"
id="table"
/>
<Radio
isChecked={variant === 'image'}
onChange={() => setVariant('image')}
name="bot-message-type"
label="Image"
id="image"
/>
<Radio
isChecked={variant === 'error'}
onChange={() => setVariant('error')}
name="bot-message-type"
label="Error"
id="error"
/>
</FormGroup>
</Form>
<Select
id="single-select"
isOpen={isOpen}
selected={selected}
onSelect={onSelect}
onOpenChange={(isOpen) => setIsOpen(isOpen)}
toggle={toggle}
shouldFocusToggleOnSelect
>
<SelectList>
<SelectOption value="Code">Code</SelectOption>
<SelectOption value="Inline code">Inline code</SelectOption>
<SelectOption value="Heading">Heading</SelectOption>
<SelectOption value="Block quotes">Block quotes</SelectOption>
<SelectOption value="Emphasis">Emphasis</SelectOption>
<SelectOption value="Link">Link</SelectOption>
<SelectOption value="Unordered list">Unordered list</SelectOption>
<SelectOption value="Ordered list">Ordered list</SelectOption>
<SelectOption value="More complex list">More complex list</SelectOption>
<SelectOption value="Table">Table</SelectOption>
<SelectOption value="Image">Image</SelectOption>
<SelectOption value="Error">Error</SelectOption>
</SelectList>
</Select>
<Message
name="Bot"
role="bot"
avatar={patternflyAvatar}
content={renderContent()}
tableProps={
variant === 'table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
variant === 'Table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
}
error={variant === 'error' ? error : undefined}
error={variant === 'Error' ? error : undefined}
/>
</>
);
Expand Down
85 changes: 48 additions & 37 deletions .../module/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDetailsLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,63 @@
import React from 'react';
import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
import { Radio } from '@patternfly/react-core/dist/dynamic/Radio';
import { FormGroup } from '@patternfly/react-core/dist/dynamic/FormGroup';
import { Stack } from '@patternfly/react-core/dist/dynamic/Stack';
import { Stack, MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';

export const FileDetailsLabelExample: React.FunctionComponent = () => {
const [variant, setVariant] = React.useState('plain');
const [variant, setVariant] = React.useState<string>('plain');
const [isOpen, setIsOpen] = React.useState<boolean>(false);
const [selected, setSelected] = React.useState<string>('Variant');

const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
setVariant(value);
setSelected(value as string);
setIsOpen(false);
};

const onToggleClick = () => {
setIsOpen(!isOpen);
};

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
style={
{
width: '200px'
} as React.CSSProperties
}
>
{selected}
</MenuToggle>
);

return (
<Stack hasGutter>
<FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Variant">
<Radio
isChecked={variant === 'plain'}
onChange={() => setVariant('plain')}
name="basic-inline-radio"
label="Plain"
id="plain"
/>
<Radio
isChecked={variant === 'closeable'}
onChange={() => setVariant('closeable')}
name="basic-inline-radio"
label="Closeable"
id="closeable"
/>
<Radio
isChecked={variant === 'clickable'}
onChange={() => setVariant('clickable')}
name="basic-inline-radio"
label="Clickable"
id="clickable"
/>
<Radio
isChecked={variant === 'loading'}
onChange={() => setVariant('loading')}
name="basic-inline-radio"
label="Loading"
id="loading"
/>
</FormGroup>
<Select
id="single-select"
isOpen={isOpen}
selected={selected}
onSelect={onSelect}
onOpenChange={(isOpen) => setIsOpen(isOpen)}
toggle={toggle}
shouldFocusToggleOnSelect
>
<SelectList>
<SelectOption value="Plain">Plain</SelectOption>
<SelectOption value="Closeable">Closeable</SelectOption>
<SelectOption value="Clickable">Clickable</SelectOption>
<SelectOption value="Loading">Loading</SelectOption>
</SelectList>
</Select>
<div className="pf-chatbot__file-details-example">
<FileDetailsLabel
fileName="auth-operator.yml"
// eslint-disable-next-line no-console
{...(variant === 'closeable' && { onClose: () => console.log('clicked close button!') })}
{...(variant === 'Closeable' && { onClose: () => console.log('clicked close button!') })}
// eslint-disable-next-line no-console
{...(variant === 'clickable' && { onClick: () => console.log('clicked entire button!') })}
{...(variant === 'loading' && { isLoading: true })}
{...(variant === 'Clickable' && { onClick: () => console.log('clicked entire button!') })}
{...(variant === 'Loading' && { isLoading: true })}
/>
</div>
</Stack>
Expand Down
Loading
Loading