noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite the showcase's Text fields and selection section without Tailwind

Browse Source 
Plan step 38: every two-column layout moves onto <x-grid> with
<x-stack> columns; the checkbox group's card, its legend and the two
search demos' bespoke geometry (an avatar chip, the compact
search-icon-button bar) move to data-md-showcase-* hooks. The two
small demo controls and the "Narrower" field's override move to
.showcase-w-sm/-xs/-narrow — plain, unlayered classes, since
<x-input> and <x-datepicker> forward only class and style to the
element that needs sizing, never a data attribute. "Narrower"'s hint
is reworded from "A max-w-* class" to "An unlayered rule from the
call site wins", since that is now the mechanism being shown.

FieldsTest's Chromium selectors run against an isolated fieldProbe
fixture, not this page, so nothing there is at risk; #fields and every
id (showcase-error, showcase-error-filled, showcase-audience,
showcase-radio-theme) is unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 04:53:58 +02:00
co-authored by Claude Sonnet 5
parent dfb5997474
commit 0eb0343008
2 changed files with 129 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/showcase.css
+60 -2
View File
@@ -29,8 +29,9 @@
* a small circular avatar and a compact search bar, and the two ink colours a menu item's `icon-class`
* needs beyond the fixed `md-ink-*` set. A handful of call sites (`<x-input>`, `<x-datepicker>`,
* `<x-slider>`) forward only `class` and `style` to the element that needs sizing, never a data
* attribute, so those few rules below are `.md-showcase-*` classes rather than
* `data-md-showcase-*` hooks — the same "caller's class" mechanism any application would reach for.
* attribute, so a few widths below are plain `.showcase-*` classes instead of `data-md-showcase-*`
* hooks — the same "caller's class" mechanism any application would reach for, deliberately not
* named `md-*` since they are not part of the fixed set text.css declares.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@@ -397,4 +398,61 @@
width: 100%;
max-width: 384px;
}
/* Text fields: the legend above a checkbox grid, a bordered demo card at two widths (a form,
a checkbox group), a small circular avatar for a search bar's trailing slot, and the
compact search-icon-button bar M3 uses as a secondary entry point. */
[data-md-showcase-legend] {
margin-bottom: var(--md-sys-measurement-space200);
}
[data-md-showcase-demo-card] {
width: 100%;
}
[data-md-showcase-demo-card][data-md-showcase-size='md'] {
max-width: 576px;
}
[data-md-showcase-demo-card][data-md-showcase-size='lg'] {
max-width: 672px;
}
[data-md-showcase-avatar] {
display: grid;
place-items: center;
width: var(--md-sys-measurement-space400);
height: var(--md-sys-measurement-space400);
border-radius: var(--md-sys-shape-corner-full);
background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
}
[data-md-showcase-search-bar] {
display: flex;
align-items: center;
gap: var(--md-sys-measurement-space100);
border-radius: var(--md-sys-shape-corner-full);
background-color: var(--md-sys-color-surface-container-high);
padding: var(--md-sys-measurement-space50) var(--md-sys-measurement-space100);
}
[data-md-showcase-search-bar-title] {
flex: 1 1 auto;
}
}
/* A handful of call sites (<x-input>, <x-datepicker>, <x-slider>) forward only `class` and
`style` to the element that needs sizing, so these few widths are the caller's own classes
rather than data-md-showcase-* hooks — see the file header. */
.showcase-w-sm {
width: 192px;
}
.showcase-w-xs {
width: 144px;
}
.showcase-w-narrow {
max-width: 320px;
}