refactor(box): DLT-3333 rename percent prop values to p-suffix

[Francis Rupert (francisrupert)]

🛠️ Type Of Change

• Refactor

📖 Jira Ticket

DLT-3333

📖 Description

Rename DtBox sizing-prop percent values from {n}-percent → {n}p.

<dt-box block-size="100-percent">   →   <dt-box block-size="100p">

Affected sizing props: blockSize, inlineSize, minBlockSize, maxBlockSize, minInlineSize, maxInlineSize.

💡 Context

• Aligns DtBox prop API with DtResizable (initial-size="50p") and the sizing/layout utility classes (d-w100p, d-h100p, d-t100p).
• Ships as a hard rename — no deprecation/aliases. DtBox shipped <2 days ago (DLT-3315), no external adopters.
• Combinator resolveLayout updated to display the new values as integer percentages (33p → 33%, 66p → 66% — avoids float drift from --dt-layout-33-percent = 33.333%).
• Peer ExampleResizable*.vue files migrated from dt-stack + palette utilities (d-bgc-purple-100, etc.) to DtBox + DtText — uses the new {n}p values throughout. New ExampleResizableNested.vue added.
• resizable.md reworked to document sizing conventions and add nested example.

⛔ Out of Scope

• --dt-layout-*-percent design token names — unchanged. External consumers (incl. Figma Tokens Studio) depend on these.
• var(--dt-layout-*-percent) callsites in dialtone-css recipes and hovercard_*.story.vue — unrelated to DtBox API surface.
• Backward-compat aliases, deprecation warnings, stylelint rules — hard cutover.

📦 Cross-Package Impact

Package	Changes
dialtone-vue	DtBox prop values + validator; 2 new percent tests
dialtone-css	_box-layout mixin emits .d-box--{prefix}-{n}p classes (token refs unchanged)
combinator	resolveLayout in src/lib/tokens.js recognizes {n}p and returns integer %
dialtone-documentation	box.md demo + resizable.md overhaul + 5 migrated ExampleResizable*.vue + 1 new

Dependency flow: tokens → CSS → Vue → docs / MCP

📄 Documentation Artifacts

Artifact	Status
Vue source	Updated
Tests	Updated (2 new percent tests)
Storybook stories	N/A (stories don't reference percent values)
Component docs JSON	Regenerated
VuePress docs	Updated (box.md + resizable.md)
MCP server data	Rebuilt

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description.
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.

For all Vue changes:

• I have added / updated unit tests.
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

For all CSS changes:

• I have used design tokens whenever possible.
• I have considered how this change will behave on different screen sizes.
• I have visually validated my change in light and dark mode.
• I have used gap or flexbox properties for layout instead of margin whenever possible.

🔮 Next Steps

• Flag: DtResizable uses --dt-size-* tokens while DtBox uses --dt-layout-* — same numeric labels, wildly different pixel values (e.g. 700 = 64px in size scale, 448px in layout scale). Worth a separate Jira to align or at minimum document.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: fbd72220-3c2c-415c-9e6e-02d3418679de

📥 Commits

Reviewing files that changed from the base of the PR and between 6cda867 and 8b3334f.

📒 Files selected for processing (1)

• apps/dialtone-documentation/docs/components/resizable.md

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/dialtone-documentation/docs/components/resizable.md

---

Renames DtBox percent sizing props from {n}-percent to {n}p (e.g., 100-percent → 100p) across Vue props, tests, combinator resolveLayout, generated CSS classes, documentation, and resizable examples; adds nested example and two new tests.

Overall Judgement: ✅ Ready to merge — Changes are consistent across packages, tests and docs, and token/var names were intentionally left unchanged per scope.

Walkthrough

The PR migrates layout percentage tokens from a -percent suffix to a p suffix (e.g., 50p), updates token resolution and generated CSS/class names, updates DtBox constants/docs/tests, and refactors multiple resizable example components to use dt-box/dt-text design-system primitives.

Changes

Cohort / File(s)	Summary
Example Component Refactoring apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizable.vue, .../ExampleResizableCollapsible.vue, .../ExampleResizableNested.vue, .../ExampleResizableOffset.vue, .../ExampleResizableThreePanel.vue, .../ExampleResizableVertical.vue	Replaced fixed-height wrapper divs and utility-class styled content with dt-box containers and dt-text components (explicit block-size/inline-size, surface, centered labels); updated collapsible controls to dt-button; added a new nested resizable example component.
Docs & Examples apps/dialtone-documentation/docs/components/box.md, apps/dialtone-documentation/docs/components/resizable.md	Updated box sizing example to use 50p and reorganized resizable docs to use vue demo/vue code-only blocks, import ExampleResizableNested, and wrap demos in DtBox containers.
Layout Token Parsing & CSS packages/combinator/src/lib/tokens.js, packages/dialtone-css/lib/build/less/components/box.less	Added parsing for <integer>p percent token form in token resolver; adjusted LESS selector naming to use @{value}p modifier while still referencing the underlying --dt-layout-@{value}-percent variable.
Vue Component Constants & Docs packages/dialtone-vue/components/box/box_constants.js, packages/dialtone-vue/components/box/box.vue	Replaced documented/layout constant values from '<n>-percent' to '<n>p' (e.g., 50p) in DT_BOX_LAYOUT_VALUES and JSDoc @values for DtBox sizing props.
Tests packages/dialtone-vue/components/box/box.test.js	Added tests asserting DtBox applies modifier classes for inlineSize/blockSize values using the p suffix (e.g., d-box--is-100p, d-box--bls-50p).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• feat(box): DLT-3315 new DtBox primitive component #1203: Directly related — adopts DtBox primitives and the -percent→p token shorthand across docs, Vue components, and CSS.
• feat(combinator): DLT-3312 preview resolved value in sized props #1199: Related — modifies token resolution logic in packages/combinator/src/lib/tokens.js, overlapping token parsing changes.
• feat(components): DLT-3157 align critical/positive prop values and CSS class names #1177: Related — touches the documentation/token deprecation tooling that may overlap with doc changes in this PR.

Suggested labels

no-visual-test

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dt-box-percent-size

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

packages/dialtone-vue/components/box/box.test.js (1)

307-317: Consider table-driving percent coverage across all six size props.

You already validate inlineSize and blockSize; adding min/max percent cases would better lock the rename path and reduce regression risk.

♻️ Suggested test consolidation/coverage extension

-  it('applies inlineSize modifier class for percent layout token', () => {
-    const wrapper = mountComponent({ inlineSize: '100p' });
-
-    expect(wrapper.classes()).toContain('d-box--is-100p');
-  });
-
-  it('applies blockSize modifier class for percent layout token', () => {
-    const wrapper = mountComponent({ blockSize: '50p' });
-
-    expect(wrapper.classes()).toContain('d-box--bls-50p');
-  });
+  it.each([
+    ['inlineSize', '100p', 'd-box--is-100p'],
+    ['blockSize', '50p', 'd-box--bls-50p'],
+    ['minInlineSize', '50p', 'd-box--min-is-50p'],
+    ['maxInlineSize', '50p', 'd-box--max-is-50p'],
+    ['minBlockSize', '50p', 'd-box--min-bls-50p'],
+    ['maxBlockSize', '50p', 'd-box--max-bls-50p'],
+  ])('applies %s modifier class for percent layout token', (prop, value, expectedClass) => {
+    const wrapper = mountComponent({ [prop]: value });
+    expect(wrapper.classes()).toContain(expectedClass);
+  });

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/dialtone-vue/components/box/box.test.js` around lines 307 - 317,
Tests only cover inlineSize and blockSize percent tokens; add table-driven tests
that iterate the six size props (inlineSize, blockSize, minInlineSize,
maxInlineSize, minBlockSize, maxBlockSize) to assert percent modifier classes
are applied (e.g., 'd-box--is-100p', 'd-box--bls-50p', and the corresponding
min/max prefixes). Update the test using the existing mountComponent helper and
wrapper.classes() assertions: create a data array mapping prop names to sample
percent values and expected class suffixes, loop through it to mountComponent({
[prop]: value }) and expect wrapper.classes() toContain the expected class for
each case so coverage is consolidated and resistant to regressions.

🤖 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/components/resizable.md`:
- Around line 227-245: The snippet is missing the required dt-resizable wrapper:
wrap the dt-resizable-panel (id="list"), dt-resizable-handle, and
dt-resizable-panel (id="detail") inside a parent <dt-resizable> element (kept
within the existing <dt-box>), so the structure becomes dt-box > dt-resizable >
dt-resizable-panel / dt-resizable-handle / dt-resizable-panel; ensure the
existing attributes (id, :initial-size, collapsible, :collapsed) remain on the
respective dt-resizable-panel elements.
- Around line 139-149: The snippet is invalid because dt-resizable-panel must be
a child of a dt-resizable container; wrap the existing <dt-resizable-panel
id="sidebar" ...> block inside a <dt-resizable> parent (preserving the dt-box
wrapper and the panel attributes initial-size, user-min-size, user-max-size), so
the panel becomes a direct child of dt-resizable (e.g.,
<dt-resizable><dt-resizable-panel ...>...</dt-resizable-panel></dt-resizable>),
ensuring the example is copy/paste runnable.

In `@packages/dialtone-css/lib/build/less/components/box.less`:
- Line 73: The change renames the generated selector from "*-percent" to
"&-@{value}p" which is a breaking public API change; update the release
metadata/changelog by adding a BREAKING CHANGE footer (or create a changeset)
explicitly describing the renaming of the class-token (previously `*-percent` →
now `*-p` / `&-@{value}p`) so consumers are warned, and ensure the changeset
references the affected generated selector (`&-@{value}p`) and the rationale.

In `@packages/dialtone-vue/components/box/box_constants.js`:
- Around line 65-66: The token rename from '*-percent' to '*p' in
box_constants.js is a breaking API change; add a BREAKING CHANGE footer to the
commit/release metadata and include a release-note callout describing that
previously valid public prop values like `<value>-percent` were removed and
consumers must switch to `<value>p`; update the commit message/changelog entry
and any release tooling metadata to surface this as a breaking change (reference
the token rename in the message so reviewers can link it to the change in
box_constants.js).

---

Nitpick comments:
In `@packages/dialtone-vue/components/box/box.test.js`:
- Around line 307-317: Tests only cover inlineSize and blockSize percent tokens;
add table-driven tests that iterate the six size props (inlineSize, blockSize,
minInlineSize, maxInlineSize, minBlockSize, maxBlockSize) to assert percent
modifier classes are applied (e.g., 'd-box--is-100p', 'd-box--bls-50p', and the
corresponding min/max prefixes). Update the test using the existing
mountComponent helper and wrapper.classes() assertions: create a data array
mapping prop names to sample percent values and expected class suffixes, loop
through it to mountComponent({ [prop]: value }) and expect wrapper.classes()
toContain the expected class for each case so coverage is consolidated and
resistant to regressions.

🪄 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: be7d4b26-739b-480a-8ce4-a4c7a5651802

📥 Commits

Reviewing files that changed from the base of the PR and between df3bd74 and 6cda867.

📒 Files selected for processing (13)

• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizable.vue
• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableCollapsible.vue
• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableNested.vue
• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableOffset.vue
• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableThreePanel.vue
• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableVertical.vue
• apps/dialtone-documentation/docs/components/box.md
• apps/dialtone-documentation/docs/components/resizable.md
• packages/combinator/src/lib/tokens.js
• packages/dialtone-css/lib/build/less/components/box.less
• packages/dialtone-vue/components/box/box.test.js
• packages/dialtone-vue/components/box/box.vue
• packages/dialtone-vue/components/box/box_constants.js

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1208/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1208/