@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Button aria-disabled is set to true and tabIndex to -1 if component is
     aria-disabled="true"
     class="pf-v5-c-button pf-m-primary pf-m-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-12"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     tabindex="-1"
   >
@@ -22,7 +22,7 @@ exports[`Button control button 1`] = `
     aria-label="control"
     class="pf-v5-c-button pf-m-control"
     data-ouia-component-id="OUIA-Generated-Button-control-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -38,7 +38,7 @@ exports[`Button danger button 1`] = `
     aria-label="danger"
     class="pf-v5-c-button pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Button-danger-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -53,7 +53,7 @@ exports[`Button isAriaDisabled button 1`] = `
     aria-disabled="true"
     class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-5"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -68,7 +68,7 @@ exports[`Button isAriaDisabled link button 1`] = `
     aria-disabled="true"
     class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-6"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
   >
     Disabled yet focusable button
@@ -82,7 +82,7 @@ exports[`Button isBlock 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-primary pf-m-block"
     data-ouia-component-id="OUIA-Generated-Button-primary-3"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -97,7 +97,7 @@ exports[`Button isDanger link 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-link pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Button-link-3"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -112,7 +112,7 @@ exports[`Button isDanger secondary 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-secondary pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Button-secondary-2"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -127,7 +127,7 @@ exports[`Button isDisabled 1`] = `
     aria-disabled="true"
     class="pf-v5-c-button pf-m-primary pf-m-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-4"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     disabled=""
     type="button"
@@ -143,7 +143,7 @@ exports[`Button isInline 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-link pf-m-inline"
     data-ouia-component-id="OUIA-Generated-Button-link-4"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -158,7 +158,7 @@ exports[`Button isLoading 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-primary pf-m-progress pf-m-in-progress"
     data-ouia-component-id="OUIA-Generated-Button-primary-9"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -193,7 +193,7 @@ exports[`Button isLoading icon only 1`] = `
     aria-label="Upload"
     class="pf-v5-c-button pf-m-plain pf-m-in-progress"
     data-ouia-component-id="OUIA-Generated-Button-plain-2"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -230,7 +230,7 @@ exports[`Button isLoading inline link 1`] = `
     aria-label="Loading"
     class="pf-v5-c-button pf-m-link pf-m-inline pf-m-progress pf-m-in-progress"
     data-ouia-component-id="OUIA-Generated-Button-link-5"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -265,7 +265,7 @@ exports[`Button link button 1`] = `
     aria-label="link"
     class="pf-v5-c-button pf-m-link"
     data-ouia-component-id="OUIA-Generated-Button-link-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -280,7 +280,7 @@ exports[`Button link with icon 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-link"
     data-ouia-component-id="OUIA-Generated-Button-link-2"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -291,8 +291,10 @@ exports[`Button link with icon 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 576 512"
+        width="1em"
       >
         <path
           d="M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM403.029 192H360v-60c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v60h-43.029c-10.691 0-16.045 12.926-8.485 20.485l67.029 67.029c4.686 4.686 12.284 4.686 16.971 0l67.029-67.029c7.559-7.559 2.205-20.485-8.486-20.485z"
@@ -311,7 +313,7 @@ exports[`Button plain button 1`] = `
     aria-label="plain"
     class="pf-v5-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -327,7 +329,7 @@ exports[`Button primary button 1`] = `
     aria-label="primary"
     class="pf-v5-c-button pf-m-primary"
     data-ouia-component-id="OUIA-Generated-Button-primary-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -343,7 +345,7 @@ exports[`Button secondary button 1`] = `
     aria-label="secondary"
     class="pf-v5-c-button pf-m-secondary"
     data-ouia-component-id="OUIA-Generated-Button-secondary-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -358,7 +360,7 @@ exports[`Button size large 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-primary pf-m-display-lg"
     data-ouia-component-id="OUIA-Generated-Button-primary-8"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -373,7 +375,7 @@ exports[`Button size small 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-primary pf-m-small"
     data-ouia-component-id="OUIA-Generated-Button-primary-7"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -389,7 +391,7 @@ exports[`Button tertiary button 1`] = `
     aria-label="tertiary"
     class="pf-v5-c-button pf-m-tertiary"
     data-ouia-component-id="OUIA-Generated-Button-tertiary-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -405,7 +407,7 @@ exports[`Button warning button 1`] = `
     aria-label="warning"
     class="pf-v5-c-button pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Button-warning-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >

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,27 +148,27 @@ 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(() => {
+
+  const getInitialDate = () => {
     const initDate = new Date(dateProp);
     if (isValidDate(initDate)) {
       return initDate;
     } else {
-      if (isValidDate(rangeStart)) {
-        return rangeStart;
-      } else {
-        return today;
-      }
+      return isValidDate(rangeStart) ? rangeStart : today;
     }
-  });
+  };
+  const initialDate = getInitialDate();
+  const [focusedDate, setFocusedDate] = React.useState(initialDate);
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
   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)) {
@@ -214,22 +214,52 @@ export const CalendarMonth = ({
     }
   };
 
-  const addMonth = (toAdd: -1 | 1) => {
+  const changeMonth = (month: number) => {
     const newDate = new Date(focusedDate);
-    newDate.setMonth(newDate.getMonth() + toAdd);
+    const desiredDay = newDate.getDate();
+    const monthDays = new Date(newDate.getFullYear(), (month + 1) % 12, 0).getDate(); // Setting day 0 of the next month returns the last day of current month
+
+    if (monthDays < desiredDay) {
+      newDate.setDate(monthDays);
+    }
+
+    newDate.setMonth(month);
+
+    if (initialDate.getDate() > desiredDay && monthDays > desiredDay) {
+      newDate.setDate(initialDate.getDate());
+    }
+
     return newDate;
   };
 
+  const addMonth = (toAdd: -1 | 1) => {
+    let newMonth = new Date(focusedDate).getMonth() + toAdd;
+    if (newMonth === -1) {
+      newMonth = 11;
+    } else if (newMonth === 12) {
+      newMonth = 0;
+    }
+    const newDate = changeMonth(newMonth);
+    if (toAdd === 1 && newMonth === 0) {
+      newDate.setFullYear(newDate.getFullYear() + 1);
+    }
+    if (toAdd === -1 && newMonth === 11) {
+      newDate.setFullYear(newDate.getFullYear() - 1);
+    }
+    return newDate;
+  };
+
+  const yearHasFebruary29th = (year: number) => new Date(year, 1, 29).getMonth() === 1;
+  const dateIsFebruary29th = (date: Date) => date.getMonth() === 1 && date.getDate() === 29;
+
   const prevMonth = addMonth(-1);
   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 +289,78 @@ 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 = changeMonth(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));
+                  if (dateIsFebruary29th(newDate) && !yearHasFebruary29th(+year)) {
+                    newDate.setDate(28);
+                    newDate.setMonth(1);
+                  }
+                  if (dateIsFebruary29th(initialDate) && yearHasFebruary29th(+year)) {
+                    newDate.setFullYear(+year);
+                    newDate.setDate(29);
+                  }
+                  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}
       >