@patternfly/react-core 6.5.0-prerelease.52 → 6.5.0-prerelease.54

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.51","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.53","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.51","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.53","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.51","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.53","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.52",
+  "version": "6.5.0-prerelease.54",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "32dcebeb1b2ed7a6d21ebd9f6ca46ff0f1ebef07"
+  "gitHead": "10b92b1d17fc9c9342154c4ec6eb6226bc8b2a51"
 }

package/src/components/DataList/DataList.tsx

@@ -19,27 +19,29 @@ export enum DataListWrapModifier {
 }
 
 export interface DataListProps extends React.HTMLProps<HTMLUListElement> {
-  /** Content rendered inside the DataList list */
+  /** Content rendered inside the data list list */
   children?: React.ReactNode;
-  /** Additional classes added to the DataList list */
+  /** Additional classes added to the data list list */
   className?: string;
-  /** Adds accessible text to the DataList list */
+  /** Adds accessible text to the data list list */
   'aria-label': string;
-  /** Optional callback to make DataList selectable, fired when DataListItem selected */
+  /** Optional callback to make data list selectable, fired when data list item selected */
   onSelectDataListItem?: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;
-  /** Id of DataList item currently selected */
+  /** Id of data list item currently selected */
   selectedDataListItemId?: string;
-  /** Flag indicating if DataList should have compact styling */
+  /** Flag indicating if data list should have compact styling */
   isCompact?: boolean;
-  /** @beta Flag indicating if DataList should have plain styling with a transparent background */
+  /** @beta Flag indicating if data list should have plain styling with a transparent background */
   isPlain?: boolean;
+  /** @beta Flag to prevent the data list from automatically applying plain styling when glass theme is enabled. */
+  isNoPlainOnGlass?: boolean;
   /** Specifies the grid breakpoints  */
   gridBreakpoint?: 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-  /** Determines which wrapping modifier to apply to the DataList */
+  /** Determines which wrapping modifier to apply to the data list */
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
   /** Object that causes the data list to render hidden inputs which improve selectable item a11y */
   onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
-  /** @hide custom ref of the DataList */
+  /** @hide custom ref of the data list */
   innerRef?: React.RefObject<HTMLUListElement | null>;
 }
 
@@ -62,6 +64,7 @@ export const DataListBase: React.FunctionComponent<DataListProps> = ({
   selectedDataListItemId = '',
   isCompact = false,
   isPlain = false,
+  isNoPlainOnGlass = false,
   gridBreakpoint = 'md',
   wrapModifier = null,
   onSelectableRowChange,
@@ -88,6 +91,7 @@ export const DataListBase: React.FunctionComponent<DataListProps> = ({
           styles.dataList,
           isCompact && styles.modifiers.compact,
           isPlain && styles.modifiers.plain,
+          isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
           gridBreakpointClasses[gridBreakpoint],
           wrapModifier && styles.modifiers[wrapModifier],
           className

package/src/components/DataList/DataListAction.tsx

@@ -3,15 +3,15 @@ import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { formatBreakpointMods } from '../../helpers/util';
 
 export interface DataListActionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'children'> {
-  /** Content rendered as DataList Action  (e.g <Button> or <Dropdown>) */
+  /** Content rendered as data list action  (e.g <Button> or <Dropdown>) */
   children: React.ReactNode;
-  /** Additional classes added to the DataList Action */
+  /** Additional classes added to the data list action */
   className?: string;
-  /** Identify the DataList toggle number */
+  /** Identify the data list toggle number */
   id: string;
-  /** Adds accessible text to the DataList Action */
+  /** Adds accessible text to the data list action */
   'aria-labelledby': string;
-  /** Adds accessible text to the DataList Action */
+  /** Adds accessible text to the data list action */
   'aria-label': string;
   /** What breakpoints to hide/show the data list action */
   visibility?: {

package/src/components/DataList/DataListCell.tsx

@@ -5,19 +5,19 @@ import { DataListWrapModifier } from './DataList';
 import { Tooltip } from '../Tooltip';
 
 export interface DataListCellProps extends Omit<React.HTMLProps<HTMLDivElement>, 'width'> {
-  /** Content rendered inside the DataList cell */
+  /** Content rendered inside the data list cell */
   children?: React.ReactNode;
-  /** Additional classes added to the DataList cell */
+  /** Additional classes added to the data list cell */
   className?: string;
-  /** Width (from 1-5) to the DataList cell */
+  /** Width (from 1-5) to the data list cell */
   width?: 1 | 2 | 3 | 4 | 5;
-  /** Enables the body Content to fill the height of the card */
+  /** Enables the body content to fill the height of the card */
   isFilled?: boolean;
   /**  Aligns the cell content to the right of its parent. */
   alignRight?: boolean;
-  /** Set to true if the cell content is an Icon */
+  /** Set to true if the cell content is an icon */
   isIcon?: boolean;
-  /** Determines which wrapping modifier to apply to the DataListCell */
+  /** Determines which wrapping modifier to apply to the data list cell */
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
 }
 

package/src/components/DataList/DataListItemCells.tsx

@@ -2,7 +2,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
 export interface DataListItemCellsProps extends React.HTMLProps<HTMLDivElement> {
-  /** Additional classes added to the DataList item Content Wrapper.  Children should be one ore more <DataListCell> nodes */
+  /** Additional classes added to the data list item content wrapper.  Children should be one or more <DataListCell> nodes */
   className?: string;
   /** Array of <DataListCell> nodes that are rendered one after the other. */
   dataListCells?: React.ReactNode;

package/src/components/DataList/DataListToggle.tsx

@@ -4,17 +4,17 @@ import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { Button, ButtonProps, ButtonVariant } from '../Button';
 
 export interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {
-  /** Additional classes added to the DataList cell */
+  /** Additional classes added to the data list cell */
   className?: string;
-  /** Flag to show if the expanded content of the DataList item is visible */
+  /** Flag to show if the expanded content of the data list item is visible */
   isExpanded?: boolean;
-  /** Identify the DataList toggle number */
+  /** Identify the data list toggle number */
   id: string;
   /** Id for the row */
   rowid?: string;
-  /** Adds accessible text to the DataList toggle */
+  /** Adds accessible text to the data list toggle */
   'aria-labelledby'?: string;
-  /** Adds accessible text to the DataList toggle */
+  /** Adds accessible text to the data list toggle */
   'aria-label'?: string;
   /** Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them. */
   'aria-controls'?: string;

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

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -77,6 +78,18 @@ test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () =>
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.plain);
 });
 
+test(`Renders with ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass is true`, () => {
+  render(<DataList aria-label="list" isNoPlainOnGlass />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
+test(`Renders with both ${styles.modifiers.plain} and ${styles.modifiers.noPlainOnGlass} when isPlain and isNoPlainOnGlass are true`, () => {
+  render(<DataList aria-label="list" isPlain isNoPlainOnGlass />);
+  const list = screen.getByLabelText('list');
+  expect(list).toHaveClass(styles.modifiers.plain);
+  expect(list).toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
 test('Renders with a hidden input to improve a11y when onSelectableRowChange is passed', () => {
   render(
     <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>

package/src/components/MenuToggle/MenuToggle.tsx

@@ -45,6 +45,8 @@ export interface MenuToggleProps
   isFullHeight?: boolean;
   /** Flag indicating the toggle takes up the full width of its parent */
   isFullWidth?: boolean;
+  /** @beta Flag indicating the toggle is placed inside a form */
+  isInForm?: boolean;
   /** Flag indicating the toggle contains placeholder text */
   isPlaceholder?: boolean;
   /** @beta Flag indicating the toggle has circular styling. Can only be applied to plain toggles. */
@@ -83,6 +85,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
     isDisabled: false,
     isFullWidth: false,
     isFullHeight: false,
+    isInForm: false,
     isPlaceholder: false,
     isCircle: false,
     size: 'default',
@@ -99,6 +102,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
       isDisabled,
       isFullHeight,
       isFullWidth,
+      isInForm,
       isPlaceholder,
       isCircle,
       isSettings,
@@ -179,9 +183,10 @@ class MenuToggleBase extends Component<MenuToggleProps> {
             variant === 'secondary' && styles.modifiers.secondary,
             status && styles.modifiers[status],
             (isPlain || isPlainText) && styles.modifiers.plain,
-            isPlainText && 'pf-m-text',
+            isPlainText && styles.modifiers.text,
             isFullHeight && styles.modifiers.fullHeight,
             isFullWidth && styles.modifiers.fullWidth,
+            isInForm && styles.modifiers.form,
             isDisabled && styles.modifiers.disabled,
             isPlaceholder && styles.modifiers.placeholder,
             isSettings && styles.modifiers.settings,

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

@@ -57,6 +57,13 @@ describe('Old Snapshot tests - remove when refactoring', () => {
 
 const toggleVariants = ['default', 'plain', 'primary', 'plainText', 'secondary', 'typeahead'];
 
+test(`Renders with classes ${styles.modifiers.plain} and ${styles.modifiers.text} when variant="plainText" is passed`, () => {
+  render(<MenuToggle variant="plainText">Toggle</MenuToggle>);
+  const toggle = screen.getByRole('button');
+  expect(toggle).toHaveClass(styles.modifiers.plain);
+  expect(toggle).toHaveClass(styles.modifiers.text);
+});
+
 test(`Renders with class ${styles.modifiers.small} when size="sm" is passed`, () => {
   render(<MenuToggle size="sm">Toggle</MenuToggle>);
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.small);
@@ -101,6 +108,16 @@ test('split toggle passes onClick', async () => {
   expect(mockClick).toHaveBeenCalled();
 });
 
+test(`Renders with class ${styles.modifiers.form} when isInForm is passed`, () => {
+  render(<MenuToggle isInForm>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.form);
+});
+
+test(`Does not render class ${styles.modifiers.form} when isInForm is false`, () => {
+  render(<MenuToggle isInForm={false}>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.form);
+});
+
 test(`Renders with class ${styles.modifiers.placeholder} when isPlaceholder is passed`, () => {
   render(<MenuToggle isPlaceholder>Toggle</MenuToggle>);
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.placeholder);

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -179,6 +179,14 @@ In the following example, the toggle fills the width of its parent as the window
 
 ```
 
+### Toggle in a form
+
+When a menu toggle is used inside a form, pass the `isInForm` property so the toggle receives form-appropriate styling.
+
+```ts file="MenuToggleInForm.tsx"
+
+```
+
 ### Typeahead toggle
 
 To create a typeahead toggle, pass in `variant="typeahead"` to the `<MenuToggle>`. Then, pass a `<TextInputGroup>` component as a child of the `<MenuToggle>`.

package/src/components/MenuToggle/examples/MenuToggleInForm.tsx

@@ -0,0 +1,7 @@
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleInForm = (): JSX.Element => (
+  <MenuToggle isInForm aria-label="Menu toggle in a form">
+    In form
+  </MenuToggle>
+);