@patternfly/react-core 4.202.16 → 4.202.19

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/Divider/examples/Divider.md

@@ -6,96 +6,43 @@ propComponents: ['Divider']
 ---
 
 ## Examples
+
 ### Using hr
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider />
+```ts file='./DividerUsingHr.tsx'
 ```
 
 ### Using li
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core/dist';
-
-<ul>
-  <li>List item one</li>
-  <Divider component="li"/>
-  <li>List item two</li>
-</ul>
+
+```ts file='./DividerUsingLi.tsx'
 ```
 
 ### Using div
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider component="div"/>
+```ts file='./DividerUsingDiv.tsx'
 ```
 
 ### Inset medium
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider inset={{default: 'insetMd'}}/>
+```ts file='./DividerInsetMedium.tsx'
 ```
 
 ### Inset at various breakpoints
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
-
-<Divider
-  inset={{
-    default: 'insetMd',
-    md: 'insetNone',
-    lg: 'inset3xl',
-    xl: 'insetLg'
-  }}
-/>
+
+```ts file='./DividerInsetVariousBreakpoints.tsx'
 ```
 
 ### Vertical in flex layout
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical/>
-  <FlexItem>second item</FlexItem>
-</Flex>
+
+```ts file='./DividerVerticalFlex.tsx'
 ```
 
-### Vertical, inset medium in flex layout
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+### Vertical in flex layout, inset medium
 
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical inset={{default: 'insetMd'}}/>
-  <FlexItem>second item</FlexItem>
-</Flex>
+```ts file='./DividerVerticalFlexInsetMedium.tsx'
 ```
 
-### Vertical, inset at various breakpoints
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical
-    inset={{
-      default: 'insetMd',
-      md: 'insetNone',
-      lg: 'insetSm',
-      xl: 'insetXs'
-    }}
-  />
-  <FlexItem>first item</FlexItem>
-</Flex>
+### Vertical in flex layout, inset at various breakpoints
+
+```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx'
 ```

package/src/components/Divider/examples/DividerInsetMedium.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerInsetMedium: React.FunctionComponent = () => <Divider inset={{ default: 'insetMd' }} />;

package/src/components/Divider/examples/DividerInsetVariousBreakpoints.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerInsetVariousBreakpoints: React.FunctionComponent = () => (
+  <Divider
+    inset={{
+      default: 'insetMd',
+      md: 'insetNone',
+      lg: 'inset3xl',
+      xl: 'insetLg'
+    }}
+  />
+);

package/src/components/Divider/examples/DividerUsingDiv.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerUsingDiv: React.FunctionComponent = () => <Divider component="div" />;

package/src/components/Divider/examples/DividerUsingHr.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerUsingHr: React.FunctionComponent = () => <Divider />;

package/src/components/Divider/examples/DividerUsingLi.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerUsingLi: React.FunctionComponent = () => (
+  <ul>
+    <li>List item one</li>
+    <Divider component="li" />
+    <li>List item two</li>
+  </ul>
+);

package/src/components/Divider/examples/DividerVerticalFlex.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerVerticalFlex: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider isVertical />
+    <FlexItem>second item</FlexItem>
+  </Flex>
+);

package/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerVerticalFlexInsetMedium: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider isVertical inset={{ default: 'insetMd' }} />
+    <FlexItem>second item</FlexItem>
+  </Flex>
+);

package/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider
+      isVertical
+      inset={{
+        default: 'insetMd',
+        md: 'insetNone',
+        lg: 'insetSm',
+        xl: 'insetXs'
+      }}
+    />
+    <FlexItem>first item</FlexItem>
+  </Flex>
+);

package/src/components/FormSelect/__tests__/FormSelect.test.tsx

@@ -4,7 +4,6 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
-import { Form } from '../../Form';
 import { FormSelect } from '../FormSelect';
 import { FormSelectOption } from '../FormSelectOption';
 import { FormSelectOptionGroup } from '../FormSelectOptionGroup';