Skip to content

feat(MenuToggle): add OUIA support #10414

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
merged 1 commit into from
Jun 3, 2024
Merged

feat(MenuToggle): add OUIA support #10414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions ...ges/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,9 @@ exports[`With popover opened 1`] = `
<button
aria-expanded="false"
class="pf-v5-c-menu-toggle"
data-ouia-component-id="OUIA-Generated-MenuToggle-1"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
style="width: 140px;"
type="button"
>
Expand Down
36 changes: 29 additions & 7 deletions packages/react-core/src/components/MenuToggle/MenuToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { BadgeProps } from '../Badge';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
import { OUIAProps, getDefaultOUIAId, getOUIAProps } from '../../helpers';

export enum MenuToggleStatus {
success = 'success',
Expand All @@ -24,12 +25,13 @@ export interface SplitButtonOptions {

export interface MenuToggleProps
extends Omit<
React.DetailedHTMLProps<
React.ButtonHTMLAttributes<HTMLButtonElement> & React.HTMLAttributes<HTMLDivElement>,
MenuToggleElement
React.DetailedHTMLProps<
React.ButtonHTMLAttributes<HTMLButtonElement> & React.HTMLAttributes<HTMLDivElement>,
MenuToggleElement
>,
'ref'
>,
'ref'
> {
OUIAProps {
/** Content rendered inside the toggle */
children?: React.ReactNode;
/** Additional classes added to the toggle */
Expand Down Expand Up @@ -58,16 +60,29 @@ export interface MenuToggleProps
badge?: BadgeProps | React.ReactNode;
/** @hide Forwarded ref */
innerRef?: React.Ref<MenuToggleElement>;
/** Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. */
ouiaId?: number | string;
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
ouiaSafe?: boolean;
}

class MenuToggleBase extends React.Component<MenuToggleProps> {
interface MenuToggleState {
ouiaStateId: string;
}

class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
displayName = 'MenuToggleBase';
static defaultProps: MenuToggleProps = {
className: '',
isExpanded: false,
isDisabled: false,
isFullWidth: false,
isFullHeight: false
isFullHeight: false,
ouiaSafe: true
};

state: MenuToggleState = {
ouiaStateId: getDefaultOUIAId(MenuToggle.displayName, this.props.variant)
};

render() {
Expand All @@ -87,12 +102,16 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
innerRef,
onClick,
'aria-label': ariaLabel,
ouiaId,
ouiaSafe,
...otherProps
} = this.props;
const isPlain = variant === 'plain';
const isPlainText = variant === 'plainText';
const isTypeahead = variant === 'typeahead';

const ouiaProps = getOUIAProps(MenuToggle.displayName, ouiaId ?? this.state.ouiaStateId, ouiaSafe);

let _statusIcon = statusIcon;
if (!statusIcon) {
switch (status) {
Expand Down Expand Up @@ -130,6 +149,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
onClick={onClick}
aria-label={ariaLabel || 'Menu toggle'}
tabIndex={-1}
{...ouiaProps}
>
{toggleControls}
</button>
Expand Down Expand Up @@ -189,6 +209,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
onClick={onClick}
{...(children && { style: { display: 'flex', paddingLeft: 'var(--pf-v5-global--spacer--sm)' } })}
{...otherProps}
{...ouiaProps}
>
{children && <span className={css(styles.menuToggleText)}>{children}</span>}
{toggleControls}
Expand All @@ -207,6 +228,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
disabled={isDisabled}
onClick={onClick}
{...componentProps}
{...ouiaProps}
/>
);
}
Expand Down
27 changes: 27 additions & 0 deletions ...ges/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ exports[`menu toggle passes additional classes 1`] = `
<button
aria-expanded="false"
class="pf-v5-c-menu-toggle test-class"
data-ouia-component-id="OUIA-Generated-MenuToggle-2"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
type="button"
>
<span
Expand Down Expand Up @@ -42,6 +45,9 @@ exports[`menu toggle renders successfully 1`] = `
<button
aria-expanded="false"
class="pf-v5-c-menu-toggle"
data-ouia-component-id="OUIA-Generated-MenuToggle-1"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
type="button"
>
<span
Expand Down Expand Up @@ -79,6 +85,9 @@ exports[`menu toggle shows badge 1`] = `
<button
aria-expanded="false"
class="pf-v5-c-menu-toggle"
data-ouia-component-id="OUIA-Generated-MenuToggle-6"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
type="button"
>
<span
Expand Down Expand Up @@ -125,6 +134,9 @@ exports[`menu toggle shows icon 1`] = `
<button
aria-expanded="false"
class="pf-v5-c-menu-toggle"
data-ouia-component-id="OUIA-Generated-MenuToggle-5"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
type="button"
>
<span
Expand Down Expand Up @@ -179,6 +191,9 @@ exports[`menu toggle shows isDisabled 1`] = `
<button
aria-expanded="false"
class="pf-v5-c-menu-toggle pf-m-disabled"
data-ouia-component-id="OUIA-Generated-MenuToggle-4"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
disabled=""
type="button"
>
Expand Down Expand Up @@ -217,6 +232,9 @@ exports[`menu toggle shows isExpanded 1`] = `
<button
aria-expanded="true"
class="pf-v5-c-menu-toggle pf-m-expanded"
data-ouia-component-id="OUIA-Generated-MenuToggle-3"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
type="button"
>
<span
Expand Down Expand Up @@ -254,6 +272,9 @@ exports[`menu toggle shows isPlain 1`] = `
<button
aria-expanded="false"
class="pf-v5-c-menu-toggle pf-m-plain"
data-ouia-component-id="OUIA-Generated-MenuToggle-plain-1"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
type="button"
>
<svg
Expand All @@ -278,6 +299,9 @@ exports[`menu toggle shows isPrimary 1`] = `
<button
aria-expanded="false"
class="pf-v5-c-menu-toggle pf-m-primary"
data-ouia-component-id="OUIA-Generated-MenuToggle-primary-1"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
type="button"
>
<span
Expand Down Expand Up @@ -315,6 +339,9 @@ exports[`menu toggle shows plain text 1`] = `
<button
aria-expanded="false"
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
type="button"
>
<span
Expand Down
3 changes: 3 additions & 0 deletions ...mponents/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
aria-expanded="false"
aria-haspopup="listbox"
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
id="''-toggle"
type="button"
>
Expand Down
Loading