diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md index 8b2dad2ed74..763b4868649 100644 --- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md +++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md @@ -20,1469 +20,112 @@ import avatarImg from '../../Avatar/examples/avatarImg.svg'; ### Basic -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; -import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; - -class SimpleDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file='./DropdownBasic.tsx' ``` ### With initial selection -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; - -class IntialSelectionDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id-2'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - autoFocus={false} - /> - ); - } -} +```ts file="./DropdownInitialSelection.tsx" ``` ### With groups -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownGroup, DropdownItem } from '@patternfly/react-core'; - -class GroupedDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id-3'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - - Link - - Action - - , - - Group 2 link - - Group 2 action - - , - - Group 3 link - - Group 3 action - - - ]; - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - isGrouped - /> - ); - } -} +```ts file="./DropdownGroups.tsx" ``` ### Disabled -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; - -class DisabledDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownDisabled.tsx" ``` ### Primary toggle -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; -import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; - -class PrimaryDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id-4'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownPrimaryToggle.tsx" ``` ### Secondary toggle -```ts -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; -import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; - -const SecondaryDropdown = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onFocus = () => { - const element = document.getElementById('toggle-id-secondary'); - element.focus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - { - setIsOpen(!isOpen); - onFocus(); - }} - toggle={ - setIsOpen(next)} - toggleIndicator={CaretDownIcon} - toggleVariant="secondary" - id="toggle-id-secondary" - > - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; +```ts file="./DropdownSecondaryToggle.tsx" ``` ### Plain with text toggle -```ts -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; -import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; - -const SecondaryDropdown = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onFocus = () => { - const element = document.getElementById('toggle-id-plain-text'); - element.focus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - { - setIsOpen(!isOpen); - onFocus(); - }} - toggle={ - setIsOpen(next)} toggleIndicator={CaretDownIcon} id="toggle-id-plain-text"> - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; +```ts file="./DropdownPlainTextToggle.tsx" ``` ### Position right -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition } from '@patternfly/react-core'; - -class PositionRightDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id-5'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - Dropdown} - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownPositionRight.tsx" ``` ### Alignments on different breakpoints -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; - -class AlignmentsDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id-5'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - Dropdown} - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownAlignmentOnBreakpoints.tsx" ``` ### Direction up -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownDirection } from '@patternfly/react-core'; - -class DirectionUpDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownDirectionUp.tsx" ``` ### With kebab -```js -import React from 'react'; -import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from '@patternfly/react-core'; - -class KebabDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id-6'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - } - isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownKebab.tsx" ``` ### With badge -```js -import React from 'react'; -import { Dropdown, DropdownItem, BadgeToggle } from '@patternfly/react-core'; -import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; - -class BadgeDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - }> - Edit - , - }> - Deployment - , - }> - Applications - - ]; - return ( - - {dropdownItems.length} - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownBadge.tsx" ``` ### Icon only -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; -import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; - -class IconDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id-7'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - - - - } - isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownIconOnly.tsx" ``` ### Split button -```js -import React from 'react'; -import { - Dropdown, - DropdownToggle, - DropdownToggleCheckbox, - DropdownItem, - DropdownSeparator -} from '@patternfly/react-core'; - -class SplitButtonDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id-8'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - - ]} - onToggle={this.onToggle} - id="toggle-id-8" - /> - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownSplitButton.tsx" ``` ### Split button (with text) -```js -import React from 'react'; -import { - Dropdown, - DropdownToggle, - DropdownToggleCheckbox, - DropdownItem, - DropdownSeparator -} from '@patternfly/react-core'; - -class SplitButtonDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - - 10 selected - - ]} - onToggle={this.onToggle} - /> - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownSplitButtonText.tsx" ``` -### Split button (3rd state) +### Split button (indeterminate state) -```js -import React from 'react'; -import { - Dropdown, - DropdownToggle, - DropdownToggleCheckbox, - DropdownItem, - DropdownSeparator -} from '@patternfly/react-core'; -class SplitButtonDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false, - isChecked: null - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - this.onChange = isChecked => { - this.setState({ - isChecked - }); - }; - } - render() { - const { isOpen, isChecked } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - this.onChange(checked)} - isChecked={isChecked} - /> - ]} - onToggle={this.onToggle} - /> - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownSplitButtonIndeterminate.tsx" ``` ### Split button (disabled) -```js -import React from 'react'; -import { - Dropdown, - DropdownToggle, - DropdownToggleCheckbox, - DropdownItem, - DropdownSeparator -} from '@patternfly/react-core'; - -class SplitButtonDisabledDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - return ( - - ]} - isDisabled - onToggle={this.onToggle} - /> - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownSplitButtonDisabled.tsx" ``` ### Split button action -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core'; -import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; -import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; - -class SplitButtonActionDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isActionOpen: false, - isCogOpen: false - }; - this.onActionToggle = isActionOpen => { - this.setState({ - isActionOpen - }); - }; - this.onCogToggle = isCogOpen => { - this.setState({ - isCogOpen - }); - }; - this.onActionClick = event => { - window.alert('You selected an action button!'); - }; - this.onCogClick = event => { - window.alert('You selected the Cog!'); - }; - this.onActionSelect = event => { - this.setState({ - isActionOpen: !this.state.isActionOpen - }); - }; - this.onCogSelect = event => { - this.setState({ - isCogOpen: !this.state.isCogOpen - }); - }; - } - - render() { - const { isActionOpen, isCogOpen } = this.state; - const dropdownItems = [ - - Action - , - - Disabled action - , - - Other action - - ]; - const dropdownIconItems = [ - } onClick={this.onActionClick}> - Action - , - } isDisabled onClick={this.onActionClick}> - Disabled action - , - } onClick={this.onActionClick}> - Other action - - ]; - return ( - - - Action - - ]} - splitButtonVariant="action" - onToggle={this.onActionToggle} - /> - } - isOpen={isActionOpen} - dropdownItems={dropdownItems} - />{' '} - - - - ]} - splitButtonVariant="action" - onToggle={this.onCogToggle} - /> - } - isOpen={isCogOpen} - dropdownItems={dropdownIconItems} - /> - - ); - } -} +```ts file="./DropdownSplitButtonAction.tsx" ``` ### Split button primary action -```ts -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core'; -import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; -import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; - -const PrimarySplitActionDropdown = () => { - const [isActionOpen, setIsActionOpen] = React.useState(false); - const [isCogOpen, setIsCogOpen] = React.useState(false); - - const onActionClick = () => { - window.alert('You selected an action button!'); - }; - const onCogClick = () => { - window.alert('You selected the Cog!'); - }; - - const dropdownItems = [ - - Action - , - - Disabled action - , - - Other action - - ]; - const dropdownIconItems = [ - } onClick={onActionClick}> - Action - , - } isDisabled onClick={onActionClick}> - Disabled action - , - } onClick={onActionClick}> - Other action - - ]; - - return ( - - setIsActionOpen(!isActionOpen)} - toggle={ - - Action - - ]} - toggleVariant="primary" - splitButtonVariant="action" - onToggle={next => setIsActionOpen(next)} - /> - } - isOpen={isActionOpen} - dropdownItems={dropdownItems} - />{' '} - setIsCogOpen(!isCogOpen)} - toggle={ - - - - ]} - toggleVariant="primary" - splitButtonVariant="action" - onToggle={next => setIsCogOpen(next)} - /> - } - isOpen={isCogOpen} - dropdownItems={dropdownIconItems} - /> - - ); -}; +```ts file="./DropdownSplitButtonActionPrimary.tsx" ``` ### Basic panel -```js -import React from 'react'; -import { Dropdown, DropdownToggle } from '@patternfly/react-core'; - -class DropdownPanel extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - return ( - Expanded dropdown} - isOpen={isOpen} - > - [Panel contents here] - - ); - } -} +```ts file="./DropdownBasicPanel.tsx" ``` ### Router link -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core'; -import { Link } from '@reach/router'; -import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; - -class RouterDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id-8'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [@reach/router Link} />]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownRouterLink.tsx" ``` ### Dropdown with image and text -```js -import React from 'react'; -import { - Avatar, - Dropdown, - DropdownGroup, - DropdownToggle, - DropdownItem, - DropdownSeparator -} from '@patternfly/react-core'; -import avatarImg from '../../Avatar/examples/avatarImg.svg'; - -class ImageTextDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id-9'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - - - Text - - - More text - - , - , - - My profile - - User management - - Logout - - ]; - return ( - } - > - Ned Username - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownImageAndText.tsx" ``` ### Appending document body vs parent @@ -1493,158 +136,10 @@ Instead append to `"parent"` to achieve the same result without sacrificing acce In this example, while, after making a selection, both variants retain focus on their respective Dropdown component, the options for the `document.body` variant cannot be navigated to via Voice Over. -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, Flex } from '@patternfly/react-core'; -import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; - -class DropdownDocumentBodyVsParent extends React.Component { - constructor(props) { - super(props); - this.state = { - isBodyOpen: false, - isParentOpen: false - }; - this.onBodyToggle = isBodyOpen => { - this.setState({ - isBodyOpen - }); - }; - this.onBodySelect = event => { - this.setState({ - isBodyOpen: !this.state.isBodyOpen - }); - this.onBodyFocus(); - }; - this.onBodyFocus = () => { - const element = document.getElementById('toggle-id-document-body'); - element.focus(); - }; - - this.onParentToggle = isParentOpen => { - this.setState({ - isParentOpen - }); - }; - this.onParentSelect = event => { - this.setState({ - isParentOpen: !this.state.isParentOpen - }); - this.onParentFocus(); - }; - this.onParentFocus = () => { - const element = document.getElementById('toggle-id-parent'); - element.focus(); - }; - } - - render() { - const { isBodyOpen, isParentOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled link - - ]; - return ( - - - Dropdown - Document Body - - } - isOpen={isBodyOpen} - dropdownItems={dropdownItems} - menuAppendTo={() => document.body} - /> - - Dropdown - Parent - - } - isOpen={isParentOpen} - dropdownItems={dropdownItems} - menuAppendTo="parent" - /> - - ); - } -} +```ts file="./DropdownAppendBodyVsParent.tsx" ``` ### Dropdown with descriptions -```js -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; -import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; -import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; - -class SimpleDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - - const dropdownItems = [ - }> - Link - , - } - description="This is a very long description that describes the menu item" - > - Action - , - - Disabled link - , - - Disabled action - - ]; - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} +```ts file="./DropdownDescriptions.tsx" ``` diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx new file mode 100644 index 00000000000..53191fd6c67 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; + +export const DropdownAlignmentOnBreakpoints: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-breakpoints'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx new file mode 100644 index 00000000000..915fb3bcc86 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, Flex } from '@patternfly/react-core'; + +export const DropdownAppendBodyVsParent: React.FunctionComponent = () => { + const [isBodyOpen, setIsBodyOpen] = React.useState(false); + const [isParentOpen, setIsParentOpen] = React.useState(false); + + const onBodyToggle = (isBodyOpen: boolean) => { + setIsBodyOpen(isBodyOpen); + }; + const onParentToggle = (isParentOpen: boolean) => { + setIsParentOpen(isParentOpen); + }; + + const onBodyFocus = () => { + const element = document.getElementById('toggle-append-body'); + element.focus(); + }; + const onParentFocus = () => { + const element = document.getElementById('toggle-append-parent'); + element.focus(); + }; + + const onBodySelect = () => { + setIsBodyOpen(false); + onBodyFocus(); + }; + const onParentSelect = () => { + setIsParentOpen(false); + onParentFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + + Dropdown appended to body + + } + isOpen={isBodyOpen} + dropdownItems={dropdownItems} + menuAppendTo={() => document.body} + /> + + Dropdown appended to parent + + } + isOpen={isParentOpen} + dropdownItems={dropdownItems} + menuAppendTo="parent" + /> + + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBadge.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBadge.tsx new file mode 100644 index 00000000000..b739fd6a989 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownBadge.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { Dropdown, DropdownItem, BadgeToggle } from '@patternfly/react-core'; +import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; + +export const DropdownBadge: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-badge'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + }> + Edit + , + }> + Deployment + , + }> + Applications + + ]; + + return ( + + {dropdownItems.length} + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx new file mode 100644 index 00000000000..dc62efd8ac3 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; + +export const DropdownBasic: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-basic'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasicPanel.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasicPanel.tsx new file mode 100644 index 00000000000..2d01c1b9dd0 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasicPanel.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Dropdown, DropdownToggle } from '@patternfly/react-core'; + +export const DropdownBasicPanel: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-panel'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + return ( + + Expanded dropdown + + } + isOpen={isOpen} + > + [Panel contents here] + + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownDescriptions.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownDescriptions.tsx new file mode 100644 index 00000000000..c2219bbe518 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownDescriptions.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; + +export const DropdownDescriptions: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-descriptions'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + }> + Link + , + } + description="This is a very long description that describes the menu item" + > + Action + , + + Disabled link + , + + Disabled action + + ]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownDirectionUp.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownDirectionUp.tsx new file mode 100644 index 00000000000..d6154618bdf --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownDirectionUp.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownDirection } from '@patternfly/react-core'; + +export const DropdownDirectionUp: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-direction-up'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownDisabled.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownDisabled.tsx new file mode 100644 index 00000000000..5cd3ded29e3 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownDisabled.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; + +export const DropdownDisabled: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-disabled'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownGroups.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownGroups.tsx new file mode 100644 index 00000000000..ae84fb08c6c --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownGroups.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownGroup, DropdownItem } from '@patternfly/react-core'; + +export const DropdownGroups: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-groups'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + + Link + + Action + + , + + Group 2 link + + Group 2 action + + , + + Group 3 link + + Group 3 action + + + ]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + isGrouped + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownIconOnly.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownIconOnly.tsx new file mode 100644 index 00000000000..918de4a52c9 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownIconOnly.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; +import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; + +export const DropdownIconOnly: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-icon-only'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + + + } + isOpen={isOpen} + isPlain + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownImageAndText.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownImageAndText.tsx new file mode 100644 index 00000000000..eb97db3e4ce --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownImageAndText.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { + Avatar, + Dropdown, + DropdownGroup, + DropdownToggle, + DropdownItem, + DropdownSeparator +} from '@patternfly/react-core'; +import avatarImg from '../../Avatar/examples/avatarImg.svg'; + +export const DropdownImageAndText: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-image-and-text'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + + + Text + + + More text + + , + , + + My profile + + User management + + Logout + + ]; + + return ( + } + > + Ned Username + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownInitialSelection.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownInitialSelection.tsx new file mode 100644 index 00000000000..34714d1dc2a --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownInitialSelection.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; + +export const DropdownInitialSelection: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-initial-selection'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownKebab.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownKebab.tsx new file mode 100644 index 00000000000..e8b708f6160 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownKebab.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from '@patternfly/react-core'; + +export const DropdownKebab: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-kebab'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + } + isOpen={isOpen} + isPlain + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownPlainTextToggle.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownPlainTextToggle.tsx new file mode 100644 index 00000000000..b981d89bd22 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownPlainTextToggle.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; + +export const DropdownPlainTextToggle: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-plain-text'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownPositionRight.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownPositionRight.tsx new file mode 100644 index 00000000000..f63608c1d18 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownPositionRight.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition } from '@patternfly/react-core'; + +export const DropdownPositionRight: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-position-right'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownPrimaryToggle.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownPrimaryToggle.tsx new file mode 100644 index 00000000000..2435080638c --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownPrimaryToggle.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; + +export const DropdownPrimaryToggle: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-primary'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownRouterLink.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownRouterLink.tsx new file mode 100644 index 00000000000..774bc7a3a51 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownRouterLink.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core'; +import { Link } from '@reach/router'; + +export const DropdownRouterLink: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-router-link'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [@reach/router Link} />]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSecondaryToggle.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSecondaryToggle.tsx new file mode 100644 index 00000000000..3f11aeef6d1 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownSecondaryToggle.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; + +export const DropdownPrimaryToggle: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-secondary'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + Dropdown + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButton.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButton.tsx new file mode 100644 index 00000000000..99e78aeb668 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButton.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { + Dropdown, + DropdownToggle, + DropdownToggleCheckbox, + DropdownItem, + DropdownSeparator +} from '@patternfly/react-core'; + +export const DropdownSplitButton: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-split-button'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + ]} + onToggle={onToggle} + id="toggle-split-button" + /> + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonAction.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonAction.tsx new file mode 100644 index 00000000000..f3a3f7b0f7e --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonAction.tsx @@ -0,0 +1,105 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; + +export const DropdownSplitButtonAction: React.FunctionComponent = () => { + const [isActionOpen, setIsActionOpen] = React.useState(false); + const [isCogOpen, setIsCogOpen] = React.useState(false); + + const onActionToggle = (isActionOpen: boolean) => { + setIsActionOpen(isActionOpen); + }; + const onCogToggle = (isCogOpen: boolean) => { + setIsCogOpen(isCogOpen); + }; + + const onActionClick = () => { + window.alert('You selected an action button!'); + }; + const onCogClick = () => { + window.alert('You selected the Cog!'); + }; + + const onActionFocus = () => { + const element = document.getElementById('toggle-split-button-action'); + element.focus(); + }; + const onCogFocus = () => { + const element = document.getElementById('toggle-split-button-cog'); + element.focus(); + }; + + const onActionSelect = () => { + setIsActionOpen(false); + onActionFocus(); + }; + const onCogSelect = () => { + setIsCogOpen(false); + onCogFocus(); + }; + + const dropdownItems = [ + + Action + , + + Disabled action + , + + Other action + + ]; + + const dropdownIconItems = [ + } onClick={onActionClick}> + Action + , + } isDisabled onClick={onActionClick}> + Disabled action + , + } onClick={onActionClick}> + Other action + + ]; + + return ( + + + Action + + ]} + splitButtonVariant="action" + onToggle={onActionToggle} + /> + } + isOpen={isActionOpen} + dropdownItems={dropdownItems} + />{' '} + + + + ]} + splitButtonVariant="action" + onToggle={onCogToggle} + /> + } + isOpen={isCogOpen} + dropdownItems={dropdownIconItems} + /> + + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx new file mode 100644 index 00000000000..6dfa2e0a7f8 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; + +export const DropdownSplitButtonActionPrimary: React.FunctionComponent = () => { + const [isActionOpen, setIsActionOpen] = React.useState(false); + const [isCogOpen, setIsCogOpen] = React.useState(false); + + const onActionToggle = (isActionOpen: boolean) => { + setIsActionOpen(isActionOpen); + }; + const onCogToggle = (isCogOpen: boolean) => { + setIsCogOpen(isCogOpen); + }; + + const onActionClick = () => { + window.alert('You selected an action button!'); + }; + const onCogClick = () => { + window.alert('You selected the Cog!'); + }; + + const onActionFocus = () => { + const element = document.getElementById('toggle-split-button-action-primary'); + element.focus(); + }; + const onCogFocus = () => { + const element = document.getElementById('toggle-split-button-cog-primary'); + element.focus(); + }; + + const onActionSelect = () => { + setIsActionOpen(false); + onActionFocus(); + }; + const onCogSelect = () => { + setIsCogOpen(false); + onCogFocus(); + }; + + const dropdownItems = [ + + Action + , + + Disabled action + , + + Other action + + ]; + + const dropdownIconItems = [ + } onClick={onActionClick}> + Action + , + } isDisabled onClick={onActionClick}> + Disabled action + , + } onClick={onActionClick}> + Other action + + ]; + + return ( + + + Action + + ]} + toggleVariant="primary" + splitButtonVariant="action" + onToggle={onActionToggle} + /> + } + isOpen={isActionOpen} + dropdownItems={dropdownItems} + />{' '} + + + + ]} + toggleVariant="primary" + splitButtonVariant="action" + onToggle={onCogToggle} + /> + } + isOpen={isCogOpen} + dropdownItems={dropdownIconItems} + /> + + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx new file mode 100644 index 00000000000..2186ee95998 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { + Dropdown, + DropdownToggle, + DropdownToggleCheckbox, + DropdownItem, + DropdownSeparator +} from '@patternfly/react-core'; + +export const DropdownSplitButtonDisabled: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-split-button'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + ]} + onToggle={onToggle} + isDisabled + id="toggle-split-button-disabled" + /> + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonIndeterminate.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonIndeterminate.tsx new file mode 100644 index 00000000000..a8b317b57b4 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonIndeterminate.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import { + Dropdown, + DropdownToggle, + DropdownToggleCheckbox, + DropdownItem, + DropdownSeparator +} from '@patternfly/react-core'; + +export const DropdownSplitButtonIndeterminate: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + const [isChecked, setIsChecked] = React.useState(null); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-split-button-indeterminate'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const onChange = (isChecked: boolean) => { + setIsChecked(isChecked); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + onChange(checked)} + isChecked={isChecked} + /> + ]} + onToggle={onToggle} + id="toggle-split-button-indeterminate" + /> + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +}; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonText.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonText.tsx new file mode 100644 index 00000000000..ec914807994 --- /dev/null +++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonText.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { + Dropdown, + DropdownToggle, + DropdownToggleCheckbox, + DropdownItem, + DropdownSeparator +} from '@patternfly/react-core'; + +export const DropdownSplitButtonText: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = (isOpen: boolean) => { + setIsOpen(isOpen); + }; + + const onFocus = () => { + const element = document.getElementById('toggle-split-button-text'); + element.focus(); + }; + + const onSelect = () => { + setIsOpen(false); + onFocus(); + }; + + const dropdownItems = [ + Link, + + Action + , + + Disabled link + , + + Disabled action + , + , + Separated link, + + Separated action + + ]; + + return ( + + 10 selected + + ]} + onToggle={onToggle} + id="toggle-split-button-text" + /> + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); +};