Skip to content
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

feat(Dropdown): Allow for tooltips on aria-disabled items #6038

Merged
merged 6 commits into from
Aug 2, 2021
Merged

feat(Dropdown): Allow for tooltips on aria-disabled items #6038

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4b5e783
feat(Dropdown): Allow for tooltips on aria-disabled items
nicolethoen Jul 15, 2021
82ae82b
update logic
nicolethoen Aug 2, 2021
9e05bd6
fire onClick when only ariaDisabled
nicolethoen Aug 2, 2021
3be5dfe
revert latest change
nicolethoen Aug 2, 2021
a57ec5f
update tests & logic
nicolethoen Aug 2, 2021
5c1d69a
okay hopefully this is it
nicolethoen Aug 2, 2021
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
12 changes: 12 additions & 0 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 @@ -536,6 +536,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={false}
isHovered={false}
isPlainText={false}
Expand Down Expand Up @@ -607,6 +608,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={false}
isHovered={false}
isPlainText={false}
Expand Down Expand Up @@ -680,6 +682,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={true}
isHovered={false}
isPlainText={false}
Expand Down Expand Up @@ -755,6 +758,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={true}
isHovered={false}
isPlainText={false}
Expand Down Expand Up @@ -888,6 +892,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={false}
isHovered={false}
isPlainText={false}
Expand Down Expand Up @@ -959,6 +964,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={false}
isHovered={false}
isPlainText={false}
Expand Down Expand Up @@ -2089,6 +2095,7 @@ exports[`ApplicationLauncher expanded 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={false}
isHovered={false}
isPlainText={false}
Expand Down Expand Up @@ -2160,6 +2167,7 @@ exports[`ApplicationLauncher expanded 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={false}
isHovered={false}
isPlainText={false}
Expand Down Expand Up @@ -2233,6 +2241,7 @@ exports[`ApplicationLauncher expanded 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={true}
isHovered={false}
isPlainText={false}
Expand Down Expand Up @@ -2308,6 +2317,7 @@ exports[`ApplicationLauncher expanded 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={true}
isHovered={false}
isPlainText={false}
Expand Down Expand Up @@ -2441,6 +2451,7 @@ exports[`ApplicationLauncher expanded 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={false}
isHovered={false}
isPlainText={false}
Expand Down Expand Up @@ -2512,6 +2523,7 @@ exports[`ApplicationLauncher expanded 1`] = `
"onKeyPress",
]
}
isAriaDisabled={false}
isDisabled={false}
isHovered={false}
isPlainText={false}
Expand Down
2 changes: 0 additions & 2 deletions ...s/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,8 +343,6 @@ class TooltipApplicationLauncher extends React.Component {
import React from 'react';
import {
ApplicationLauncher,
ApplicationLauncherIcon,
ApplicationLauncherText,
ApplicationLauncherItem,
ApplicationLauncherGroup,
ApplicationLauncherSeparator
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 @@ -23,6 +23,8 @@ export interface DropdownItemProps extends InternalDropdownItemProps, OUIAProps
styleChildren?: boolean;
/** Render dropdown item as disabled option */
isDisabled?: boolean;
/** Render dropdown item as aria-disabled option */
isAriaDisabled?: boolean;
/** Render dropdown item as non-interactive item */
isPlainText?: boolean;
/** Forces display of the hover state of the element */
Expand Down Expand Up @@ -52,6 +54,7 @@ export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
className,
component = 'a',
isDisabled = false,
isAriaDisabled = false,
isPlainText = false,
isHovered = false,
href,
Expand Down Expand Up @@ -83,6 +86,7 @@ export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
className={className}
component={component}
isDisabled={isDisabled}
isAriaDisabled={isAriaDisabled}
isPlainText={isPlainText}
isHovered={isHovered}
href={href}
Expand Down
13 changes: 9 additions & 4 deletions packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ export interface InternalDropdownItemProps extends React.HTMLProps<HTMLAnchorEle
role?: string;
/** Render dropdown item as disabled option */
isDisabled?: boolean;
/** Render dropdown item as aria disabled option */
isAriaDisabled?: boolean;
/** Render dropdown item as a non-interactive item */
isPlainText?: boolean;
/** Forces display of the hover state of the element */
Expand Down Expand Up @@ -163,6 +165,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
component,
role,
isDisabled,
isAriaDisabled,
isPlainText,
index,
href,
Expand All @@ -182,12 +185,12 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
...additionalProps
} = this.props;
/* eslint-enable @typescript-eslint/no-unused-vars */
let classes = css(icon && styles.modifiers.icon, className);
let classes = css(icon && styles.modifiers.icon, isAriaDisabled && styles.modifiers.ariaDisabled, className);

if (component === 'a') {
additionalProps['aria-disabled'] = isDisabled;
additionalProps['aria-disabled'] = isDisabled || isAriaDisabled;
} else if (component === 'button') {
additionalProps['aria-disabled'] = isDisabled;
additionalProps['aria-disabled'] = isDisabled || isAriaDisabled;
additionalProps.type = additionalProps.type || 'button';
}
const renderWithTooltip = (childNode: React.ReactNode) =>
Expand Down Expand Up @@ -266,7 +269,9 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
onClick={(event: any) => {
if (!isDisabled) {
onClick(event);
onSelect(event);
if (!isAriaDisabled) {
onSelect(event);
}
}
}}
id={id}
Expand Down
15 changes: 15 additions & 0 deletions packages/react-core/src/components/Dropdown/__tests__/InternalDropdownItem.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,21 @@ describe('dropdown items', () => {
});
});

describe('aria-disabled', () => {
test('a', () => {
const view = shallow(<InternalDropdownItem isAriaDisabled>Something</InternalDropdownItem>);
expect(view).toMatchSnapshot();
});
test('button', () => {
const view = shallow(
<InternalDropdownItem isAriaDisabled component="button">
Something
</InternalDropdownItem>
);
expect(view).toMatchSnapshot();
});
});

describe('description', () => {
test('a', () => {
const view = shallow(
Expand Down
Loading