Skip to content

chore(Card): Updated Card demos to use Select instead of Dropdown #6639

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
nicolethoen merged 2 commits into from
Dec 6, 2021
Merged

chore(Card): Updated Card demos to use Select instead of Dropdown #6639

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f06f1d
chore(Card): Updated Card demos to use Select instead of Dropdown
gabipodolnikova Nov 23, 2021
e676c0c
Updates select options
gabipodolnikova Nov 30, 2021
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
156 changes: 65 additions & 91 deletions packages/react-core/src/demos/CardDemos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1233,10 +1233,8 @@ import {
Stack,
StackItem,
Divider,
Dropdown,
DropdownItem,
DropdownToggle,
DropdownSeparator
Select,
SelectOption
} from '@patternfly/react-core';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';
Expand All @@ -1248,16 +1246,11 @@ import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_r
const UtilizationCard3: React.FunctionComponent = () => {
const [isOpen, setIsOpen] = React.useState(false);

const dropdownItems = [
<DropdownItem key="link">Link</DropdownItem>,
<DropdownItem key="action" component="button">
Action
</DropdownItem>,
<DropdownItem key="disabled link" isDisabled href="www.google.com">
Disabled link
</DropdownItem>,
<DropdownSeparator key="separator" />,
<DropdownItem key="separated link">Separated link</DropdownItem>
const selectItems = [
<SelectOption value="Last hour" key="option1" />,
<SelectOption value="Last 6 hours" key="option2" />,
<SelectOption value="Last 24 hours" key="option3" />,
<SelectOption value="Last 7 days" key="option4" />
];

return (
Expand All @@ -1271,13 +1264,16 @@ const UtilizationCard3: React.FunctionComponent = () => {
</Title>
</CardTitle>
<CardActions>
<Dropdown
<Select
onSelect={() => setIsOpen(!isOpen)}
toggle={<DropdownToggle onToggle={() => setIsOpen(!isOpen)}>Filter</DropdownToggle>}
onToggle={() => setIsOpen(!isOpen)}
isOpen={isOpen}
dropdownItems={dropdownItems}
placeholderText="Filter"
position="right"
/>
isPlain
>
{selectItems}
</Select>
</CardActions>
</CardHeader>
<CardBody>
Expand Down Expand Up @@ -2427,26 +2423,20 @@ import {
GalleryItem,
Flex,
FlexItem,
Dropdown,
DropdownItem,
DropdownSeparator,
DropdownToggle
Divider,
Select,
SelectOption
} from '@patternfly/react-core';
import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts';

const TrendCard1: React.FunctionComponent = () => {
const [isOpen, setIsOpen] = React.useState(false);

const dropdownItems = [
<DropdownItem key="link">Link</DropdownItem>,
<DropdownItem key="action" component="button">
Action
</DropdownItem>,
<DropdownItem key="disabled link" isDisabled href="www.google.com">
Disabled link
</DropdownItem>,
<DropdownSeparator key="separator" />,
<DropdownItem key="separated link">Separated link</DropdownItem>
const selectItems = [
<SelectOption value="Last hour" key="option1" />,
<SelectOption value="Last 6 hours" key="option2" />,
<SelectOption value="Last 24 hours" key="option3" />,
<SelectOption value="Last 7 days" key="option4" />
];
return (
<Gallery hasGutter minWidths={{ default: '360px' }}>
Expand All @@ -2464,13 +2454,16 @@ const TrendCard1: React.FunctionComponent = () => {
</FlexItem>
</Flex>
<CardActions>
<Dropdown
<Select
onSelect={() => setIsOpen(!isOpen)}
toggle={<DropdownToggle onToggle={() => setIsOpen(!isOpen)}>Filter</DropdownToggle>}
onToggle={() => setIsOpen(!isOpen)}
placeholderText="Filter"
isOpen={isOpen}
dropdownItems={dropdownItems}
position="right"
/>
isPlain
>
{selectItems}
</Select>
</CardActions>
</CardHeader>
<CardBody>
Expand Down Expand Up @@ -2600,53 +2593,44 @@ import {
DescriptionListGroup,
DescriptionListTerm,
DescriptionListDescription,
Dropdown,
DropdownItem,
DropdownToggle,
Select,
SelectOption,
Divider
} from '@patternfly/react-core';

CardLogViewDemo = () => {
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
const [isOpen, setIsOpen] = React.useState(false);

const onActionSelect = event => {
setIsDropdownOpen(!isDropdownOpen);
setIsOpen(!isOpen);
};

const onActionToggle = isOpen => {
setIsDropdownOpen(isOpen);
setIsOpen(isOpen);
};

const dropdownItems = [
<DropdownItem key="action1" component="a">
Link
</DropdownItem>,
<DropdownItem key="action2" component="button">
Action
</DropdownItem>,
<DropdownItem key="disabled action3" isDisabled component="a">
Disabled link
</DropdownItem>,
<DropdownItem key="action4" component="button">
Disabled action
</DropdownItem>,
<DropdownItem key="action5" component="a">
Separated link
</DropdownItem>
const selectItems = [
<SelectOption value="Most recent" key="option1" />,
<SelectOption value="Last 6 hours" key="option2" />,
<SelectOption value="Last 24 hours" key="option3" />,
<SelectOption value="Last 7 days" key="option4" />
];

return (
<Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
<Card id="card-log-view-example">
<CardHeader>
<CardActions>
<Dropdown
<Select
onSelect={onActionSelect}
toggle={<DropdownToggle onToggle={onActionToggle}>Most recent</DropdownToggle>}
isOpen={isDropdownOpen}
dropdownItems={dropdownItems}
onToggle={onActionToggle}
placeholderText="Most recent"
isOpen={isOpen}
position="right"
/>
isPlain
>
{selectItems}
</Select>
</CardActions>
<CardTitle>
<Title headingLevel="h2" size="xl">
Expand Down Expand Up @@ -2721,55 +2705,45 @@ import {
DescriptionListTerm,
DescriptionListDescription,
Spinner,
Dropdown,
DropdownItem,
DropdownToggle,
Select,
SelectOption,
Divider
} from '@patternfly/react-core';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';

CardEventViewDemo = () => {
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
const [isOpen, setIsOpen] = React.useState(false);

const onActionSelect = event => {
setIsDropdownOpen(!isDropdownOpen);
setIsOpen(!isOpen);
};

const onActionToggle = isOpen => {
setIsDropdownOpen(isOpen);
setIsOpen(isOpen);
};

const dropdownItems = [
<DropdownItem key="action1" component="a">
Link
</DropdownItem>,
<DropdownItem key="action2" component="button">
Action
</DropdownItem>,
<DropdownItem key="disabled action3" isDisabled component="a">
Disabled link
</DropdownItem>,
<DropdownItem key="disabled action4" isDisabled component="button">
Disabled action
</DropdownItem>,
<DropdownItem key="action5" component="a">
Separated link
</DropdownItem>

const selectItems = [
<SelectOption value="Success" key="option1" />,
<SelectOption value="Error" key="option2" />,
<SelectOption value="Warning" key="option3" />
];

return (
<Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
<Card id="card-events-view-example">
<CardHeader>
<CardActions>
<Dropdown
<Select
onSelect={onActionSelect}
toggle={<DropdownToggle onToggle={onActionToggle}>Status</DropdownToggle>}
isOpen={isDropdownOpen}
dropdownItems={dropdownItems}
onToggle={onActionToggle}
placeholderText="Status"
isOpen={isOpen}
position="right"
/>
isPlain
>
{selectItems}
</Select>
</CardActions>
<CardTitle>
<Title headingLevel="h2" size="xl">
Expand Down