diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx index cfff7d39e72..2b6b2d6d572 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -214,7 +214,7 @@ export class ApplicationLauncher extends React.Component
ReactNode diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap b/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap index 4e0f9fc14bf..838d2294aef 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap @@ -99,10 +99,10 @@ exports[`ApplicationLauncher custom icon 1`] = ` toggle={ , } } + toggleIndicator={null} > @@ -958,7 +965,6 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = ` , } } + toggleIndicator={null} > @@ -1233,7 +1240,6 @@ exports[`ApplicationLauncher dropup 1`] = ` , } } + toggleIndicator={null} > @@ -1508,7 +1515,6 @@ exports[`ApplicationLauncher expanded 1`] = ` , } } + toggleIndicator={null} > @@ -2340,7 +2354,6 @@ exports[`ApplicationLauncher regular 1`] = ` , } } + toggleIndicator={null} > @@ -2615,7 +2629,6 @@ exports[`ApplicationLauncher right aligned 1`] = ` , } } + toggleIndicator={null} > = ({ value={{ onSelect: event => onSelect && onSelect(event), toggleTextClass: styles.dropdownToggleText, - toggleIconClass: styles.dropdownToggleIcon, + toggleIconClass: styles.dropdownToggleImage, + toggleIndicatorClass: styles.dropdownToggleIcon, menuClass: styles.dropdownMenu, itemClass: styles.dropdownMenuItem, toggleClass: styles.dropdownToggle, @@ -51,6 +52,7 @@ export const Dropdown: React.FunctionComponent = ({ sectionTitleClass: styles.dropdownGroupTitle, sectionComponent: 'section', disabledClass: styles.modifiers.disabled, + plainTextClass: styles.modifiers.text, hoverClass: styles.modifiers.hover, separatorClass: styles.dropdownSeparator }} diff --git a/packages/react-core/src/components/Dropdown/DropdownItem.tsx b/packages/react-core/src/components/Dropdown/DropdownItem.tsx index 7dc88a03ca5..3c7afe2b759 100644 --- a/packages/react-core/src/components/Dropdown/DropdownItem.tsx +++ b/packages/react-core/src/components/Dropdown/DropdownItem.tsx @@ -18,6 +18,8 @@ export interface DropdownItemProps extends InternalDropdownItemProps { variant?: 'item' | 'icon'; /** Render dropdown item as disabled option */ isDisabled?: boolean; + /** Render dropdown item as non-interactive item */ + isPlainText?: boolean; /** Forces display of the hover state of the element */ isHovered?: boolean; /** Default hyperlink location */ @@ -38,6 +40,7 @@ export const DropdownItem: React.FunctionComponent = ({ component = 'a', variant = 'item', isDisabled = false, + isPlainText = false, isHovered = false, href, tooltip = null, @@ -60,6 +63,7 @@ export const DropdownItem: React.FunctionComponent = ({ component={component} variant={variant} isDisabled={isDisabled} + isPlainText={isPlainText} isHovered={isHovered} href={href} tooltip={tooltip} diff --git a/packages/react-core/src/components/Dropdown/DropdownToggle.tsx b/packages/react-core/src/components/Dropdown/DropdownToggle.tsx index 94a8a44d425..454560d9122 100644 --- a/packages/react-core/src/components/Dropdown/DropdownToggle.tsx +++ b/packages/react-core/src/components/Dropdown/DropdownToggle.tsx @@ -30,8 +30,10 @@ export interface DropdownToggleProps extends React.HTMLProps isDisabled?: boolean; /** Whether or not the dropdown toggle button should have primary button styling */ isPrimary?: boolean; - /** The icon to display for the toggle. Defaults to CaretDownIcon. Set to null to not show an icon. */ - iconComponent?: React.ElementType | null; + /** An image to display within the dropdown toggle, appearing before any component children */ + icon?: React.ReactNode; + /** The icon to display for the toggle, appearing after any component children. Defaults to CaretDownIcon. Set to null to not show an icon. */ + toggleIndicator?: React.ElementType | null; /** Elements to display before the toggle button. When included, renders the toggle as a split button. */ splitButtonItems?: React.ReactNode[]; /** Variant of split button toggle */ @@ -60,7 +62,8 @@ export const DropdownToggle: React.FunctionComponent = ({ isPrimary = false, // eslint-disable-next-line @typescript-eslint/no-unused-vars onToggle = (_isOpen: boolean) => undefined as any, - iconComponent: IconComponent = CaretDownIcon, + icon = null, + toggleIndicator: ToggleIndicator = CaretDownIcon, splitButtonItems, splitButtonVariant = 'checkbox', 'aria-haspopup': ariaHasPopup, @@ -70,7 +73,7 @@ export const DropdownToggle: React.FunctionComponent = ({ }: DropdownToggleProps) => { const toggle = ( - {({ toggleTextClass, toggleIconClass }) => ( + {({ toggleTextClass, toggleIndicatorClass, toggleIconClass }) => ( = ({ aria-haspopup={ariaHasPopup} {...(splitButtonItems && { isSplitButton: true, 'aria-label': props['aria-label'] || 'Select' })} > - {children && {children}} - {IconComponent && } + {icon && {icon}} + {children && {children}} + {ToggleIndicator && } )} diff --git a/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx b/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx index 1860127f351..6c687fa04a2 100644 --- a/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx +++ b/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx @@ -20,6 +20,8 @@ export interface InternalDropdownItemProps extends React.HTMLProps | React.KeyboardEvent | MouseEvent) => undefined as any, @@ -134,6 +137,7 @@ export class InternalDropdownItem extends React.Component - {({ onSelect, itemClass, disabledClass, hoverClass }) => { + {({ onSelect, itemClass, disabledClass, hoverClass, plainTextClass }) => { if (this.props.role === 'separator') { classes = css(variant === 'icon' && styles.modifiers.icon, className); } else { @@ -177,6 +181,7 @@ export class InternalDropdownItem extends React.Component { @@ -128,7 +128,7 @@ describe('state', () => { diff --git a/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/Dropdown.test.tsx.snap index c9aa68d972b..5437816b188 100644 --- a/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/Dropdown.test.tsx.snap +++ b/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/Dropdown.test.tsx.snap @@ -11,12 +11,14 @@ exports[`Dropdown should match snapshot (auto-generated) 1`] = ` "itemClass": "pf-c-dropdown__menu-item", "menuClass": "pf-c-dropdown__menu", "onSelect": [Function], + "plainTextClass": "pf-m-text", "sectionClass": "pf-c-dropdown__group", "sectionComponent": "section", "sectionTitleClass": "pf-c-dropdown__group-title", "separatorClass": "pf-c-dropdown__separator", "toggleClass": "pf-c-dropdown__toggle", - "toggleIconClass": "pf-c-dropdown__toggle-icon", + "toggleIconClass": "pf-c-dropdown__toggle-image", + "toggleIndicatorClass": "pf-c-dropdown__toggle-icon", "toggleTextClass": "pf-c-dropdown__toggle-text", } } diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap index ad01cb7a520..c7699afc611 100644 --- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap @@ -236,6 +236,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -256,6 +257,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -276,6 +278,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -296,6 +299,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -317,6 +321,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -337,6 +342,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -372,6 +378,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -392,6 +399,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -412,6 +420,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -432,6 +441,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -453,6 +463,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -473,6 +484,7 @@ exports[`KebabToggle dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -668,6 +680,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -688,6 +701,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -708,6 +722,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -728,6 +743,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -749,6 +765,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -769,6 +786,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -803,6 +821,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -823,6 +842,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -843,6 +863,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -863,6 +884,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -884,6 +906,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -904,6 +927,7 @@ exports[`KebabToggle dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1098,6 +1122,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1118,6 +1143,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1138,6 +1164,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1158,6 +1185,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1179,6 +1207,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1199,6 +1228,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1234,6 +1264,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1254,6 +1285,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1274,6 +1306,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1294,6 +1327,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1315,6 +1349,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1335,6 +1370,7 @@ exports[`KebabToggle expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1687,6 +1723,7 @@ exports[`KebabToggle expanded 1`] = ` index={0} isDisabled={false} isHovered={false} + isPlainText={false} key=".$link" onClick={[Function]} role="none" @@ -1720,6 +1757,7 @@ exports[`KebabToggle expanded 1`] = ` index={1} isDisabled={false} isHovered={false} + isPlainText={false} key=".$action" onClick={[Function]} role="none" @@ -1754,6 +1792,7 @@ exports[`KebabToggle expanded 1`] = ` index={2} isDisabled={true} isHovered={false} + isPlainText={false} key=".$disabled link" onClick={[Function]} role="none" @@ -1788,6 +1827,7 @@ exports[`KebabToggle expanded 1`] = ` index={3} isDisabled={true} isHovered={false} + isPlainText={false} key=".$disabled action" onClick={[Function]} role="none" @@ -1826,6 +1866,7 @@ exports[`KebabToggle expanded 1`] = ` index={4} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="separator" tooltipProps={Object {}} @@ -1856,6 +1897,7 @@ exports[`KebabToggle expanded 1`] = ` index={5} isDisabled={false} isHovered={false} + isPlainText={false} key=".$separated link" onClick={[Function]} role="none" @@ -1889,6 +1931,7 @@ exports[`KebabToggle expanded 1`] = ` index={6} isDisabled={false} isHovered={false} + isPlainText={false} key=".$separated action" onClick={[Function]} role="none" @@ -1934,6 +1977,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1954,6 +1998,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1974,6 +2019,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -1994,6 +2040,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2015,6 +2062,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2035,6 +2083,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2070,6 +2119,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2090,6 +2140,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2110,6 +2161,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2130,6 +2182,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2151,6 +2204,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2171,6 +2225,7 @@ exports[`KebabToggle plain 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2365,6 +2420,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2385,6 +2441,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2405,6 +2462,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2425,6 +2483,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2446,6 +2505,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2466,6 +2526,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2500,6 +2561,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2520,6 +2582,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2540,6 +2603,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2560,6 +2624,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2581,6 +2646,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2601,6 +2667,7 @@ exports[`KebabToggle regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2795,6 +2862,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2815,6 +2883,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2835,6 +2904,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2855,6 +2925,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2876,6 +2947,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2896,6 +2968,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2931,6 +3004,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2951,6 +3025,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2971,6 +3046,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -2991,6 +3067,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3012,6 +3089,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3032,6 +3110,7 @@ exports[`KebabToggle right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3466,6 +3545,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3486,6 +3566,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3506,6 +3587,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3526,6 +3608,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3547,6 +3630,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3567,6 +3651,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3604,6 +3689,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3624,6 +3710,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3644,6 +3731,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3664,6 +3752,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3685,6 +3774,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3705,6 +3795,7 @@ exports[`dropdown dropup + right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3919,6 +4010,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3939,6 +4031,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3959,6 +4052,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -3979,6 +4073,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4000,6 +4095,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4020,6 +4116,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4056,6 +4153,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4076,6 +4174,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4096,6 +4195,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4116,6 +4216,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4137,6 +4238,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4157,6 +4259,7 @@ exports[`dropdown dropup 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4370,6 +4473,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4390,6 +4494,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4410,6 +4515,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4430,6 +4536,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4451,6 +4558,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4471,6 +4579,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4508,6 +4617,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4528,6 +4638,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4548,6 +4659,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4568,6 +4680,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4589,6 +4702,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4609,6 +4723,7 @@ exports[`dropdown expanded 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -4980,6 +5095,7 @@ exports[`dropdown expanded 1`] = ` index={0} isDisabled={false} isHovered={false} + isPlainText={false} key=".$link" onClick={[Function]} role="none" @@ -5013,6 +5129,7 @@ exports[`dropdown expanded 1`] = ` index={1} isDisabled={false} isHovered={false} + isPlainText={false} key=".$action" onClick={[Function]} role="none" @@ -5047,6 +5164,7 @@ exports[`dropdown expanded 1`] = ` index={2} isDisabled={true} isHovered={false} + isPlainText={false} key=".$disabled link" onClick={[Function]} role="none" @@ -5081,6 +5199,7 @@ exports[`dropdown expanded 1`] = ` index={3} isDisabled={true} isHovered={false} + isPlainText={false} key=".$disabled action" onClick={[Function]} role="none" @@ -5119,6 +5238,7 @@ exports[`dropdown expanded 1`] = ` index={4} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="separator" tooltipProps={Object {}} @@ -5149,6 +5269,7 @@ exports[`dropdown expanded 1`] = ` index={5} isDisabled={false} isHovered={false} + isPlainText={false} key=".$separated link" onClick={[Function]} role="none" @@ -5182,6 +5303,7 @@ exports[`dropdown expanded 1`] = ` index={6} isDisabled={false} isHovered={false} + isPlainText={false} key=".$separated action" onClick={[Function]} role="none" @@ -5227,6 +5349,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5247,6 +5370,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5267,6 +5391,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5287,6 +5412,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5308,6 +5434,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5328,6 +5455,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5365,6 +5493,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5385,6 +5514,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5405,6 +5535,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5425,6 +5556,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5446,6 +5578,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5466,6 +5599,7 @@ exports[`dropdown primary 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5681,6 +5815,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5701,6 +5836,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5721,6 +5857,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5741,6 +5878,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5762,6 +5900,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5782,6 +5921,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5818,6 +5958,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5838,6 +5979,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5858,6 +6000,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5878,6 +6021,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5899,6 +6043,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -5919,6 +6064,7 @@ exports[`dropdown regular 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6132,6 +6278,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6152,6 +6299,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6172,6 +6320,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6192,6 +6341,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6213,6 +6363,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6233,6 +6384,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6270,6 +6422,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6290,6 +6443,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6310,6 +6464,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6330,6 +6485,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={true} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6351,6 +6507,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} @@ -6371,6 +6528,7 @@ exports[`dropdown right aligned 1`] = ` index={-1} isDisabled={false} isHovered={false} + isPlainText={false} onClick={[Function]} role="none" tooltipProps={Object {}} diff --git a/packages/react-core/src/components/Dropdown/dropdownConstants.tsx b/packages/react-core/src/components/Dropdown/dropdownConstants.tsx index 1e57ce539e5..4ce02364de9 100644 --- a/packages/react-core/src/components/Dropdown/dropdownConstants.tsx +++ b/packages/react-core/src/components/Dropdown/dropdownConstants.tsx @@ -13,6 +13,7 @@ export enum DropdownDirection { export const DropdownContext = React.createContext<{ onSelect?: (event?: any) => void; id?: string; + toggleIndicatorClass?: string; toggleIconClass?: string; toggleTextClass?: string; menuClass?: string; @@ -24,6 +25,7 @@ export const DropdownContext = React.createContext<{ sectionTitleClass?: string; sectionComponent?: string; disabledClass?: string; + plainTextClass?: string; hoverClass?: string; separatorClass?: string; menuComponent?: string; @@ -31,6 +33,7 @@ export const DropdownContext = React.createContext<{ // eslint-disable-next-line @typescript-eslint/no-unused-vars onSelect: (event?: any) => undefined as any, id: '', + toggleIndicatorClass: '', toggleIconClass: '', toggleTextClass: '', menuClass: '', @@ -42,6 +45,7 @@ export const DropdownContext = React.createContext<{ sectionTitleClass: '', sectionComponent: 'section', disabledClass: '', + plainTextClass: '', hoverClass: '', separatorClass: '', menuComponent: 'ul' diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md index 6bdb1300541..dc7a4fc79a6 100644 --- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md +++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md @@ -8,7 +8,7 @@ typescript: true --- import { Dropdown, DropdownToggle, DropdownToggleCheckbox, DropdownItem, DropdownItemIcon, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, DropdownGroup, DropdownToggleAction } from '@patternfly/react-core'; -import { ThIcon, CaretDownIcon, CogIcon, BellIcon, CubesIcon } from '@patternfly/react-icons'; +import { ThIcon, CaretDownIcon, CogIcon, BellIcon, CubesIcon, UserIcon } from '@patternfly/react-icons'; import { Link } from '@reach/router'; ## Examples @@ -72,7 +72,7 @@ class SimpleDropdown extends React.Component { + Dropdown } @@ -346,7 +346,7 @@ class PrimaryDropdown extends React.Component { + Dropdown } @@ -620,7 +620,7 @@ class IconDropdown extends React.Component { + } @@ -1139,7 +1139,7 @@ class RouterDropdown extends React.Component { this.onFocus(); }; this.onFocus = () => { - const element = document.getElementById('toggle-id'); + const element = document.getElementById('toggle-id-8'); element.focus(); }; } @@ -1158,7 +1158,7 @@ class RouterDropdown extends React.Component { + Dropdown } @@ -1169,3 +1169,74 @@ class RouterDropdown extends React.Component { } } ``` + +```js title=Dropdown-with-image-and-text +import React from 'react'; +import { + Dropdown, + DropdownGroup, + DropdownToggle, + DropdownItem, + DropdownSeparator +} from '@patternfly/react-core'; +import { UserIcon } from '@patternfly/react-icons'; + +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} + /> + ); + } +} +``` diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx index 5ba83bb4cff..9b4a3afdf8b 100644 --- a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx +++ b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx @@ -51,7 +51,7 @@ export const OptionsMenu: React.FunctionComponent = ({ value={{ id, onSelect: () => undefined, - toggleIconClass: styles.optionsMenuToggleIcon, + toggleIndicatorClass: styles.optionsMenuToggleIcon, toggleTextClass: styles.optionsMenuToggleText, menuClass: styles.optionsMenuMenu, itemClass: styles.optionsMenuMenuItem, diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx index fd5182b2b1c..064c99e369c 100644 --- a/packages/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx +++ b/packages/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx @@ -51,7 +51,7 @@ export const OptionsMenuToggle: React.FunctionComponent {({ id: contextId }) => ( , } } + toggleIndicator={null} > { id="dropdown" onSelect={this.onSelect} toggle={ - + }> Dropdown }