@patternfly/react-core 6.0.0-alpha.7 → 6.0.0-alpha.70

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/CalendarMonth/CalendarMonth.tsx

@@ -83,9 +83,6 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   validators?: ((date: Date) => boolean)[];
 }
 
-// Must be numeric given current header design
-const yearFormat = (date: Date) => date.getFullYear();
-
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
   const defaultDate = new Date(year, month);
 
@@ -164,6 +161,13 @@ export const CalendarMonth = ({
   };
   const initialDate = getInitialDate();
   const [focusedDate, setFocusedDate] = React.useState(initialDate);
+
+  // Must be numeric given current header design
+  const yearFormat = (date: Date) => date.getFullYear();
+  //
+  const yearFormatted = yearFormat(focusedDate);
+  const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
+
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
@@ -191,6 +195,7 @@ export const CalendarMonth = ({
     setHoveredDate(newDate);
     setShouldFocus(false);
     onMonthChange(ev, newDate);
+    setYearInput(yearFormat(newDate).toString());
   };
 
   const onKeyDown = (ev: React.KeyboardEvent<HTMLTableSectionElement>) => {
@@ -217,6 +222,34 @@ export const CalendarMonth = ({
   const changeMonth = (newMonth: number, newYear?: number) =>
     new Date(newYear ?? focusedDate.getFullYear(), newMonth, 1);
 
+  const MIN_YEAR = 1900;
+  const MAX_YEAR = 2100;
+
+  const handleYearInputChange = (event: React.FormEvent<HTMLInputElement>, yearStr: string) => {
+    if (!/^\d{0,4}$/.test(yearStr)) {
+      return;
+    }
+
+    setYearInput(yearStr);
+
+    if (yearStr.length === 4) {
+      const yearNum = Number(yearStr);
+
+      if (yearNum >= MIN_YEAR && yearNum <= MAX_YEAR) {
+        const newDate = changeYear(yearNum);
+        setFocusedDate(newDate);
+        setHoveredDate(newDate);
+        setShouldFocus(false);
+
+        // We need to manually focus the year input in FireFox when the scroll buttons are clicked, as FireFox doesn't place focus automatically
+        (event.target as HTMLElement).focus();
+        onMonthChange(event, newDate);
+      } else {
+        setYearInput(yearFormatted.toString());
+      }
+    }
+  };
+
   const addMonth = (toAdd: -1 | 1) => {
     let newMonth = focusedDate.getMonth() + toAdd;
     let newYear = focusedDate.getFullYear();
@@ -254,12 +287,11 @@ export const CalendarMonth = ({
   }
   const isHoveredDateValid = isValidated(hoveredDate);
   const monthFormatted = monthFormat(focusedDate);
-  const yearFormatted = yearFormat(focusedDate);
 
   const calendarToRender = (
     <div className={css(styles.calendarMonth, className)} {...props}>
       <div className={styles.calendarMonthHeader}>
-        <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.prevMonth)}>
+        <div className={css(styles.calendarMonthHeaderNavControl, 'pf-m-prev-month')}>
           <Button
             variant="plain"
             aria-label={prevMonthAriaLabel}
@@ -321,20 +353,13 @@ export const CalendarMonth = ({
               <TextInput
                 aria-label={yearInputAriaLabel}
                 type="number"
-                value={yearFormatted}
-                onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
-                  const newDate = changeYear(Number(year));
-                  setFocusedDate(newDate);
-                  setHoveredDate(newDate);
-                  setShouldFocus(false);
-                  focusRef.current?.blur(); // will unfocus a date when changing year via up/down arrows
-                  onMonthChange(ev, newDate);
-                }}
+                value={yearInput}
+                onChange={handleYearInputChange}
               />
             </div>
           </InputGroupItem>
         </InputGroup>
-        <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.nextMonth)}>
+        <div className={css(styles.calendarMonthHeaderNavControl, 'pf-m-next-month')}>
           <Button
             variant="plain"
             aria-label={nextMonthAriaLabel}
@@ -349,7 +374,7 @@ export const CalendarMonth = ({
           <tr>
             {calendar[0].map(({ date }, index) => (
               <th key={index} className={styles.calendarMonthDay} scope="col">
-                <span className="pf-v5-screen-reader">{longWeekdayFormat(date)}</span>
+                <span className="pf-v6-screen-reader">{longWeekdayFormat(date)}</span>
                 <span aria-hidden>{weekdayFormat(date)}</span>
               </th>
             ))}

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -11,13 +11,15 @@ propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ### Selectable date
 
 ```ts file="./CalendarMonthSelectableDate.tsx"
+
 ```
 
 ### Date range
 
 In this example, there are 2 dates selected: a range start date (via the `rangeStart` prop) and a range end date (via the `date` prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the `validators` prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date.
 
-For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](https://www.patternfly.org/v4/components/date-picker/react-demos).
+For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](/components/date-and-time/date-picker/react-demos).
 
 ```ts file="./CalendarMonthDateRange.tsx"
+
 ```

package/src/components/Card/Card.tsx

@@ -14,22 +14,20 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   component?: keyof JSX.IntrinsicElements;
   /** Modifies the card to include compact styling. Should not be used with isLarge. */
   isCompact?: boolean;
-  /** Modifies the card to include selectable styling */
+  /** Flag indicating that the card is selectable. */
   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 */
+  /** Flag indicating that the card is clickable and contains some action that triggers on click. */
   isClickable?: boolean;
-  /** Modifies a clickable or selectable card to have disabled styling. */
+  /** Flag indicating whether a card that is either selectable only or both clickable and selectable is
+   * currently selected and has selected styling.
+   */
+  isSelected?: boolean;
+  /** Flag indicating whether a card that is either only clickable or that is both clickable and selectable
+   * is currently clicked and has clicked styling.
+   */
+  isClicked?: boolean;
+  /** Flag indicating that a clickable or selectable card is disabled. */
   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 +36,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,26 +46,21 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
 
 interface CardContextProps {
   cardId: string;
-  registerTitleId: (id: string) => void;
   isExpanded: boolean;
   isClickable: boolean;
   isSelectable: boolean;
+  isSelected: boolean;
+  isClicked: 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,
+  isSelected: false,
+  isClicked: false,
   isDisabled: false
 });
 
@@ -84,26 +73,20 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isSelectable = false,
   isClickable = false,
   isDisabled = false,
-  isSelectableRaised = false,
   isSelected = false,
-  isDisabledRaised = false,
-  isFlat = false,
+  isClicked = 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,14 +95,12 @@ 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);
+      return css(
+        styles.modifiers.selectable,
+        styles.modifiers.clickable,
+        (isSelected || isClicked) && styles.modifiers.current
+      );
     }
 
     if (isSelectable) {
@@ -127,74 +108,38 @@ export const Card: React.FunctionComponent<CardProps> = ({
     }
 
     if (isClickable) {
-      return css(styles.modifiers.clickable, isSelected && styles.modifiers.selected);
+      return css(styles.modifiers.clickable, isClicked && styles.modifiers.current);
     }
 
     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
+        isSelected,
+        isClicked,
+        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

@@ -44,7 +44,9 @@ export interface CardHeaderSelectableActionsObject {
   isExternalLink?: boolean;
   /** Name for the input element of a clickable or selectable card. */
   name?: string;
-  /** Flag indicating whether the selectable card input is checked */
+  /** @deprecated Flag indicating whether the selectable card input is checked. We recommend using
+   * the isSelected prop on the card component instead.
+   */
   isChecked?: boolean;
 }
 
@@ -79,8 +81,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, isSelected, isClicked, isDisabled: isCardDisabled }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -99,10 +100,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(
           `${
@@ -112,19 +110,17 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
       }
 
       const handleActionClick = (event: React.FormEvent<HTMLInputElement> | React.MouseEvent) => {
-        if (isClickable) {
-          if (selectableActions?.onClickAction) {
-            selectableActions.onClickAction(event);
-          } else if (selectableActions?.to) {
-            window.open(selectableActions.to, selectableActions.isExternalLink ? '_blank' : '_self');
-          }
+        if (selectableActions?.onClickAction) {
+          selectableActions.onClickAction(event);
+        } else if (selectableActions?.to) {
+          window.open(selectableActions.to, selectableActions.isExternalLink ? '_blank' : '_self');
         }
       };
 
       const getClickableSelectableProps = () => {
         const baseProps = {
           className: 'pf-m-standalone',
-          inputClassName: isClickable && !isSelectable && 'pf-v5-screen-reader',
+          inputClassName: isClickable && !isSelectable && 'pf-v6-screen-reader',
           label: <></>,
           'aria-label': selectableActions.selectableActionAriaLabel,
           'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
@@ -132,12 +128,17 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           name: selectableActions.name,
           isDisabled: isCardDisabled
         };
+        const isSelectableInputChecked = selectableActions.isChecked ?? isSelected;
 
         if (isClickable && !isSelectable) {
-          return { ...baseProps, onClick: handleActionClick };
+          return {
+            ...baseProps,
+            onClick: handleActionClick,
+            isChecked: isClicked
+          };
         }
         if (isSelectable) {
-          return { ...baseProps, onChange: selectableActions.onChange, isChecked: selectableActions.isChecked };
+          return { ...baseProps, onChange: selectableActions.onChange, isChecked: isSelectableInputChecked };
         }
 
         return baseProps;

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}>