Skip to content

Move the list styles to styles/content.css (#200 Phase 4) - #211

Open
sneridagh wants to merge 2 commits into
b3-leaves-inlinesfrom
b4-lists
Open

sneridagh wants to merge 2 commits into
b3-leaves-inlinesfrom
b4-lists

Conversation

@sneridagh

Copy link
Copy Markdown
Member

Phase 4 of #200: lists are styled by plain CSS instead of Tailwind utilities, with zero visual change.

Stacked on #210 (Phase 3). The base is b3-leaves-inlines. This PR's own change is only the last commit.

Changes

@plone/plate/styles/content.css now styles lists in both the public renderer and the editor. It uses the list hooks added in Phase 1a: data-list-style-type on the block, and the block-p__list / block-p__item parts.

Element Hook Before (Tailwind)
ul / ol .block-p__list relative m-0 p-0
To-do item [data-list-style-type='todo'] .block-p__item list-none
Checked to-do item .block-p__item[data-checked] (new attribute) text-muted-foreground line-through
Read-only checkbox (rendered content) .block-p__checkbox, [data-state='checked'] (new part) peer pointer-events-none absolute top-1 -left-6 size-4 shrink-0 rounded-sm border border-primary bg-background …, data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground
Its check icon .block-p__checkmark, .block-p__checkmark svg (new part) flex items-center justify-center text-current, size-4
  • Checkbox: the read-only checkbox is a <button>, so its rule also neutralizes the browser's button styling (appearance, padding, margin, font, color). That comes from Tailwind's reset today, and a public theme might not have one.
  • Dropped classes with no visual effect:
    • peer and ring-offset-background;
    • the focus-visible: ring variants: the button has pointer-events: none, and the public view never shows keyboard focus on it in practice.
  • The checkbox stays keyboard-focusable, as before. Changing that is out of scope here.
  • The editor's to-do checkbox is an interactive editor control (a Radix Checkbox), so it stays Tailwind. Both renderers set data-checked on checked items.

Tests

  • New: plate/acceptance/tests/lists-content-css.test.ts compares the computed values of every property these rules set (list margins and padding, to-do item style, both checkbox states, the check icon size), in the public view. It runs them under Agave's preflight, with no reset, and under @plone/theming's simple reset.
  • Shared helpers: the reset tests now share measureOwnedStyles() and SIMPLE_RESET from tooling/playwright/resets.ts. The Phase 2 and 3 tests no longer carry their own copies.
  • Ratchet: PENDING loses the whole p entry, which was all list markup.

Validation

  • CI=1 pnpm visual-test --retries=0: 24/24 pixel-identical. The native-blocks screenshots include bulleted, nested, numbered and to-do lists in both states, in the public view and the editor.
  • pnpm acceptance-test: 174 passed.
  • pnpm --filter @plone/plate test --run: 75 passed. check:ts, eslint and stylelint: clean.

Part of #200.

Phase 4 of #200. Lists, to-do items and the read-only to-do checkbox of
the rendered content are styled by plain CSS in @plone/plate's
styles/content.css instead of Tailwind utilities. Checked to-do items get
a data-checked attribute. The editor's interactive checkbox stays a
Tailwind editor control. A new acceptance test checks lists render the
same under any public theme reset, and the reset tests share their
measuring helpers.
* b3-leaves-inlines:
  Move the table drag handle fragment to @plone/quanta
  Releasing @plone/aurora 1.0.0-alpha.16
  Release @plone/contents 1.0.0-alpha.3
  Release @plone/publicui 1.0.0-alpha.8
  Release @plone/cmsui 1.0.0-alpha.11
  Release @plone/agave 1.0.0-alpha.8
  Release @plone/theming 1.0.0-alpha.8
  Release @plone/layout 1.0.0-alpha.13
  Release @plone/blocks 1.0.0-alpha.17
  Release @plone/plate 1.0.0-alpha.22
  Release @plone/react-router 2.0.0-alpha.7
  Release @plone/helpers 2.0.0-alpha.9
  Release @plone/registry 4.0.0-alpha.4
  Release @plone/quanta 1.0.0-alpha.1
  Release @plone/components 5.0.0-alpha.5
  Release @plone/client 2.0.0-alpha.8
  Release @plone/icons 1.0.0-alpha.1
  Release @plone/types 3.0.0-alpha.7
  Split Quanta and icons out of @plone/components into @plone/quanta and @plone/icons (#212)

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant