@patternfly/react-core 5.1.1-prerelease.15 → 5.1.1-prerelease.17

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.1.1-prerelease.14","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.1.1-prerelease.16","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.1.1-prerelease.14","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.1.1-prerelease.16","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.1.1-prerelease.14","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.1.1-prerelease.16","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.15",
+  "version": "5.1.1-prerelease.17",
   "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",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "0d522acef9032f2869a47566e34902a89da2f521"
+  "gitHead": "026096f9f505bb31b24bb25b551ec81a743ef1fa"
 }

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -7,6 +7,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -14,13 +15,34 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 const dropdownItems = [
-  <DropdownItem icon={<AngleLeftIcon />} key="edit">
+  <DropdownItem
+    icon={
+      <Icon shouldMirrorRTL>
+        <AngleLeftIcon />
+      </Icon>
+    }
+    key="edit"
+  >
     Edit
   </DropdownItem>,
-  <DropdownItem icon={<AngleLeftIcon />} key="action">
+  <DropdownItem
+    icon={
+      <Icon shouldMirrorRTL>
+        <AngleLeftIcon />
+      </Icon>
+    }
+    key="action"
+  >
     Deployment
   </DropdownItem>,
-  <DropdownItem icon={<AngleLeftIcon />} key="apps">
+  <DropdownItem
+    icon={
+      <Icon shouldMirrorRTL>
+        <AngleLeftIcon />
+      </Icon>
+    }
+    key="apps"
+  >
     Applications
   </DropdownItem>
 ];

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -1,22 +1,23 @@
 import React from 'react';
 import {
-  Menu,
-  MenuContent,
-  MenuList,
-  MenuItem,
-  Divider,
-  DrilldownMenu,
+  Badge,
   Breadcrumb,
-  BreadcrumbItem,
   BreadcrumbHeading,
-  MenuBreadcrumb,
+  BreadcrumbItem,
   Checkbox,
+  Divider,
+  DrilldownMenu,
   Dropdown,
-  DropdownList,
   DropdownItem,
+  DropdownList,
+  Icon,
+  Menu,
+  MenuBreadcrumb,
+  MenuContent,
+  MenuItem,
+  MenuList,
   MenuToggle,
-  MenuToggleElement,
-  Badge
+  MenuToggleElement
 } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -129,7 +130,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           <DropdownList>
             <DropdownItem
               key="dropdown-start"
-              icon={<AngleLeftIcon />}
+              icon={
+                <Icon shouldMirrorRTL>
+                  <AngleLeftIcon />
+                </Icon>
+              }
               onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
               }
@@ -169,7 +174,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           <DropdownList>
             <DropdownItem
               key="dropdown-start"
-              icon={<AngleLeftIcon />}
+              icon={
+                <Icon shouldMirrorRTL>
+                  <AngleLeftIcon />
+                </Icon>
+              }
               onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)
               }
@@ -221,7 +230,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           <DropdownList>
             <DropdownItem
               key="dropdown-pause"
-              icon={<AngleLeftIcon />}
+              icon={
+                <Icon shouldMirrorRTL>
+                  <AngleLeftIcon />
+                </Icon>
+              }
               onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)
               }
@@ -266,7 +279,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           <DropdownList>
             <DropdownItem
               key="dropdown-pause"
-              icon={<AngleLeftIcon />}
+              icon={
+                <Icon shouldMirrorRTL>
+                  <AngleLeftIcon />
+                </Icon>
+              }
               onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)
               }

package/src/components/Slider/Slider.tsx

@@ -46,16 +46,18 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   inputAriaLabel?: string;
   /** Text label that is place after the input field. */
   inputLabel?: string | number;
-  /** Position of the input. */
-  inputPosition?: 'aboveThumb' | 'right';
+  /** Position of the input. Note "right" is deprecated. Use "end" instead*/
+  inputPosition?: 'aboveThumb' | 'right' | 'end';
   /** Value displayed in the input field. */
   inputValue?: number;
   /** Adds disabled styling, and disables the slider and the input component if present. */
   isDisabled?: boolean;
   /** Flag to show value input field. */
   isInputVisible?: boolean;
-  /** Actions placed to the left of the slider. */
+  /** @deprecated Use startActions instead. Actions placed at the start of the slider. */
   leftActions?: React.ReactNode;
+  /** Actions placed at the start of the slider. */
+  startActions?: React.ReactNode;
   /** The maximum permitted value. */
   max?: number;
   /** The minimum permitted value. */
@@ -67,8 +69,10 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
     inputValue?: number,
     setLocalInputValue?: React.Dispatch<React.SetStateAction<number>>
   ) => void;
-  /** Actions placed to the right of the slider. */
+  /** @deprecated Use endActions instead. Actions placed to the right of the slider. */
   rightActions?: React.ReactNode;
+  /** Actions placed at the end of the slider. */
+  endActions?: React.ReactNode;
   /** Flag to indicate if boundaries should be shown for slider that does not have custom steps. */
   showBoundaries?: boolean;
   /** Flag to indicate if ticks should be shown for slider that does not have custom steps. */
@@ -95,10 +99,12 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   inputAriaLabel = 'Slider value input',
   thumbAriaLabel = 'Value',
   hasTooltipOverThumb = false,
-  inputPosition = 'right',
+  inputPosition = 'end',
   onChange,
   leftActions,
+  startActions,
   rightActions,
+  endActions,
   step = 1,
   min = 0,
   max = 100,
@@ -114,6 +120,12 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const [localValue, setValue] = useState(value);
   const [localInputValue, setLocalInputValue] = useState(inputValue);
 
+  let isRTL: boolean;
+
+  React.useEffect(() => {
+    isRTL = window.getComputedStyle(sliderRailRef.current).getPropertyValue('direction') === 'rtl';
+  });
+
   React.useEffect(() => {
     setValue(value);
   }, [value]);
@@ -182,7 +194,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     e.stopPropagation();
     e.preventDefault();
 
-    diff = e.clientX - thumbRef.current.getBoundingClientRect().left;
+    if (isRTL) {
+      diff = thumbRef.current.getBoundingClientRect().right - e.clientX;
+    } else {
+      diff = e.clientX - thumbRef.current.getBoundingClientRect().left;
+    }
 
     document.addEventListener('mousemove', callbackThumbMove);
     document.addEventListener('mouseup', callbackThumbUp);
@@ -191,7 +207,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const handleTouchStart = (e: React.TouchEvent) => {
     e.stopPropagation();
 
-    diff = e.touches[0].clientX - thumbRef.current.getBoundingClientRect().left;
+    if (isRTL) {
+      diff = thumbRef.current.getBoundingClientRect().right - e.touches[0].clientX;
+    } else {
+      diff = e.touches[0].clientX - thumbRef.current.getBoundingClientRect().left;
+    }
 
     document.addEventListener('touchmove', callbackThumbMove, { passive: false });
     document.addEventListener('touchend', callbackThumbUp);
@@ -216,8 +236,13 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     }
 
     const clientPosition = e.touches && e.touches.length ? e.touches[0].clientX : e.clientX;
+    let newPosition;
 
-    let newPosition = clientPosition - diff - sliderRailRef.current.getBoundingClientRect().left;
+    if (isRTL) {
+      newPosition = sliderRailRef.current.getBoundingClientRect().right - clientPosition - diff;
+    } else {
+      newPosition = clientPosition - diff - sliderRailRef.current.getBoundingClientRect().left;
+    }
 
     const end = sliderRailRef.current.offsetWidth - thumbRef.current.offsetWidth;
 
@@ -288,21 +313,43 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (!areCustomStepsContinuous && customSteps) {
       const stepIndex = customSteps.findIndex((stepObj) => stepObj.value === localValue);
       if (key === 'ArrowRight') {
-        if (stepIndex + 1 < customSteps.length) {
-          {
-            newValue = customSteps[stepIndex + 1].value;
+        if (isRTL) {
+          if (stepIndex - 1 >= 0) {
+            newValue = customSteps[stepIndex - 1].value;
+          }
+        } else {
+          if (stepIndex + 1 < customSteps.length) {
+            {
+              newValue = customSteps[stepIndex + 1].value;
+            }
           }
         }
       } else if (key === 'ArrowLeft') {
-        if (stepIndex - 1 >= 0) {
-          newValue = customSteps[stepIndex - 1].value;
+        if (isRTL) {
+          if (stepIndex + 1 < customSteps.length) {
+            {
+              newValue = customSteps[stepIndex + 1].value;
+            }
+          }
+        } else {
+          if (stepIndex - 1 >= 0) {
+            newValue = customSteps[stepIndex - 1].value;
+          }
         }
       }
     } else {
       if (key === 'ArrowRight') {
-        newValue = localValue + step <= max ? localValue + step : max;
+        if (isRTL) {
+          newValue = localValue - step >= min ? localValue - step : min;
+        } else {
+          newValue = localValue + step <= max ? localValue + step : max;
+        }
       } else if (key === 'ArrowLeft') {
-        newValue = localValue - step >= min ? localValue - step : min;
+        if (isRTL) {
+          newValue = localValue + step <= max ? localValue + step : max;
+        } else {
+          newValue = localValue - step >= min ? localValue - step : min;
+        }
       }
     }
 
@@ -347,8 +394,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     for (let i = min; i <= max; i = i + step) {
       const stepValue = getStepValue(i, min, max);
 
-      // If we boundaries but not ticks just generate the needed steps
-      // so that we don't pullute them DOM with empty divs
+      // If boundaries but not ticks just generate the needed steps
+      // so that we don't pollute them DOM with empty divs
       if (!showTicks && showBoundaries && i !== min && i !== max) {
         continue;
       }
@@ -394,7 +441,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       style={{ ...style, ...inputStyle }}
       {...props}
     >
-      {leftActions && <div className={css(styles.sliderActions)}>{leftActions}</div>}
+      {(leftActions || startActions) && <div className={css(styles.sliderActions)}>{leftActions || startActions}</div>}
       <div className={css(styles.sliderMain)}>
         <div className={css(styles.sliderRail)} ref={sliderRailRef} onClick={!isDisabled ? onSliderRailClick : null}>
           <div className={css(styles.sliderRailTrack)} />
@@ -434,8 +481,10 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
           <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
         )}
       </div>
-      {isInputVisible && inputPosition === 'right' && <div className={css(styles.sliderValue)}>{displayInput()}</div>}
-      {rightActions && <div className={css(styles.sliderActions)}>{rightActions}</div>}
+      {isInputVisible && (inputPosition === 'right' || inputPosition === 'end') && (
+        <div className={css(styles.sliderValue)}>{displayInput()}</div>
+      )}
+      {(rightActions || endActions) && <div className={css(styles.sliderActions)}>{rightActions || endActions}</div>}
     </div>
   );
 };

package/src/components/Slider/_tests_/Slider.test.tsx

@@ -46,7 +46,7 @@ describe('slider', () => {
 
   test('renders slider with input', () => {
     const { asFragment } = render(
-      <Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="right" />
+      <Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="end" />
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -62,8 +62,8 @@ describe('slider', () => {
     const { asFragment } = render(
       <Slider
         value={50}
-        leftActions={<Button variant="plain" aria-label="Minus" />}
-        rightActions={<Button variant="plain" aria-label="Plus" />}
+        startActions={<Button variant="plain" aria-label="Minus" />}
+        endActions={<Button variant="plain" aria-label="Plus" />}
       />
     );
     expect(asFragment()).toMatchSnapshot();

package/src/components/Slider/examples/SliderActions.tsx

@@ -65,12 +65,12 @@ export const SliderActions: React.FunctionComponent = () => {
       <Slider
         value={value1}
         onChange={onChange1}
-        leftActions={
+        startActions={
           <Button variant="plain" aria-label="Minus" onClick={onMinusClick}>
             <MinusIcon />
           </Button>
         }
-        rightActions={
+        endActions={
           <Button variant="plain" aria-label="Plus" onClick={onPlusClick}>
             <PlusIcon />
           </Button>
@@ -85,7 +85,7 @@ export const SliderActions: React.FunctionComponent = () => {
         inputLabel="%"
         isInputVisible
         isDisabled={isDisabled}
-        rightActions={buildAction(isDisabled)}
+        endActions={buildAction(isDisabled)}
       />
     </>
   );

package/src/components/Tabs/examples/Tabs.md

@@ -28,7 +28,7 @@ You can adjust a tab in the following ways:
 - To disable a tab, but keep it perceivable to assistive technology users, use the `isAriaDisabled` property. If a disabled tab has a tooltip, use this property instead of `isDisabled`.
 - To add a tooltip to an aria-disabled tab, use the `tooltip` property. 
 
-Most tab variations can either be 'default' or 'boxed': 
+Tabs can be styled as 'default' or 'boxed': 
 
 - Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab. 
 - Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `isBox` property to true.
@@ -207,8 +207,6 @@ The tab its content should only be mounted when the tab is visible.
 
 To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`. 
 
-Aria labels may be controlled manually by passing the `closeButtonAriaLabel` property to a `<Tab>` and the `addButtonAriaLabel` property to `<Tabs>`.
-
 ```ts file="./TabsDynamic.tsx"
 ```
 

package/src/components/Toolbar/examples/Toolbar.md

@@ -14,12 +14,6 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 ## Examples
 
-### TEST - remove before merging
-
-```ts file="./Test.tsx"
-
-```
-
 ### Toolbar items
 
 A toolbar can contain multiple toolbar items, like filters and buttons.