@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.51

package/src/components/MenuToggle/MenuToggle.tsx

@@ -3,11 +3,12 @@ import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-togg
 import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { BadgeProps } from '../Badge';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-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';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import { OUIAProps, getOUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export enum MenuToggleStatus {
   success = 'success',
@@ -23,7 +24,8 @@ export enum MenuToggleSize {
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
 export interface MenuToggleProps
-  extends Omit<
+  extends
+    Omit<
       React.DetailedHTMLProps<
         React.ButtonHTMLAttributes<HTMLButtonElement> & React.HTMLAttributes<HTMLDivElement>,
         MenuToggleElement
@@ -73,11 +75,7 @@ export interface MenuToggleProps
   ouiaSafe?: boolean;
 }
 
-interface MenuToggleState {
-  ouiaStateId: string;
-}
-
-class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
+class MenuToggleBase extends Component<MenuToggleProps> {
   displayName = 'MenuToggleBase';
   static defaultProps: MenuToggleProps = {
     className: '',
@@ -91,10 +89,6 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
     ouiaSafe: true
   };
 
-  state: MenuToggleState = {
-    ouiaStateId: getDefaultOUIAId(MenuToggle.displayName, this.props.variant)
-  };
-
   render() {
     const {
       children,
@@ -124,121 +118,132 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
     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) {
-        case MenuToggleStatus.success:
-          _statusIcon = <CheckCircleIcon />;
-          break;
-        case MenuToggleStatus.warning:
-          _statusIcon = <ExclamationTriangleIcon />;
-          break;
-        case MenuToggleStatus.danger:
-          _statusIcon = <ExclamationCircleIcon />;
-          break;
-      }
-    }
-
-    const toggleControls = (
-      <span className={css(styles.menuToggleControls)}>
-        {status !== undefined && <span className={css(styles.menuToggleStatusIcon)}>{_statusIcon}</span>}
-        <span className={css(styles.menuToggleToggleIcon)}>
-          <CaretDownIcon />
-        </span>
-      </span>
-    );
-
-    const content = (
-      <>
-        {(icon || isSettings) && <span className={css(styles.menuToggleIcon)}>{isSettings ? <CogIcon /> : icon}</span>}
-        {isTypeahead ? children : children && <span className={css(styles.menuToggleText)}>{children}</span>}
-        {isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
-        {isTypeahead ? (
-          <button
-            type="button"
-            className={css(styles.menuToggleButton)}
-            aria-expanded={isExpanded}
-            onClick={onClick}
-            aria-label={ariaLabel || 'Menu toggle'}
-            tabIndex={-1}
-            {...ouiaProps}
-          >
-            {toggleControls}
-          </button>
-        ) : (
-          !isPlain && toggleControls
-        )}
-      </>
-    );
-
-    const commonStyles = css(
-      styles.menuToggle,
-      isExpanded && styles.modifiers.expanded,
-      variant === 'primary' && styles.modifiers.primary,
-      variant === 'secondary' && styles.modifiers.secondary,
-      status && styles.modifiers[status],
-      (isPlain || isPlainText) && styles.modifiers.plain,
-      isPlainText && 'pf-m-text',
-      isFullHeight && styles.modifiers.fullHeight,
-      isFullWidth && styles.modifiers.fullWidth,
-      isDisabled && styles.modifiers.disabled,
-      isPlaceholder && styles.modifiers.placeholder,
-      isSettings && styles.modifiers.settings,
-      size === MenuToggleSize.sm && styles.modifiers.small,
-      className
-    );
-
-    const componentProps = {
-      children: content,
-      ...(isDisabled && { disabled: true }),
-      ...otherProps
-    };
-
-    if (isTypeahead) {
-      return (
-        <div
-          ref={innerRef as React.Ref<HTMLDivElement>}
-          className={css(commonStyles, styles.modifiers.typeahead)}
-          {...componentProps}
-        />
-      );
-    }
-
-    if (splitButtonItems) {
-      return (
-        <div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles, styles.modifiers.splitButton)}>
-          {splitButtonItems}
-          <button
-            className={css(styles.menuToggleButton, children && styles.modifiers.text)}
-            type="button"
-            aria-expanded={isExpanded}
-            aria-label={ariaLabel}
-            disabled={isDisabled}
-            onClick={onClick}
-            {...otherProps}
-            {...ouiaProps}
-          >
-            {children && <span className={css(styles.menuToggleText)}>{children}</span>}
-            {toggleControls}
-          </button>
-        </div>
-      );
-    }
-
     return (
-      <button
-        className={css(commonStyles, isCircle && isPlain && styles.modifiers.circle)}
-        type="button"
-        aria-label={ariaLabel}
-        aria-expanded={isExpanded}
-        ref={innerRef as React.Ref<HTMLButtonElement>}
-        disabled={isDisabled}
-        onClick={onClick}
-        {...componentProps}
-        {...ouiaProps}
-      />
+      <SSRSafeIds prefix="pf-" ouiaComponentType={`MenuToggle${variant ? `-${variant}` : ''}`}>
+        {(_, generatedOuiaId) => {
+          const ouiaProps = getOUIAProps(MenuToggle.displayName, ouiaId ?? generatedOuiaId, ouiaSafe);
+
+          let _statusIcon = statusIcon;
+          if (!statusIcon) {
+            switch (status) {
+              case MenuToggleStatus.success:
+                _statusIcon = <RhUiCheckCircleFillIcon />;
+                break;
+              case MenuToggleStatus.warning:
+                _statusIcon = <RhUiWarningFillIcon />;
+                break;
+              case MenuToggleStatus.danger:
+                _statusIcon = <RhUiErrorFillIcon />;
+                break;
+            }
+          }
+
+          const toggleControls = (
+            <span className={css(styles.menuToggleControls)}>
+              {status !== undefined && <span className={css(styles.menuToggleStatusIcon)}>{_statusIcon}</span>}
+              <span className={css(styles.menuToggleToggleIcon)}>
+                <CaretDownIcon />
+              </span>
+            </span>
+          );
+
+          const content = (
+            <>
+              {(icon || isSettings) && (
+                <span className={css(styles.menuToggleIcon)}>{isSettings ? <RhUiSettingsFillIcon /> : icon}</span>
+              )}
+              {isTypeahead ? children : children && <span className={css(styles.menuToggleText)}>{children}</span>}
+              {isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
+              {isTypeahead ? (
+                <button
+                  type="button"
+                  className={css(styles.menuToggleButton)}
+                  aria-expanded={isExpanded}
+                  onClick={onClick}
+                  aria-label={ariaLabel || 'Menu toggle'}
+                  tabIndex={-1}
+                  {...ouiaProps}
+                >
+                  {toggleControls}
+                </button>
+              ) : (
+                !isPlain && toggleControls
+              )}
+            </>
+          );
+
+          const commonStyles = css(
+            styles.menuToggle,
+            isExpanded && styles.modifiers.expanded,
+            variant === 'primary' && styles.modifiers.primary,
+            variant === 'secondary' && styles.modifiers.secondary,
+            status && styles.modifiers[status],
+            (isPlain || isPlainText) && styles.modifiers.plain,
+            isPlainText && 'pf-m-text',
+            isFullHeight && styles.modifiers.fullHeight,
+            isFullWidth && styles.modifiers.fullWidth,
+            isDisabled && styles.modifiers.disabled,
+            isPlaceholder && styles.modifiers.placeholder,
+            isSettings && styles.modifiers.settings,
+            size === MenuToggleSize.sm && styles.modifiers.small,
+            className
+          );
+
+          const componentProps = {
+            children: content,
+            ...(isDisabled && { disabled: true }),
+            ...otherProps
+          };
+
+          if (isTypeahead) {
+            return (
+              <div
+                ref={innerRef as React.Ref<HTMLDivElement>}
+                className={css(commonStyles, styles.modifiers.typeahead)}
+                {...componentProps}
+              />
+            ) as React.ReactElement;
+          }
+
+          if (splitButtonItems) {
+            return (
+              <div
+                ref={innerRef as React.Ref<HTMLDivElement>}
+                className={css(commonStyles, styles.modifiers.splitButton)}
+              >
+                {splitButtonItems}
+                <button
+                  className={css(styles.menuToggleButton, children && styles.modifiers.text)}
+                  type="button"
+                  aria-expanded={isExpanded}
+                  aria-label={ariaLabel}
+                  disabled={isDisabled}
+                  onClick={onClick}
+                  {...otherProps}
+                  {...ouiaProps}
+                >
+                  {children && <span className={css(styles.menuToggleText)}>{children}</span>}
+                  {toggleControls}
+                </button>
+              </div>
+            ) as React.ReactElement;
+          }
+
+          return (
+            <button
+              className={css(commonStyles, isCircle && isPlain && styles.modifiers.circle)}
+              type="button"
+              aria-label={ariaLabel}
+              aria-expanded={isExpanded}
+              ref={innerRef as React.Ref<HTMLButtonElement>}
+              disabled={isDisabled}
+              onClick={onClick}
+              {...componentProps}
+              {...ouiaProps}
+            />
+          ) as React.ReactElement;
+        }}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -2,11 +2,11 @@ import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Check/check';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface MenuToggleCheckboxProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>, OUIAProps {
   /** Additional classes added to the MenuToggleCheckbox */
   className?: string;
   /** Flag to show if the checkbox selection is valid or invalid */
@@ -33,7 +33,7 @@ export interface MenuToggleCheckboxProps
   ouiaSafe?: boolean;
 }
 
-class MenuToggleCheckbox extends Component<MenuToggleCheckboxProps, { ouiaStateId: string }> {
+class MenuToggleCheckbox extends Component<MenuToggleCheckboxProps> {
   static displayName = 'MenuToggleCheckbox';
   static defaultProps: PickOptional<MenuToggleCheckboxProps> = {
     isValid: true,
@@ -41,13 +41,6 @@ class MenuToggleCheckbox extends Component<MenuToggleCheckboxProps, { ouiaStateI
     onChange: () => undefined as any
   };
 
-  constructor(props: MenuToggleCheckboxProps) {
-    super(props);
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(MenuToggleCheckbox.displayName)
-    };
-  }
-
   handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     this.props.onChange((event.target as HTMLInputElement).checked, event);
   };
@@ -84,27 +77,31 @@ class MenuToggleCheckbox extends Component<MenuToggleCheckboxProps, { ouiaStateI
       </span>
     );
     return (
-      <label className={css(styles.check, !children && styles.modifiers.standalone, className)}>
-        <input
-          className={css(styles.checkInput)}
-          {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
-          name={id}
-          type="checkbox"
-          ref={(elem) => {
-            elem && (elem.indeterminate = isChecked === null);
-          }}
-          aria-invalid={!isValid}
-          disabled={isDisabled}
-          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: this.calculateChecked() })}
-          {...getOUIAProps(
-            MenuToggleCheckbox.displayName,
-            ouiaId !== undefined ? ouiaId : this.state.ouiaStateId,
-            ouiaSafe
-          )}
-          {...props}
-        />
-        {text}
-      </label>
+      <SSRSafeIds prefix="pf-" ouiaComponentType={MenuToggleCheckbox.displayName}>
+        {(_, generatedOuiaId) => (
+          <label className={css(styles.check, !children && styles.modifiers.standalone, className)}>
+            <input
+              className={css(styles.checkInput)}
+              {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
+              name={id}
+              type="checkbox"
+              ref={(elem) => {
+                elem && (elem.indeterminate = isChecked === null);
+              }}
+              aria-invalid={!isValid}
+              disabled={isDisabled}
+              {...(defaultChecked !== undefined ? { defaultChecked } : { checked: this.calculateChecked() })}
+              {...getOUIAProps(
+                MenuToggleCheckbox.displayName,
+                ouiaId !== undefined ? ouiaId : generatedOuiaId,
+                ouiaSafe
+              )}
+              {...props}
+            />
+            {text}
+          </label>
+        )}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/MenuToggle/__tests__/MenuToggle.test.tsx

@@ -1,7 +1,7 @@
 import { MenuToggle } from '../MenuToggle';
 import { MenuToggleCheckbox } from '../MenuToggleCheckbox';
 import { Badge } from '../../Badge';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
@@ -45,7 +45,7 @@ describe('Old Snapshot tests - remove when refactoring', () => {
   });
 
   test('shows icon', () => {
-    const { asFragment } = render(<MenuToggle icon={<CogIcon />}>Toggle</MenuToggle>);
+    const { asFragment } = render(<MenuToggle icon={<RhUiSettingsFillIcon />}>Toggle</MenuToggle>);
     expect(asFragment()).toMatchSnapshot();
   });