diff --git a/resources/css/components/collapse.css b/resources/css/components/collapse.css index 492f2286..114ede6d 100644 --- a/resources/css/components/collapse.css +++ b/resources/css/components/collapse.css @@ -17,9 +17,9 @@ * (foundation/interaction.css) sit on the summary; this file only refines their target — the * 48px summary height, the icon and chevron colour — never their opacities or ring. * - * Icon-to-title and title-to-chevron gaps are 12px, midway between two spacing steps - * (`space100` 8px, `space200` 16px); written as their average rather than a bare literal so the - * value still comes from the scale. + * Icon-to-title and title-to-chevron gaps are a literal 12px: the measurement scale has no 12 + * (`space125` is 10px), as alert.css's gap. Every part is matched as its own `
`' child, so + * a collapse nested in a filled one takes neither its padding nor its turned chevron. */ @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @@ -52,7 +52,7 @@ display: flex; min-block-size: var(--md-sys-measurement-space600); align-items: center; - gap: calc((var(--md-sys-measurement-space100) + var(--md-sys-measurement-space200)) / 2); + gap: 12px; border-radius: inherit; cursor: pointer; list-style-type: none; @@ -64,7 +64,7 @@ } } - [data-md-collapse][data-md-variant='filled'] [data-md-collapse-summary] { + [data-md-collapse][data-md-variant='filled'] > [data-md-collapse-summary] { padding-inline: var(--md-sys-measurement-space200); } @@ -82,7 +82,7 @@ transition: rotate var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast); } - [data-md-collapse][open] [data-md-collapse-chevron] { + [data-md-collapse][open] > [data-md-collapse-summary] > [data-md-collapse-chevron] { rotate: 180deg; } @@ -93,7 +93,7 @@ letter-spacing: var(--md-sys-typescale-body-md-tracking); } - [data-md-collapse][data-md-variant='filled'] [data-md-collapse-body] { + [data-md-collapse][data-md-variant='filled'] > [data-md-collapse-body] { padding-inline: var(--md-sys-measurement-space200); } } diff --git a/tests/Feature/Components/CollapseTest.php b/tests/Feature/Components/CollapseTest.php index f72e0cc1..2ca7d47d 100644 --- a/tests/Feature/Components/CollapseTest.php +++ b/tests/Feature/Components/CollapseTest.php @@ -2,6 +2,7 @@ use Livewire\Component; use Livewire\Livewire; +use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet; it('discloses on the native details element, kept open through a morph', function () { $html = (string) $this->blade('Until the expiry.'); @@ -65,3 +66,12 @@ it('entangles its open state with a Livewire property and renders open as the pr expect(preg_match('/\sopen\s/', $tag[0]) === 1)->toBe($fineTuning); })->with(['open' => true, 'closed' => false]); + +it('draws a filled collapse\'s padding and an open one\'s chevron on its own parts, never a nested collapse\'s', function () { + $css = ComponentStylesheet::read('collapse'); + + expect($css->declarations("[data-md-collapse][data-md-variant='filled'] > [data-md-collapse-summary]"))->toBe(['padding-inline' => 'var(--md-sys-measurement-space200)']) + ->and($css->declarations("[data-md-collapse][data-md-variant='filled'] > [data-md-collapse-body]"))->toBe(['padding-inline' => 'var(--md-sys-measurement-space200)']) + ->and($css->declarations('[data-md-collapse][open] > [data-md-collapse-summary] > [data-md-collapse-chevron]'))->toBe(['rotate' => '180deg']) + ->and($css->declarations('[data-md-collapse-summary]'))->toHaveKey('gap', '12px'); +});