@patternfly/react-core 5.2.0-prerelease.9 → 6.0.0-alpha.2

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/NavList.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { isElementInView } from '../../helpers/util';
+import { getLanguageDirection, isElementInView } from '../../helpers/util';
 import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
 import { getResizeObserver } from '../../helpers/resizeObserver';
@@ -112,7 +112,7 @@ class NavList extends React.Component<NavListProps> {
 
   componentDidMount() {
     this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true);
-    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
+    this.direction = getLanguageDirection(this.navList.current);
     this.handleScrollButtons();
   }
 
@@ -121,7 +121,7 @@ class NavList extends React.Component<NavListProps> {
   }
 
   componentDidUpdate() {
-    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
+    this.direction = getLanguageDirection(this.navList.current);
   }
 
   render() {

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/NotificationBadge/NotificationBadge.tsx

@@ -54,7 +54,7 @@ export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps>
         className={css(styles.notificationBadge, styles.modifiers[variant], isExpanded && styles.modifiers.expanded)}
       >
         {notificationChild}
-        {count > 0 && <span className={css(styles.notificationBadgeCount)}>{count}</span>}
+        {count > 0 && <span className={css(`${styles.notificationBadge}__count`)}>{count}</span>}
       </span>
     </Button>
   );

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' }}

package/src/components/Page/PageSection.tsx

@@ -5,10 +5,7 @@ import { formatBreakpointMods } from '../../helpers/util';
 import { PageContext } from './PageContext';
 
 export enum PageSectionVariants {
-  default = 'default',
-  light = 'light',
-  dark = 'dark',
-  darker = 'darker'
+  default = 'default'
 }
 
 export enum PageSectionTypes {
@@ -26,7 +23,7 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the section */
   className?: string;
   /** Section background color variant */
-  variant?: 'default' | 'light' | 'dark' | 'darker';
+  variant?: 'default';
   /** Section type variant */
   type?: 'default' | 'nav' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';
   /** Enables the page section to fill the available vertical space */
@@ -77,10 +74,7 @@ const variantType = {
 };
 
 const variantStyle = {
-  [PageSectionVariants.default]: '',
-  [PageSectionVariants.light]: styles.modifiers.light,
-  [PageSectionVariants.dark]: styles.modifiers.dark_200,
-  [PageSectionVariants.darker]: styles.modifiers.dark_100
+  [PageSectionVariants.default]: ''
 };
 
 export const PageSection: React.FunctionComponent<PageSectionProps> = ({

package/src/components/Page/PageSidebar.tsx

@@ -15,8 +15,6 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   isManagedSidebar?: boolean;
   /** Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */
   isSidebarOpen?: boolean;
-  /** Indicates the color scheme of the sidebar */
-  theme?: 'dark' | 'light';
   /** Sidebar id */
   id?: string;
 }
@@ -33,7 +31,6 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
   className = '',
   children,
   isSidebarOpen = true,
-  theme = 'dark',
   id = 'page-sidebar',
   ...props
 }: PageSidebarProps) => (
@@ -46,7 +43,6 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           id={id}
           className={css(
             styles.pageSidebar,
-            theme === 'light' && styles.modifiers.light,
             sidebarOpen && styles.modifiers.expanded,
             !sidebarOpen && styles.modifiers.collapsed,
             className

package/src/components/Page/__tests__/Generated/PageSidebar.test.tsx

@@ -9,7 +9,7 @@ import {} from '../..';
 
 it('PageSidebar should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
-    <PageSidebar className={"''"} isManagedSidebar={true} isSidebarOpen={true} theme={'dark'}>
+    <PageSidebar className={"''"} isManagedSidebar={true} isSidebarOpen={true}>
       <div>ReactNode</div>
     </PageSidebar>
   );

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

@@ -32,9 +32,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -44,7 +41,7 @@ describe('Page', () => {
   test('Check dark page against snapshot', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
     const Sidebar = (
-      <PageSidebar isSidebarOpen theme="dark">
+      <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
       </PageSidebar>
     );
@@ -52,9 +49,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -68,9 +62,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -94,9 +85,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -127,9 +115,6 @@ describe('Page', () => {
         breadcrumbProps={{ stickyOnBreakpoint: { sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' } }}
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -162,9 +147,6 @@ describe('Page', () => {
         }}
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -189,9 +171,6 @@ describe('Page', () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -216,9 +195,6 @@ describe('Page', () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -245,9 +221,6 @@ describe('Page', () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -275,9 +248,6 @@ describe('Page', () => {
           </Nav>
         </PageNavigation>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -317,9 +287,6 @@ describe('Page', () => {
           </PageNavigation>
         </PageGroup>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -373,9 +340,6 @@ describe('Page', () => {
         }}
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -411,9 +375,6 @@ describe('Page', () => {
         data-testid="page-test-id"
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );