From f498b973991eb0e10362a50da2a773054bfcfec6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Thu, 25 Jun 2026 16:22:00 +0200 Subject: [PATCH 01/12] SC-51613 Remove card body min-height --- src/components/card/CardStyles.tsx | 4 ---- src/components/card/__tests__/Card-test.tsx | 10 ++++++++++ 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/card/CardStyles.tsx b/src/components/card/CardStyles.tsx index fa5a46ea3..62a05a30b 100644 --- a/src/components/card/CardStyles.tsx +++ b/src/components/card/CardStyles.tsx @@ -48,7 +48,6 @@ CardHeaderStyled.displayName = 'CardHeaderStyled'; export const CardBodyStyled = styled.div<{ size: `${CardSize}`; insetContent: boolean }>` box-sizing: border-box; - min-height: var(--card-body-min-height); padding: ${(props) => (props.insetContent ? '0' : 'var(--card-padding)')}; width: 100%; @@ -76,14 +75,11 @@ export const CARD_HEADER_SIZE_STYLES = { export const CARD_SIZE_STYLES = { [CardSize.Small]: { '--card-padding': cssVar('dimension-space-150'), - '--card-body-min-height': '84px', }, [CardSize.Medium]: { '--card-padding': cssVar('dimension-space-200'), - '--card-body-min-height': '92px', }, [CardSize.Large]: { '--card-padding': cssVar('dimension-space-300'), - '--card-body-min-height': '108px', }, }; diff --git a/src/components/card/__tests__/Card-test.tsx b/src/components/card/__tests__/Card-test.tsx index f6be9d91e..6c5a80f18 100644 --- a/src/components/card/__tests__/Card-test.tsx +++ b/src/components/card/__tests__/Card-test.tsx @@ -139,6 +139,16 @@ describe('Card components', () => { expect(ref.current).not.toBeNull(); }); + it('does not apply a minimum height', () => { + render( + + Content + , + ); + + expect(window.getComputedStyle(screen.getByText('Content')).minHeight).toBe(''); + }); + it('applies insetContent prop correctly', () => { const { rerender } = render( From 7cf3089a00e59f53ef96bbe19e8a1896ee2e6ec7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Thu, 25 Jun 2026 16:26:41 +0200 Subject: [PATCH 02/12] SC-51613 Trigger PR build From 04355d0202effe03eafc138911585af88fa8b1cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Thu, 25 Jun 2026 16:22:00 +0200 Subject: [PATCH 03/12] SC-51613 Remove card body min-height --- src/components/card/CardStyles.tsx | 4 ---- src/components/card/__tests__/Card-test.tsx | 10 ++++++++++ 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/card/CardStyles.tsx b/src/components/card/CardStyles.tsx index 5229ca393..55c7e5b64 100644 --- a/src/components/card/CardStyles.tsx +++ b/src/components/card/CardStyles.tsx @@ -96,7 +96,6 @@ CardHeaderTitleButtonStyled.displayName = 'CardHeaderTitleButtonStyled'; export const CardBodyStyled = styled.div<{ size: `${CardSize}`; insetContent: boolean }>` box-sizing: border-box; - min-height: var(--card-body-min-height); padding: ${(props) => (props.insetContent ? '0' : 'var(--card-padding)')}; width: 100%; @@ -126,15 +125,12 @@ export const CARD_HEADER_SIZE_STYLES = { export const CARD_SIZE_STYLES = { [CardSize.Large]: { - '--card-body-min-height': '108px', '--card-padding': cssVar('dimension-space-300'), }, [CardSize.Medium]: { - '--card-body-min-height': '92px', '--card-padding': cssVar('dimension-space-200'), }, [CardSize.Small]: { - '--card-body-min-height': '84px', '--card-padding': cssVar('dimension-space-150'), }, }; diff --git a/src/components/card/__tests__/Card-test.tsx b/src/components/card/__tests__/Card-test.tsx index 428953489..e808e083e 100644 --- a/src/components/card/__tests__/Card-test.tsx +++ b/src/components/card/__tests__/Card-test.tsx @@ -151,6 +151,16 @@ describe('Card components', () => { expect(ref.current).not.toBeNull(); }); + it('does not apply a minimum height', () => { + render( + + Content + , + ); + + expect(window.getComputedStyle(screen.getByText('Content')).minHeight).toBe(''); + }); + it('applies insetContent prop correctly', () => { const { rerender } = render( From a2d220c97f9ee796ce513d3fbb1e22ef800491ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Thu, 25 Jun 2026 16:26:41 +0200 Subject: [PATCH 04/12] SC-51613 Trigger PR build From 1a28f7f93f83782cb70fe4da708cbb38531a2bfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Thu, 25 Jun 2026 17:10:25 +0200 Subject: [PATCH 05/12] SC-51613 Remove card header min-height --- src/components/card/CardStyles.tsx | 7 ++---- src/components/card/__tests__/Card-test.tsx | 27 +++++++++++++++++++++ 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/components/card/CardStyles.tsx b/src/components/card/CardStyles.tsx index 55c7e5b64..c17abfddd 100644 --- a/src/components/card/CardStyles.tsx +++ b/src/components/card/CardStyles.tsx @@ -41,7 +41,6 @@ CardStyled.displayName = 'CardStyled'; export const CardHeaderStyled = styled.header<{ noPadding: boolean }>` align-items: center; display: flex; - min-height: var(--card-header-min-height); ${({ noPadding }) => (noPadding ? '' : 'padding: var(--card-header-padding);')} `; CardHeaderStyled.displayName = 'CardHeaderStyled'; @@ -86,7 +85,8 @@ export const CardHeaderTitleButtonStyled = styled(ButtonStyled)` display: flex; flex-direction: row; flex: 1; - min-height: var(--card-header-min-height); + height: auto; + min-height: auto; padding: var(--card-header-padding); border-bottom-right-radius: 0; @@ -108,17 +108,14 @@ CardBodyStyled.displayName = 'CardBodyStyled'; export const CARD_HEADER_SIZE_STYLES = { [CardSize.Large]: { '--card-header-heading-height': '1.875rem', - '--card-header-min-height': '58px', '--card-header-padding': `${cssVar('dimension-space-200')} ${cssVar('dimension-space-300')}`, }, [CardSize.Medium]: { '--card-header-heading-height': '1.5rem', - '--card-header-min-height': '45px', '--card-header-padding': `${cssVar('dimension-space-150')} ${cssVar('dimension-space-200')}`, }, [CardSize.Small]: { '--card-header-heading-height': '1.25rem', - '--card-header-min-height': '36px', '--card-header-padding': `${cssVar('dimension-space-100')} ${cssVar('dimension-space-150')}`, }, }; diff --git a/src/components/card/__tests__/Card-test.tsx b/src/components/card/__tests__/Card-test.tsx index e808e083e..313a59a47 100644 --- a/src/components/card/__tests__/Card-test.tsx +++ b/src/components/card/__tests__/Card-test.tsx @@ -90,6 +90,19 @@ describe('Card components', () => { expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument(); }); + it('does not apply a minimum height', () => { + render( + + + , + ); + + const header = screen.getByText('Card Title').closest('header'); + + expect(header).not.toBeNull(); + expect(window.getComputedStyle(header as HTMLElement).minHeight).toBe(''); + }); + it('uses correct heading level based on card size', () => { const { rerender } = render( @@ -258,6 +271,20 @@ describe('Card components', () => { expect(screen.getByRole('button', { name: 'Collapse' })).toBeInTheDocument(); }); + it('does not apply a minimum height to the collapsible header button', () => { + render( + + + + Card Content + , + ); + + expect(window.getComputedStyle(screen.getByRole('button', { name: 'Collapse' })).minHeight).toBe( + 'auto', + ); + }); + it('does not render a toggle button when isCollapsible is false', () => { render( From a8315ae499c90d390dd7693f810db9357039c4dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Thu, 25 Jun 2026 17:20:06 +0200 Subject: [PATCH 06/12] SC-51613 Define card header size with padding --- src/components/card/CardStyles.tsx | 6 +----- src/components/card/__tests__/Card-test.tsx | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/components/card/CardStyles.tsx b/src/components/card/CardStyles.tsx index c17abfddd..dd1ef2144 100644 --- a/src/components/card/CardStyles.tsx +++ b/src/components/card/CardStyles.tsx @@ -65,7 +65,6 @@ export const RightContentStyled = styled.div` align-items: center; display: flex; gap: ${cssVar('dimension-space-100')}; - max-height: var(--card-header-heading-height); `; RightContentStyled.displayName = 'RightContentStyled'; @@ -107,15 +106,12 @@ CardBodyStyled.displayName = 'CardBodyStyled'; export const CARD_HEADER_SIZE_STYLES = { [CardSize.Large]: { - '--card-header-heading-height': '1.875rem', - '--card-header-padding': `${cssVar('dimension-space-200')} ${cssVar('dimension-space-300')}`, + '--card-header-padding': `${cssVar('dimension-space-250')} ${cssVar('dimension-space-300')}`, }, [CardSize.Medium]: { - '--card-header-heading-height': '1.5rem', '--card-header-padding': `${cssVar('dimension-space-150')} ${cssVar('dimension-space-200')}`, }, [CardSize.Small]: { - '--card-header-heading-height': '1.25rem', '--card-header-padding': `${cssVar('dimension-space-100')} ${cssVar('dimension-space-150')}`, }, }; diff --git a/src/components/card/__tests__/Card-test.tsx b/src/components/card/__tests__/Card-test.tsx index 313a59a47..631cd635c 100644 --- a/src/components/card/__tests__/Card-test.tsx +++ b/src/components/card/__tests__/Card-test.tsx @@ -27,6 +27,7 @@ import { CardBody } from '../CardBody'; import { CardHeader } from '../CardHeader'; import { CardRoot } from '../CardRoot'; import { CardSize } from '../CardSize'; +import { CARD_HEADER_SIZE_STYLES } from '../CardStyles'; describe('Card components', () => { describe('CardRoot', () => { @@ -103,6 +104,23 @@ describe('Card components', () => { expect(window.getComputedStyle(header as HTMLElement).minHeight).toBe(''); }); + it('defines header size through padding only', () => { + expect(CARD_HEADER_SIZE_STYLES).toEqual({ + [CardSize.Large]: { + '--card-header-padding': + 'var(--echoes-dimension-space-250) var(--echoes-dimension-space-300)', + }, + [CardSize.Medium]: { + '--card-header-padding': + 'var(--echoes-dimension-space-150) var(--echoes-dimension-space-200)', + }, + [CardSize.Small]: { + '--card-header-padding': + 'var(--echoes-dimension-space-100) var(--echoes-dimension-space-150)', + }, + }); + }); + it('uses correct heading level based on card size', () => { const { rerender } = render( From a6b19297ab6c5efcfb33305d0ac6be87fa8d4052 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Thu, 25 Jun 2026 17:39:46 +0200 Subject: [PATCH 07/12] SC-51613 Format card header tests --- src/components/card/__tests__/Card-test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/card/__tests__/Card-test.tsx b/src/components/card/__tests__/Card-test.tsx index 631cd635c..d85311dab 100644 --- a/src/components/card/__tests__/Card-test.tsx +++ b/src/components/card/__tests__/Card-test.tsx @@ -298,9 +298,9 @@ describe('Card components', () => { , ); - expect(window.getComputedStyle(screen.getByRole('button', { name: 'Collapse' })).minHeight).toBe( - 'auto', - ); + expect( + window.getComputedStyle(screen.getByRole('button', { name: 'Collapse' })).minHeight, + ).toBe('auto'); }); it('does not render a toggle button when isCollapsible is false', () => { From 6dd5f5cf39d59033901c7fe1bcd9196766740ef2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Thu, 25 Jun 2026 17:45:15 +0200 Subject: [PATCH 08/12] SC-51613 Fix card header lint test --- src/components/card/__tests__/Card-test.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/card/__tests__/Card-test.tsx b/src/components/card/__tests__/Card-test.tsx index d85311dab..e6f9cccdb 100644 --- a/src/components/card/__tests__/Card-test.tsx +++ b/src/components/card/__tests__/Card-test.tsx @@ -92,16 +92,16 @@ describe('Card components', () => { }); it('does not apply a minimum height', () => { + const ref = React.createRef(); + render( - + , ); - const header = screen.getByText('Card Title').closest('header'); - - expect(header).not.toBeNull(); - expect(window.getComputedStyle(header as HTMLElement).minHeight).toBe(''); + expect(ref.current).not.toBeNull(); + expect(window.getComputedStyle(ref.current as HTMLElement).minHeight).toBe(''); }); it('defines header size through padding only', () => { From 27c13700112ba8282b34a8ae5853e7c8bbac5c3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Fri, 26 Jun 2026 16:28:15 +0200 Subject: [PATCH 09/12] SC-51613 Document card header button sizing --- src/components/card/CardStyles.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/card/CardStyles.tsx b/src/components/card/CardStyles.tsx index dd1ef2144..a4a9f9418 100644 --- a/src/components/card/CardStyles.tsx +++ b/src/components/card/CardStyles.tsx @@ -84,6 +84,7 @@ export const CardHeaderTitleButtonStyled = styled(ButtonStyled)` display: flex; flex-direction: row; flex: 1; + /* ButtonStyled sets fixed dimensions; this header button sizes from padding instead. */ height: auto; min-height: auto; padding: var(--card-header-padding); From 9b6eaadc9862043516b5360e536b49ddef4e922b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Fri, 26 Jun 2026 16:34:09 +0200 Subject: [PATCH 10/12] SC-51613 Consolidate card min-height tests --- src/components/card/__tests__/Card-test.tsx | 40 +++++++++------------ 1 file changed, 17 insertions(+), 23 deletions(-) diff --git a/src/components/card/__tests__/Card-test.tsx b/src/components/card/__tests__/Card-test.tsx index e6f9cccdb..01514272f 100644 --- a/src/components/card/__tests__/Card-test.tsx +++ b/src/components/card/__tests__/Card-test.tsx @@ -91,19 +91,6 @@ describe('Card components', () => { expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument(); }); - it('does not apply a minimum height', () => { - const ref = React.createRef(); - - render( - - - , - ); - - expect(ref.current).not.toBeNull(); - expect(window.getComputedStyle(ref.current as HTMLElement).minHeight).toBe(''); - }); - it('defines header size through padding only', () => { expect(CARD_HEADER_SIZE_STYLES).toEqual({ [CardSize.Large]: { @@ -182,16 +169,6 @@ describe('Card components', () => { expect(ref.current).not.toBeNull(); }); - it('does not apply a minimum height', () => { - render( - - Content - , - ); - - expect(window.getComputedStyle(screen.getByText('Content')).minHeight).toBe(''); - }); - it('applies insetContent prop correctly', () => { const { rerender } = render( @@ -250,6 +227,23 @@ describe('Card components', () => { expect(screen.getByText('Card Description')).toBeInTheDocument(); expect(screen.getByText('Actions')).toBeInTheDocument(); }); + + it('does not apply a minimum height to the header or body', () => { + const headerRef = React.createRef(); + const bodyRef = React.createRef(); + + render( + + + Content + , + ); + + expect(headerRef.current).not.toBeNull(); + expect(window.getComputedStyle(headerRef.current as HTMLElement).minHeight).toBe(''); + expect(bodyRef.current).not.toBeNull(); + expect(window.getComputedStyle(bodyRef.current as HTMLElement).minHeight).toBe(''); + }); }); describe('Collapsible Card', () => { From 0bbac4866a73a1e66aad937dcf6e482b6da46cf4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Mon, 29 Jun 2026 14:46:59 +0200 Subject: [PATCH 11/12] SC-51613 Test card sizing style maps --- src/components/card/__tests__/Card-test.tsx | 33 +++++++++------------ 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/src/components/card/__tests__/Card-test.tsx b/src/components/card/__tests__/Card-test.tsx index 01514272f..fc7f66011 100644 --- a/src/components/card/__tests__/Card-test.tsx +++ b/src/components/card/__tests__/Card-test.tsx @@ -27,7 +27,7 @@ import { CardBody } from '../CardBody'; import { CardHeader } from '../CardHeader'; import { CardRoot } from '../CardRoot'; import { CardSize } from '../CardSize'; -import { CARD_HEADER_SIZE_STYLES } from '../CardStyles'; +import { CARD_HEADER_SIZE_STYLES, CARD_SIZE_STYLES } from '../CardStyles'; describe('Card components', () => { describe('CardRoot', () => { @@ -91,7 +91,7 @@ describe('Card components', () => { expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument(); }); - it('defines header size through padding only', () => { + it('defines header and body size through padding only', () => { expect(CARD_HEADER_SIZE_STYLES).toEqual({ [CardSize.Large]: { '--card-header-padding': @@ -106,6 +106,18 @@ describe('Card components', () => { 'var(--echoes-dimension-space-100) var(--echoes-dimension-space-150)', }, }); + + expect(CARD_SIZE_STYLES).toEqual({ + [CardSize.Large]: { + '--card-padding': 'var(--echoes-dimension-space-300)', + }, + [CardSize.Medium]: { + '--card-padding': 'var(--echoes-dimension-space-200)', + }, + [CardSize.Small]: { + '--card-padding': 'var(--echoes-dimension-space-150)', + }, + }); }); it('uses correct heading level based on card size', () => { @@ -227,23 +239,6 @@ describe('Card components', () => { expect(screen.getByText('Card Description')).toBeInTheDocument(); expect(screen.getByText('Actions')).toBeInTheDocument(); }); - - it('does not apply a minimum height to the header or body', () => { - const headerRef = React.createRef(); - const bodyRef = React.createRef(); - - render( - - - Content - , - ); - - expect(headerRef.current).not.toBeNull(); - expect(window.getComputedStyle(headerRef.current as HTMLElement).minHeight).toBe(''); - expect(bodyRef.current).not.toBeNull(); - expect(window.getComputedStyle(bodyRef.current as HTMLElement).minHeight).toBe(''); - }); }); describe('Collapsible Card', () => { From 5e73bf4d28ac68adab72d2db0fb35f2f17ec034f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcio?= Date: Mon, 29 Jun 2026 15:42:16 +0200 Subject: [PATCH 12/12] SC-51613 Address card review comments --- src/components/card/CardBody.tsx | 7 +------ src/components/card/CardHeader.tsx | 2 +- src/components/card/CardStyles.tsx | 6 +++--- src/components/card/__tests__/Card-test.tsx | 1 + 4 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/card/CardBody.tsx b/src/components/card/CardBody.tsx index 89c0061bc..4073daab2 100644 --- a/src/components/card/CardBody.tsx +++ b/src/components/card/CardBody.tsx @@ -38,12 +38,7 @@ export const CardBody = React.forwardRef } return ( - + {children} ); diff --git a/src/components/card/CardHeader.tsx b/src/components/card/CardHeader.tsx index 06c1dc49e..e60ecf602 100644 --- a/src/components/card/CardHeader.tsx +++ b/src/components/card/CardHeader.tsx @@ -120,7 +120,7 @@ export const CardHeader = React.forwardRef {isFullyCollapsible ? ( ` +export const CardHeaderStyled = styled.header<{ disablePadding: boolean }>` align-items: center; display: flex; - ${({ noPadding }) => (noPadding ? '' : 'padding: var(--card-header-padding);')} + ${({ disablePadding }) => (disablePadding ? '' : 'padding: var(--card-header-padding);')} `; CardHeaderStyled.displayName = 'CardHeaderStyled'; @@ -94,7 +94,7 @@ export const CardHeaderTitleButtonStyled = styled(ButtonStyled)` `; CardHeaderTitleButtonStyled.displayName = 'CardHeaderTitleButtonStyled'; -export const CardBodyStyled = styled.div<{ size: `${CardSize}`; insetContent: boolean }>` +export const CardBodyStyled = styled.div<{ insetContent: boolean }>` box-sizing: border-box; padding: ${(props) => (props.insetContent ? '0' : 'var(--card-padding)')}; width: 100%; diff --git a/src/components/card/__tests__/Card-test.tsx b/src/components/card/__tests__/Card-test.tsx index fc7f66011..d7350efc9 100644 --- a/src/components/card/__tests__/Card-test.tsx +++ b/src/components/card/__tests__/Card-test.tsx @@ -179,6 +179,7 @@ describe('Card components', () => { ); expect(ref.current).not.toBeNull(); + expect(ref.current).not.toHaveAttribute('size'); }); it('applies insetContent prop correctly', () => {