feat(layout): add .sf-place-center primitive + clarify the centring story - #651
Merged
Merged
Conversation
.sf-center collides with the utility-framework convention where `.center` centres an element's content. SLASHED is BEM-first and ships no generic centring utility: .sf-center is the Every-Layout Center primitive that centres *itself*. Add a "Centring" section mapping each centring intent to its primitive/modifier (cluster--center, stack--center, imposter, cover__center, center--intrinsic, …) and spelling out that .sf-center centres itself, needs a block-level element, and when to pick it over .sf-container. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LywrnXafVz2rVBNF4TuDbi
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (11)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds ChangesCentring primitive
Coverage and generated indexes
Centring guidance
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/layout.md`:
- Around line 170-172: Correct the grammar in the `.sf-center` documentation
paragraph by replacing “There a `.center` class” with “A `.center` class” or
“There, a `.center` class,” without changing the surrounding explanation.
- Around line 168-175: Update the comparative reference to avoid the
unregistered `.center` class, or add `.center` to docs/ref-allowlist.json with a
reason documenting that it is an intentional non-SLASHED utility-framework
reference. Preserve the explanation distinguishing generic child-centering
utilities from the `.sf-center` Center primitive.
- Around line 193-195: Update the sizing explanation in the `.sf-center`
documentation to specifically describe flex-row stretch behavior, avoiding the
absolute claim that all flex/grid items are sized by their parent. Preserve the
note that `.sf-grid-flex--center` does not stretch its children and retain the
existing `content-box` and `--sf-center-max` explanation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 4bbc0035-ed30-49a5-b847-300d1ce8b968
📒 Files selected for processing (1)
docs/layout.md
…izing note Two valid CodeRabbit nits on the new "Centring" section: - "There a `.center` class" → "There, a `.center` class". - The "sized by its parent" clause over-claimed (implied all flex/grid items stretch). Rephrase to say the parent's layout takes over sizing/alignment so .sf-center's own width/margin model no longer drives the result. Left `.center` as-is (not allowlisted): check:doc-refs only scans `.sf-*` classes and `--sf-*` tokens (CLASS_REF_RE = /\.sf-.../), so a bare `.center` comparative mention is never flagged — CI check:doc-refs is green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LywrnXafVz2rVBNF4TuDbi
Every centring path in SLASHED forced you to adopt a specific primitive — .sf-cluster--center (wrap row), .sf-stack--center (column), .sf-imposter (absolute), .sf-cover__center (full-height). There was no way to just centre a plain element's content on both axes without inheriting that primitive's semantics, so people reached for a generic `.center` that doesn't exist here. Add .sf-place-center (`display: grid; place-items: center`) — the framework's named form of the community grid-place-items-center idiom (cf. Tailwind's place-items-center). It pairs with .sf-center by name and behaviour: .sf-center centres ITSELF (a max-width wrapper), .sf-place-center centres its CONTENT. Every-Layout parallel: the "Center" primitive is horizontal self-centring (our .sf-center); centring one thing in a box has no named primitive there either — everyone falls back to grid + place-items. This gives it a name. Includes: annotation, demo coverage card + cov-data entry, layout.md primitives table + Centring section, behaviour tests, CHANGELOG, and regenerated API artifacts. Purely additive — no rename, no breaking change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LywrnXafVz2rVBNF4TuDbi
jackgranatowski
changed the title
.center utility
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Resolves the centring-ergonomics gap surfaced while clarifying
.sf-center. Two related parts:1. New primitive:
.sf-place-center(core/layout.css)Every centring path in SLASHED forced you to adopt a specific primitive —
.sf-cluster--center(wrap row),.sf-stack--center(column),.sf-imposter(absolute),.sf-cover__center(full-height). There was no way to just centre a plain element's content on both axes without inheriting that primitive's semantics, so people reached for a generic.centerthat doesn't exist here.It's the framework's named form of the community
display:grid; place-items:centeridiom (cf. Tailwind'splace-items-center), and pairs with.sf-centerby name and behaviour:.sf-centercentres itself (a max-width wrapper),.sf-place-centercentres its content. Purely additive — no rename, no breaking change.2. Docs: clarify
.sf-centeris a primitive, not a.centerutility (docs/layout.md)New "Centring" section: states that centring is expressed on a primitive, maps each intent to the right one (now including
.sf-place-centerfor the plain-box case), and spells out the.sf-centergotchas (centres itself, needs a block-level element).Includes annotation (
token-annotations.json), demo coverage card +cov-dataentry,layout.mdprimitives table, behaviour tests, CHANGELOG, and regenerated API artifacts (api-index,classes.md,registry.json,llms.txt, configurator data).Type
Checklist
npm run lint:csspasses (stylelint)npm run buildrebuildsdist/npm testpasses (unit + Playwright e2e) — 132 unit, layout + demo-visual e2e green locallycore/*.csstouched;check:llm-guidegreen,llms.txtregeneratedcheck:registry/audit:checkgreenCHANGELOG.mdupdated under## UnreleasedNotes
New public class is PUBLIC-tier, layout kind, shipped in both bundles. Demo gains one live preview card;
tests/coverage.test.js(class ↔ demo ↔ api-index parity) stays green.🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
.sf-place-center, a layout utility that centers content horizontally and vertically..sf-place-centerversus.sf-center.Documentation
Tests