@patternfly/react-core 5.1.1-prerelease.8 → 6.0.0-alpha.1

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -87,8 +87,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const previouslyFocusedElement = React.useRef(null);
   let currWidth: number = 0;
   let panelRect: DOMRect;
-  let right: number;
-  let left: number;
+  let end: number;
+  let start: number;
   let bottom: number;
   let setInitialVals: boolean = true;
 
@@ -108,23 +108,52 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const calcValueNow = () => {
     let splitterPos;
     let drawerSize;
+    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
 
-    if (isInline && position === 'right') {
-      splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
-      drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
-    } else if (isInline && position === 'left') {
-      splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
-      drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
-    } else if (position === 'right') {
-      splitterPos =
-        drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
-      drawerSize =
-        drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
-    } else if (position === 'left') {
-      splitterPos =
-        splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
-      drawerSize =
-        drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+    if (isInline && (position === 'end' || position === 'right')) {
+      if (isRTL) {
+        splitterPos = panel.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
+        drawerSize = drawerRef.current.getBoundingClientRect().left - drawerRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+        drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
+      }
+    } else if (isInline && (position === 'start' || position === 'left')) {
+      if (isRTL) {
+        splitterPos = splitterRef.current.getBoundingClientRect().left - panel.current.getBoundingClientRect().right;
+        drawerSize = drawerRef.current.getBoundingClientRect().left - drawerRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
+        drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
+      }
+    } else if (position === 'end' || position === 'right') {
+      if (isRTL) {
+        splitterPos =
+          drawerContentRef.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().left -
+          drawerContentRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos =
+          drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().right -
+          drawerContentRef.current.getBoundingClientRect().left;
+      }
+    } else if (position === 'start' || position === 'left') {
+      if (isRTL) {
+        splitterPos =
+          splitterRef.current.getBoundingClientRect().left - drawerContentRef.current.getBoundingClientRect().right;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().left -
+          drawerContentRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos =
+          splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().right -
+          drawerContentRef.current.getBoundingClientRect().left;
+      }
     } else if (position === 'bottom') {
       splitterPos =
         drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
@@ -166,6 +195,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   };
 
   const handleControlMove = (e: MouseEvent | TouchEvent, controlPosition: number) => {
+    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+
     e.stopPropagation();
     if (!isResizing) {
       return;
@@ -173,17 +204,22 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
 
     if (setInitialVals) {
       panelRect = panel.current.getBoundingClientRect();
-      right = panelRect.right;
-      left = panelRect.left;
+      if (isRTL) {
+        start = panelRect.right;
+        end = panelRect.left;
+      } else {
+        end = panelRect.right;
+        start = panelRect.left;
+      }
       bottom = panelRect.bottom;
       setInitialVals = false;
     }
     const mousePos = controlPosition;
     let newSize = 0;
-    if (position === 'right') {
-      newSize = right - mousePos;
-    } else if (position === 'left') {
-      newSize = mousePos - left;
+    if (position === 'end' || position === 'right') {
+      newSize = isRTL ? mousePos - end : end - mousePos;
+    } else if (position === 'start' || position === 'left') {
+      newSize = isRTL ? start - mousePos : mousePos - start;
     } else {
       newSize = bottom - mousePos;
     }
@@ -225,6 +261,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const callbackMouseUp = React.useCallback(handleMouseup, []);
 
   const handleKeys = (e: React.KeyboardEvent) => {
+    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+
     const key = e.key;
     if (
       key !== 'Escape' &&
@@ -248,9 +286,17 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     newSize = position === 'bottom' ? panelRect.height : panelRect.width;
     let delta = 0;
     if (key === 'ArrowRight') {
-      delta = position === 'left' ? increment : -increment;
+      if (isRTL) {
+        delta = position === 'left' || position === 'start' ? -increment : increment;
+      } else {
+        delta = position === 'left' || position === 'start' ? increment : -increment;
+      }
     } else if (key === 'ArrowLeft') {
-      delta = position === 'left' ? -increment : increment;
+      if (isRTL) {
+        delta = position === 'left' || position === 'start' ? increment : -increment;
+      } else {
+        delta = position === 'left' || position === 'start' ? -increment : increment;
+      }
     } else if (key === 'ArrowUp') {
       delta = increment;
     } else if (key === 'ArrowDown') {

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

@@ -26,15 +26,15 @@ section: components
 
 ```
 
-### Panel on right
+### Panel at end
 
-```ts file="./DrawerPanelRight.tsx"
+```ts file="./DrawerPanelEnd.tsx"
 
 ```
 
-### Panel on left
+### Panel at start
 
-```ts file="./DrawerPanelLeft.tsx"
+```ts file="./DrawerPanelStart.tsx"
 
 ```
 
@@ -50,15 +50,15 @@ section: components
 
 ```
 
-### Inline panel on right
+### Inline panel at end
 
-```ts file="./DrawerInlinePanelRight.tsx"
+```ts file="./DrawerInlinePanelEnd.tsx"
 
 ```
 
-### Inline panel on left
+### Inline panel at start
 
-```ts file="./DrawerInlinePanelLeft.tsx"
+```ts file="./DrawerInlinePanelStart.tsx"
 
 ```
 
@@ -100,15 +100,15 @@ section: components
 
 ```
 
-### Resizable on right
+### Resizable at end
 
-```ts file="DrawerResizableOnRight.tsx"
+```ts file="DrawerResizableAtEnd.tsx"
 
 ```
 
-### Resizable on left
+### Resizable at start
 
-```ts file="DrawerResizableOnLeft.tsx"
+```ts file="DrawerResizableAtStart.tsx"
 
 ```
 

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"