@patternfly/react-core 5.1.1-prerelease.2 → 5.1.1-prerelease.20

package/src/components/Drawer/examples/Drawer.md

@@ -13,6 +13,7 @@ propComponents:
     DrawerActions,
     DrawerCloseButton,
     DrawerColorVariant,
+    DrawerPanelFocusTrapObject
   ]
 section: components
 ---
@@ -22,56 +23,67 @@ section: components
 ### Basic
 
 ```ts file="./DrawerBasic.tsx"
+
 ```
 
-### Panel on right
+### Panel at end
+
+```ts file="./DrawerPanelEnd.tsx"
 
-```ts file="./DrawerPanelRight.tsx"
 ```
 
-### Panel on left
+### Panel at start
+
+```ts file="./DrawerPanelStart.tsx"
 
-```ts file="./DrawerPanelLeft.tsx"
 ```
 
 ### Panel on bottom
 
 ```ts file="./DrawerPanelBottom.tsx"
+
 ```
 
 ### Basic inline
 
 ```ts file="./DrawerBasicInline.tsx"
+
 ```
 
-### Inline panel on right
+### Inline panel at end
+
+```ts file="./DrawerInlinePanelEnd.tsx"
 
-```ts file="./DrawerInlinePanelRight.tsx"
 ```
 
-### Inline panel on left
+### Inline panel at start
+
+```ts file="./DrawerInlinePanelStart.tsx"
 
-```ts file="./DrawerInlinePanelLeft.tsx"
 ```
 
 ### Stacked content body elements
 
 ```ts file="./DrawerStackedContentBodyElements.tsx"
+
 ```
 
 ### Modified content padding
 
 ```ts file="DrawerModifiedContentPadding.tsx"
+
 ```
 
 ### Modified panel padding
 
 ```ts file="DrawerModifiedPanelPadding.tsx"
+
 ```
 
 ### Additional section above drawer content
 
 ```ts file="DrawerAdditionalSectionAboveContent.tsx"
+
 ```
 
 ### Static drawer
@@ -79,34 +91,53 @@ section: components
 **Note:** For mobile viewports, all drawer variants behave the same way. At the `md` breakpoint, or where `.pf-m-static{-on-[lg, xl, 2xl]}` is applied, the `static drawer` variant’s `close button` is automatically hidden because the drawer panel doesn’t close by design.
 
 ```ts file="DrawerStatic.tsx"
+
 ```
 
 ### Breakpoint
 
 ```ts file="DrawerBreakpoint.tsx"
+
 ```
 
-### Resizable on right
+### Resizable at end
+
+```ts file="DrawerResizableAtEnd.tsx"
 
-```ts file="DrawerResizableOnRight.tsx"
 ```
 
-### Resizable on left
+### Resizable at start
+
+```ts file="DrawerResizableAtStart.tsx"
 
-```ts file="DrawerResizableOnLeft.tsx"
 ```
 
 ### Resizable on bottom
 
 ```ts file="DrawerResizableOnBottom.tsx"
+
 ```
 
 ### Resizable on inline
 
 ```ts file="DrawerResizableOnInline.tsx"
+
 ```
 
 ### Panel with secondary background
 
 ```ts file="DrawerSecondaryBackground.tsx"
+
+```
+
+### With focus trap
+
+When a [focus trap](/accessibility/product-development-guide#trapping-focus) is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.
+
+To enable and customize a focus trap on a drawer panel, apply the `focusTrap` property to the `<DrawerPanelContent>` component. Enabling a focus trap with `focusTrap.enabled` will also automatically place focus on the first focusable element when the drawer panel expands, and return focus to the previously focused element when it collapses.
+
+To customize which element receives focus when the drawer panel expands, use the `focusTrap.elementToFocusOnExpand` property.
+
+```ts file="./DrawerFocusTrap.tsx"
+
 ```

package/src/components/Drawer/examples/DrawerFocusTrap.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
+
+export const DrawerFocusTrap: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  // An onKeyDown property must be passed to the Drawer component to handle closing
+  // the drawer panel and deactivating the focus trap via the Escape key.
+  const onEscape = (event: React.KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      setIsExpanded(false);
+    }
+  };
+
+  const panelContent = (
+    <DrawerPanelContent focusTrap={{ enabled: true }}>
+      <DrawerHead>
+        <span>drawer-panel</span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <React.Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer with focus trap
+      </Button>
+      <Drawer onKeyDown={onEscape} isExpanded={isExpanded}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </React.Fragment>
+  );
+};

package/src/components/Drawer/examples/{DrawerInlinePanelRight.tsx → DrawerInlinePanelEnd.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerInlinePanelRight: React.FunctionComponent = () => {
+export const DrawerInlinePanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 

package/src/components/Drawer/examples/{DrawerInlinePanelLeft.tsx → DrawerInlinePanelStart.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerInlinePanelLeft: React.FunctionComponent = () => {
+export const DrawerInlinePanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 
@@ -47,7 +47,7 @@ export const DrawerInlinePanelLeft: React.FunctionComponent = () => {
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
-      <Drawer isExpanded={isExpanded} isInline position="left" onExpand={onExpand}>
+      <Drawer isExpanded={isExpanded} isInline position="start" onExpand={onExpand}>
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>

package/src/components/Drawer/examples/{DrawerPanelLeft.tsx → DrawerPanelEnd.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerPanelLeft: React.FunctionComponent = () => {
+export const DrawerPanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 
@@ -47,7 +47,7 @@ export const DrawerPanelLeft: React.FunctionComponent = () => {
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
-      <Drawer isExpanded={isExpanded} position="left" onExpand={onExpand}>
+      <Drawer isExpanded={isExpanded} position="end" onExpand={onExpand}>
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>

package/src/components/Drawer/examples/{DrawerPanelRight.tsx → DrawerPanelStart.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerPanelRight: React.FunctionComponent = () => {
+export const DrawerPanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 
@@ -47,7 +47,7 @@ export const DrawerPanelRight: React.FunctionComponent = () => {
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
-      <Drawer isExpanded={isExpanded} position="right" onExpand={onExpand}>
+      <Drawer isExpanded={isExpanded} position="start" onExpand={onExpand}>
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>

package/src/components/Drawer/examples/{DrawerResizableOnRight.tsx → DrawerResizableAtEnd.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerResizableOnRight: React.FunctionComponent = () => {
+export const DrawerResizableAtEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 
@@ -32,7 +32,7 @@ export const DrawerResizableOnRight: React.FunctionComponent = () => {
   };
 
   const panelContent = (
-    <DrawerPanelContent isResizable onResize={onResize} id="right-resize-panel" defaultSize={'500px'} minSize={'150px'}>
+    <DrawerPanelContent isResizable onResize={onResize} id="end-resize-panel" defaultSize={'500px'} minSize={'150px'}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
           drawer-panel
@@ -52,7 +52,7 @@ export const DrawerResizableOnRight: React.FunctionComponent = () => {
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
-      <Drawer isExpanded={isExpanded} onExpand={onExpand} position="right">
+      <Drawer isExpanded={isExpanded} onExpand={onExpand} position="end">
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>

package/src/components/Drawer/examples/{DrawerResizableOnLeft.tsx → DrawerResizableAtStart.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerResizableOnLeft: React.FunctionComponent = () => {
+export const DrawerResizableAtStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 
@@ -47,7 +47,7 @@ export const DrawerResizableOnLeft: React.FunctionComponent = () => {
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
-      <Drawer isExpanded={isExpanded} onExpand={onExpand} position="left">
+      <Drawer isExpanded={isExpanded} onExpand={onExpand} position="start">
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>

package/src/components/Dropdown/Dropdown.tsx

@@ -8,7 +8,7 @@ export interface DropdownPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
   direction?: 'up' | 'down';
   /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center';
+  position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
   width?: string | 'trigger';
   /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
@@ -17,6 +17,8 @@ export interface DropdownPopperProps {
   maxWidth?: string | 'trigger';
   /** Enable to flip the popper when it reaches the boundary */
   enableFlip?: boolean;
+  /** The container to append the popper to. Defaults to 'inline'. */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 export interface DropdownToggleProps {

package/src/components/Icon/Icon.tsx

@@ -24,6 +24,10 @@ export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement
   isInProgress?: boolean;
   /** Aria-label for the default progress icon */
   defaultProgressArialabel?: string;
+  /** @beta Flag indicating whether the icon passed as children should be mirrored for
+   * right to left (RTL) languages. This will not mirror the icon passed to progressIcon.
+   */
+  shouldMirrorRTL?: boolean;
 }
 
 export const Icon: React.FunctionComponent<IconComponentProps> = ({
@@ -37,6 +41,7 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
   isInline = false,
   isInProgress = false,
   defaultProgressArialabel = 'Loading...',
+  shouldMirrorRTL = false,
   ...props
 }: IconComponentProps) => {
   const _progressIcon = progressIcon ?? <Spinner diameter="1em" aria-label={defaultProgressArialabel} />;
@@ -52,7 +57,16 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
       )}
       {...props}
     >
-      <span className={css(styles.iconContent, styles.modifiers[iconSize], styles.modifiers[status])}>{children}</span>
+      <span
+        className={css(
+          styles.iconContent,
+          styles.modifiers[iconSize],
+          styles.modifiers[status],
+          shouldMirrorRTL && 'pf-v5-m-mirror-inline-rtl'
+        )}
+      >
+        {children}
+      </span>
       {isInProgress && (
         <span className={css(styles.iconProgress, styles.modifiers[progressIconSize], className)}>{_progressIcon}</span>
       )}

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

@@ -194,3 +194,19 @@ test('renders progress icon successfully', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders with class pf-v5-m-mirror-inline-rtl on icon passed as children when shouldMirrorRTL is true', () => {
+  render(<Icon shouldMirrorRTL>Icon content</Icon>);
+
+  expect(screen.getByText('Icon content')).toHaveClass('pf-v5-m-mirror-inline-rtl');
+});
+
+test('Does not render with class pf-v5-m-mirror-inline-rtl on progressIcon when shouldMirrorRTL is true', () => {
+  render(
+    <Icon shouldMirrorRTL isInProgress progressIcon="Progress icon">
+      Icon content
+    </Icon>
+  );
+
+  expect(screen.getByText('Progress icon')).not.toHaveClass('pf-v5-m-mirror-inline-rtl');
+});

package/src/components/Label/Label.tsx

@@ -55,10 +55,12 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   closeBtnAriaLabel?: string;
   /** Additional properties for the default close button. */
   closeBtnProps?: any;
-  /** Href for a label that is a link. If present, the label will change to an anchor element. */
+  /** Href for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in. */
   href?: string;
-  /** Flag indicating if the label is an overflow label */
+  /** Flag indicating if the label is an overflow label. */
   isOverflowLabel?: boolean;
+  /** Callback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in. */
+  onClick?: (event: React.MouseEvent) => void;
   /** Forwards the label content and className to rendered function.  Use this prop for react router support.*/
   render?: ({
     className,
@@ -94,6 +96,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   tooltipPosition,
   icon,
   onClose,
+  onClick: onLabelClick,
   onEditCancel,
   onEditComplete,
   closeBtn,
@@ -118,6 +121,20 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     };
   });
 
+  React.useEffect(() => {
+    if (onLabelClick && href) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Link labels cannot have onClick passed, this results in invalid HTML. Please remove either the href or onClick prop.'
+      );
+    } else if (onLabelClick && isEditable) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Editable labels cannot have onClick passed, clicking starts the label edit process. Please remove either the isEditable or onClick prop.'
+      );
+    }
+  }, [onLabelClick, href, isEditable]);
+
   const onDocMouseDown = (event: MouseEvent) => {
     if (
       isEditableActive &&
@@ -235,14 +252,22 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   let LabelComponentChildElement = 'span';
   if (href) {
     LabelComponentChildElement = 'a';
-  } else if (isEditable) {
+  } else if (isEditable || (onLabelClick && !isOverflowLabel)) {
     LabelComponentChildElement = 'button';
   }
 
+  const clickableLabelProps = {
+    type: 'button',
+    onClick: onLabelClick
+  };
+
+  const isButton = LabelComponentChildElement === 'button';
+
   const labelComponentChildProps = {
     className: css(styles.labelContent),
     ...(isTooltipVisible && { tabIndex: 0 }),
     ...(href && { href }),
+    ...(isButton && clickableLabelProps),
     ...(isEditable && {
       ref: editableButtonRef,
       onClick: (e: React.MouseEvent) => {
@@ -289,6 +314,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         isEditableActive && styles.modifiers.editableActive,
         className
       )}
+      onClick={isOverflowLabel ? onLabelClick : undefined}
     >
       {!isEditableActive && labelComponentChild}
       {!isEditableActive && onClose && button}

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

@@ -109,4 +109,39 @@ describe('Label', () => {
     expect(screen.queryByRole('button', { name: 'Something' })).toBeNull();
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('a button is not rendered when onClick is not passed', () => {
+    render(<Label>Click me</Label>);
+
+    expect(screen.queryByRole(`button`)).not.toBeInTheDocument();
+  });
+
+  test('a button is rendered when onClick is passed', () => {
+    const fn = jest.fn();
+
+    render(<Label onClick={fn}>Click me</Label>);
+
+    expect(screen.getByRole(`button`)).toBeVisible();
+  });
+
+  test('clickable label does not call the passed callback when it is not clicked', async () => {
+    const mockCallback = jest.fn();
+
+    render(<Label onClick={mockCallback}>Click me</Label>);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
+  test('clickable label calls passed callback on click', async () => {
+    const mockCallback = jest.fn();
+    const user = userEvent.setup();
+
+    render(<Label onClick={mockCallback}>Click me</Label>);
+
+    const label = screen.getByRole('button');
+
+    await user.click(label);
+
+    expect(mockCallback).toBeCalledTimes(1);
+  });
 });

package/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`Label editable label 1`] = `
   >
     <button
       class="pf-v5-c-label__content"
+      type="button"
     >
       <span
         class="pf-v5-c-label__text"