Skip to content

Feat(Dropdown): add image & plain text support #4038

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 7 commits into from
Apr 22, 2020
Merged

Feat(Dropdown): add image & plain text support #4038

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b123a64
added support for toggle image, added isPlainText prop
evwilkin Apr 8, 2020
064aae0
updated example IDs and naming
evwilkin Apr 8, 2020
53bba1a
updated imports and snapshots
evwilkin Apr 8, 2020
6621970
missing comma
evwilkin Apr 8, 2020
8ea10f8
PR feedback updates:
evwilkin Apr 20, 2020
0b79964
reverted styles variable names
evwilkin Apr 20, 2020
0f8aca5
Additional PR feedback:
evwilkin Apr 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
toggle={
<DropdownToggle
id={toggleId}
iconComponent={null}
toggleIndicator={null}
isOpen={isOpen}
onToggle={onToggle}
isDisabled={isDisabled}
Expand Down
2 changes: 1 addition & 1 deletion ...s/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncher.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,11 @@ exports[`ApplicationLauncher should match snapshot (auto-generated) 1`] = `
toggle={
<DropdownToggle
aria-label="'Application launcher'"
iconComponent={null}
id="string"
isDisabled={false}
isOpen={false}
onToggle={[Function]}
toggleIndicator={null}
>
<div>
ReactNode
Expand Down
38 changes: 26 additions & 12 deletions .../components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,10 @@ exports[`ApplicationLauncher custom icon 1`] = `
toggle={
<DropdownToggle
aria-label="Application launcher"
iconComponent={null}
isDisabled={false}
isOpen={true}
onToggle={[Function]}
toggleIndicator={null}
>
<HelpIcon
id="test-icon"
Expand All @@ -120,7 +120,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
<DropdownToggle
aria-haspopup={true}
aria-label="Application launcher"
iconComponent={null}
id="pf-toggle-id-5"
isDisabled={false}
isOpen={true}
Expand Down Expand Up @@ -246,6 +245,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
</nav>,
}
}
toggleIndicator={null}
>
<Toggle
aria-haspopup={true}
Expand Down Expand Up @@ -486,6 +486,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
index={0}
isDisabled={false}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -542,6 +543,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
index={1}
isDisabled={false}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -600,6 +602,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
index={2}
isDisabled={true}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -658,6 +661,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
index={3}
isDisabled={true}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -707,6 +711,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
index={4}
isDisabled={false}
isHovered={false}
isPlainText={false}
onClick={[Function]}
role="separator"
tooltipProps={Object {}}
Expand Down Expand Up @@ -752,6 +757,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
index={5}
isDisabled={false}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -808,6 +814,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
index={6}
isDisabled={false}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -939,10 +946,10 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
toggle={
<DropdownToggle
aria-label="Application launcher"
iconComponent={null}
isDisabled={false}
isOpen={false}
onToggle={[Function]}
toggleIndicator={null}
>
<ThIcon />
</DropdownToggle>
Expand All @@ -958,7 +965,6 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
<DropdownToggle
aria-haspopup={true}
aria-label="Application launcher"
iconComponent={null}
id="pf-toggle-id-3"
isDisabled={false}
isOpen={false}
Expand Down Expand Up @@ -1003,6 +1009,7 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
</nav>,
}
}
toggleIndicator={null}
>
<Toggle
aria-haspopup={true}
Expand Down Expand Up @@ -1214,10 +1221,10 @@ exports[`ApplicationLauncher dropup 1`] = `
toggle={
<DropdownToggle
aria-label="Application launcher"
iconComponent={null}
isDisabled={false}
isOpen={false}
onToggle={[Function]}
toggleIndicator={null}
>
<ThIcon />
</DropdownToggle>
Expand All @@ -1233,7 +1240,6 @@ exports[`ApplicationLauncher dropup 1`] = `
<DropdownToggle
aria-haspopup={true}
aria-label="Application launcher"
iconComponent={null}
id="pf-toggle-id-2"
isDisabled={false}
isOpen={false}
Expand Down Expand Up @@ -1278,6 +1284,7 @@ exports[`ApplicationLauncher dropup 1`] = `
</nav>,
}
}
toggleIndicator={null}
>
<Toggle
aria-haspopup={true}
Expand Down Expand Up @@ -1489,10 +1496,10 @@ exports[`ApplicationLauncher expanded 1`] = `
toggle={
<DropdownToggle
aria-label="Application launcher"
iconComponent={null}
isDisabled={false}
isOpen={true}
onToggle={[Function]}
toggleIndicator={null}
>
<ThIcon />
</DropdownToggle>
Expand All @@ -1508,7 +1515,6 @@ exports[`ApplicationLauncher expanded 1`] = `
<DropdownToggle
aria-haspopup={true}
aria-label="Application launcher"
iconComponent={null}
id="pf-toggle-id-4"
isDisabled={false}
isOpen={true}
Expand Down Expand Up @@ -1633,6 +1639,7 @@ exports[`ApplicationLauncher expanded 1`] = `
</nav>,
}
}
toggleIndicator={null}
>
<Toggle
aria-haspopup={true}
Expand Down Expand Up @@ -1868,6 +1875,7 @@ exports[`ApplicationLauncher expanded 1`] = `
index={0}
isDisabled={false}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -1924,6 +1932,7 @@ exports[`ApplicationLauncher expanded 1`] = `
index={1}
isDisabled={false}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -1982,6 +1991,7 @@ exports[`ApplicationLauncher expanded 1`] = `
index={2}
isDisabled={true}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -2040,6 +2050,7 @@ exports[`ApplicationLauncher expanded 1`] = `
index={3}
isDisabled={true}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -2089,6 +2100,7 @@ exports[`ApplicationLauncher expanded 1`] = `
index={4}
isDisabled={false}
isHovered={false}
isPlainText={false}
onClick={[Function]}
role="separator"
tooltipProps={Object {}}
Expand Down Expand Up @@ -2134,6 +2146,7 @@ exports[`ApplicationLauncher expanded 1`] = `
index={5}
isDisabled={false}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -2190,6 +2203,7 @@ exports[`ApplicationLauncher expanded 1`] = `
index={6}
isDisabled={false}
isHovered={false}
isPlainText={false}
listItemClassName=""
onClick={[Function]}
role="menuitem"
Expand Down Expand Up @@ -2321,10 +2335,10 @@ exports[`ApplicationLauncher regular 1`] = `
toggle={
<DropdownToggle
aria-label="Application launcher"
iconComponent={null}
isDisabled={false}
isOpen={false}
onToggle={[Function]}
toggleIndicator={null}
>
<ThIcon />
</DropdownToggle>
Expand All @@ -2340,7 +2354,6 @@ exports[`ApplicationLauncher regular 1`] = `
<DropdownToggle
aria-haspopup={true}
aria-label="Application launcher"
iconComponent={null}
id="pf-toggle-id-0"
isDisabled={false}
isOpen={false}
Expand Down Expand Up @@ -2385,6 +2398,7 @@ exports[`ApplicationLauncher regular 1`] = `
</nav>,
}
}
toggleIndicator={null}
>
<Toggle
aria-haspopup={true}
Expand Down Expand Up @@ -2596,10 +2610,10 @@ exports[`ApplicationLauncher right aligned 1`] = `
toggle={
<DropdownToggle
aria-label="Application launcher"
iconComponent={null}
isDisabled={false}
isOpen={false}
onToggle={[Function]}
toggleIndicator={null}
>
<ThIcon />
</DropdownToggle>
Expand All @@ -2615,7 +2629,6 @@ exports[`ApplicationLauncher right aligned 1`] = `
<DropdownToggle
aria-haspopup={true}
aria-label="Application launcher"
iconComponent={null}
id="pf-toggle-id-1"
isDisabled={false}
isOpen={false}
Expand Down Expand Up @@ -2660,6 +2673,7 @@ exports[`ApplicationLauncher right aligned 1`] = `
</nav>,
}
}
toggleIndicator={null}
>
<Toggle
aria-haspopup={true}
Expand Down
4 changes: 3 additions & 1 deletion packages/react-core/src/components/Dropdown/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
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,
Expand All @@ -51,6 +52,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
sectionTitleClass: styles.dropdownGroupTitle,
sectionComponent: 'section',
disabledClass: styles.modifiers.disabled,
plainTextClass: styles.modifiers.text,
hoverClass: styles.modifiers.hover,
separatorClass: styles.dropdownSeparator
}}
Expand Down
4 changes: 4 additions & 0 deletions packages/react-core/src/components/Dropdown/DropdownItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Collaborator

@jschuler jschuler Apr 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the use-case for this @mcarrano ?

/** Forces display of the hover state of the element */
isHovered?: boolean;
/** Default hyperlink location */
Expand All @@ -38,6 +40,7 @@ export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
component = 'a',
variant = 'item',
isDisabled = false,
isPlainText = false,
isHovered = false,
href,
tooltip = null,
Expand All @@ -60,6 +63,7 @@ export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
component={component}
variant={variant}
isDisabled={isDisabled}
isPlainText={isPlainText}
isHovered={isHovered}
href={href}
tooltip={tooltip}
Expand Down
16 changes: 10 additions & 6 deletions packages/react-core/src/components/Dropdown/DropdownToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,10 @@ export interface DropdownToggleProps extends React.HTMLProps<HTMLButtonElement>
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 */
Expand Down Expand Up @@ -60,7 +62,8 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
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,
Expand All @@ -70,7 +73,7 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
}: DropdownToggleProps) => {
const toggle = (
<DropdownContext.Consumer>
{({ toggleTextClass, toggleIconClass }) => (
{({ toggleTextClass, toggleIndicatorClass, toggleIconClass }) => (
<Toggle
{...props}
id={id}
Expand All @@ -87,8 +90,9 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
aria-haspopup={ariaHasPopup}
{...(splitButtonItems && { isSplitButton: true, 'aria-label': props['aria-label'] || 'Select' })}
>
{children && <span className={IconComponent && css(toggleTextClass)}>{children}</span>}
{IconComponent && <IconComponent className={css(children && toggleIconClass)} />}
{icon && <span className={css(toggleIconClass)}>{icon}</span>}
{children && <span className={ToggleIndicator && css(toggleTextClass)}>{children}</span>}
{ToggleIndicator && <ToggleIndicator className={css(children && toggleIndicatorClass)} />}
</Toggle>
)}
</DropdownContext.Consumer>
Expand Down
Loading