Add .sf-gap and .sf-equal layout utility classes - #117
Conversation
.sf-gap injects gap into any existing flex/grid container without imposing display type or axis — layout-agnostic complement to .sf-stack. .sf-equal provides a fixed N-column grid that never collapses (unlike .sf-grid-N container-query variants); defaults to 2 columns. https://claude.ai/code/session_01J4EpUK43Ke1jhpeLCHtDsr
|
Warning Review limit reached
More reviews will be available in 37 minutes and 52 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (30)
📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThe PR introduces two new CSS layout primitives to the SLASHED design system: ChangesLayout primitives: gap sizing and equal-column grid
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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 |
Add --sf-gap-size, --sf-equal-cols, --sf-equal-gap to the token API snapshot. Add demo blocks covering all size/column modifiers so the selector coverage test passes. https://claude.ai/code/session_01J4EpUK43Ke1jhpeLCHtDsr
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
integrations/bricks/data/inventory.json (1)
1-835:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRegenerate this file using
npm run docsto fix CI failure.The pipeline is failing because this generated inventory file is out of sync. The error message explicitly directs you to run the documentation generation command.
Pipeline error:
- "inventory.json is stale. Run 'npm run docs' and commit the updated file."
Run the following command and commit the result:
npm run docs🤖 Prompt for 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. In `@integrations/bricks/data/inventory.json` around lines 1 - 835, The inventory.json in the patch is out-of-date (see top-level "_meta" and the "variables"/"sf_classes"/"is_classes" lists); regenerate the file by running the docs generation command and commit the updated output: run npm run docs, verify inventory.json is refreshed, then add/commit the regenerated inventory.json so CI no longer reports "inventory.json is stale."docs/tokens.md (1)
1-668:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRegenerate this file using
npm run docs:tokensto fix CI failure.The pipeline is explicitly failing on this file with multiple errors indicating it's stale. The file header states "Do not edit by hand" — the generation script must be run.
Pipeline errors:
- "Command failed:
git diff --exit-code docs/tokens.md"- "docs/tokens.md is stale — run 'npm run docs' and commit"
Run the following command and commit the result:
npm run docs:tokens🤖 Prompt for 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. In `@docs/tokens.md` around lines 1 - 668, The docs/tokens.md file is stale and CI fails; regenerate it and commit the updated output. Run the generation script referenced in the file header (npm run docs:tokens) to recreate docs/tokens.md (the header "Do not edit by hand" and the CI errors "docs/tokens.md is stale — run 'npm run docs' and commit" point to this), stage the regenerated docs/tokens.md, and push the commit so the pipeline's git-diff check (git diff --exit-code docs/tokens.md) passes.docs/registry.json (1)
1-850:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRegenerate this file using
npm run docsto ensure consistency.This registry is part of the generated documentation suite. While no specific pipeline error is shown for this file, it should be regenerated along with the other documentation files to maintain consistency across the design system inventory.
Run the complete documentation generation:
npm run docs🤖 Prompt for 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. In `@docs/registry.json` around lines 1 - 850, The generated registry (docs/registry.json) is out of sync with the rest of the docs; regenerate it by running the documentation build so the "tokens", "sf_classes" and "is_classes" sections are updated. From the project root run the npm script that builds docs (npm run docs), verify docs/registry.json is updated, and commit the regenerated file; reference the registry.json file and confirm token lists like "--sf-color-primary" and classes such as "sf-container" / "is-active" are present and consistent after regeneration.docs/classes.md (1)
1-240:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRegenerate this file using
npm run docs:classesinstead of manual edits.The pipeline is failing because this generated file is out of sync with the source. The file header explicitly states "Do not edit by hand" — the generation script must be run to ensure consistency.
Run the following command and commit the result:
npm run docs:classes🤖 Prompt for 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. In `@docs/classes.md` around lines 1 - 240, Summary: docs/classes.md is a generated file out of sync with source; regenerate it. Fix: run the generation script referenced in the file header (scripts/gen-class-reference.js) via the documented npm task and commit the updated artifact—execute npm run docs:classes, review the changed output in docs/classes.md to ensure it matches the source, then add/commit the updated file so CI passes.
🧹 Nitpick comments (1)
core/layout.css (1)
115-120: ⚡ Quick winConsider aligning variant pattern with other layout primitives.
The
.sf-gapsize variants override the--sf-gap-sizetoken, whereas most other layout primitives (.sf-stack,.sf-cluster) override thegapproperty directly in their variants. For example:
.sf-stack--xs { gap: var(--sf-space-xs); }(property override).sf-gap--xs { --sf-gap-size: var(--sf-space-xs); }(token override)While the token-based approach is more flexible, the inconsistency may create a less predictable API surface for framework users.
♻️ Align with existing pattern used by .sf-stack and .sf-cluster
.sf-gap { gap: var(--sf-gap-size); } -.sf-gap--xs { --sf-gap-size: var(--sf-space-xs); } -.sf-gap--s { --sf-gap-size: var(--sf-space-s); } -.sf-gap--m { --sf-gap-size: var(--sf-space-m); } -.sf-gap--l { --sf-gap-size: var(--sf-space-l); } -.sf-gap--xl { --sf-gap-size: var(--sf-space-xl); } -.sf-gap--2xl { --sf-gap-size: var(--sf-space-2xl); } +.sf-gap--xs { gap: var(--sf-space-xs); } +.sf-gap--s { gap: var(--sf-space-s); } +.sf-gap--m { gap: var(--sf-space-m); } +.sf-gap--l { gap: var(--sf-space-l); } +.sf-gap--xl { gap: var(--sf-space-xl); } +.sf-gap--2xl { gap: var(--sf-space-2xl); }This maintains token override capability via
style="--sf-gap-size: ..."while matching the established variant pattern.🤖 Prompt for 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. In `@core/layout.css` around lines 115 - 120, The `.sf-gap--*` variant rules currently override the `--sf-gap-size` token (e.g., `.sf-gap--xs { --sf-gap-size: ... }`) which is inconsistent with `.sf-stack`/`.sf-cluster` variants that override the `gap` property directly; update the `.sf-gap--xs`, `.sf-gap--s`, `.sf-gap--m`, `.sf-gap--l`, `.sf-gap--xl`, and `.sf-gap--2xl` selectors to set `gap: var(--sf-space-...)` instead of assigning `--sf-gap-size`, while leaving the `--sf-gap-size` token support intact so consumers can still override via style attributes when needed.
🤖 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.
Outside diff comments:
In `@docs/classes.md`:
- Around line 1-240: Summary: docs/classes.md is a generated file out of sync
with source; regenerate it. Fix: run the generation script referenced in the
file header (scripts/gen-class-reference.js) via the documented npm task and
commit the updated artifact—execute npm run docs:classes, review the changed
output in docs/classes.md to ensure it matches the source, then add/commit the
updated file so CI passes.
In `@docs/registry.json`:
- Around line 1-850: The generated registry (docs/registry.json) is out of sync
with the rest of the docs; regenerate it by running the documentation build so
the "tokens", "sf_classes" and "is_classes" sections are updated. From the
project root run the npm script that builds docs (npm run docs), verify
docs/registry.json is updated, and commit the regenerated file; reference the
registry.json file and confirm token lists like "--sf-color-primary" and classes
such as "sf-container" / "is-active" are present and consistent after
regeneration.
In `@docs/tokens.md`:
- Around line 1-668: The docs/tokens.md file is stale and CI fails; regenerate
it and commit the updated output. Run the generation script referenced in the
file header (npm run docs:tokens) to recreate docs/tokens.md (the header "Do not
edit by hand" and the CI errors "docs/tokens.md is stale — run 'npm run docs'
and commit" point to this), stage the regenerated docs/tokens.md, and push the
commit so the pipeline's git-diff check (git diff --exit-code docs/tokens.md)
passes.
In `@integrations/bricks/data/inventory.json`:
- Around line 1-835: The inventory.json in the patch is out-of-date (see
top-level "_meta" and the "variables"/"sf_classes"/"is_classes" lists);
regenerate the file by running the docs generation command and commit the
updated output: run npm run docs, verify inventory.json is refreshed, then
add/commit the regenerated inventory.json so CI no longer reports
"inventory.json is stale."
---
Nitpick comments:
In `@core/layout.css`:
- Around line 115-120: The `.sf-gap--*` variant rules currently override the
`--sf-gap-size` token (e.g., `.sf-gap--xs { --sf-gap-size: ... }`) which is
inconsistent with `.sf-stack`/`.sf-cluster` variants that override the `gap`
property directly; update the `.sf-gap--xs`, `.sf-gap--s`, `.sf-gap--m`,
`.sf-gap--l`, `.sf-gap--xl`, and `.sf-gap--2xl` selectors to set `gap:
var(--sf-space-...)` instead of assigning `--sf-gap-size`, while leaving the
`--sf-gap-size` token support intact so consumers can still override via style
attributes when needed.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 36091b0a-5828-4bbd-a355-455f77ab8356
⛔ Files ignored due to path filters (10)
dist/slashed.essential.cssis excluded by!**/dist/**dist/slashed.essential.flat.cssis excluded by!**/dist/**dist/slashed.full.cssis excluded by!**/dist/**dist/slashed.full.flat.cssis excluded by!**/dist/**dist/slashed.optimal-components.cssis excluded by!**/dist/**dist/slashed.optimal-components.flat.cssis excluded by!**/dist/**dist/slashed.optimal-utilities.cssis excluded by!**/dist/**dist/slashed.optimal-utilities.flat.cssis excluded by!**/dist/**dist/slashed.optimal.cssis excluded by!**/dist/**dist/slashed.optimal.flat.cssis excluded by!**/dist/**
📒 Files selected for processing (6)
core/layout.csscore/tokens.layout.cssdocs/classes.mddocs/registry.jsondocs/tokens.mdintegrations/bricks/data/inventory.json
|
/kiro all |
/kiro fix |
…er pattern Size modifiers now set gap directly (gap: var(--sf-space-*)) instead of setting the --sf-gap-size token, matching the established pattern used by .sf-stack--* and .sf-cluster--*. The --sf-gap-size token on :root and the base .sf-gap rule are unchanged, so style="--sf-gap-size: X" overrides still work on bare .sf-gap elements. https://claude.ai/code/session_01J4EpUK43Ke1jhpeLCHtDsr
2 participants
This PR introduces two new layout utility classes to the Slashed framework:
Summary
Adds layout-agnostic gap utilities and a fixed equal-column grid system to provide more flexible spacing and grid options for developers.
Key Changes
New
.sf-gaputility class: A layout-agnostic gap utility that injects spacing into any existing flex or grid container without imposing a display type or axis. Unlike.sf-stack(flex column) or.sf-cluster(flex-wrap row), this utility works on elements that already have their own display context.--xs,--s,--m,--l,--xl,--2xl--sf-gap-sizeCSS variablevar(--sf-space-gap)New
.sf-equalgrid class: A fixed N-column grid system where column count never collapses, unlike the responsive.sf-grid-Nclasses. Useful when layout must remain N columns at all widths..sf-equal--2,.sf-equal--3,.sf-equal--4,.sf-equal--6--sf-equal-colsand--sf-equal-gapCSS variablesvar(--sf-space-gap)spacingAdded CSS variables:
--sf-gap-size: Controls gap spacing for.sf-gaputility--sf-equal-cols: Controls column count for.sf-equalgrid--sf-equal-gap: Controls gap spacing for.sf-equalgridImplementation Details
core/layout.cssandcore/tokens.layout.cssintegrations/bricks/data/inventory.jsonto reflect new variables (+3) and classes (+12)https://claude.ai/code/session_01J4EpUK43Ke1jhpeLCHtDsr
Summary by CodeRabbit
New Features
.sf-gaputility class for flexible spacing control in flex and grid containers, with size variants ranging from extra-small to 2xl..sf-equalutility class for fixed-column layouts with variants supporting 2, 3, 4, and 6-column grids.Documentation