@patternfly/react-core 4.228.1 → 4.229.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.228.1",
+  "version": "4.229.0",
   "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,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.79.1",
-    "@patternfly/react-styles": "^4.78.1",
-    "@patternfly/react-tokens": "^4.80.1",
+    "@patternfly/react-icons": "^4.80.0",
+    "@patternfly/react-styles": "^4.79.0",
+    "@patternfly/react-tokens": "^4.81.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "f6c791bad9fa1bc817102fea17d5ba7243cd6121"
+  "gitHead": "6f68aa3d05370ed0e088e00b2a780f2babe64dd6"
 }

package/src/components/DescriptionList/DescriptionList.tsx

@@ -30,6 +30,8 @@ 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 display size of the descriptions in the description list.*/
+  displaySize?: 'lg' | '2xl';
   /** Sets the number of columns on the description list at various breakpoints */
   columnModifier?: {
     default?: '1Col' | '2Col' | '3Col';
@@ -56,6 +58,8 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: string;
     '2xl'?: string;
   };
+  /** Sets the description list's term column width.*/
+  termWidth?: string;
   /** Sets the horizontal description list's term column width at various breakpoints. */
   horizontalTermWidthModifier?: {
     default?: string;
@@ -86,8 +90,10 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   isCompact,
   isFluid,
   isFillColumns,
+  displaySize,
   columnModifier,
   autoFitMinModifier,
+  termWidth,
   horizontalTermWidthModifier,
   orientation,
   style,
@@ -99,6 +105,12 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
       ...setBreakpointModifiers('--pf-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
     };
   }
+  if (termWidth) {
+    style = {
+      ...style,
+      ...{ '--pf-c-description-list__term--width': termWidth }
+    };
+  }
   if (isHorizontal && horizontalTermWidthModifier) {
     style = {
       ...style,
@@ -119,6 +131,8 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
         isCompact && styles.modifiers.compact,
         isFluid && styles.modifiers.fluid,
         isFillColumns && styles.modifiers.fillColumns,
+        displaySize === 'lg' && styles.modifiers.displayLg,
+        displaySize === '2xl' && styles.modifiers.display_2xl,
         className
       )}
       style={style}

package/src/components/DescriptionList/DescriptionListGroup.tsx

@@ -18,4 +18,5 @@ export const DescriptionListGroup: React.FunctionComponent<DescriptionListGroupP
     {children}
   </div>
 );
+
 DescriptionListGroup.displayName = 'DescriptionListGroup';

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

@@ -11,10 +11,11 @@ propComponents:
     'DescriptionListTermHelpText',
     'DescriptionListTermHelpTextButton',
     'Popover',
+    'Card'
   ]
 ---
 
-import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover } from '@patternfly/react-core';
+import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover, Checkbox, Card } 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';
@@ -84,6 +85,11 @@ import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
 ```ts file='./DescriptionListColumnFill.tsx'
 ```
 
+### Display size
+
+```ts file='./DescriptionListWithDisplaySize.tsx'
+```
+
 ## Responsive column definitions
 
 ### Default responsive columns
@@ -120,6 +126,30 @@ import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
 ```ts file='./DescriptionListDefaultInlineGrid.tsx'
 ```
 
+## Card variants
+
+A [card component](/components/card) can be used in place of a description list group.
+
+### Description list with card
+
+```ts file='./DescriptionListWithCard.tsx'
+```
+
+### Description list with display size and card
+
+```ts file='./DescriptionListDisplaySizeAndCard.tsx'
+```
+
+### Display size with card, three column on large breakpoint
+
+```ts file='./DescriptionListDisplaySizeAndCardThreeColumn.tsx'
+```
+
+### Display size with card, horizontal, modified term width
+
+```ts file='./DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx'
+```
+
 ## Auto fit
 
 ### Auto-fit basic

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Card,
+  Checkbox
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListDisplaySizeAndCard: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
+
+  const toggleDisplaySize = (checked: boolean) => {
+    setDisplaySize(checked ? '2xl' : 'lg');
+    setIsChecked(checked);
+  };
+
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          label="displaySize 2xl"
+          isChecked={isChecked}
+          onChange={toggleDisplaySize}
+          aria-label="set display size 2xl"
+          id="toggle-display-size-with-card"
+          name="toggle-display-size-with-card"
+        />
+      </div>
+      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }}>
+        <Card component="div">
+          <DescriptionListTerm>Name</DescriptionListTerm>
+          <DescriptionListDescription>Example</DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Namespace</DescriptionListTerm>
+          <DescriptionListDescription>
+            <a href="#">mary-test</a>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Labels</DescriptionListTerm>
+          <DescriptionListDescription>example</DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Pod selector</DescriptionListTerm>
+          <DescriptionListDescription>
+            <Button variant="link" isInline icon={<PlusCircleIcon />}>
+              app=MyApp
+            </Button>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Annotation</DescriptionListTerm>
+          <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+        </Card>
+      </DescriptionList>
+    </>
+  );
+};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListDisplaySizeAndCardHorizontalTermWidth: React.FunctionComponent = () => (
+  <DescriptionList displaySize="lg" isHorizontal columnModifier={{ lg: '2Col' }} termWidth="10ch">
+    <Card component="div">
+      <DescriptionListTerm>Name</DescriptionListTerm>
+      <DescriptionListDescription>Example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Namespace</DescriptionListTerm>
+      <DescriptionListDescription>
+        <a href="#">mary-test</a>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Labels</DescriptionListTerm>
+      <DescriptionListDescription>example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Pod selector</DescriptionListTerm>
+      <DescriptionListDescription>
+        <Button variant="link" isInline icon={<PlusCircleIcon />}>
+          app=MyApp
+        </Button>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Annotation</DescriptionListTerm>
+      <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+    </Card>
+  </DescriptionList>
+);

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListDisplayLgAndCardThreeColumn: React.FunctionComponent = () => (
+  <DescriptionList displaySize="lg" columnModifier={{ lg: '3Col' }}>
+    <Card component="div">
+      <DescriptionListTerm>Name</DescriptionListTerm>
+      <DescriptionListDescription>Example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Namespace</DescriptionListTerm>
+      <DescriptionListDescription>
+        <a href="#">mary-test</a>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Labels</DescriptionListTerm>
+      <DescriptionListDescription>example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Pod selector</DescriptionListTerm>
+      <DescriptionListDescription>
+        <Button variant="link" isInline icon={<PlusCircleIcon />}>
+          app=MyApp
+        </Button>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Annotation</DescriptionListTerm>
+      <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+    </Card>
+  </DescriptionList>
+);

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Card,
+  Checkbox
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListWithCard: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [isSelectable, setSelectable] = React.useState<boolean>(false);
+
+  const toggleSelectable = (checked: boolean) => {
+    setSelectable(checked ? true : false);
+    setIsChecked(checked);
+  };
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          label="isSelectable"
+          isChecked={isChecked}
+          onChange={toggleSelectable}
+          aria-label="set isSelectable"
+          id="toggle-isSelectable"
+          name="toggle-isSelectable"
+        />
+      </div>
+      <DescriptionList columnModifier={{ lg: '2Col' }}>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Name</DescriptionListTerm>
+          <DescriptionListDescription>Example</DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Namespace</DescriptionListTerm>
+          <DescriptionListDescription>
+            <a href="#">mary-test</a>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Labels</DescriptionListTerm>
+          <DescriptionListDescription>example</DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Pod selector</DescriptionListTerm>
+          <DescriptionListDescription>
+            <Button variant="link" isInline icon={<PlusCircleIcon />}>
+              app=MyApp
+            </Button>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Annotation</DescriptionListTerm>
+          <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+        </Card>
+      </DescriptionList>
+    </>
+  );
+};

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  Checkbox
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListWithDisplaySize: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
+
+  const toggleDisplaySize = (checked: boolean) => {
+    setDisplaySize(checked ? '2xl' : 'lg');
+    setIsChecked(checked);
+  };
+
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          label="displaySize 2xl"
+          isChecked={isChecked}
+          onChange={toggleDisplaySize}
+          aria-label="set display size 2xl"
+          id="toggle-display-size"
+          name="toggle-display-size"
+        />
+      </div>
+      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '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>
+    </>
+  );
+};