Skip to content

✨ Add an aside component#292

Open
chrisjsewell wants to merge 3 commits into
mainfrom
brief/19-aside
Open

✨ Add an aside component#292
chrisjsewell wants to merge 3 commits into
mainfrom
brief/19-aside

Conversation

@chrisjsewell

@chrisjsewell chrisjsewell commented Jul 16, 2026

Copy link
Copy Markdown
Member

Adds an aside directive (closes #97): a floated call-out box that body text wraps around, rendered as a semantic <aside> element in HTML — CSS-only, no JavaScript.

.. aside:: Optional title
   :align: right
   :width: 33

   Tangential content the main text flows around.

Behaviour

  • Floats right (default) or left at :width: 25/33/50% from the md breakpoint up; below it, a full-width block — mobile never wraps.
  • Renders as a native <aside> (complementary landmark) via an HTML-only post-transform on the dropdown_main pattern; LaTeX/text/man keep a plain titled container (built and verified — no crash, sensible degradation).
  • Titled asides get aria-labelledby wired to the title, minting a deterministic title id when :name: isn't given; untitled asides stay unlabelled (documented).
  • Physical floats paired with physical margins so the text-side gap is correct under RTL too (review caught the logical-margin mismatch; computed-style evidence in both directions).
  • Title styling uses .sd-aside > .sd-aside-title specificity so theme p.rubric rules can't reintroduce stray margins (review-measured 30px gap on alabaster, now 0).
  • Documented float facts of life: a trailing aside needs a following sd-clear-both div (locked by test), and cross-references to untitled named asides need explicit link text.

Verification

  • Playwright: wrap-around at desktop, full-width below 768px, sequential floats don't overlap; title margin/weight and RTL margins verified via computed styles on built pages
  • All seven nesting permutations (aside↔card/grid/dropdown) transform correctly; cross-page :ref: resolves with the anchor landing on the id
  • Cascade-neutrality of the new rules verified against the artifact by byte-offset analysis; style/aside.css registered in ASSEMBLY, artifact regenerated through the generator pipeline
  • Full test/lint/type matrix green; docs -nW

Add an `aside` directive: a CSS-only floated call-out box that the
surrounding text wraps around, for pull-outs, margin notes and side
comments (complementing, not replacing, admonitions and cards).

- `AsideDirective(SdDirective)` with `align` (left/right), `width`
  (25/33/50%), `margin`, `name` and `class`/`class-title`/`class-body`.
- Renders as a semantic HTML `<aside>` element via an html-only
  post-transform (following the dropdown_main precedent); non-HTML
  outputs degrade to a plain titled container.
- Hand-authored `style/aside.css` (registered in ASSEMBLY): card-like
  surface reusing the card variables, floats/widths applied only from
  the `md` breakpoint up so it collapses to a full-width block on small
  screens, plus a `.sd-clear-both` utility to stop the wrap.
- Docs page (rst + myst snippets) and regression fixtures.
Address review feedback on the aside component:

- a11y: titled asides now carry `aria-labelledby` pointing at their
  title, which is given a stable, document-order id
  (`sd-aside-title-<n>`) when no `:name:` is supplied. Untitled asides
  stay unlabelled (no invented label text).
- RTL: use physical `margin-left`/`margin-right` per float side instead
  of logical `margin-inline`, so the text-side gap tracks the physical
  float under `dir="rtl"` (LTR margins are byte-for-byte unchanged).
- title: bump the margin/font-weight reset to `.sd-aside > .sd-aside-title`
  (0,2,0) so it beats a theme's `p.rubric` (0,1,1) instead of relying on
  the theme happening to bold rubrics.
- docs: document the trailing-float escape (a terminal aside needs a
  following `sd-clear-both` block; themes can clearfix their column),
  that `:ref:` to an untitled named aside needs explicit link text, and
  the aria labelling; soften the pydata ToC note; drop the no-op
  `background-clip`.
- tests: lock the aria-labelledby wiring, the untitled bare-`:ref:`
  warning, and the trailing-clear workaround.
@codecov

codecov Bot commented Jul 16, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.93%. Comparing base (4f66f32) to head (b237033).

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #292      +/-   ##
==========================================
+ Coverage   92.63%   92.93%   +0.30%     
==========================================
  Files          13       14       +1     
  Lines        1371     1430      +59     
==========================================
+ Hits         1270     1329      +59     
  Misses        101      101              
Flag Coverage Δ
pytests 92.93% <100.00%> (+0.30%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

Aside boxes

1 participant