@patternfly/react-core 4.202.18 → 4.202.21

package/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListHorizontalCustomTermWidth: React.FunctionComponent = () => (
+  <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>
+);

package/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListHorizontalResponsiveColumns: React.FunctionComponent = () => (
+  <DescriptionList isHorizontal columnModifier={{ lg: '2Col', xl: '3Col' }}>
+    <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>
+);

package/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListHorizontalThreeColLg: React.FunctionComponent = () => (
+  <DescriptionList isHorizontal columnModifier={{ lg: '3Col' }}>
+    <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>
+);

package/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListHorizontalTwoCol: React.FunctionComponent = () => (
+  <DescriptionList isHorizontal columnModifier={{ default: '2Col' }}>
+    <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>
+);

package/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
+import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
+
+export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
+  <DescriptionList>
+    <DescriptionListGroup>
+      <DescriptionListTerm icon={<CubeIcon />}>Name</DescriptionListTerm>
+      <DescriptionListDescription>Example</DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm icon={<BookIcon />}>Namespace</DescriptionListTerm>
+      <DescriptionListDescription>
+        <a href="#">mary-test</a>
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm icon={<KeyIcon />}>Labels</DescriptionListTerm>
+      <DescriptionListDescription>example</DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm icon={<GlobeIcon />}>Pod selector</DescriptionListTerm>
+      <DescriptionListDescription>
+        <Button variant="link" isInline icon={<PlusCircleIcon />}>
+          app=MyApp
+        </Button>
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm icon={<FlagIcon />}>Annotation</DescriptionListTerm>
+      <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+    </DescriptionListGroup>
+  </DescriptionList>
+);

package/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListResponsiveHoriVertGroup: React.FunctionComponent = () => (
+  <DescriptionList
+    isHorizontal
+    orientation={{
+      md: 'vertical',
+      lg: 'horizontal',
+      xl: 'vertical',
+      '2xl': 'horizontal'
+    }}
+  >
+    <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>
+);

package/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  DescriptionListTermHelpText,
+  DescriptionListTermHelpTextButton,
+  Popover
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListWithTermHelpText: React.FunctionComponent = () => (
+  <DescriptionList>
+    <DescriptionListGroup>
+      <DescriptionListTermHelpText>
+        <Popover headerContent={<div>Name</div>} bodyContent={<div>Additional name info</div>}>
+          <DescriptionListTermHelpTextButton> Name </DescriptionListTermHelpTextButton>
+        </Popover>
+      </DescriptionListTermHelpText>
+      <DescriptionListDescription>Example</DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTermHelpText>
+        <Popover headerContent={<div>Namespace</div>} bodyContent={<div>Additional namespace info</div>}>
+          <DescriptionListTermHelpTextButton> Namespace </DescriptionListTermHelpTextButton>
+        </Popover>
+      </DescriptionListTermHelpText>
+      <DescriptionListDescription>
+        <a href="#">mary-test</a>
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTermHelpText>
+        <Popover headerContent={<div>Labels</div>} bodyContent={<div>Additional labels info</div>}>
+          <DescriptionListTermHelpTextButton> Labels </DescriptionListTermHelpTextButton>
+        </Popover>
+      </DescriptionListTermHelpText>
+      <DescriptionListDescription>example</DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTermHelpText>
+        <Popover headerContent={<div>Pod selector</div>} bodyContent={<div>Additional pod selector info</div>}>
+          <DescriptionListTermHelpTextButton> Pod selector </DescriptionListTermHelpTextButton>
+        </Popover>
+      </DescriptionListTermHelpText>
+      <DescriptionListDescription>
+        <Button variant="link" isInline icon={<PlusCircleIcon />}>
+          app=MyApp
+        </Button>
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTermHelpText>
+        <Popover headerContent={<div>Annotation</div>} bodyContent={<div>Additional annotation info</div>}>
+          <DescriptionListTermHelpTextButton> Annotation </DescriptionListTermHelpTextButton>
+        </Popover>
+      </DescriptionListTermHelpText>
+      <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+    </DescriptionListGroup>
+  </DescriptionList>
+);

package/src/components/NumberInput/NumberInput.tsx

@@ -20,6 +20,8 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   onMinus?: (event: React.MouseEvent, name?: string) => void;
   /** Callback for the text input changing */
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
+  /** Callback function when text input is blurred (focus leaves) */
+  onBlur?: (event?: any) => void;
   /** Callback for the plus button */
   onPlus?: (event: React.MouseEvent, name?: string) => void;
   /** Adds the given unit to the number input */
@@ -66,6 +68,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   isDisabled = false,
   onMinus = () => {},
   onChange,
+  onBlur,
   onPlus = () => {},
   unit,
   unitPosition = 'after',
@@ -116,6 +119,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           aria-label={inputAriaLabel}
           {...(isDisabled && { disabled: isDisabled })}
           {...(onChange && { onChange })}
+          {...(onBlur && { onBlur })}
           {...(!onChange && { readOnly: true })}
           {...inputProps}
           onKeyDown={keyDownHandler}

package/src/components/NumberInput/examples/NumberInput.md

@@ -447,6 +447,13 @@ class CustomStepNumberInput extends React.Component {
     };
 
     this.onChange = event => {
+      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
+      this.setState({
+        value: newValue
+      });
+    };
+
+    this.onBlur = event => {
       const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
       this.setState({
         value: newValue > this.maxValue ? this.maxValue : newValue < this.minValue ? this.minValue : newValue
@@ -463,6 +470,7 @@ class CustomStepNumberInput extends React.Component {
         max={this.maxValue}
         onMinus={this.stepper(-3)}
         onChange={this.onChange}
+        onBlur={this.onBlur}
         onPlus={this.stepper(3)}
         inputName="input"
         inputAriaLabel="number input"