diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx index bd7ac4b3501..b3e0ad1f024 100644 --- a/packages/react-core/src/components/Card/Card.tsx +++ b/packages/react-core/src/components/Card/Card.tsx @@ -34,6 +34,8 @@ export interface CardProps extends React.HTMLProps, 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 = ({ isLarge = false, isFullHeight = false, isPlain = false, + isGlass = false, variant = 'default', ouiaId, ouiaSafe = true, @@ -138,6 +141,7 @@ const CardBase: React.FunctionComponent = ({ 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, diff --git a/packages/react-core/src/components/Card/__tests__/Card.test.tsx b/packages/react-core/src/components/Card/__tests__/Card.test.tsx index 3219abf82e7..42ba729d7ab 100644 --- a/packages/react-core/src/components/Card/__tests__/Card.test.tsx +++ b/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(glass card); + expect(screen.getByText('glass card')).toHaveClass('pf-m-glass'); + }); + test('card with variant set to secondary ', () => { render(secondary card);