@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.30

package/src/components/Button/examples/ButtonProgress.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Flex } from '@patternfly/react-core';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface LoadingPropsType {
@@ -36,19 +36,24 @@ export const ButtonProgress: React.FunctionComponent = () => {
   uploadingProps.isLoading = isUploading;
 
   return (
-    <React.Fragment>
-      <Button
-        variant="primary"
-        id="primary-loading-button"
-        onClick={() => setIsPrimaryLoading(!isPrimaryLoading)}
-        {...primaryLoadingProps}
-      >
-        {isPrimaryLoading ? 'Click to stop loading' : 'Click to start loading'}
-      </Button>{' '}
-      <Button variant="secondary" onClick={() => setIsSecondaryLoading(!isSecondaryLoading)} {...secondaryLoadingProps}>
-        {isSecondaryLoading ? 'Click to stop loading' : 'Click to start loading'}
-      </Button>{' '}
-      <br />
+    <>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button
+          variant="primary"
+          id="primary-loading-button"
+          onClick={() => setIsPrimaryLoading(!isPrimaryLoading)}
+          {...primaryLoadingProps}
+        >
+          {isPrimaryLoading ? 'Click to stop loading' : 'Click to start loading'}
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => setIsSecondaryLoading(!isSecondaryLoading)}
+          {...secondaryLoadingProps}
+        >
+          {isSecondaryLoading ? 'Click to stop loading' : 'Click to start loading'}
+        </Button>
+      </Flex>
       <br />
       <Button
         variant="plain"
@@ -56,12 +61,12 @@ export const ButtonProgress: React.FunctionComponent = () => {
         onClick={() => setIsUploading(!isUploading)}
         icon={<UploadIcon />}
         {...uploadingProps}
-      />{' '}
+      />
       <br />
       <br />
       <Button variant="link" isInline onClick={() => setIsInlineLoading(!isInlineLoading)} {...inlineLoadingProps}>
         {isInlineLoading ? 'Pause loading logs' : 'Resume loading logs'}
-      </Button>{' '}
-    </React.Fragment>
+      </Button>
+    </>
   );
 };

package/src/components/Button/examples/ButtonSmall.tsx

@@ -1,24 +1,22 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Flex } from '@patternfly/react-core';
 
 export const ButtonSmall: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Flex columnGap={{ default: 'columnGapSm' }}>
     <Button variant="primary" size="sm">
       Primary
-    </Button>{' '}
+    </Button>
     <Button variant="secondary" size="sm">
       Secondary
-    </Button>{' '}
+    </Button>
     <Button variant="tertiary" size="sm">
       Tertiary
-    </Button>{' '}
+    </Button>
     <Button variant="danger" size="sm">
       Danger
-    </Button>{' '}
+    </Button>
     <Button variant="warning" size="sm">
       Warning
     </Button>
-    <br />
-    <br />
-  </React.Fragment>
+  </Flex>
 );

package/src/components/Button/examples/ButtonStateful.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const ButtonStateful: React.FunctionComponent = () => (
+  <Flex>
+    <div>
+      <div>
+        <strong>Read</strong>
+      </div>
+      <Button variant="stateful" state="read" icon={<BellIcon />}>
+        10 <span className="pf-v5-screen-reader">items</span>
+      </Button>
+    </div>
+    <div>
+      <div>
+        <strong>Unread</strong>
+      </div>
+      <Button variant="stateful" state="unread" icon={<BellIcon />}>
+        10 <span className="pf-v5-screen-reader">unread items</span>
+      </Button>
+    </div>
+    <div>
+      <div>
+        <strong>Attention</strong>
+      </div>
+      <Button variant="stateful" state="attention" icon={<BellIcon />}>
+        10 <span className="pf-v5-screen-reader">unread items, needs attention</span>
+      </Button>
+    </div>
+  </Flex>
+);

package/src/components/Button/examples/ButtonTypes.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Flex } from '@patternfly/react-core';
 
 export const ButtonTypes: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Button type="submit">Submit</Button> <Button type="reset">Reset</Button> <Button>Default</Button>
-  </React.Fragment>
+  <Flex columnGap={{ default: 'columnGapSm' }}>
+    <Button type="submit">Submit</Button>
+    <Button type="reset">Reset</Button>
+    <Button>Default</Button>
+  </Flex>
 );

package/src/components/Button/examples/ButtonVariations.tsx

@@ -1,54 +1,69 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Flex } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Button variant="primary" ouiaId="Primary">
-      Primary
-    </Button>{' '}
-    <Button variant="secondary" ouiaId="Secondary">
-      Secondary
-    </Button>{' '}
-    <Button variant="secondary" ouiaId="DangerSecondary" isDanger>
-      Danger Secondary
-    </Button>{' '}
-    <Button variant="tertiary" ouiaId="Tertiary">
-      Tertiary
-    </Button>{' '}
-    <Button variant="danger" ouiaId="Danger">
-      Danger
-    </Button>{' '}
-    <Button variant="warning" ouiaId="Warning">
-      Warning
-    </Button>
+  <>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="primary" ouiaId="Primary">
+        Primary
+      </Button>
+      <Button variant="secondary" ouiaId="Secondary">
+        Secondary
+      </Button>
+      <Button variant="secondary" ouiaId="DangerSecondary" isDanger>
+        Danger Secondary
+      </Button>
+      <Button variant="tertiary" ouiaId="Tertiary">
+        Tertiary
+      </Button>
+      <Button variant="danger" ouiaId="Danger">
+        Danger
+      </Button>
+      <Button variant="warning" ouiaId="Warning">
+        Warning
+      </Button>
+    </Flex>
     <br />
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="link" icon={<PlusCircleIcon />}>
+        Link
+      </Button>
+      <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
+        Link
+      </Button>
+      <Button variant="link" isInline>
+        Inline link
+      </Button>
+      <Button variant="link" isDanger>
+        Danger link
+      </Button>
+      <Button variant="plain" aria-label="Action">
+        <TimesIcon />
+      </Button>
+    </Flex>
     <br />
-    <Button variant="link" icon={<PlusCircleIcon />}>
-      Link
-    </Button>{' '}
-    <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
-      Link
-    </Button>{' '}
-    <Button variant="link" isInline>
-      Inline link
-    </Button>{' '}
-    <Button variant="link" isDanger>
-      Danger link
-    </Button>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="control">Control</Button>
+      <Button variant="control" aria-label="Copy">
+        <CopyIcon />
+      </Button>
+    </Flex>
     <br />
-    <br />
-    <Button variant="plain" aria-label="Action">
-      <TimesIcon />
-    </Button>
-    <br />
-    <br />
-    <Button variant="control">Control</Button>{' '}
-    <Button variant="control" aria-label="Copy">
-      <CopyIcon />
-    </Button>
-  </React.Fragment>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="stateful" icon={<BellIcon />} state="read">
+        Stateful read
+      </Button>
+      <Button variant="stateful" icon={<BellIcon />} state="unread">
+        Stateful unread
+      </Button>
+      <Button variant="stateful" icon={<BellIcon />} state="attention">
+        Stateful attention
+      </Button>
+    </Flex>
+  </>
 );

package/src/components/Button/examples/ButtonWithCount.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BadgeCountObject, Button } from '@patternfly/react-core';
+import { BadgeCountObject, Button, Flex } from '@patternfly/react-core';
 
 export const ButtonWithCount: React.FunctionComponent = () => {
   const badgeCountObjectNotRead: BadgeCountObject = {
@@ -15,75 +15,82 @@ export const ButtonWithCount: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
-      <p>Unread:</p>
-      <Button variant="primary" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
+    <>
+      <div>Unread:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="control" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="link" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+      </Flex>
       <br />
-      <p>Unread disabled:</p>
-      <Button variant="primary" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
+      <div>Unread disabled:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="control" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="link" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+      </Flex>
       <br />
-      <p>Read:</p>
-      <Button variant="primary" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
+      <div>Read:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="control" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="link" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+      </Flex>
       <br />
-      <p>Read disabled:</p>
-      <Button variant="primary" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <br />
-    </React.Fragment>
+      <div>Read disabled:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="control" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="link" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+      </Flex>
+    </>
   );
 };

package/src/components/Card/Card.tsx

@@ -87,9 +87,11 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isSelectableRaised = false,
   isSelected = false,
   isDisabledRaised = false,
-  isFlat = false,
+  // TODO: Update with issue #9991
+  // isFlat = false,
   isExpanded = false,
-  isRounded = false,
+  // TODO: Update with issue #9991
+  // isRounded = false,
   isLarge = false,
   isFullHeight = false,
   isPlain = false,
@@ -112,12 +114,13 @@ export const Card: React.FunctionComponent<CardProps> = ({
   }
 
   const getSelectableModifiers = () => {
-    if (isDisabledRaised) {
-      return css(styles.modifiers.nonSelectableRaised);
-    }
-    if (isSelectableRaised) {
-      return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
-    }
+    // TODO: Update with issue #9991
+    // if (isDisabledRaised) {
+    //   return css(styles.modifiers.nonSelectableRaised);
+    // }
+    // if (isSelectableRaised) {
+    //   return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
+    // }
     if (isSelectable && isClickable) {
       return css(styles.modifiers.selectable, styles.modifiers.clickable, isSelected && styles.modifiers.current);
     }
@@ -185,8 +188,9 @@ export const Card: React.FunctionComponent<CardProps> = ({
           styles.card,
           isCompact && styles.modifiers.compact,
           isExpanded && styles.modifiers.expanded,
-          isFlat && styles.modifiers.flat,
-          isRounded && styles.modifiers.rounded,
+          // TODO: Update with issue #9991
+          // isFlat && styles.modifiers.flat,
+          // isRounded && styles.modifiers.rounded,
           isLarge && styles.modifiers.displayLg,
           isFullHeight && styles.modifiers.fullHeight,
           isPlain && styles.modifiers.plain,

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

@@ -69,12 +69,14 @@ describe('Card', () => {
     expect(card.getAttribute('tabindex')).toBeNull();
   });
 
-  test('card with isDisabledRaised applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isDisabledRaised applied', () => {
     render(<Card isDisabledRaised>disabled raised card</Card>);
     expect(screen.getByText('disabled raised card')).toHaveClass('pf-m-non-selectable-raised');
   });
 
-  test('card with isSelectableRaised applied - not change', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isSelectableRaised applied - not change', () => {
     render(<Card isSelectableRaised>raised selectable card</Card>);
 
     const card = screen.getByText('raised selectable card');
@@ -82,7 +84,8 @@ describe('Card', () => {
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
-  test('card with isSelectableRaised and isSelected applied ', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isSelectableRaised and isSelected applied ', () => {
     render(
       <Card isSelected isSelectableRaised>
         raised selected card
@@ -95,7 +98,8 @@ describe('Card', () => {
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
-  test('card with isFlat applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isFlat applied', () => {
     render(<Card isFlat>flat card</Card>);
     expect(screen.getByText('flat card')).toHaveClass('pf-m-flat');
   });
@@ -105,7 +109,8 @@ describe('Card', () => {
     expect(screen.getByText('expanded card')).toHaveClass('pf-m-expanded');
   });
 
-  test('card with isRounded applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isRounded applied', () => {
     render(<Card isRounded>rounded card</Card>);
     expect(screen.getByText('rounded card')).toHaveClass('pf-m-rounded');
   });

package/src/components/Card/examples/CardWithModifiers.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 
 export const CardWithModifiers: React.FunctionComponent = () => {
-  const mods = ['isCompact', 'isFlat', 'isRounded', 'isLarge', 'isFullHeight', 'isPlain'];
+  // TODO: Update with issue #9991 removed isFlat and isRounded
+  const mods = ['isCompact', 'isLarge', 'isFullHeight', 'isPlain'];
   const [modifiers, setModifiers] = React.useState({});
 
   return (