@patternfly/react-core 6.0.0-prerelease.1 → 6.0.0-prerelease.10

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.0.0-prerelease.0","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.0.0-prerelease.9","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.0.0-prerelease.0","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.0.0-prerelease.9","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.0.0-prerelease.0","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.0.0-prerelease.9","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-prerelease.1",
+  "version": "6.0.0-prerelease.10",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-prerelease.1",
-    "@patternfly/react-styles": "^6.0.0-prerelease.1",
-    "@patternfly/react-tokens": "^6.0.0-prerelease.1",
-    "focus-trap": "7.5.4",
+    "@patternfly/react-icons": "^6.0.0-prerelease.4",
+    "@patternfly/react-styles": "^6.0.0-prerelease.3",
+    "@patternfly/react-tokens": "^6.0.0-prerelease.3",
+    "focus-trap": "7.6.0",
     "react-dropzone": "^14.2.3",
-    "tslib": "^2.6.2"
+    "tslib": "^2.7.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.226",
+    "@patternfly/patternfly": "6.0.0-prerelease.5",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "a2d8b200096bfd32dc19df52ac084fd68ae0b26f"
+  "gitHead": "7627465cdd78e21bbbe9ed0b7b3b9f6f8ee0329f"
 }

package/src/components/Content/Content.tsx

@@ -53,6 +53,8 @@ export interface ContentProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isPlainList?: boolean;
   /** Flag to indicate the link (or all links within the content) has visited styles applied if the browser determines the link has been visited. */
   isVisitedLink?: boolean;
+  /** Flag to indicate the content has editorial styling. This styling increases the font size of body text and small text by one tier, increasing body text to large and small text to the previous body text size.  */
+  isEditorial?: boolean;
   /** Value to overwrite the randomly generated data-ouia-component-id. */
   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. */
@@ -89,6 +91,7 @@ export const Content: React.FunctionComponent<ContentProps> = ({
   isVisitedLink = false,
   ouiaId,
   ouiaSafe = true,
+  isEditorial = false,
   ...props
 }: ContentProps) => {
   const wrappingComponent = component ?? 'div';
@@ -106,6 +109,7 @@ export const Content: React.FunctionComponent<ContentProps> = ({
         componentStyles[wrappingComponent],
         isList && isPlainList && styles.modifiers.plain,
         isVisitedLink && styles.modifiers.visited,
+        isEditorial && styles.modifiers.editorial,
         className
       )}
     >

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

@@ -264,6 +264,30 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
 });
 
+test(`Renders without class name ${styles.modifiers.editorial} by default`, () => {
+  render(<Content>Test</Content>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-editorial');
+});
+
+test(`Renders with class name ${styles.modifiers.editorial} when isEditorial = true`, () => {
+  render(<Content isEditorial>Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-editorial');
+});
+
+test(`Renders with class name ${styles.modifiers.editorial} when isEditorial = true and component is specified`, () => {
+  render(
+    <Content component="h1" isEditorial>
+      Test
+    </Content>
+  );
+  expect(screen.getByText('Test')).toHaveClass('pf-m-editorial');
+});
+
+test(`Renders without class name ${styles.modifiers.editorial} when isEditorial = false`, () => {
+  render(<Content isEditorial={false}>Test</Content>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-editorial');
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<Content ouiaId="ouia-id">Test</Content>);
   expect(asFragment()).toMatchSnapshot();

package/src/components/Content/examples/Content.md

@@ -62,3 +62,11 @@ HTML elements wrapped by `<Content>` are styled by the content component.
 ```ts file="./ContentVisited.tsx"
 
 ```
+
+### Editorial content
+
+Editorial styling increases the font size of body text and small text by 1 tier, where body text becomes "lg" and small text becomes "md". To applying editorial styling, use `isEditorial`.
+
+```ts file="./ContentEditorial.tsx"
+
+```

package/src/components/Content/examples/ContentEditorial.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Content, ContentVariants } from '@patternfly/react-core';
+
+export const ContentEditorial: React.FunctionComponent = () => (
+  <>
+    <Content component={ContentVariants.h1} isEditorial>
+      Example of editorial content via components
+    </Content>
+    <Content component={ContentVariants.p} isEditorial>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
+      nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
+      erat vel, interdum mattis neque. Sub works as well!
+    </Content>
+    <br />
+    <Content isEditorial>
+      <h1>Example of editorial content via wrapper</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
+        nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
+        erat vel, interdum mattis neque. Sub works as well!
+      </p>
+    </Content>
+  </>
+);

package/src/components/MenuToggle/MenuToggle.tsx

@@ -49,6 +49,8 @@ export interface MenuToggleProps
   isFullHeight?: boolean;
   /** Flag indicating the toggle takes up the full width of its parent */
   isFullWidth?: boolean;
+  /** Flag indicating the toggle contains placeholder text */
+  isPlaceholder?: boolean;
   /** Object used to configure a split button menu toggle */
   splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
@@ -85,6 +87,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
     isDisabled: false,
     isFullWidth: false,
     isFullHeight: false,
+    isPlaceholder: false,
     size: 'default',
     ouiaSafe: true
   };
@@ -103,6 +106,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       isDisabled,
       isFullHeight,
       isFullWidth,
+      isPlaceholder,
       splitButtonOptions,
       variant,
       status,
@@ -179,6 +183,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       isFullHeight && styles.modifiers.fullHeight,
       isFullWidth && styles.modifiers.fullWidth,
       isDisabled && styles.modifiers.disabled,
+      isPlaceholder && styles.modifiers.placeholder,
       size === MenuToggleSize.sm && styles.modifiers.small,
       className
     );

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

@@ -100,4 +100,9 @@ describe('menu toggle', () => {
     await user.click(screen.getByRole(`button`) as Element);
     expect(mockClick).toHaveBeenCalled();
   });
+
+  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

@@ -215,19 +215,19 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 ### Split toggle with labeled checkbox
 
-To add a text label to a split button toggle, pass `children` to the `<MenuToggle>` component.
+You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
 
-```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
+To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonOptions`. 
 
-```
+```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
-### Split toggle with checkbox and toggle text label
+```
 
-You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
+### Split toggle with checkbox and toggle text 
 
-To do so, pass `children` to the `<MenuToggleCheckbox>` component. When the menu toggle text is clicked, the checkbox's `onChange` callback will be triggered.
+To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonOptions`.
 
-```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
+```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
 
 ```
 
@@ -296,3 +296,11 @@ When the status value is "warning" or "danger", you must include helper text tha
 ```ts file='MenuToggleStatus.tsx'
 
 ```
+
+### Placeholder text in toggle
+
+To indicate the toggle contains placeholder text, pass the `isPlaceholder` property to the `MenuToggle`.
+
+```ts file='MenuTogglePlaceholder.tsx'
+
+```

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuTogglePlaceholder: React.FunctionComponent = () => (
+  <MenuToggle isPlaceholder>Placeholder text</MenuToggle>
+);

package/src/components/Slider/Slider.tsx

@@ -474,7 +474,12 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
           </div>
         )}
         {hasTooltipOverThumb ? (
-          <Tooltip triggerRef={thumbRef} entryDelay={0} content={findAriaTextValue()}>
+          <Tooltip
+            className={css('pf-v6-m-tabular-nums')}
+            triggerRef={thumbRef}
+            entryDelay={0}
+            content={findAriaTextValue()}
+          >
             {thumbComponent}
           </Tooltip>
         ) : (

package/src/components/TextInputGroup/TextInputGroup.tsx

@@ -11,6 +11,8 @@ export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   isDisabled?: boolean;
   /** Flag to indicate the toggle has no border or background */
   isPlain?: boolean;
+  /** Status variant of the text input group. */
+  validated?: 'success' | 'warning' | 'error';
   /** @hide A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
 }
@@ -24,6 +26,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   className,
   isDisabled,
   isPlain,
+  validated,
   innerRef,
   ...props
 }: TextInputGroupProps) => {
@@ -31,13 +34,14 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   const textInputGroupRef = innerRef || ref;
 
   return (
-    <TextInputGroupContext.Provider value={{ isDisabled }}>
+    <TextInputGroupContext.Provider value={{ isDisabled, validated }}>
       <div
         ref={textInputGroupRef}
         className={css(
           styles.textInputGroup,
           isDisabled && styles.modifiers.disabled,
           isPlain && styles.modifiers.plain,
+          validated && styles.modifiers[validated],
           className
         )}
         {...props}

package/src/components/TextInputGroup/TextInputGroupIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
+import { css } from '@patternfly/react-styles';
+
+export interface TextInputGroupIconProps extends React.HTMLProps<HTMLSpanElement> {
+  /** Content rendered inside the text input group utilities div */
+  children?: React.ReactNode;
+  /** Additional classes applied to the text input group utilities container */
+  className?: string;
+  /** Flag indicating if the icon is a status icon and should inherit status styling. */
+  isStatus?: boolean;
+}
+
+export const TextInputGroupIcon: React.FunctionComponent<TextInputGroupIconProps> = ({
+  children,
+  className,
+  isStatus,
+  ...props
+}: TextInputGroupIconProps) => (
+  <span className={css(styles.textInputGroupIcon, isStatus && styles.modifiers.status, className)} {...props}>
+    {children}
+  </span>
+);
+
+TextInputGroupIcon.displayName = 'TextInputGroupIcon';

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import { css } from '@patternfly/react-styles';
 import { TextInputGroupContext } from './TextInputGroup';
+import { TextInputGroupIcon } from './TextInputGroupIcon';
+import { statusIcons, ValidatedOptions } from '../../helpers';
 
 export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Content rendered inside the text input group main div */
@@ -78,9 +80,10 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   inputId,
   ...props
 }: TextInputGroupMainProps) => {
-  const { isDisabled } = React.useContext(TextInputGroupContext);
+  const { isDisabled, validated } = React.useContext(TextInputGroupContext);
   const ref = React.useRef(null);
   const textInputGroupInputInputRef = innerRef || ref;
+  const StatusIcon = statusIcons[validated === ValidatedOptions.error ? 'danger' : validated];
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     onChange(event, event.currentTarget.value);
@@ -100,7 +103,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
             id={inputId}
           />
         )}
-        {icon && <span className={css(styles.textInputGroupIcon)}>{icon}</span>}
+        {icon && <TextInputGroupIcon>{icon}</TextInputGroupIcon>}
         <input
           ref={textInputGroupInputInputRef}
           type={type}
@@ -119,6 +122,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}
         />
+        {validated && <TextInputGroupIcon isStatus>{<StatusIcon aria-hidden="true" />}</TextInputGroupIcon>}
       </span>
     </div>
   );

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

@@ -34,20 +34,42 @@ describe('TextInputGroup', () => {
     expect(inputGroup).toHaveClass('custom-class');
   });
 
-  it('does not render with the pf-m-disabled class when not disabled', () => {
+  it(`does not render with the ${styles.modifiers.disabled} class when not disabled`, () => {
     render(<TextInputGroup>Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');
 
-    expect(inputGroup).not.toHaveClass('pf-m-disabled');
+    expect(inputGroup).not.toHaveClass(styles.modifiers.disabled);
   });
 
-  it('renders with the pf-m-disabled class when disabled', () => {
+  it(`renders with the ${styles.modifiers.disabled} class when disabled`, () => {
     render(<TextInputGroup isDisabled>Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');
 
-    expect(inputGroup).toHaveClass('pf-m-disabled');
+    expect(inputGroup).toHaveClass(styles.modifiers.disabled);
+  });
+
+  it(`renders with class ${styles.modifiers.success} when validated="success"`, () => {
+    render(<TextInputGroup validated="success">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).toHaveClass(styles.modifiers.success);
+  });
+  it(`renders with class ${styles.modifiers.warning} when validated="warning"`, () => {
+    render(<TextInputGroup validated="warning">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).toHaveClass(styles.modifiers.warning);
+  });
+  it(`renders with class ${styles.modifiers.error} when validated="error"`, () => {
+    render(<TextInputGroup validated="error">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).toHaveClass(styles.modifiers.error);
   });
 
   it('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => {

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -242,6 +242,16 @@ describe('TextInputGroupMain', () => {
     expect(hintInput).toBeVisible();
   });
 
+  it(`Renders status icon with class ${styles.modifiers.status} when a validated prop is passed`, () => {
+    render(
+      <TextInputGroupContext.Provider value={{ validated: 'success' }}>
+        <TextInputGroupMain />
+      </TextInputGroupContext.Provider>
+    );
+
+    expect(screen.getByRole('textbox').nextElementSibling).toHaveClass(styles.modifiers.status);
+  });
+
   it('does not call onChange callback when the input does not change', () => {
     const onChangeMock = jest.fn();
 

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -13,19 +13,31 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 ### Basic
 
 ```ts file="./TextInputGroupBasic.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./TextInputGroupDisabled.tsx"
+
 ```
 
 ### Utilities and icon
 
 ```ts file="./TextInputGroupUtilitiesAndIcon.tsx"
+
+```
+
+### With validation
+
+You can add a validation status to a `<TextInputGroup>` by passing the `validated` property with a value of either "success", "warning", or "error".
+
+```ts file="./TextInputGroupWithStatus.tsx"
+
 ```
 
 ### Filters
 
 ```ts file="./TextInputGroupFilters.tsx"
+
 ```

package/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+  ValidatedOptions,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const TextInputGroupWithStatus: React.FunctionComponent = () => {
+  const [successValue, setSuccessValue] = React.useState('Success validation');
+  const [warningValue, setWarningValue] = React.useState('Warning validation with custom non-status icon at start');
+  const [errorValue, setErrorValue] = React.useState(
+    'Error validation with custom non-status icon at start and utilities'
+  );
+
+  /** show the input clearing button only when the input is not empty */
+  const showClearButton = !!errorValue;
+
+  /** render the utilities component only when a component it contains is being rendered */
+  const showUtilities = showClearButton;
+
+  /** callback for clearing the text input */
+  const clearInput = () => {
+    setErrorValue('');
+  };
+
+  return (
+    <Flex direction={{ default: 'column' }} rowGap={{ default: 'rowGapSm' }}>
+      <FlexItem>
+        <TextInputGroup validated={ValidatedOptions.success}>
+          <TextInputGroupMain value={successValue} onChange={(_event, value) => setSuccessValue(value)} />
+        </TextInputGroup>
+      </FlexItem>
+      <FlexItem>
+        <TextInputGroup validated={ValidatedOptions.warning}>
+          <TextInputGroupMain
+            icon={<SearchIcon />}
+            value={warningValue}
+            onChange={(_event, value) => setWarningValue(value)}
+          />
+        </TextInputGroup>
+      </FlexItem>
+      <FlexItem>
+        <TextInputGroup validated={ValidatedOptions.error}>
+          <TextInputGroupMain
+            icon={<SearchIcon />}
+            value={errorValue}
+            onChange={(_event, value) => setErrorValue(value)}
+          />
+          {showUtilities && (
+            <TextInputGroupUtilities>
+              {showClearButton && (
+                <Button variant="plain" onClick={clearInput} aria-label="Clear button and input" icon={<TimesIcon />} />
+              )}
+            </TextInputGroupUtilities>
+          )}
+        </TextInputGroup>
+      </FlexItem>
+    </Flex>
+  );
+};

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -14,7 +14,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 export const TreeViewWithActionItems: React.FunctionComponent = () => {
   const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [isOpen, setIsOpen] = React.useState<boolean>();
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection