Skip to content

Commit 52dc5c8

Browse files
Mash707Mash707
authored
chore(ui): migrate demos from radio to select (#540)
1 parent 1692b1d commit 52dc5c8

5 files changed

Lines changed: 322 additions & 168 deletions

File tree

‎packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotContainer.tsx‎

Lines changed: 55 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,50 @@
11
import React from 'react';
2-
32
import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
4-
import { Radio } from '@patternfly/react-core/dist/dynamic/Radio';
53
import { Checkbox } from '@patternfly/react-core/dist/dynamic/Checkbox';
6-
import { FormGroup } from '@patternfly/react-core/dist/dynamic/FormGroup';
74
import { Stack } from '@patternfly/react-core/dist/dynamic/Stack';
5+
import { MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';
86

97
export const ChatbotContainerDemo: React.FunctionComponent = () => {
108
const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
119
const [isVisible, setIsVisible] = React.useState(true);
10+
const [isOpen, setIsOpen] = React.useState(false);
11+
const [selected, setSelected] = React.useState<string>('Select display mode');
12+
13+
const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
14+
setSelected(value as string);
15+
setIsOpen(false);
16+
if (value === 'Overlay / default') {
17+
setDisplayMode(ChatbotDisplayMode.default);
18+
}
19+
if (value === 'Docked') {
20+
setDisplayMode(ChatbotDisplayMode.docked);
21+
}
22+
if (value === 'Fullscreen') {
23+
setDisplayMode(ChatbotDisplayMode.fullscreen);
24+
}
25+
if (value === 'Embedded') {
26+
setDisplayMode(ChatbotDisplayMode.embedded);
27+
}
28+
};
29+
30+
const onToggleClick = () => {
31+
setIsOpen(!isOpen);
32+
};
33+
34+
const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
35+
<MenuToggle
36+
ref={toggleRef}
37+
onClick={onToggleClick}
38+
isExpanded={isOpen}
39+
style={
40+
{
41+
width: '200px'
42+
} as React.CSSProperties
43+
}
44+
>
45+
{selected}
46+
</MenuToggle>
47+
);
1248

1349
return (
1450
<>
@@ -21,36 +57,22 @@ export const ChatbotContainerDemo: React.FunctionComponent = () => {
2157
}}
2258
>
2359
<Stack hasGutter>
24-
<FormGroup role="radiogroup" isInline fieldId="displayModeRadios" label="Display mode">
25-
<Radio
26-
isChecked={displayMode === ChatbotDisplayMode.default}
27-
onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
28-
name="basic-inline-radio"
29-
label="Overlay / default"
30-
id="default"
31-
/>
32-
<Radio
33-
isChecked={displayMode === ChatbotDisplayMode.docked}
34-
onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
35-
name="basic-inline-radio"
36-
label="Docked"
37-
id="docked"
38-
/>
39-
<Radio
40-
isChecked={displayMode === ChatbotDisplayMode.fullscreen}
41-
onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
42-
name="basic-inline-radio"
43-
label="Fullscreen"
44-
id="fullscreen"
45-
/>
46-
<Radio
47-
isChecked={displayMode === ChatbotDisplayMode.embedded}
48-
onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
49-
name="basic-inline-radio"
50-
label="Embedded"
51-
id="embedded"
52-
/>
53-
</FormGroup>
60+
<Select
61+
id="single-select"
62+
isOpen={isOpen}
63+
selected={selected}
64+
onSelect={onSelect}
65+
onOpenChange={(isOpen) => setIsOpen(isOpen)}
66+
toggle={toggle}
67+
shouldFocusToggleOnSelect
68+
>
69+
<SelectList>
70+
<SelectOption value="Overlay / default">Overlay / default</SelectOption>
71+
<SelectOption value="Docked">Docked</SelectOption>
72+
<SelectOption value="Fullscreen">Fullscreen</SelectOption>
73+
<SelectOption value="Embedded">Embedded</SelectOption>
74+
</SelectList>
75+
</Select>
5476
<Checkbox
5577
label="Display chatbot container"
5678
isChecked={isVisible}

‎packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderTitle.tsx‎

Lines changed: 56 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,68 @@
11
import React from 'react';
2-
import { FormGroup, Radio } from '@patternfly/react-core';
32
import { ChatbotHeaderTitle } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
43
import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
4+
import { MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';
55

66
export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
77
const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
8+
const [isOpen, setIsOpen] = React.useState(false);
9+
const [selected, setSelected] = React.useState<string>('Select display mode');
10+
11+
const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
12+
setSelected(value as string);
13+
setIsOpen(false);
14+
if (value === 'Default') {
15+
setDisplayMode(ChatbotDisplayMode.default);
16+
}
17+
if (value === 'Embedded') {
18+
setDisplayMode(ChatbotDisplayMode.embedded);
19+
}
20+
if (value === 'Docked') {
21+
setDisplayMode(ChatbotDisplayMode.docked);
22+
}
23+
if (value === 'Full screen') {
24+
setDisplayMode(ChatbotDisplayMode.fullscreen);
25+
}
26+
};
27+
28+
const onToggleClick = () => {
29+
setIsOpen(!isOpen);
30+
};
31+
32+
const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
33+
<MenuToggle
34+
className="pf-v6-u-mb-md"
35+
ref={toggleRef}
36+
onClick={onToggleClick}
37+
isExpanded={isOpen}
38+
style={
39+
{
40+
width: '200px'
41+
} as React.CSSProperties
42+
}
43+
>
44+
{selected}
45+
</MenuToggle>
46+
);
847

948
return (
1049
<>
11-
<FormGroup role="radiogroup" isInline fieldId="header-title-variants-form-radio-group" label="Display mode">
12-
<Radio
13-
isChecked={displayMode === ChatbotDisplayMode.default}
14-
onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
15-
name="basic-inline-radio"
16-
label="Default"
17-
id="default"
18-
/>
19-
<Radio
20-
isChecked={displayMode === ChatbotDisplayMode.embedded}
21-
onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
22-
name="basic-inline-radio"
23-
label="Embedded"
24-
id="embedded"
25-
/>
26-
<Radio
27-
isChecked={displayMode === ChatbotDisplayMode.docked}
28-
onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
29-
name="basic-inline-radio"
30-
label="Docked"
31-
id="docked"
32-
/>
33-
<Radio
34-
isChecked={displayMode === ChatbotDisplayMode.fullscreen}
35-
onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
36-
name="basic-inline-radio"
37-
label="Full screen"
38-
id="full-screen"
39-
/>
40-
</FormGroup>
50+
<Select
51+
id="single-select"
52+
isOpen={isOpen}
53+
selected={selected}
54+
onSelect={onSelect}
55+
onOpenChange={(isOpen) => setIsOpen(isOpen)}
56+
toggle={toggle}
57+
shouldFocusToggleOnSelect
58+
>
59+
<SelectList>
60+
<SelectOption value="Default">Default</SelectOption>
61+
<SelectOption value="Embedded">Embedded</SelectOption>
62+
<SelectOption value="Docked">Docked</SelectOption>
63+
<SelectOption value="Full screen">Full screen</SelectOption>
64+
</SelectList>
65+
</Select>
4166
<ChatbotHeaderTitle
4267
displayMode={displayMode}
4368
showOnEmbedded="Embedded"

‎packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotModal.tsx‎

Lines changed: 69 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,65 @@
11
import React from 'react';
2-
import { Button, FormGroup, ModalBody, ModalFooter, ModalHeader, Radio } from '@patternfly/react-core';
2+
import {
3+
Button,
4+
ModalBody,
5+
ModalFooter,
6+
ModalHeader,
7+
MenuToggle,
8+
MenuToggleElement,
9+
Select,
10+
SelectList,
11+
SelectOption,
12+
Stack
13+
} from '@patternfly/react-core';
314
import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
415
import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
516

617
export const ChatbotModalExample: React.FunctionComponent = () => {
718
const [isModalOpen, setIsModalOpen] = React.useState(false);
819
const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
20+
const [isOpen, setIsOpen] = React.useState(false);
21+
const [selected, setSelected] = React.useState<string>('Select display mode');
922

1023
const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
1124
setIsModalOpen(!isModalOpen);
1225
};
1326

27+
const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
28+
setSelected(value as string);
29+
setIsOpen(false);
30+
if (value === 'Default') {
31+
setDisplayMode(ChatbotDisplayMode.default);
32+
}
33+
if (value === 'Docked') {
34+
setDisplayMode(ChatbotDisplayMode.docked);
35+
}
36+
if (value === 'Fullscreen') {
37+
setDisplayMode(ChatbotDisplayMode.fullscreen);
38+
}
39+
if (value === 'Embedded') {
40+
setDisplayMode(ChatbotDisplayMode.embedded);
41+
}
42+
};
43+
44+
const onToggleClick = () => {
45+
setIsOpen(!isOpen);
46+
};
47+
48+
const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
49+
<MenuToggle
50+
ref={toggleRef}
51+
onClick={onToggleClick}
52+
isExpanded={isOpen}
53+
style={
54+
{
55+
width: '200px'
56+
} as React.CSSProperties
57+
}
58+
>
59+
{selected}
60+
</MenuToggle>
61+
);
62+
1463
return (
1564
<>
1665
<div
@@ -21,37 +70,25 @@ export const ChatbotModalExample: React.FunctionComponent = () => {
2170
boxShadow: 'var(--pf-t--global--box-shadow--lg)'
2271
}}
2372
>
24-
<FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Display mode">
25-
<Radio
26-
isChecked={displayMode === ChatbotDisplayMode.default}
27-
onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
28-
name="basic-inline-radio"
29-
label="Default"
30-
id="default"
31-
/>
32-
<Radio
33-
isChecked={displayMode === ChatbotDisplayMode.docked}
34-
onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
35-
name="basic-inline-radio"
36-
label="Docked"
37-
id="docked"
38-
/>
39-
<Radio
40-
isChecked={displayMode === ChatbotDisplayMode.fullscreen}
41-
onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
42-
name="basic-inline-radio"
43-
label="Fullscreen"
44-
id="fullscreen"
45-
/>
46-
<Radio
47-
isChecked={displayMode === ChatbotDisplayMode.embedded}
48-
onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
49-
name="basic-inline-radio"
50-
label="Embedded"
51-
id="embedded"
52-
/>
53-
</FormGroup>
54-
<Button onClick={handleModalToggle}>Launch modal</Button>
73+
<Stack hasGutter>
74+
<Select
75+
id="single-select"
76+
isOpen={isOpen}
77+
selected={selected}
78+
onSelect={onSelect}
79+
onOpenChange={(isOpen) => setIsOpen(isOpen)}
80+
toggle={toggle}
81+
shouldFocusToggleOnSelect
82+
>
83+
<SelectList>
84+
<SelectOption value="Default">Default</SelectOption>
85+
<SelectOption value="Docked">Docked</SelectOption>
86+
<SelectOption value="Fullscreen">Fullscreen</SelectOption>
87+
<SelectOption value="Embedded">Embedded</SelectOption>
88+
</SelectList>
89+
</Select>
90+
<Button onClick={handleModalToggle}>Launch modal</Button>
91+
</Stack>
5592
</div>
5693
<Chatbot displayMode={displayMode} isVisible></Chatbot>
5794
<ChatbotModal

0 commit comments

Comments
 (0)