From 1088eedc6138ea3e54d45136a64c025b20f23897 Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Tue, 9 Jul 2019 16:02:02 -0400 Subject: [PATCH] fix(ApplicationLauncher): Allow custom icon for application launcher toggle --- .../ApplicationLauncher.md | 56 +- .../ApplicationLauncher.test.js | 8 + .../ApplicationLauncher.tsx | 45 +- .../ApplicationLauncher.test.js.snap | 672 ++++++++++++++++++ 4 files changed, 765 insertions(+), 16 deletions(-) diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md index 95c2f9a6bb3..df0feead01e 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md @@ -8,6 +8,7 @@ Note: Application launcher is built on Dropdown, for extended API go to [`Dropdo To add a tooltip, use the `tooltip` prop and optionally add more tooltip props by using `tooltipProps`. For more tooltip information go to [`Tooltip`](/components/tooltip/). import { ApplicationLauncher, ApplicationLauncherIcon, ApplicationLauncherText, ApplicationLauncherItem, ApplicationLauncherGroup, ApplicationLauncherSeparator } from '@patternfly/react-core'; +import { HelpIcon } from '@patternfly/react-icons'; import pfIcon from './examples/pf-logo-small.svg'; ## Simple application launcher @@ -180,4 +181,57 @@ class ApplicationLauncherSections extends React.Component { ); } } -``` \ No newline at end of file +``` + +## Application launcher w/ custom icon +```js +import React from 'react'; +import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; +import { HelpIcon } from '@patternfly/react-icons'; + +class ApplicationLauncheIcon 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 appLauncherItems = [ + + Application 1 (anchor link) + , + alert('Clicked item 2')}> + Application 2 (div with onClick) + , + alert('Clicked item 3')}> + Application 3 (div with onClick) + , + + Unavailable Application + + ]; + return ( + } + /> + ); + } +} +``` diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js index 0d1fd616848..a88dde85f30 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js @@ -1,5 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; +import { HelpIcon } from '@patternfly/react-icons'; import { ApplicationLauncher } from './ApplicationLauncher'; import DropdownItem from '../Dropdown/DropdownItem'; @@ -55,4 +56,11 @@ describe('ApplicationLauncher', () => { const view = mount(); expect(view).toMatchSnapshot(); }); + + test('custom icon', () => { + const view = mount( + } /> + ); + expect(view).toMatchSnapshot(); + }); }); diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx index db8022c9a22..912d6515ad2 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -6,32 +6,34 @@ import { DropdownWithContext } from '../Dropdown/Dropdown'; export interface ApplicationLauncherProps extends React.HTMLProps { /** Additional element css classes */ - className: string; + className?: string; /** Display menu above or below dropdown toggle */ - direction: DropdownDirection; - /** + direction?: DropdownDirection; + /** * @deprecated * Use the items prop instead - * + * * Array of DropdownItem nodes that will be rendered in the dropdown Menu list */ - dropdownItems: React.ReactNode[]; + dropdownItems?: React.ReactNode[]; /** Array of application launcher items */ - items: React.ReactNode[]; + items?: React.ReactNode[]; /** Render Application launcher toggle as disabled icon */ - isDisabled: boolean; + isDisabled?: boolean; /** open bool */ - isOpen: boolean; + isOpen?: boolean; /** Indicates where menu will be alligned horizontally */ - position: DropdownPosition; + position?: DropdownPosition; /** Function callback called when user selects item */ - onSelect: (event: any) => void; + onSelect?: (event: any) => void; /** Callback called when application launcher toggle is clicked */ onToggle?: (value: boolean) => void; /** Adds accessible text to the button. Required for plain buttons */ - 'aria-label': string; + 'aria-label'?: string; /** Flag to indicate if application launcher has groups */ - isGrouped: boolean; + isGrouped?: boolean; + /** Toggle Icon, optional to override the icon used for the toggle */ + toggleIcon?: React.ReactNode } export class ApplicationLauncher extends React.Component { @@ -46,10 +48,23 @@ export class ApplicationLauncher extends React.Component undefined, onToggle: (_value: boolean): any => undefined, 'aria-label': 'Application launcher', - isGrouped: false + isGrouped: false, + toggleIcon: }; render() { - const { 'aria-label': ariaLabel, isOpen, onToggle, onSelect, isDisabled, className, isGrouped, dropdownItems, items, ...props } = this.props; + const { + 'aria-label': ariaLabel, + isOpen, + onToggle, + toggleIcon, + onSelect, + isDisabled, + className, + isGrouped, + dropdownItems, + items, + ...props + } = this.props; return ( - + {toggleIcon} } isGrouped={isGrouped} diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap index 84135dba481..6ec6d60f917 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap @@ -1,5 +1,637 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`ApplicationLauncher custom icon 1`] = ` + + Link + , + + Action + , + + Disabled Link + , + + Disabled Action + , + , + + Separated Link + , + + Separated Action + , + ] + } + isDisabled={false} + isGrouped={false} + isOpen={true} + items={Array []} + onSelect={[Function]} + onToggle={[Function]} + position="left" + toggleIcon={ + + } +> + + Link + , + + Action + , + + Disabled Link + , + + Disabled Action + , + , + + Separated Link + , + + Separated Action + , + ] + } + isGrouped={false} + isOpen={true} + isPlain={false} + onSelect={[Function]} + position="left" + toggle={ + + + + } + > + + + +`; + exports[`ApplicationLauncher dropup + right aligned 1`] = ` + } > + } > + } > + } > + } >