feat(card): add isGlass prop (#12290)

* feat(card): add isGlass prop

* Update packages/react-core/src/components/Card/Card.tsx

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

---------

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

Author: wise-king-sullyman

packages/react-core/src/components/Card/Card.tsx

@@ -34,6 +34,8 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isFullHeight?: boolean;
   /** Modifies the card to include plain styling; this removes border and background */
   isPlain?: boolean;
+  /** Modifies the card to include glass styling when glass theme is enabled */
+  isGlass?: boolean;
   /** Flag indicating if a card is expanded. Modifies the card to be expandable. */
   isExpanded?: boolean;
   /** Card background color variant */
@@ -81,6 +83,7 @@ const CardBase: React.FunctionComponent<CardProps> = ({
   isLarge = false,
   isFullHeight = false,
   isPlain = false,
+  isGlass = false,
   variant = 'default',
   ouiaId,
   ouiaSafe = true,
@@ -138,6 +141,7 @@ const CardBase: React.FunctionComponent<CardProps> = ({
           isLarge && styles.modifiers.displayLg,
           isFullHeight && styles.modifiers.fullHeight,
           isPlain && styles.modifiers.plain,
+          isGlass && styles.modifiers.glass,
           variant === 'secondary' && styles.modifiers.secondary,
           getSelectableModifiers(),
           isDisabled && styles.modifiers.disabled,

packages/react-core/src/components/Card/__tests__/Card.test.tsx

@@ -86,6 +86,11 @@ describe('Card', () => {
     expect(consoleWarnMock).toHaveBeenCalled();
   });
 
+  test('card with isGlass applied', () => {
+    render(<Card isGlass>glass card</Card>);
+    expect(screen.getByText('glass card')).toHaveClass('pf-m-glass');
+  });
+
   test('card with variant set to secondary ', () => {
     render(<Card variant="secondary">secondary card</Card>);