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

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

@@ -16,20 +16,12 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isCompact?: boolean;
   /** Modifies the card to include selectable styling */
   isSelectable?: boolean;
-  /** @deprecated Specifies the card is selectable, and applies raised styling on hover and select */
-  isSelectableRaised?: boolean;
   /** Modifies the card to include selected styling */
   isSelected?: boolean;
   /** Modifies the card to include clickable styling */
   isClickable?: boolean;
   /** Modifies a clickable or selectable card to have disabled styling. */
   isDisabled?: boolean;
-  /** @deprecated Modifies a raised selectable card to have disabled styling */
-  isDisabledRaised?: boolean;
-  /** Modifies the card to include flat styling */
-  isFlat?: boolean;
-  /** Modifies the card to include rounded styling */
-  isRounded?: boolean;
   /** Modifies the card to be large. Should not be used with isCompact. */
   isLarge?: boolean;
   /** Cause component to consume the available height of its container */
@@ -38,12 +30,8 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isPlain?: boolean;
   /** Flag indicating if a card is expanded. Modifies the card to be expandable. */
   isExpanded?: boolean;
-  /** @deprecated Flag indicating that the card should render a hidden input to make it selectable */
-  hasSelectableInput?: boolean;
-  /** @deprecated Aria label to apply to the selectable input if one is rendered */
-  selectableInputAriaLabel?: string;
-  /** @deprecated Callback that executes when the selectable input is changed */
-  onSelectableInputChange?: (event: React.FormEvent<HTMLInputElement>, labelledBy: string) => void;
+  /** Card background color variant */
+  variant?: 'default' | 'secondary';
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -52,23 +40,14 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
 
 interface CardContextProps {
   cardId: string;
-  registerTitleId: (id: string) => void;
   isExpanded: boolean;
   isClickable: boolean;
   isSelectable: boolean;
   isDisabled: boolean;
-  // TODO: Remove hasSelectableInput when deprecated prop is removed
-  hasSelectableInput: boolean;
-}
-
-interface AriaProps {
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
 }
 
 export const CardContext = React.createContext<Partial<CardContextProps>>({
   cardId: '',
-  registerTitleId: () => {},
   isExpanded: false,
   isClickable: false,
   isSelectable: false,
@@ -84,26 +63,19 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isSelectable = false,
   isClickable = false,
   isDisabled = false,
-  isSelectableRaised = false,
   isSelected = false,
-  isDisabledRaised = false,
-  isFlat = false,
   isExpanded = false,
-  isRounded = false,
   isLarge = false,
   isFullHeight = false,
   isPlain = false,
+  variant = 'default',
   ouiaId,
   ouiaSafe = true,
-  hasSelectableInput = false,
-  selectableInputAriaLabel,
-  onSelectableInputChange = () => {},
+
   ...props
 }: CardProps) => {
   const Component = component as any;
   const ouiaProps = useOUIAProps(Card.displayName, ouiaId, ouiaSafe);
-  const [titleId, setTitleId] = React.useState('');
-  const [ariaProps, setAriaProps] = React.useState<AriaProps>();
 
   if (isCompact && isLarge) {
     // eslint-disable-next-line no-console
@@ -112,12 +84,6 @@ 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);
-    }
     if (isSelectable && isClickable) {
       return css(styles.modifiers.selectable, styles.modifiers.clickable, isSelected && styles.modifiers.current);
     }
@@ -133,68 +99,30 @@ export const Card: React.FunctionComponent<CardProps> = ({
     return '';
   };
 
-  const containsCardTitleChildRef = React.useRef(false);
-
-  const registerTitleId = (id: string) => {
-    setTitleId(id);
-    containsCardTitleChildRef.current = !!id;
-  };
-
-  React.useEffect(() => {
-    if (selectableInputAriaLabel) {
-      setAriaProps({ 'aria-label': selectableInputAriaLabel });
-    } else if (titleId) {
-      setAriaProps({ 'aria-labelledby': titleId });
-    } else if (hasSelectableInput && !containsCardTitleChildRef.current) {
-      setAriaProps({});
-      // eslint-disable-next-line no-console
-      console.warn(
-        'If no CardTitle component is passed as a child of Card the selectableInputAriaLabel prop must be passed'
-      );
-    }
-  }, [hasSelectableInput, selectableInputAriaLabel, titleId]);
-
   return (
     <CardContext.Provider
       value={{
         cardId: id,
-        registerTitleId,
         isExpanded,
         isClickable,
         isSelectable,
-        isDisabled,
-        // TODO: Remove hasSelectableInput when deprecated prop is removed
-        hasSelectableInput
+        isDisabled
       }}
     >
-      {hasSelectableInput && (
-        <input
-          className="pf-v5-screen-reader"
-          id={`${id}-input`}
-          {...ariaProps}
-          type="checkbox"
-          checked={isSelected}
-          onChange={(event) => onSelectableInputChange(event, id)}
-          disabled={isDisabledRaised}
-          tabIndex={-1}
-        />
-      )}
       <Component
         id={id}
         className={css(
           styles.card,
           isCompact && styles.modifiers.compact,
           isExpanded && styles.modifiers.expanded,
-          isFlat && styles.modifiers.flat,
-          isRounded && styles.modifiers.rounded,
           isLarge && styles.modifiers.displayLg,
           isFullHeight && styles.modifiers.fullHeight,
           isPlain && styles.modifiers.plain,
+          variant === 'secondary' && styles.modifiers.secondary,
           getSelectableModifiers(),
           isDisabled && styles.modifiers.disabled,
           className
         )}
-        tabIndex={isSelectableRaised ? '0' : undefined}
         {...props}
         {...ouiaProps}
       >

package/src/components/Card/CardHeader.tsx

@@ -79,8 +79,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   ...props
 }: CardHeaderProps) => (
   <CardContext.Consumer>
-    {/* TODO: Remove hasSelectableInput when deprecated props are removed */}
-    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled, hasSelectableInput }) => {
+    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -99,10 +98,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
       );
 
       const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
-      // TODO: Remove following variable and update if block when deprecated prop is removed
-      // We don't want to throw a warning for the deprecated card
-      const isDeprecatedSelectableCard = hasSelectableInput;
-      if (actions?.actions && isClickableOrSelectableOnly && !isDeprecatedSelectableCard) {
+      if (actions?.actions && isClickableOrSelectableOnly) {
         // eslint-disable-next-line no-console
         console.warn(
           `${

package/src/components/Card/CardTitle.tsx

@@ -18,16 +18,10 @@ export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
   component = 'div',
   ...props
 }: CardTitleProps) => {
-  const { cardId, registerTitleId } = React.useContext(CardContext);
+  const { cardId } = React.useContext(CardContext);
   const Component = component as any;
   const titleId = cardId ? `${cardId}-title` : '';
 
-  React.useEffect(() => {
-    registerTitleId(titleId);
-
-    return () => registerTitleId('');
-  }, [registerTitleId, titleId]);
-
   return (
     <div className={css(styles.cardTitle)}>
       <Component className={css(styles.cardTitleText, className)} id={titleId || undefined} {...props}>