@patternfly/react-core 5.2.0-prerelease.12 → 5.2.0-prerelease.14

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":"5.2.0-prerelease.11","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":"5.2.0-prerelease.13","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":"5.2.0-prerelease.11","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":"5.2.0-prerelease.13","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":"5.2.0-prerelease.11","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":"5.2.0-prerelease.13","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.2.0-prerelease.12",
+  "version": "5.2.0-prerelease.14",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "b37416a39118b637c946b9bce3166e8cf81bfb82"
+  "gitHead": "7d28e1d3fd8219525537a122a54ab939b6e55647"
 }

package/src/components/InputGroup/InputGroup.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 import { css } from '@patternfly/react-styles';
-import { FormSelect } from '../FormSelect';
-import { TextArea } from '../TextArea';
-import { TextInput } from '../TextInput';
 
 export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the input group. */
@@ -20,61 +17,12 @@ export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
   innerRef,
   ...props
 }: InputGroupProps) => {
-  const getIdItem = () => {
-    const getChildId = (_children: any) =>
-      React.Children.toArray(_children).find(
-        (_child: any) => !formCtrls.includes(_child?.type?.displayName) && _child?.props?.id
-      );
-    let childId = getChildId(children);
-    if (childId) {
-      return childId;
-    }
-    React.Children.toArray(children).find((child: any) => {
-      const _childId = getChildId(child.props.children);
-      if (_childId) {
-        childId = _childId;
-        return true;
-      }
-    });
-    return childId;
-  };
-  const formCtrls = [FormSelect, TextArea, TextInput].map((comp) => comp.displayName);
-  const idItem = getIdItem() as React.ReactElement<{ id: string }>;
   const ref = React.useRef(null);
   const inputGroupRef = innerRef || ref;
 
-  const childrenWithId = React.Children.map(children, (child: any) => {
-    if (child?.type.displayName === 'InputGroupItem') {
-      const newChildren = React.Children.map(child.props.children, (_child) => {
-        if (!_child.props) {
-          return _child;
-        }
-        if (_child.props['aria-describedby']) {
-          return _child;
-        }
-        if (!formCtrls.includes(_child.type.displayName)) {
-          return _child;
-        }
-        return React.cloneElement(_child, {
-          'aria-describedby': _child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
-        });
-      });
-      return React.cloneElement(child, {}, newChildren);
-    }
-
-    if (child?.props['aria-describedby']) {
-      return child;
-    }
-    if (!formCtrls.includes(child?.type.displayName)) {
-      return child;
-    }
-    return React.cloneElement(child, {
-      'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
-    });
-  });
   return (
     <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
-      {idItem ? childrenWithId : children}
+      {children}
     </div>
   );
 };

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

@@ -8,59 +8,22 @@ import { Button } from '../../Button';
 import { TextInput } from '../../TextInput';
 
 describe('InputGroup', () => {
-  test('add aria-describedby to form-control if one of the non form-controls has id', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby.
+  // Regression test for https://github.com/patternfly/patternfly-react/issues/9667
+  test('wont add aria-describedby automatically to form-control', () => {
     render(
       <InputGroup>
         <InputGroupItem>
-          <TextInput value="some data" aria-label="some text" />
+          <TextInput aria-label="User password" />
         </InputGroupItem>
         <InputGroupItem>
-          <Button variant="primary" id="button-id">
-            hello
+          <Button variant="control" id="show-password-toggler">
+            Show
           </Button>
         </InputGroupItem>
       </InputGroup>
     );
-    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id');
-  });
 
-  test('wont add aria-describedby to form-control if describedby is empty string', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby, but this
-    // example has an empty aria-describedby to prevent that from happening.
-    render(
-      <InputGroup>
-        <InputGroupItem>
-          <TextInput value="some data" aria-describedby="" aria-label="some text" />
-        </InputGroupItem>
-        <InputGroupItem>
-          <Button id="button-id">
-            hello
-          </Button>
-        </InputGroupItem>
-      </InputGroup>
-    );
-    expect(screen.getByLabelText('some text')).not.toHaveAttribute('aria-describedby');
-  });
-
-  test('wont override aria-describedby in form-control if describedby has value', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby, but this
-    // example has a predefined aria-describedby to prevent that from happening
-    render(
-      <InputGroup>
-        <InputGroupItem>
-          <TextInput value="some data" aria-describedby="myself" aria-label="some text" />
-        </InputGroupItem>
-        <InputGroupItem>
-          <Button id="button-id">
-            hello
-          </Button>
-        </InputGroupItem>
-      </InputGroup>
-    );
-    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'myself');
+    const formControl = screen.getByLabelText("User password");
+    expect(formControl).not.toHaveAttribute("aria-describedby");
   });
 });

package/src/components/Nav/NavExpandable.tsx

@@ -9,10 +9,10 @@ import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface NavExpandableProps
-  extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>,
+  extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>,
     OUIAProps {
-  /** Title shown for the expandable list */
-  title: string;
+  /** Title content shown for the expandable list */
+  title: React.ReactNode;
   /** If defined, screen readers will read this text instead of the list title */
   srText?: string;
   /** Boolean to programatically expand or collapse section */
@@ -126,14 +126,14 @@ class NavExpandable extends React.Component<NavExpandableProps, NavExpandableSta
             <PageSidebarContext.Consumer>
               {({ isSidebarOpen }) => (
                 <button
-                  className={styles.navLink}
+                  className={css(styles.navLink)}
                   id={srText ? null : this.id}
                   onClick={(event) => this.onExpand(event, context.onToggle)}
                   aria-expanded={expandedState}
                   tabIndex={isSidebarOpen ? null : -1}
                   {...buttonProps}
                 >
-                  {title}
+                  {typeof title !== 'string' ? <span className={css(`${styles.nav}__link-text`)}>{title}</span> : title}
                   <span className={css(styles.navToggle)}>
                     <span className={css(styles.navToggleIcon)}>
                       <AngleRightIcon aria-hidden="true" />

package/src/components/Nav/NavItem.tsx

@@ -38,6 +38,8 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   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;
+  /** @beta Adds a wrapper around the nav link text. Improves the layout when the text is a react node. */
+  hasNavLinkWrapper?: boolean;
 }
 
 export const NavItem: React.FunctionComponent<NavItemProps> = ({
@@ -56,6 +58,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   ouiaId,
   ouiaSafe,
   zIndex = 9999,
+  hasNavLinkWrapper,
   ...props
 }: NavItemProps) => {
   const { flyoutRef, setFlyoutRef, navRef } = React.useContext(NavContext);
@@ -188,7 +191,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         {...(hasFlyout && { ...ariaFlyoutProps })}
         {...props}
       >
-        {children}
+        {hasNavLinkWrapper ? <span className={css(`${styles.nav}__link-text`)}>{children}</span> : children}
         {flyout && flyoutButton}
       </Component>
     );

package/src/components/Nav/examples/Nav.md

@@ -7,6 +7,8 @@ ouia: true
 ---
 
 import './nav.css';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 
 ## Examples
 
@@ -68,6 +70,12 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a
 
 ```
 
+### Link text
+
+```ts isBeta file="./NavLinkText.tsx"
+
+```
+
 ## Types
 
 ### NavSelectClickHandler

package/src/components/Nav/examples/NavExpandableThirdLevel.tsx

@@ -62,7 +62,7 @@ export const NavExpandableThirdLevel: React.FunctionComponent = () => {
           </NavItem>
         </NavExpandable>
         <NavExpandable
-          title="Expandable section title 2"
+          title={'Expandable section title 2'}
           groupId="nav-expand3rd-group-2"
           isActive={activeGroup === 'nav-expand3rd-group-2'}
           isExpanded

package/src/components/Nav/examples/NavLinkText.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
+
+export const NavLinkText: React.FunctionComponent = () => {
+  const [activeGroup, setActiveGroup] = React.useState('nav-expand3rd-group-1');
+  const [activeItem, setActiveItem] = React.useState('nav-expand3rd-group-1_item-1');
+
+  const onSelect = (
+    _event: React.FormEvent<HTMLInputElement>,
+    result: { itemId: number | string; groupId: number | string }
+  ) => {
+    setActiveGroup(result.groupId as string);
+    setActiveItem(result.itemId as string);
+  };
+
+  const onToggle = (
+    _event: React.MouseEvent<HTMLButtonElement>,
+    result: { groupId: number | string; isExpanded: boolean }
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
+  };
+
+  return (
+    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Nav link text">
+      <NavList>
+        <NavItem
+          preventDefault
+          id="link-text-link-1"
+          to="#link-text-link-1"
+          itemId="link-text-1-item-1"
+          isActive={activeItem === 'link-text-1-item-1'}
+          hasNavLinkWrapper
+        >
+          Link 1
+          <ArrowRightIcon />
+        </NavItem>
+        <NavExpandable
+          title={
+            <>
+              Link 2 <small>(small text)</small>
+            </>
+          }
+          groupId="link-text-group-1"
+          isActive={activeGroup === 'link-text-group-1'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            id="link-text-link-2"
+            to="#link-text-link-2"
+            groupId="link-text-group-1"
+            itemId="link-text-group-1_item-1"
+            isActive={activeItem === 'link-text-group-1_item-1'}
+            hasNavLinkWrapper
+          >
+            <UserIcon />
+            Subnav link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="link-text-link-3"
+            to="#link-text-link-3"
+            groupId="link-text-group-1"
+            itemId="link-text-group-1_item-2"
+            isActive={activeItem === 'link-text-group-1_item-2'}
+            hasNavLinkWrapper
+          >
+            <UserIcon />
+            Subnav link 2
+          </NavItem>
+        </NavExpandable>
+        <NavExpandable
+          title={
+            <>
+              Link 3 <strong>(strong text)</strong>
+            </>
+          }
+          groupId="link-text-group-2"
+          isActive={activeGroup === 'nav-expand3rd-group-2'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            id="link-text-link-4"
+            to="link-text-link-4"
+            groupId="link-text-group-2"
+            itemId="link-text-group-2_item-1"
+            isActive={activeItem === 'link-text-group-2_item-1'}
+          >
+            Subnav link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="link-text-link-5"
+            to="link-text-link-5"
+            groupId="link-text-group-2"
+            itemId="link-text-group-2_item-2"
+            isActive={activeItem === 'link-text-group-2_item-2'}
+          >
+            Subnav link 2
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};

package/src/components/Nav/examples/nav.css

@@ -5,6 +5,7 @@
 #ws-react-c-navigation-expandable-wsubnavigation-titles,
 #ws-react-c-navigation-mixed,
 #ws-react-c-navigation-expandable-third-level,
+#ws-react-c-navigation-link-text,
 #ws-react-c-navigation-horizontal-subnav,
 #ws-react-c-navigation-flyout,
 #ws-react-c-navigation-drilldown {

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

@@ -69,7 +69,6 @@ describe('numberInput', () => {
       <NumberInput
         value={5}
         onMinus={jest.fn()}
-        inputProps={{ 'aria-describedby': '' }}
         minusBtnProps={{ id: 'minus-id' }}
         onPlus={jest.fn()}
         plusBtnProps={{ id: 'plus-id' }}