@patternfly/react-core 5.0.0-alpha.98 → 5.0.0-prerelease.1

package/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx

@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
@@ -33,7 +34,7 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
     setOverflowMessage(getOverflowMessage(newAlerts.length));
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 
@@ -57,15 +58,21 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add toast success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add toast danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add toast info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add toast success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add toast danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add toast info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
         {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (

package/src/components/Alert/examples/alert.css

@@ -1,3 +1,3 @@
-.ws-react-c-alert .pf-c-alert {
+.ws-react-c-alert .pf-v5-c-alert {
   margin-bottom: 21px;
 }

package/src/components/Avatar/examples/Avatar.md

@@ -1,7 +1,7 @@
 ---
 id: Avatar
 section: components
-cssPrefix: pf-c-avatar
+cssPrefix: pf-v5-c-avatar
 propComponents: ['Avatar']
 ---
 

package/src/components/BackToTop/examples/BackToTop.md

@@ -1,7 +1,7 @@
 ---
 id: Back to top
 section: components
-cssPrefix: pf-c-back-to-top
+cssPrefix: pf-v5-c-back-to-top
 propComponents: ['BackToTop']
 ---
 

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

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the pf-c-backdrop', () => {
+test('Renders with the pf-v5-c-backdrop', () => {
   render(<Backdrop>Test</Backdrop>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop');
 });
 
-test('Renders with only the class pf-c-backdrop by default', () => {
+test('Renders with only the class pf-v5-c-backdrop by default', () => {
   render(<Backdrop>Test</Backdrop>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop', { exact: true });
 });

package/src/components/Backdrop/examples/Backdrop.md

@@ -1,7 +1,7 @@
 ---
 id: Backdrop
 section: components
-cssPrefix: pf-c-backdrop
+cssPrefix: pf-v5-c-backdrop
 propComponents: ['Backdrop']
 ---
 

package/src/components/BackgroundImage/BackgroundImage.tsx

@@ -1,14 +1,13 @@
-import * as React from 'react';
+import React from 'react';
+
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
-// eslint-disable-next-line camelcase
-import c_background_image_BackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
 
-export interface BackgroundImageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'src'> {
-  /** Additional classes added to the background image. */
-  className?: string;
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
   /** The URL or file path of the image for the background */
   src: string;
+  /** Additional classes added to the background image. */
+  className?: string;
 }
 
 export const BackgroundImage: React.FunctionComponent<BackgroundImageProps> = ({
@@ -18,13 +17,13 @@ export const BackgroundImage: React.FunctionComponent<BackgroundImageProps> = ({
 }: BackgroundImageProps) => (
   <div
     className={css(styles.backgroundImage, className)}
-    /* eslint-disable camelcase */
-    style={{
-      [c_background_image_BackgroundImage.name as string]: `url(${src})`
-    }}
-    /* eslint-enable camelcase */
+    style={
+      {
+        '--pf-v5-c-background-image--BackgroundImage': `url(${src})`
+      } as React.CSSProperties
+    }
     {...props}
-  ></div>
+  />
 );
 
 BackgroundImage.displayName = 'BackgroundImage';

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

@@ -1,21 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { BackgroundImage } from '../BackgroundImage';
-import * as React from 'react';
-import { render } from '@testing-library/react';
 
-const images = {
-  lg: '/assets/images/pfbg_1200.jpg',
-  sm: '/assets/images/pfbg_768.jpg',
-  sm2x: '/assets/images/pfbg_768@2x.jpg',
-  xs: '/assets/images/pfbg_576.jpg',
-  xs2x: '/assets/images/pfbg_576@2x.jpg'
-};
+test('has default className and src URL applied to style', () => {
+  render(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
 
-test('BackgroundImage', () => {
-  const { asFragment } = render(<BackgroundImage src={images} />);
-  expect(asFragment()).toMatchSnapshot();
+  const backgroundImage = screen.getByTestId('test-id');
+  const backgroundImageStyle = backgroundImage.getAttribute('style');
+
+  expect(backgroundImage).toHaveClass('pf-v5-c-background-image');
+  expect(backgroundImageStyle).toContain('--pf-v5-c-background-image--BackgroundImage');
+  expect(backgroundImageStyle).toContain('/image/url.png');
 });
 
-test('allows passing in a single string as the image src', () => {
-  const { asFragment } = render(<BackgroundImage src={images.lg} />);
-  expect(asFragment()).toMatchSnapshot();
+test('has additional className when one is provided', () => {
+  render(<BackgroundImage src="/image/url.png" className="another-class" data-testid="test-id" />);
+
+  expect(screen.getByTestId('test-id')).toHaveClass('another-class');
 });

package/src/components/BackgroundImage/examples/BackgroundImage.md

@@ -1,7 +1,7 @@
 ---
 id: Background image
 section: components
-cssPrefix: pf-c-background-image
+cssPrefix: pf-v5-c-background-image
 propComponents: ['BackgroundImage']
 ---
 

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

@@ -16,7 +16,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-badge', () => {
+test('Renders with class name pf-v5-c-badge', () => {
   render(<Badge>Test</Badge>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-badge');
 });

package/src/components/Badge/examples/Badge.md

@@ -1,7 +1,7 @@
 ---
 id: Badge
 section: components
-cssPrefix: pf-c-badge
+cssPrefix: pf-v5-c-badge
 propComponents: ['Badge']
 ---
 

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

@@ -16,7 +16,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-banner', () => {
+test('Renders with class name pf-v5-c-banner', () => {
   render(<Banner>Test</Banner>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-banner');
 });
@@ -51,9 +51,9 @@ test('Renders with class name pf-m-blue when "blue" is passed to variant prop',
   expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
 });
 
-test('Does not render pf-u-screen-reader class by default', () => {
+test('Does not render pf-v5-u-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-u-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-u-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

package/src/components/Banner/examples/Banner.md

@@ -1,7 +1,7 @@
 ---
 id: Banner
 section: components
-cssPrefix: pf-c-banner
+cssPrefix: pf-v5-c-banner
 propComponents: ['Banner']
 ---
 

package/src/components/Brand/Brand.tsx

@@ -56,7 +56,7 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   }
 
   return (
-    /** the brand component currently contains no styling the 'pf-c-brand' string will be used for the className */
+    /** the brand component currently contains no styling the 'pf-v5-c-brand' string will be used for the className */
     children !== undefined ? (
       <picture
         className={css(styles.brand, styles.modifiers.picture, className)}

package/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -1,7 +1,7 @@
 ---
 id: Breadcrumb
 section: components
-cssPrefix: pf-c-breadcrumb
+cssPrefix: pf-v5-c-breadcrumb
 propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---

package/src/components/Button/examples/Button.md

@@ -1,7 +1,7 @@
 ---
 id: Button
 section: components
-cssPrefix: pf-c-button
+cssPrefix: pf-v5-c-button
 propComponents: ['Button', 'BadgeCountObject']
 ouia: true
 ---

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -3,7 +3,7 @@ import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { Select, SelectList, SelectOption } from '../Select';
 import { MenuToggle, MenuToggleElement } from '../MenuToggle';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { css } from '@patternfly/react-styles';
@@ -106,7 +106,7 @@ const buildCalendar = (year: number, month: number, weekStart: number, validator
       const date = new Date(firstDayOfWeek);
       week.push({
         date,
-        isValid: validators.every(validator => validator(date))
+        isValid: validators.every((validator) => validator(date))
       });
       firstDayOfWeek.setDate(firstDayOfWeek.getDate() + 1);
     }
@@ -129,10 +129,10 @@ const today = new Date();
 export const CalendarMonth = ({
   date: dateProp,
   locale = undefined,
-  monthFormat = date => date.toLocaleDateString(locale, { month: 'long' }),
-  weekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'narrow' }),
-  longWeekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'long' }),
-  dayFormat = date => date.getDate(),
+  monthFormat = (date) => date.toLocaleDateString(locale, { month: 'long' }),
+  weekdayFormat = (date) => date.toLocaleDateString(locale, { weekday: 'narrow' }),
+  longWeekdayFormat = (date) => date.toLocaleDateString(locale, { weekday: 'long' }),
+  dayFormat = (date) => date.getDate(),
   weekStart = 0, // Use the American Sunday as a default
   onChange = () => {},
   validators = [() => true],
@@ -148,7 +148,9 @@ export const CalendarMonth = ({
   inlineProps,
   ...props
 }: CalendarProps) => {
-  const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(monthNum => new Date(1990, monthNum)).map(monthFormat);
+  const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+    .map((monthNum) => new Date(1990, monthNum))
+    .map(monthFormat);
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
   // eslint-disable-next-line prefer-const
   const [focusedDate, setFocusedDate] = React.useState(() => {
@@ -168,7 +170,7 @@ export const CalendarMonth = ({
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
   const [shouldFocus, setShouldFocus] = React.useState(false);
 
-  const isValidated = (date: Date) => validators.every(validator => validator(date));
+  const isValidated = (date: Date) => validators.every((validator) => validator(date));
   const focusedDateValidated = isValidated(focusedDate);
   useEffect(() => {
     if (isValidDate(dateProp) && !isSameDate(focusedDate, dateProp)) {
@@ -224,12 +226,10 @@ export const CalendarMonth = ({
   const nextMonth = addMonth(1);
   const focusedYear = focusedDate.getFullYear();
   const focusedMonth = focusedDate.getMonth();
-  const calendar = React.useMemo(() => buildCalendar(focusedYear, focusedMonth, weekStart, validators), [
-    focusedYear,
-    focusedMonth,
-    weekStart,
-    validators
-  ]);
+  const calendar = React.useMemo(
+    () => buildCalendar(focusedYear, focusedMonth, weekStart, validators),
+    [focusedYear, focusedMonth, weekStart, validators]
+  );
   if (!focusedDateValidated) {
     const toFocus = calendar
       .reduce((acc, cur) => [...acc, ...cur], [])
@@ -259,67 +259,71 @@ export const CalendarMonth = ({
           </Button>
         </div>
         <InputGroup>
-          <div className={styles.calendarMonthHeaderMonth}>
-            <span id={hiddenMonthId} hidden>
-              Month
-            </span>
-            <Select
-              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  onClick={()=>setIsSelectOpen(!isSelectOpen)}
-                  isExpanded={isSelectOpen}
-                  style={{width: "140px"} as React.CSSProperties }
-                >
-                  {monthFormatted}
-                </MenuToggle>
-              )}
-              aria-labelledby={hiddenMonthId}
-              isOpen={isSelectOpen}
-              onOpenChange={(isOpen) => {
-                setIsSelectOpen(isOpen);
-                onSelectToggle(isOpen);
-              }}
-              onSelect={(ev, monthNum) => {
-                // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
-                // to see the SelectOption as a child so it doesn't close the Popover.
-                setTimeout(() => {
-                  setIsSelectOpen(false);
-                  onSelectToggle(false);
+          <InputGroupItem isFill>
+            <div className={styles.calendarMonthHeaderMonth}>
+              <span id={hiddenMonthId} hidden>
+                Month
+              </span>
+              <Select
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    onClick={() => setIsSelectOpen(!isSelectOpen)}
+                    isExpanded={isSelectOpen}
+                    style={{ width: '140px' } as React.CSSProperties}
+                  >
+                    {monthFormatted}
+                  </MenuToggle>
+                )}
+                aria-labelledby={hiddenMonthId}
+                isOpen={isSelectOpen}
+                onOpenChange={(isOpen) => {
+                  setIsSelectOpen(isOpen);
+                  onSelectToggle(isOpen);
+                }}
+                onSelect={(ev, monthNum) => {
+                  // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
+                  // to see the SelectOption as a child so it doesn't close the Popover.
+                  setTimeout(() => {
+                    setIsSelectOpen(false);
+                    onSelectToggle(false);
+                    const newDate = new Date(focusedDate);
+                    newDate.setMonth(Number(monthNum as string));
+                    setFocusedDate(newDate);
+                    setHoveredDate(newDate);
+                    setShouldFocus(false);
+                    onMonthChange(ev, newDate);
+                  }, 0);
+                }}
+                selected={monthFormatted}
+              >
+                <SelectList>
+                  {longMonths.map((longMonth, index) => (
+                    <SelectOption key={index} value={index} isSelected={longMonth === monthFormatted}>
+                      {longMonth}
+                    </SelectOption>
+                  ))}
+                </SelectList>
+              </Select>
+            </div>
+          </InputGroupItem>
+          <InputGroupItem>
+            <div className={styles.calendarMonthHeaderYear}>
+              <TextInput
+                aria-label={yearInputAriaLabel}
+                type="number"
+                value={yearFormatted}
+                onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
                   const newDate = new Date(focusedDate);
-                  newDate.setMonth(Number(monthNum as string));
+                  newDate.setFullYear(+year);
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);
                   setShouldFocus(false);
                   onMonthChange(ev, newDate);
-                }, 0);
-              }}
-              selected={monthFormatted}
-            >
-              <SelectList>
-                {longMonths.map((longMonth, index) => (
-                  <SelectOption key={index} itemId={index} isSelected={longMonth === monthFormatted}>
-                    {longMonth}
-                  </SelectOption>
-                ))}
-              </SelectList>
-            </Select>
-          </div>
-          <div className={styles.calendarMonthHeaderYear}>
-            <TextInput
-              aria-label={yearInputAriaLabel}
-              type="number"
-              value={yearFormatted}
-              onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
-                const newDate = new Date(focusedDate);
-                newDate.setFullYear(+year);
-                setFocusedDate(newDate);
-                setHoveredDate(newDate);
-                setShouldFocus(false);
-                onMonthChange(ev, newDate);
-              }}
-            />
-          </div>
+                }}
+              />
+            </div>
+          </InputGroupItem>
         </InputGroup>
         <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.nextMonth)}>
           <Button

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

@@ -2,7 +2,7 @@
 id: Calendar month
 section: components
 subsection: date-and-time
-cssPrefix: pf-c-calendar-month
+cssPrefix: pf-v5-c-calendar-month
 propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ---
 

package/src/components/Card/Card.tsx

@@ -16,11 +16,15 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isCompact?: boolean;
   /** Modifies the card to include selectable styling */
   isSelectable?: boolean;
-  /** Specifies the card is selectable, and applies the new raised styling on hover and select */
+  /** @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 a raised selectable card to have disabled styling */
+  /** 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;
@@ -34,11 +38,11 @@ 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;
-  /** Flag indicating that the card should render a hidden input to make it selectable */
+  /** @deprecated Flag indicating that the card should render a hidden input to make it selectable */
   hasSelectableInput?: boolean;
-  /** Aria label to apply to the selectable input if one is rendered */
+  /** @deprecated Aria label to apply to the selectable input if one is rendered */
   selectableInputAriaLabel?: string;
-  /** Callback that executes when the selectable input is changed */
+  /** @deprecated Callback that executes when the selectable input is changed */
   onSelectableInputChange?: (event: React.FormEvent<HTMLInputElement>, labelledBy: string) => void;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
@@ -50,6 +54,9 @@ interface CardContextProps {
   cardId: string;
   registerTitleId: (id: string) => void;
   isExpanded: boolean;
+  isClickable: boolean;
+  isSelectable: boolean;
+  isDisabled: boolean;
 }
 
 interface AriaProps {
@@ -60,7 +67,10 @@ interface AriaProps {
 export const CardContext = React.createContext<Partial<CardContextProps>>({
   cardId: '',
   registerTitleId: () => {},
-  isExpanded: false
+  isExpanded: false,
+  isClickable: false,
+  isSelectable: false,
+  isDisabled: false
 });
 
 export const Card: React.FunctionComponent<CardProps> = ({
@@ -70,6 +80,8 @@ export const Card: React.FunctionComponent<CardProps> = ({
   component = 'div',
   isCompact = false,
   isSelectable = false,
+  isClickable = false,
+  isDisabled = false,
   isSelectableRaised = false,
   isSelected = false,
   isDisabledRaised = false,
@@ -104,9 +116,18 @@ export const Card: React.FunctionComponent<CardProps> = ({
     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);
+    }
+
     if (isSelectable) {
       return css(styles.modifiers.selectable, isSelected && styles.modifiers.selected);
     }
+
+    if (isClickable) {
+      return css(styles.modifiers.clickable, isSelected && styles.modifiers.selected);
+    }
+
     return '';
   };
 
@@ -136,7 +157,10 @@ export const Card: React.FunctionComponent<CardProps> = ({
       value={{
         cardId: id,
         registerTitleId,
-        isExpanded
+        isExpanded,
+        isClickable,
+        isSelectable,
+        isDisabled
       }}
     >
       {hasSelectableInput && (
@@ -146,7 +170,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
           {...ariaProps}
           type="checkbox"
           checked={isSelected}
-          onChange={event => onSelectableInputChange(event, id)}
+          onChange={(event) => onSelectableInputChange(event, id)}
           disabled={isDisabledRaised}
           tabIndex={-1}
         />
@@ -163,9 +187,10 @@ export const Card: React.FunctionComponent<CardProps> = ({
           isFullHeight && styles.modifiers.fullHeight,
           isPlain && styles.modifiers.plain,
           getSelectableModifiers(),
+          isDisabled && styles.modifiers.disabled,
           className
         )}
-        tabIndex={isSelectable || isSelectableRaised ? '0' : undefined}
+        tabIndex={isSelectableRaised ? '0' : undefined}
         {...props}
         {...ouiaProps}
       >