feat(box): DLT-3315 new DtBox primitive component#1203
Merged
Francis Rupert (francisrupert) merged 35 commits intonextfrom Apr 17, 2026
Merged
feat(box): DLT-3315 new DtBox primitive component#1203Francis Rupert (francisrupert) merged 35 commits intonextfrom
Francis Rupert (francisrupert) merged 35 commits intonextfrom
Conversation
Contributor
|
Please add either the |
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds a new DtBox UI primitive across code, styles, stories, tests, combinator variants, and documentation; updates site navigation and component registry. Introduces Vue component, constants, validators, Less styles, Storybook stories/variants, tests, docs, and combinator control ordering. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/dialtone-documentation/docs/dialtone/whats-new/posts/2026-4-22.md`:
- Line 74: Replace the non-canonical component links in the post: change the
relative "components/scrollbar.md" and the inconsistent "/components/box.md" to
the canonical component URL pattern used across the site (e.g., use the same
leading-slash and .html route format used elsewhere in the post such as
"/components/scrollbar.html" and "/components/box.html"), and ensure all
component links in this document follow that same canonical format.
In `@apps/dialtone-documentation/docs/scratch.md`:
- Line 1366: Replace deprecated surface token usage: update all DtBox instances
using surface="success-subtle" to the new token surface="positive-subtle" (e.g.,
the <dt-box padding="100" surface="success-subtle">Box demo</dt-box>
occurrences). Search for any other uses of surface="success-subtle" (including
the second occurrence noted) and change them to surface="positive-subtle" to
match the renamed tokens (no fallback aliases).
In `@packages/dialtone-vue/components/box/box.test.js`:
- Around line 177-196: Add tests that cover the new directional border-width
props on DtBox: mirror the existing borderWidth tests but assert that passing
borderWidthInline, borderWidthInlineStart, borderWidthInlineEnd,
borderWidthBlock, borderWidthBlockStart, and borderWidthBlockEnd produce the
corresponding CSS modifier classes (e.g. for value X expect classes like
d-box--bwi-X, d-box--bwi-start-X, d-box--bwi-end-X, d-box--bwb-X,
d-box--bwb-start-X, d-box--bwb-end-X), using DT_BOX_BORDER_WIDTH_VALUES and
mountComponent to iterate values (and filter out any sentinel like '100' as in
existing tests), and add negative tests that when each directional prop is
undefined no d-box--bwi* / d-box--bwb* classes are present.
🪄 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: Central YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 5132be19-f1ad-4c67-9e9e-5d7f4f77e2f2
📒 Files selected for processing (20)
apps/dialtone-documentation/docs/_data/site-nav.jsonapps/dialtone-documentation/docs/components/box.mdapps/dialtone-documentation/docs/components/stack.mdapps/dialtone-documentation/docs/components/text.mdapps/dialtone-documentation/docs/dialtone/whats-new/posts/2026-4-22.mdapps/dialtone-documentation/docs/scratch.mdcommon/components_list.jspackages/combinator/src/components/option_bar/option_bar_member_group.vuepackages/combinator/src/variants/variants.jspackages/combinator/src/variants/variants_box.jspackages/dialtone-css/lib/build/less/components/box.lesspackages/dialtone-css/lib/build/less/dialtone.lesspackages/dialtone-vue/components/box/box.stories.jspackages/dialtone-vue/components/box/box.test.jspackages/dialtone-vue/components/box/box.vuepackages/dialtone-vue/components/box/box_constants.jspackages/dialtone-vue/components/box/box_variants.story.vuepackages/dialtone-vue/components/box/index.jspackages/dialtone-vue/components/box/validators.jspackages/dialtone-vue/index.js
Francis Rupert (francisrupert)
added
the
no-visual-test
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (1)
apps/dialtone-documentation/docs/scratch.md (1)
1366-1366:⚠️ Potential issue | 🟡 MinorReplace deprecated
success-subtleDtBox surface token.Line 1366 and Line 1534 still use
surface="success-subtle". Please switch these tosurface="positive-subtle"to match current token names and avoid invalid demo usage warnings.Proposed fix
- <dt-box padding="100" surface="success-subtle">Box demo</dt-box> + <dt-box padding="100" surface="positive-subtle">Box demo</dt-box> ... - <dt-box as="header" padding="200" surface="success-subtle" border-width="100">Box demo</dt-box> + <dt-box as="header" padding="200" surface="positive-subtle" border-width="100">Box demo</dt-box>Based on learnings: In the dialtone repo (PR
#1177), the broad rename fromerror/success/dangertocritical/positiveis intentional with no legacy aliases.Also applies to: 1534-1534
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dialtone-documentation/docs/scratch.md` at line 1366, Replace the deprecated surface token value used on DtBox: find the DtBox usage(s) where surface="success-subtle" (e.g., the dt-box demo instances) and change the attribute value to surface="positive-subtle" so it uses the current token name (ensure both occurrences are updated).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@apps/dialtone-documentation/docs/scratch.md`:
- Line 1366: Replace the deprecated surface token value used on DtBox: find the
DtBox usage(s) where surface="success-subtle" (e.g., the dt-box demo instances)
and change the attribute value to surface="positive-subtle" so it uses the
current token name (ensure both occurrences are updated).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Central YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 4852b3c6-102a-43e3-a43c-2537e0870567
📒 Files selected for processing (3)
apps/dialtone-documentation/docs/dialtone/whats-new/posts/2026-4-22.mdapps/dialtone-documentation/docs/scratch.mdpackages/dialtone-vue/components/box/box.test.js
✅ Files skipped from review due to trivial changes (1)
- apps/dialtone-documentation/docs/dialtone/whats-new/posts/2026-4-22.md
Francis Rupert (francisrupert)
requested review from
Brad Paugh (braddialpad),
Ignacio Ropolo (iropolo) and
Nina Repetto (ninarepetto)
as code owners
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 98e7612b4f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "Codex (@codex) review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "Codex (@codex) address that feedback".
Francis Rupert (francisrupert)
changed the title
Contributor
|
✔️ Deploy previews ready! |
Brad Paugh (braddialpad)
approved these changes
Apr 17, 2026
Contributor
Brad Paugh (braddialpad)
left a comment
Brad Paugh (braddialpad)
left a comment
There was a problem hiding this comment.
Looks really good. Just some success vs positive stuff.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/dialtone-documentation/docs/scratch.md`:
- Line 1189: DtNotice currently uses a non-existent prop hide-action which is
ignored; change instances to use the exposed boolean prop showAction instead
(pass :show-action="false" where the intent is to hide the action). Locate the
DtNotice usages in the diff (e.g., the tag <dt-notice ...> around the reported
lines) and replace hide-action with :show-action="false" so the action is
actually hidden; apply the same change to the second occurrence mentioned.
In `@packages/dialtone-css/lib/build/less/components/box.less`:
- Around line 231-239: The scrollbar-content wrapper (.d-box__scrollbar-content)
fails to constrain when the parent only sets max-block-size because block-size:
100% cannot resolve; update the .d-box__scrollbar-content rule to add
max-block-size: inherit (in addition to block-size: 100%) so it inherits the
parent's max-block-size and allows the native-scroll fallback to activate;
adjust the declaration inside the .d-box__scrollbar-content block (which the
.d-box:has(> .d-box__scrollbar-content) selector relies on) accordingly.
🪄 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: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 316e8383-382f-4877-a610-63af61a2cedc
📒 Files selected for processing (2)
apps/dialtone-documentation/docs/scratch.mdpackages/dialtone-css/lib/build/less/components/box.less
9 tasks
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Apr 17, 2026
# [8.80.0-next.2](dialtone-css/v8.80.0-next.1...dialtone-css/v8.80.0-next.2) (2026-04-17) ### Features * **Box:** DLT-3315 new DtBox primitive component ([#1203](#1203)) ([e0c942e](e0c942e))
This was referenced Apr 17, 2026
Open
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.
🛠️ Type Of Change
📖 Jira Ticket
DLT-3315
📖 Description
New
DtBoxcomponent — low-level surface/spacing primitive. Token-constrained props for padding, surface, border (color, width, radius), shadow, sizing, overflow, and scrollbar. Completes the primitive triad: DtBox (surface) + DtText (typography) + DtStack (layout).Props across three tiers:
All values validated against Dialtone token scales. CSS architecture uses
@propertyregistrations, parametric Less mixin. OKLCH relative color syntax supportsd-bgo*/d-bco*opacity utilities.Note
Yes, I'm breaking our soft "no LESS mixins rule", but this feels appropriate to do.
Scrollbar prop integrates
v-dt-scrollbardirective with automatic inner viewport wrapper.What it does NOT do
📦 Cross-Package Impact
box.less— Property, base class, ~350 modifier classesDtBoxcomponent, constants, validators, tests (385), stories💡 Context
Building a card surface previously required composing 5-7 CSS utility classes (
d-bgc-*,d-bc-*,d-baw-*,d-bar-*,d-p-*,d-bs-*). DtBox replaces this with discoverable, validated props mapped to design tokens.Benefits:
📝 Checklist
For all PRs:
For all Vue changes:
For all CSS changes:
If new component:
packages/dialtone-vue).packages/dialtone-csspackage.apps/dialtone-documentation.common/components_list.js🔮 Next Steps
containerprop📷 Screenshots / GIFs
box-playground.mp4
box-doc.mp4
Adds DtBox, a low-level surface/spacing primitive exposing token-validated props for padding, surface, borders, shadow, sizing, overflow, and scrollbar. Includes ~350 CSS modifier classes, Vue component with validators, tests, stories, docs, documentation updates, combinator/variants integration, and public exports.