Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ ouia: true

import { Fragment, useState } from 'react';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Button, Flex, Tooltip } from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const ButtonAriaDisabled: React.FunctionComponent = () => (
<>
<Flex columnGap={{ default: 'columnGapSm' }}>
<Button isAriaDisabled>Primary aria disabled</Button>
<Button isAriaDisabled variant="link" icon={<PlusCircleIcon />}>
<Button isAriaDisabled variant="link" icon={<RhUiAddCircleFillIcon />}>
Link aria disabled
</Button>
<Button isAriaDisabled variant="link" isInline>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button, Flex } from '@patternfly/react-core';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
Expand All @@ -22,17 +22,32 @@ export const ButtonCircle: React.FunctionComponent = () => {

return (
<Flex columnGap={{ default: 'columnGapSm' }}>
<Button isCircle icon={<PlusCircleIcon />} aria-label="Add primary circle variant example" />
<Button isCircle icon={<RhUiAddCircleFillIcon />} aria-label="Add primary circle variant example" />
<Button
variant="secondary"
isCircle
icon={<PlusCircleIcon />}
icon={<RhUiAddCircleFillIcon />}
aria-label="Add secondary circle variant example"
/>
<Button variant="tertiary" isCircle icon={<PlusCircleIcon />} aria-label="Add tertiary circle variant example" />
<Button variant="danger" isCircle icon={<PlusCircleIcon />} aria-label="Add danger circle variant example" />
<Button variant="warning" isCircle icon={<PlusCircleIcon />} aria-label="Add warning circle variant example" />
<Button variant="link" isCircle icon={<PlusCircleIcon />} aria-label="Add link circle variant example" />
<Button
variant="tertiary"
isCircle
icon={<RhUiAddCircleFillIcon />}
aria-label="Add tertiary circle variant example"
/>
<Button
variant="danger"
isCircle
icon={<RhUiAddCircleFillIcon />}
aria-label="Add danger circle variant example"
/>
<Button
variant="warning"
isCircle
icon={<RhUiAddCircleFillIcon />}
aria-label="Add warning circle variant example"
/>
<Button variant="link" isCircle icon={<RhUiAddCircleFillIcon />} aria-label="Add link circle variant example" />
<Button variant="control" isCircle icon={<CopyIcon />} aria-label="Copy control circle variant example" />
<Button variant="plain" isCircle icon={<RhMicronsCloseIcon />} aria-label="Remove plain circle variant example" />
<Button
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button, Flex } from '@patternfly/react-core';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';

export const ButtonDisabled: React.FunctionComponent = () => (
Expand All @@ -25,7 +25,7 @@ export const ButtonDisabled: React.FunctionComponent = () => (
</Flex>
<br />
<Flex columnGap={{ default: 'columnGapSm' }}>
<Button isDisabled variant="link" icon={<PlusCircleIcon />}>
<Button isDisabled variant="link" icon={<RhUiAddCircleFillIcon />}>
Link
</Button>
<Button isDisabled variant="link" isInline>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button, Flex } from '@patternfly/react-core';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
Expand Down Expand Up @@ -29,7 +29,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
</Flex>
<br />
<Flex columnGap={{ default: 'columnGapSm' }}>
<Button variant="link" icon={<PlusCircleIcon />}>
<Button variant="link" icon={<RhUiAddCircleFillIcon />}>
Link
</Button>
<Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ propComponents:

import { useState } from 'react';
import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover, Checkbox, Card } from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListAutoFitBasic: React.FunctionComponent = () => (
<DescriptionList isAutoFit aria-label="Basic auto-fit">
Expand All @@ -26,7 +26,7 @@ export const DescriptionListAutoFitBasic: React.FunctionComponent = () => (
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListAutoFitMinWidthModified: React.FunctionComponent = () => (
<DescriptionList
Expand All @@ -30,7 +30,7 @@ export const DescriptionListAutoFitMinWidthModified: React.FunctionComponent = (
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListAutoFitMinWidthResponsive: React.FunctionComponent = () => (
<DescriptionList
Expand All @@ -30,7 +30,7 @@ export const DescriptionListAutoFitMinWidthResponsive: React.FunctionComponent =
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListBasic: React.FunctionComponent = () => (
<DescriptionList aria-label="Basic example">
Expand All @@ -26,7 +26,7 @@ export const DescriptionListBasic: React.FunctionComponent = () => (
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListColumnFill: React.FunctionComponent = () => (
<DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '3Col' }} aria-label="Column fill enabled">
Expand All @@ -28,7 +28,7 @@ export const DescriptionListColumnFill: React.FunctionComponent = () => (
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListCompact: React.FunctionComponent = () => (
<DescriptionList isCompact aria-label="Compact example">
Expand All @@ -26,7 +26,7 @@ export const DescriptionListCompact: React.FunctionComponent = () => (
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListCompactHorizontal: React.FunctionComponent = () => (
<DescriptionList isCompact isHorizontal aria-label="Compact horizontal">
Expand All @@ -26,7 +26,7 @@ export const DescriptionListCompactHorizontal: React.FunctionComponent = () => (
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListDefaultAutoColumn: React.FunctionComponent = () => (
<DescriptionList isAutoColumnWidths columnModifier={{ default: '3Col' }} aria-label="Default auto column width">
Expand All @@ -26,7 +26,7 @@ export const DescriptionListDefaultAutoColumn: React.FunctionComponent = () => (
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListDefaultInlineGrid: React.FunctionComponent = () => (
<DescriptionList columnModifier={{ default: '3Col' }} isInlineGrid aria-label="Default inline grid">
Expand All @@ -26,7 +26,7 @@ export const DescriptionListDefaultInlineGrid: React.FunctionComponent = () => (
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListDefaultResponsiveColumns: React.FunctionComponent = () => (
<DescriptionList columnModifier={{ lg: '2Col', xl: '3Col' }} aria-label="Default responsive columns">
Expand All @@ -26,7 +26,7 @@ export const DescriptionListDefaultResponsiveColumns: React.FunctionComponent =
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListDefaultThreeColLg: React.FunctionComponent = () => (
<DescriptionList columnModifier={{ lg: '3Col' }} aria-label="Three-column on large screens">
Expand All @@ -26,7 +26,7 @@ export const DescriptionListDefaultThreeColLg: React.FunctionComponent = () => (
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListDefaultTwoCol: React.FunctionComponent = () => (
<DescriptionList
Expand All @@ -31,7 +31,7 @@ export const DescriptionListDefaultTwoCol: React.FunctionComponent = () => (
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListDisplaySizeAndCardHorizontalTermWidth: React.FunctionComponent = () => (
<DescriptionList
Expand All @@ -26,7 +26,7 @@ export const DescriptionListDisplaySizeAndCardHorizontalTermWidth: React.Functio
<Card component="div">
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListDisplayLgAndCardThreeColumn: React.FunctionComponent = () => (
<DescriptionList
Expand All @@ -24,7 +24,7 @@ export const DescriptionListDisplayLgAndCardThreeColumn: React.FunctionComponent
<Card component="div">
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
DescriptionListGroup,
DescriptionListDescription
} from '@patternfly/react-core';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';

export const DescriptionListFluidHorizontal: React.FunctionComponent = () => (
<DescriptionList isHorizontal isFluid aria-label="Fluid horizontal">
Expand All @@ -26,7 +26,7 @@ export const DescriptionListFluidHorizontal: React.FunctionComponent = () => (
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
<Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
Expand Down
Loading
Loading