@patternfly/react-core 4.201.1 → 4.202.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.201.1",
+  "version": "4.202.1",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.52.1",
-    "@patternfly/react-styles": "^4.51.1",
-    "@patternfly/react-tokens": "^4.53.1",
+    "@patternfly/react-icons": "^4.53.1",
+    "@patternfly/react-styles": "^4.52.1",
+    "@patternfly/react-tokens": "^4.54.1",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.183.2",
+    "@patternfly/patternfly": "4.184.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "ebbf69c3f929c9aabaebe49726deb1c72130951e"
+  "gitHead": "fc88ddd5f942598163a34ad5a8df86215cc7a6a5"
 }

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -12,203 +12,10 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ### Basic
 
-```js
-import React from 'react';
-import { CodeBlock, CodeBlockAction, CodeBlockCode, ClipboardCopyButton, Button } from '@patternfly/react-core';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-
-class BasicCodeBlock extends React.Component {
-  constructor(props) {
-    super(props);
-    this.timer = null;
-
-    this.state = {
-      copied: false
-    };
-
-    this.clipboardCopyFunc = (event, text) => {
-      const clipboard = event.currentTarget.parentElement;
-      const el = document.createElement('textarea');
-      el.value = text.toString();
-      clipboard.appendChild(el);
-      el.select();
-      document.execCommand('copy');
-      clipboard.removeChild(el);
-    };
-
-    this.onClick = (event, text) => {
-      if (this.timer) {
-        window.clearTimeout(this.timer);
-        this.setState({ copied: false });
-      }
-      this.clipboardCopyFunc(event, text);
-      this.setState({ copied: true }, () => {
-        this.timer = window.setTimeout(() => {
-          this.setState({ copied: false });
-          this.timer = null;
-        }, 1000);
-      });
-    };
-  }
-
-  render() {
-    const code = `apiVersion: helm.openshift.io/v1beta1/
-kind: HelmChartRepository
-metadata:
-name: azure-sample-repo
-spec:
-connectionConfig:
-url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
-
-    const actions = (
-      <React.Fragment>
-        <CodeBlockAction>
-          <ClipboardCopyButton
-            id="copy-button"
-            textId="code-content"
-            aria-label="Copy to clipboard"
-            onClick={e => this.onClick(e, code)}
-            exitDelay={600}
-            maxWidth="110px"
-            variant="plain"
-          >
-            {this.state.copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
-          </ClipboardCopyButton>
-        </CodeBlockAction>
-        <CodeBlockAction>
-          <Button variant="plain" aria-label="Play icon">
-            <PlayIcon />
-          </Button>
-        </CodeBlockAction>
-      </React.Fragment>
-    );
-
-    return (
-      <CodeBlock actions={actions}>
-        <CodeBlockCode id="code-content">{code}</CodeBlockCode>
-      </CodeBlock>
-    );
-  }
-}
+```ts file="./CodeBlockBasic.tsx"
 ```
 
 ### Expandable
 
-```js
-import React from 'react';
-import {
-  CodeBlock,
-  CodeBlockAction,
-  CodeBlockCode,
-  ClipboardCopyButton,
-  ExpandableSection,
-  ExpandableSectionToggle,
-  Button
-} from '@patternfly/react-core';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-
-class BasicCodeBlock extends React.Component {
-  constructor(props) {
-    super(props);
-    this.timer = null;
-
-    this.state = {
-      isExpanded: false,
-      copied: false
-    };
-
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-
-    this.clipboardCopyFunc = (event, text) => {
-      const clipboard = event.currentTarget.parentElement;
-      const el = document.createElement('textarea');
-      el.value = text.toString();
-      clipboard.appendChild(el);
-      el.select();
-      document.execCommand('copy');
-      clipboard.removeChild(el);
-    };
-
-    this.onClick = (event, text) => {
-      if (this.timer) {
-        window.clearTimeout(this.timer);
-        this.setState({ copied: false });
-      }
-      this.clipboardCopyFunc(event, text);
-      this.setState({ copied: true }, () => {
-        this.timer = window.setTimeout(() => {
-          this.setState({ copied: false });
-          this.timer = null;
-        }, 1000);
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-
-    const copyBlock = `apiVersion: helm.openshift.io/v1beta1/
-kind: HelmChartRepository
-metadata:
-name: azure-sample-repo
-spec:
-connectionConfig:
-url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
-
-    const code = `apiVersion: helm.openshift.io/v1beta1/
-kind: HelmChartRepository
-metadata:
-name: azure-sample-repo`;
-    const expandedCode = `spec:
-connectionConfig:
-url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
-
-    const actions = (
-      <React.Fragment>
-        <CodeBlockAction>
-          <ClipboardCopyButton
-            id="copy-button"
-            textId="code-content"
-            aria-label="Copy to clipboard"
-            onClick={e => this.onClick(e, copyBlock)}
-            exitDelay={600}
-            maxWidth="110px"
-            variant="plain"
-          >
-            {this.state.copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
-          </ClipboardCopyButton>
-        </CodeBlockAction>
-        <CodeBlockAction>
-          <Button variant="plain" aria-label="Play icon">
-            <PlayIcon />
-          </Button>
-        </CodeBlockAction>
-      </React.Fragment>
-    );
-    return (
-      <CodeBlock actions={actions}>
-        <CodeBlockCode>
-          {code}
-          <ExpandableSection isExpanded={isExpanded} isDetached contentId="code-block-expand">
-            {expandedCode}
-          </ExpandableSection>
-        </CodeBlockCode>
-        <ExpandableSectionToggle
-          isExpanded={isExpanded}
-          onToggle={this.onToggle}
-          contentId="code-block-expand"
-          direction="up"
-        >
-          {isExpanded ? 'Show Less' : 'Show More'}
-        </ExpandableSectionToggle>
-      </CodeBlock>
-    );
-  }
-}
+```ts file="./CodeBlockExpandable.tsx"
 ```

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { CodeBlock, CodeBlockAction, CodeBlockCode, ClipboardCopyButton, Button } from '@patternfly/react-core';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+
+export const BasicCodeBlock: React.FunctionComponent = () => {
+  const [copied, setCopied] = React.useState(false);
+
+  const clipboardCopyFunc = (event, text) => {
+    const clipboard = event.currentTarget.parentElement;
+    const el = document.createElement('textarea');
+    el.value = text.toString();
+    clipboard.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    clipboard.removeChild(el);
+  };
+
+  const onClick = (event, text) => {
+    clipboardCopyFunc(event, text);
+    setCopied(true);
+  };
+
+  const code = `apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+name: azure-sample-repo0oooo00ooo
+spec:
+connectionConfig:
+url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
+
+  const actions = (
+    <React.Fragment>
+      <CodeBlockAction>
+        <ClipboardCopyButton
+          id="copy-button"
+          textId="code-content"
+          aria-label="Copy to clipboard"
+          onClick={e => onClick(e, code)}
+          exitDelay={600}
+          maxWidth="110px"
+          variant="plain"
+        >
+          {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
+        </ClipboardCopyButton>
+      </CodeBlockAction>
+      <CodeBlockAction>
+        <Button variant="plain" aria-label="Play icon">
+          <PlayIcon />
+        </Button>
+      </CodeBlockAction>
+    </React.Fragment>
+  );
+
+  return (
+    <CodeBlock actions={actions}>
+      <CodeBlockCode id="code-content">{code}</CodeBlockCode>
+    </CodeBlock>
+  );
+};

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  ClipboardCopyButton,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  Button
+} from '@patternfly/react-core';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+
+export const ExpandableCodeBlock: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
+
+  const onToggle = isExpanded => {
+    setIsExpanded(isExpanded);
+  };
+
+  const clipboardCopyFunc = (event, text) => {
+    const clipboard = event.currentTarget.parentElement;
+    const el = document.createElement('textarea');
+    el.value = text.toString();
+    clipboard.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    clipboard.removeChild(el);
+  };
+
+  const onClick = (event, text) => {
+    clipboardCopyFunc(event, text);
+    setCopied(true);
+  };
+
+  const copyBlock = `apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+name: azure-sample-repo
+spec:
+connectionConfig:
+url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
+
+  const code = `apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+name: azure-sample-repo`;
+  const expandedCode = `spec:
+connectionConfig:
+url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
+
+  const actions = (
+    <React.Fragment>
+      <CodeBlockAction>
+        <ClipboardCopyButton
+          id="copy-button"
+          textId="code-content"
+          aria-label="Copy to clipboard"
+          onClick={e => onClick(e, copyBlock)}
+          exitDelay={600}
+          maxWidth="110px"
+          variant="plain"
+        >
+          {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
+        </ClipboardCopyButton>
+      </CodeBlockAction>
+      <CodeBlockAction>
+        <Button variant="plain" aria-label="Play icon">
+          <PlayIcon />
+        </Button>
+      </CodeBlockAction>
+    </React.Fragment>
+  );
+
+  return (
+    <CodeBlock actions={actions}>
+      <CodeBlockCode>
+        {code}
+        <ExpandableSection isExpanded={isExpanded} isDetached contentId="code-block-expand">
+          {expandedCode}
+        </ExpandableSection>
+      </CodeBlockCode>
+      <ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId="code-block-expand" direction="up">
+        {isExpanded ? 'Show Less' : 'Show More'}
+      </ExpandableSectionToggle>
+    </CodeBlock>
+  );
+};

package/src/components/DescriptionList/DescriptionList.tsx

@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 import { formatBreakpointMods } from '../../helpers';
 
-export interface AutoFitModifiers {
+export interface BreakpointModifiers {
   default?: string;
   md?: string;
   lg?: string;
@@ -30,7 +30,7 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
   isFluid?: boolean;
   /** Sets the the default placement of description list groups to fill from top to bottom. */
   isFillColumns?: boolean;
-  /** Sets the number of columns on the description list */
+  /** Sets the number of columns on the description list at various breakpoints */
   columnModifier?: {
     default?: '1Col' | '2Col' | '3Col';
     sm?: '1Col' | '2Col' | '3Col';
@@ -39,7 +39,7 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: '1Col' | '2Col' | '3Col';
     '2xl'?: '1Col' | '2Col' | '3Col';
   };
-  /** Indicates how the menu will align at screen size breakpoints. Default alignment is set via the position property. */
+  /** Indicates how the menu will align at various breakpoints. */
   orientation?: {
     sm?: 'vertical' | 'horizontal';
     md?: 'vertical' | 'horizontal';
@@ -47,6 +47,7 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: 'vertical' | 'horizontal';
     '2xl'?: 'vertical' | 'horizontal';
   };
+  /** Sets the minimum column size for the auto-fit (isAutoFit) layout at various breakpoints. */
   autoFitMinModifier?: {
     default?: string;
     sm?: string;
@@ -55,11 +56,19 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: string;
     '2xl'?: string;
   };
+  /** Sets the horizontal description list's term column width at various breakpoints. */
+  horizontalTermWidthModifier?: {
+    default?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    '2xl'?: string;
+  };
 }
 
-const setAutoFitMinModifiers = (autoFitMinModifier: AutoFitModifiers) => {
-  const prefix = '--pf-c-description-list--GridTemplateColumns--min';
-  const mods = autoFitMinModifier as Partial<{ [k: string]: string }>;
+const setBreakpointModifiers = (prefix: string, modifiers: BreakpointModifiers) => {
+  const mods = modifiers as Partial<{ [k: string]: string }>;
   return Object.keys(mods || {}).reduce(
     (acc, curr) =>
       curr === 'default' ? { ...acc, [prefix]: mods[curr] } : { ...acc, [`${prefix}-on-${curr}`]: mods[curr] },
@@ -79,33 +88,45 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   isFillColumns,
   columnModifier,
   autoFitMinModifier,
+  horizontalTermWidthModifier,
   orientation,
   style,
   ...props
-}: DescriptionListProps) => (
-  <dl
-    className={css(
-      styles.descriptionList,
-      (isHorizontal || isFluid) && styles.modifiers.horizontal,
-      isAutoColumnWidths && styles.modifiers.autoColumnWidths,
-      isAutoFit && styles.modifiers.autoFit,
-      formatBreakpointMods(columnModifier, styles),
-      formatBreakpointMods(orientation, styles),
-      isInlineGrid && styles.modifiers.inlineGrid,
-      isCompact && styles.modifiers.compact,
-      isFluid && styles.modifiers.fluid,
-      isFillColumns && styles.modifiers.fillColumns,
-      className
-    )}
-    style={
-      autoFitMinModifier || style
-        ? { ...(isAutoFit ? setAutoFitMinModifiers(autoFitMinModifier) : {}), ...style }
-        : undefined
-    }
-    {...props}
-  >
-    {children}
-  </dl>
-);
+}: DescriptionListProps) => {
+  if (isAutoFit && autoFitMinModifier) {
+    style = {
+      ...style,
+      ...setBreakpointModifiers('--pf-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
+    };
+  }
+  if (isHorizontal && horizontalTermWidthModifier) {
+    style = {
+      ...style,
+      ...setBreakpointModifiers('--pf-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier)
+    };
+  }
+
+  return (
+    <dl
+      className={css(
+        styles.descriptionList,
+        (isHorizontal || isFluid) && styles.modifiers.horizontal,
+        isAutoColumnWidths && styles.modifiers.autoColumnWidths,
+        isAutoFit && styles.modifiers.autoFit,
+        formatBreakpointMods(columnModifier, styles),
+        formatBreakpointMods(orientation, styles),
+        isInlineGrid && styles.modifiers.inlineGrid,
+        isCompact && styles.modifiers.compact,
+        isFluid && styles.modifiers.fluid,
+        isFillColumns && styles.modifiers.fillColumns,
+        className
+      )}
+      style={style}
+      {...props}
+    >
+      {children}
+    </dl>
+  );
+};
 
 DescriptionList.displayName = 'DescriptionList';

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -239,34 +239,93 @@ import {
 } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
-<DescriptionList isHorizontal>
-  <DescriptionListGroup>
-    <DescriptionListTerm>Name</DescriptionListTerm>
-    <DescriptionListDescription>Example</DescriptionListDescription>
-  </DescriptionListGroup>
-  <DescriptionListGroup>
-    <DescriptionListTerm>Namespace</DescriptionListTerm>
-    <DescriptionListDescription>
-      <a href="#">mary-test</a>
-    </DescriptionListDescription>
-  </DescriptionListGroup>
-  <DescriptionListGroup>
-    <DescriptionListTerm>Labels</DescriptionListTerm>
-    <DescriptionListDescription>example</DescriptionListDescription>
-  </DescriptionListGroup>
-  <DescriptionListGroup>
-    <DescriptionListTerm>Pod selector</DescriptionListTerm>
-    <DescriptionListDescription>
-      <Button variant="link" isInline icon={<PlusCircleIcon />}>
-        app=MyApp
-      </Button>
-    </DescriptionListDescription>
-  </DescriptionListGroup>
-  <DescriptionListGroup>
-    <DescriptionListTerm>Annotation</DescriptionListTerm>
-    <DescriptionListDescription>2 Annotations</DescriptionListDescription>
-  </DescriptionListGroup>
-</DescriptionList>;
+const DescriptionListHorizontal = () => {
+  return (
+    <DescriptionList isHorizontal>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Name</DescriptionListTerm>
+        <DescriptionListDescription>Example</DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Namespace</DescriptionListTerm>
+        <DescriptionListDescription>
+          <a href="#">mary-test</a>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Labels</DescriptionListTerm>
+        <DescriptionListDescription>example</DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Pod selector</DescriptionListTerm>
+        <DescriptionListDescription>
+          <Button variant="link" isInline icon={<PlusCircleIcon />}>
+            app=MyApp
+          </Button>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Annotation</DescriptionListTerm>
+        <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+      </DescriptionListGroup>
+    </DescriptionList>
+  )
+}
+```
+
+### Horizontal using custom term width modifier
+
+```js
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListText,
+  DescriptionListGroup,
+  DescriptionListDescription,
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+const DescriptionListHorizontalTermWidthModifier = () => {
+  return (
+    <DescriptionList isHorizontal horizontalTermWidthModifier={{
+      default: '12ch',
+      sm: '15ch',
+      md: '20ch',
+      lg: '28ch',
+      xl: '30ch',
+      '2xl': '35ch'
+      }}>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Name longer than the default term width</DescriptionListTerm>
+        <DescriptionListDescription>Example</DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Namespace</DescriptionListTerm>
+        <DescriptionListDescription>
+          <a href="#">mary-test</a>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Labels</DescriptionListTerm>
+        <DescriptionListDescription>example</DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Pod selector</DescriptionListTerm>
+        <DescriptionListDescription>
+          <Button variant="link" isInline icon={<PlusCircleIcon />}>
+            app=MyApp
+          </Button>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Annotation</DescriptionListTerm>
+        <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+      </DescriptionListGroup>
+    </DescriptionList>
+  )
+}
 ```
 
 ### Horizontal 2 col

package/src/components/Menu/MenuContent.tsx

@@ -21,8 +21,33 @@ export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React
   const menuContentRef = React.createRef<HTMLDivElement>();
   const refCallback = (el: HTMLElement, menuId: string, onGetMenuHeight: (menuId: string, height: number) => void) => {
     if (el) {
-      onGetMenuHeight && onGetMenuHeight(menuId, el.clientHeight);
-      getHeight && getHeight(el.clientHeight.toString());
+      let clientHeight = el.clientHeight;
+
+      // if this menu is a submenu, we need to account for the root menu list's padding and root menu content's border.
+      let rootMenuList = null;
+      let parentEl = el.closest(`.${styles.menuList}`);
+      while (parentEl !== null && parentEl.nodeType === 1) {
+        if (parentEl.classList.contains(styles.menuList)) {
+          rootMenuList = parentEl;
+        }
+        parentEl = parentEl.parentElement;
+      }
+
+      if (rootMenuList) {
+        const rootMenuListStyles = getComputedStyle(rootMenuList);
+        const rootMenuListPaddingOffset =
+          parseFloat(rootMenuListStyles.getPropertyValue('padding-top').replace(/px/g, '')) +
+          parseFloat(rootMenuListStyles.getPropertyValue('padding-bottom').replace(/px/g, '')) +
+          parseFloat(
+            getComputedStyle(rootMenuList.parentElement)
+              .getPropertyValue('border-bottom-width')
+              .replace(/px/g, '')
+          );
+        clientHeight = clientHeight + rootMenuListPaddingOffset;
+      }
+
+      onGetMenuHeight && onGetMenuHeight(menuId, clientHeight);
+      getHeight && getHeight(clientHeight.toString());
     }
     return ref || menuContentRef;
   };