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

package/src/components/Label/examples/LabelOutline.tsx

@@ -2,229 +2,283 @@ import React from 'react';
 import { Label } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
-export const LabelOutline: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Label variant="outline">Grey</Label>{' '}
-    <Label variant="outline" icon={<InfoCircleIcon />}>
-      Grey icon
-    </Label>{' '}
-    <Label variant="outline" onClose={() => Function.prototype}>
-      Grey removable
-    </Label>{' '}
-    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Grey icon removable
-    </Label>{' '}
-    <Label variant="outline" href="#outline">
-      Grey link
-    </Label>{' '}
-    <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
-      Grey link removable
-    </Label>
-    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-      Grey label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="blue">
-      Blue
-    </Label>{' '}
-    <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
-      Blue icon
-    </Label>{' '}
-    <Label variant="outline" color="blue" onClose={() => Function.prototype}>
-      Blue removable
-    </Label>{' '}
-    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Blue icon removable
-    </Label>{' '}
-    <Label variant="outline" color="blue" href="#outline">
-      Blue link
-    </Label>{' '}
-    <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
-      Blue link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="blue"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Blue label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="green">
-      Green
-    </Label>{' '}
-    <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
-      Green icon
-    </Label>{' '}
-    <Label variant="outline" color="green" onClose={() => Function.prototype}>
-      Green removable
-    </Label>{' '}
-    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Green icon removable
-    </Label>{' '}
-    <Label variant="outline" color="green" href="#outline">
-      Green link
-    </Label>{' '}
-    <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
-      Green link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="green"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Green label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="orange">
-      Orange
-    </Label>{' '}
-    <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
-      Orange icon
-    </Label>{' '}
-    <Label variant="outline" color="orange" onClose={() => Function.prototype}>
-      Orange removable
-    </Label>{' '}
-    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Orange icon removable
-    </Label>{' '}
-    <Label variant="outline" color="orange" href="#outline">
-      Orange link
-    </Label>{' '}
-    <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
-      Orange link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="orange"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Orange label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="red">
-      Red
-    </Label>{' '}
-    <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
-      Red icon
-    </Label>{' '}
-    <Label variant="outline" color="red" onClose={() => Function.prototype}>
-      Red removable
-    </Label>{' '}
-    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Red icon removable
-    </Label>{' '}
-    <Label variant="outline" color="red" href="#outline">
-      Red link
-    </Label>{' '}
-    <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
-      Red link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="red"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Red label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="purple">
-      Purple
-    </Label>{' '}
-    <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
-      Purple icon
-    </Label>{' '}
-    <Label variant="outline" color="purple" onClose={() => Function.prototype}>
-      Purple removable
-    </Label>{' '}
-    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Purple icon removable
-    </Label>{' '}
-    <Label variant="outline" color="purple" href="#outline">
-      Purple link
-    </Label>{' '}
-    <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
-      Purple link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="purple"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Purple label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="cyan">
-      Cyan
-    </Label>{' '}
-    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
-      Cyan icon
-    </Label>{' '}
-    <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
-      Cyan removable
-    </Label>{' '}
-    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Cyan icon removable
-    </Label>{' '}
-    <Label variant="outline" color="cyan" href="#outline">
-      Cyan link
-    </Label>{' '}
-    <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
-      Cyan link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="cyan"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Cyan label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="gold">
-      Gold
-    </Label>{' '}
-    <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
-      Gold icon
-    </Label>{' '}
-    <Label variant="outline" color="gold" onClose={() => Function.prototype}>
-      Gold removable
-    </Label>{' '}
-    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Gold icon removable
-    </Label>{' '}
-    <Label variant="outline" color="gold" href="#outline">
-      Gold link
-    </Label>{' '}
-    <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
-      Gold link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="gold"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Gold label with icon that overflows
-    </Label>
-  </React.Fragment>
-);
+export const LabelOutline: React.FunctionComponent = () => {
+  const logColor = (color: string) => {
+    // eslint-disable-next-line no-console
+    console.log(color, 'label clicked');
+  };
+  return (
+    <React.Fragment>
+      <Label variant="outline">Grey</Label>{' '}
+      <Label variant="outline" icon={<InfoCircleIcon />}>
+        Grey icon
+      </Label>{' '}
+      <Label variant="outline" onClose={() => Function.prototype}>
+        Grey removable
+      </Label>{' '}
+      <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Grey icon removable
+      </Label>{' '}
+      <Label variant="outline" href="#outline">
+        Grey link
+      </Label>{' '}
+      <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
+        Grey link removable
+      </Label>
+      <Label variant="outline" onClick={() => logColor('grey')}>
+        Grey clickable
+      </Label>{' '}
+      <Label variant="outline" onClick={() => logColor('grey')} onClose={() => Function.prototype}>
+        Grey clickable removable
+      </Label>
+      <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Grey label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="blue">
+        Blue
+      </Label>{' '}
+      <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
+        Blue icon
+      </Label>{' '}
+      <Label variant="outline" color="blue" onClose={() => Function.prototype}>
+        Blue removable
+      </Label>{' '}
+      <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Blue icon removable
+      </Label>{' '}
+      <Label variant="outline" color="blue" href="#outline">
+        Blue link
+      </Label>{' '}
+      <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
+        Blue link removable
+      </Label>
+      <Label variant="outline" color="blue" onClick={() => logColor('blue')}>
+        Blue clickable
+      </Label>{' '}
+      <Label variant="outline" color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
+        Blue clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="blue"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Blue label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="green">
+        Green
+      </Label>{' '}
+      <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
+        Green icon
+      </Label>{' '}
+      <Label variant="outline" color="green" onClose={() => Function.prototype}>
+        Green removable
+      </Label>{' '}
+      <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Green icon removable
+      </Label>{' '}
+      <Label variant="outline" color="green" href="#outline">
+        Green link
+      </Label>{' '}
+      <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
+        Green link removable
+      </Label>
+      <Label variant="outline" color="green" onClick={() => logColor('green')}>
+        Green clickable
+      </Label>{' '}
+      <Label variant="outline" color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
+        Green clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="green"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Green label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="orange">
+        Orange
+      </Label>{' '}
+      <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
+        Orange icon
+      </Label>{' '}
+      <Label variant="outline" color="orange" onClose={() => Function.prototype}>
+        Orange removable
+      </Label>{' '}
+      <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Orange icon removable
+      </Label>{' '}
+      <Label variant="outline" color="orange" href="#outline">
+        Orange link
+      </Label>{' '}
+      <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
+        Orange link removable
+      </Label>
+      <Label variant="outline" color="orange" onClick={() => logColor('orange')}>
+        Orange clickable
+      </Label>{' '}
+      <Label variant="outline" color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
+        Orange clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="orange"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Orange label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="red">
+        Red
+      </Label>{' '}
+      <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
+        Red icon
+      </Label>{' '}
+      <Label variant="outline" color="red" onClose={() => Function.prototype}>
+        Red removable
+      </Label>{' '}
+      <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Red icon removable
+      </Label>{' '}
+      <Label variant="outline" color="red" href="#outline">
+        Red link
+      </Label>{' '}
+      <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
+        Red link removable
+      </Label>
+      <Label variant="outline" color="red" onClick={() => logColor('red')}>
+        Red clickable
+      </Label>{' '}
+      <Label variant="outline" color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
+        Red clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="red"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Red label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="purple">
+        Purple
+      </Label>{' '}
+      <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
+        Purple icon
+      </Label>{' '}
+      <Label variant="outline" color="purple" onClose={() => Function.prototype}>
+        Purple removable
+      </Label>{' '}
+      <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Purple icon removable
+      </Label>{' '}
+      <Label variant="outline" color="purple" href="#outline">
+        Purple link
+      </Label>{' '}
+      <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
+        Purple link removable
+      </Label>
+      <Label variant="outline" color="purple" onClick={() => logColor('purple')}>
+        Purple clickable
+      </Label>{' '}
+      <Label variant="outline" color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
+        Purple clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="purple"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Purple label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="cyan">
+        Cyan
+      </Label>{' '}
+      <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
+        Cyan icon
+      </Label>{' '}
+      <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
+        Cyan removable
+      </Label>{' '}
+      <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Cyan icon removable
+      </Label>{' '}
+      <Label variant="outline" color="cyan" href="#outline">
+        Cyan link
+      </Label>{' '}
+      <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
+        Cyan link removable
+      </Label>
+      <Label variant="outline" color="cyan" onClick={() => logColor('cyan')}>
+        Cyan clickable
+      </Label>{' '}
+      <Label variant="outline" color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
+        Cyan clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="cyan"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Cyan label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="gold">
+        Gold
+      </Label>{' '}
+      <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
+        Gold icon
+      </Label>{' '}
+      <Label variant="outline" color="gold" onClose={() => Function.prototype}>
+        Gold removable
+      </Label>{' '}
+      <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Gold icon removable
+      </Label>{' '}
+      <Label variant="outline" color="gold" href="#outline">
+        Gold link
+      </Label>{' '}
+      <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
+        Gold link removable
+      </Label>
+      <Label variant="outline" color="gold" onClick={() => logColor('gold')}>
+        Gold clickable
+      </Label>{' '}
+      <Label variant="outline" color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
+        Gold clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="gold"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Gold label with icon that overflows
+      </Label>
+    </React.Fragment>
+  );
+};

package/src/components/Nav/NavList.tsx

@@ -14,10 +14,14 @@ export interface NavListProps
   children?: React.ReactNode;
   /** Additional classes added to the list */
   className?: string;
-  /** Aria-label for the left scroll button */
+  /** @deprecated Please use backScrollAriaLabel. Aria-label for the left scroll button */
   ariaLeftScroll?: string;
-  /** Aria-label for the right scroll button */
+  /** @deprecated Please use forwardScrollAriaLabel. Aria-label for the right scroll button */
   ariaRightScroll?: string;
+  /** Aria-label for the back scroll button */
+  backScrollAriaLabel?: string;
+  /** Aria-label for the forward scroll button */
+  forwardScrollAriaLabel?: string;
 }
 
 class NavList extends React.Component<NavListProps> {
@@ -26,8 +30,11 @@ class NavList extends React.Component<NavListProps> {
   context!: React.ContextType<typeof NavContext>;
   static defaultProps: NavListProps = {
     ariaLeftScroll: 'Scroll left',
-    ariaRightScroll: 'Scroll right'
+    backScrollAriaLabel: 'Scroll back',
+    ariaRightScroll: 'Scroll right',
+    forwardScrollAriaLabel: 'Scroll foward'
   };
+  private direction = 'ltr';
 
   state = {
     scrollViewAtStart: false,
@@ -51,7 +58,7 @@ class NavList extends React.Component<NavListProps> {
     }
   };
 
-  scrollLeft = () => {
+  scrollBack = () => {
     // find first Element that is fully in view on the left, then scroll to the element before it
     const container = this.navList.current;
     if (container) {
@@ -65,13 +72,19 @@ class NavList extends React.Component<NavListProps> {
         }
       }
       if (lastElementOutOfView) {
-        container.scrollLeft -= lastElementOutOfView.scrollWidth;
+        if (this.direction === 'ltr') {
+          // LTR scrolls left to go back
+          container.scrollLeft -= lastElementOutOfView.scrollWidth;
+        } else {
+          // RTL scrolls right to go back
+          container.scrollLeft += lastElementOutOfView.scrollWidth;
+        }
       }
       this.handleScrollButtons();
     }
   };
 
-  scrollRight = () => {
+  scrollForward = () => {
     // find last Element that is fully in view on the right, then scroll to the element after it
     const container = this.navList.current;
     if (container) {
@@ -85,7 +98,13 @@ class NavList extends React.Component<NavListProps> {
         }
       }
       if (firstElementOutOfView) {
-        container.scrollLeft += firstElementOutOfView.scrollWidth;
+        if (this.direction === 'ltr') {
+          // LTR scrolls right to go forward
+          container.scrollLeft += firstElementOutOfView.scrollWidth;
+        } else {
+          // RTL scrolls left to go forward
+          container.scrollLeft -= firstElementOutOfView.scrollWidth;
+        }
       }
       this.handleScrollButtons();
     }
@@ -93,6 +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.handleScrollButtons();
   }
 
@@ -100,8 +120,20 @@ class NavList extends React.Component<NavListProps> {
     this.observer();
   }
 
+  componentDidUpdate() {
+    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
+  }
+
   render() {
-    const { children, className, ariaLeftScroll, ariaRightScroll, ...props } = this.props;
+    const {
+      children,
+      className,
+      ariaLeftScroll,
+      ariaRightScroll,
+      backScrollAriaLabel,
+      forwardScrollAriaLabel,
+      ...props
+    } = this.props;
     const { scrollViewAtStart, scrollViewAtEnd } = this.state;
 
     return (
@@ -113,8 +145,8 @@ class NavList extends React.Component<NavListProps> {
                 {isHorizontal && (
                   <button
                     className={css(styles.navScrollButton)}
-                    aria-label={ariaLeftScroll}
-                    onClick={this.scrollLeft}
+                    aria-label={backScrollAriaLabel || ariaLeftScroll}
+                    onClick={this.scrollBack}
                     disabled={scrollViewAtStart}
                     tabIndex={isSidebarOpen ? null : -1}
                   >
@@ -133,8 +165,8 @@ class NavList extends React.Component<NavListProps> {
                 {isHorizontal && (
                   <button
                     className={css(styles.navScrollButton)}
-                    aria-label={ariaRightScroll}
-                    onClick={this.scrollRight}
+                    aria-label={forwardScrollAriaLabel || ariaRightScroll}
+                    onClick={this.scrollForward}
                     disabled={scrollViewAtEnd}
                     tabIndex={isSidebarOpen ? null : -1}
                   >