feat(text): DLT-3487 expose full typography size scale - #1334
Merged
Joshua Hynes (hynes-dialpad) merged 8 commits intoJun 30, 2026
Conversation
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:
WalkthroughUpdates DtText typography to use variant-based composition with new font-size, family, and italic support. Refreshes typography tokens, docs, combinator resolution, and ESLint deprecation handling for the new DtText and utility-class behavior. ChangesDtText typography API and supporting tooling
Suggested reviewers
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![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: 8f375d1fcd
ℹ️ 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".
![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: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md (1)
107-112:⚠️ Potential issue | 🟠 Major | ⚡ Quick winCorrect legacy overlay event naming in the event-contract snippet.
This block presents
update:openas the generic convention without the documented legacy exception. Add/clarify that legacyDtModal,DtTooltip, andDtToastuseupdate:showto avoid publishing an incorrect API contract to consumers. As per coding guidelines, “Useupdate:showfor legacy Modal, Tooltip, and Toast overlay events in dialtone-vue.”🤖 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 `@packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md` around lines 107 - 112, The event-contract snippet is missing documentation about the legacy exception to the update:open naming convention. Add a clarification note after the event listing that specifies DtModal, DtTooltip, and DtToast are legacy overlay components that use update:show instead of the standard update:open event. This ensures consumers understand the correct API contract for these legacy components and prevents confusion about which event to use for each component type.Source: Coding guidelines
🤖 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 `@apps/dialtone-documentation/docs/_data/type.json`:
- Around line 16-21: The type.json file contains a duplicated typography variant
entry where two consecutive objects both define "category": "code" with
identical "size" arrays of ["lg", "md", "sm", "xs"]. Remove one of these
duplicate entries to eliminate the redundancy in the typographyVariants data
structure. Keep only one instance of the "code" category variant in the file.
In `@apps/dialtone-documentation/docs/components/text.md`:
- Line 4: The frontmatter status value in the text.md file is set to `status:
new`, which is not an allowed value. Replace the status value with one of the
permitted options: `ready`, `planned`, or `deprecated`, depending on the current
state of the text component documentation page.
- Around line 9-10: The keywords `dt-box` and `DtBox` listed on lines 9-10 in
the DtText component documentation are copy-paste artifacts from another
component and should be replaced with keywords that are relevant to the DtText
component. Update these two lines to include appropriate keywords related to
text functionality and typography instead of box-related keywords.
In `@packages/dialtone-vue/components/Text/Text.test.js`:
- Around line 128-143: The test "warns and does not apply raw font-size class
for t-shirt size with variant" combines two separate concerns: verifying the
warning is logged and verifying the CSS class is not applied. Split this test
into two separate test cases using it() - one that focuses solely on checking
that warnSpy is called with the correct message, and another that focuses solely
on verifying that the d-text--fs-lg class is not applied. Apply the same pattern
to the other multi-assertion tests referenced in the comment at lines 223-239,
377-381, 413-417, and 447-450 to align with the repo convention of one assertion
per test.
In `@packages/eslint-plugin-dialtone/lib/rules/deprecated-headline-sizes.js`:
- Around line 16-62: Extract the six helper functions getElementName,
isDtTextComponent, getAttributeName, getStaticAttributeValue,
findStaticAttribute, and removeAttributeFix from deprecated-headline-sizes.js
into a new shared utility module at lib/utils/vue-helpers.js. Export these
functions from the new utility module, then update deprecated-headline-sizes.js
to import them from the shared module instead of defining them locally. Apply
the same import changes to deprecated-tshirt-sizes.js to eliminate the duplicate
function definitions in both files.
- Around line 89-151: The `canFixToVariant` logic does not account for dynamic
`kind` bindings (like `:kind="..."`), which causes the auto-fix to incorrectly
replace the size attribute with a static `variant` even when a dynamic kind
binding exists. This changes runtime behavior since the static variant takes
precedence. Modify the `canFixToVariant` condition to also check if a dynamic
kind binding exists on the node by looking for a directive binding (not just the
static attribute check with `findStaticAttribute`). Add this dynamic kind check
to the existing condition alongside the current static attribute checks for
`variantAttribute` and `kindAttribute` to ensure the auto-fix is only applied
when it's safe to do so.
In `@packages/eslint-plugin-dialtone/lib/rules/deprecated-tshirt-sizes.js`:
- Around line 46-92: The helper functions getElementName, isDtTextComponent,
getAttributeName, getStaticAttributeValue, findStaticAttribute, and
removeAttributeFix are duplicated identically in both deprecated-tshirt-sizes.js
and deprecated-headline-sizes.js. Create a new shared utility module at
lib/utils/vue-helpers.js, move all six helper functions to this new module and
export them, then remove the duplicate definitions from both rule files and
replace them with imports from the new shared utility module to prevent
maintenance drift.
- Around line 94-107: The getDtTextVariant function incorrectly defaults
kindValue to "body" when no static kind attribute exists, but this also matches
cases where kind is dynamically bound (like :kind="computedKind"), which would
cause the autofixer to incorrectly transform the component. After checking for
the static kindAttribute using findStaticAttribute, add an additional check to
detect if there is a dynamic kind binding (check for directives like :kind or
v-bind:kind on the node), and return null if a dynamic binding exists. Only
proceed with defaulting to "body" when there is truly no kind attribute at all,
neither static nor dynamic.
---
Outside diff comments:
In
`@packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md`:
- Around line 107-112: The event-contract snippet is missing documentation about
the legacy exception to the update:open naming convention. Add a clarification
note after the event listing that specifies DtModal, DtTooltip, and DtToast are
legacy overlay components that use update:show instead of the standard
update:open event. This ensures consumers understand the correct API contract
for these legacy components and prevents confusion about which event to use for
each component type.
🪄 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: ASSERTIVE
Plan: Enterprise
Run ID: 8fcdae02-692a-407c-bd19-59da398082ab
⛔ Files ignored due to path filters (16)
apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/avatar-dark.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/avatar-light.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/loader-dark.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/loader-light.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/modal-dark.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/modal-light.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/motion-text-dark.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/motion-text-light.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/prose-dark.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/prose-light.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tab-group-dark.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tab-group-light.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tabs-dark.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tabs-light.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/text-dark.pngis excluded by!**/*.pngand included by**apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/text-light.pngis excluded by!**/*.pngand included by**
📒 Files selected for processing (21)
apps/dialtone-documentation/docs/_data/text.jsonapps/dialtone-documentation/docs/_data/type.jsonapps/dialtone-documentation/docs/components/text.mdapps/dialtone-documentation/docs/guides/migration/typography/index.mdapps/dialtone-documentation/docs/utilities/typography/font-size.mdpackages/dialtone-css/lib/build/less/components/text.lesspackages/dialtone-css/lib/build/less/utilities/typography.lesspackages/dialtone-docs/src/content/reference/reference-component-api-patterns.mdpackages/dialtone-tokens/tokens/base/default.jsonpackages/dialtone-vue/components/Text/Text.stories.jspackages/dialtone-vue/components/Text/Text.test.jspackages/dialtone-vue/components/Text/Text.vuepackages/dialtone-vue/components/Text/TextConstants.jspackages/dialtone-vue/components/Text/TextDefault.story.vuepackages/dialtone-vue/components/Text/index.jspackages/eslint-plugin-dialtone/docs/rules/deprecated-headline-sizes.mdpackages/eslint-plugin-dialtone/docs/rules/deprecated-tshirt-sizes.mdpackages/eslint-plugin-dialtone/lib/rules/deprecated-headline-sizes.jspackages/eslint-plugin-dialtone/lib/rules/deprecated-tshirt-sizes.jspackages/eslint-plugin-dialtone/tests/lib/rules/deprecated-headline-sizes.jspackages/eslint-plugin-dialtone/tests/lib/rules/deprecated-tshirt-sizes.js
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
dialpad/ios(manual)dialpad/firespotter(manual)
Belu Montoya (belumontoya)
left a comment
Belu Montoya (belumontoya)
left a comment
Contributor
There was a problem hiding this comment.
i think most of coderabbits comments about test are correct specially for order and consistency so i would check them out
Contributor
|
Firstly, Codex and Coderabbit responses should definitely be addressed. Other than that, I like this a lot. I will do a follow-up PR to fix some of the Combinator awkwardness with this DtText change. Here's my main feedback and it's important and my strong opinion: DtText must not be used with This should not be treated as valid usage: <dt-text size="500"> ... </dt-text>
<dt-text variant="body-md" size="400"> ... </dt-text>
<dt-text kind="body" size="300"> ... </dt-text>I strongly cringe seeing just That is the pattern we are trying to move away from. The point of Update the implementation so I think this should also be enforced in Lint should steer toward
Don't think it should be autofixable since something like Implementation-wise, this probably belongs near the existing And lastly, consider how to update the guidance and do/don't to speak to this in |
Francis Rupert (francisrupert)
requested changes
Jun 23, 2026
Francis Rupert (francisrupert)
left a comment
Francis Rupert (francisrupert)
left a comment
Contributor
There was a problem hiding this comment.
.
Contributor
|
Please add either the |
Greptile SummaryExposes the full typography font-size token scale through
Overall Judgement: ✅ Ready to merge — well-tested, backward-compatible, no blocking issues identified. Confidence Score: 5/5Safe to merge — all new props are additive, the legacy kind+size path is fully preserved, and the ESLint auto-fixes degrade gracefully when context is ambiguous. The new variant/family/italic props don't affect existing consumers using kind+size. The combinator fix correctly threads an empty-object rawProps to default factories. ESLint rule changes are additive and well-tested. No regressions identified in the changed paths. No files require special attention.
|
| Filename | Overview |
|---|---|
| packages/dialtone-vue/components/Text/Text.vue | Adds variant, family, italic props; refactors computed class logic to support new font-size override path alongside legacy kind+size path; backward-compatible. |
| packages/dialtone-vue/components/Text/TextConstants.js | Adds TEXT_VARIANT_MODIFIERS, TEXT_FONT_SIZE_MODIFIERS (50–800), TEXT_FAMILY_MODIFIERS, and TEXT_ITALIC_CLASS; all correctly keyed and exported. |
| packages/dialtone-vue/components/Text/Text.test.js | Good coverage added for variant, family, italic, and font-size class paths; legacy behavior preserved under test. |
| packages/eslint-plugin-dialtone/lib/rules/deprecated-tshirt-sizes.js | Adds DtText-specific branch with getDtTextVariant to auto-fix kind+t-shirt-size combos to variant; gracefully degrades to manual migration when kind is dynamic or unknown. |
| packages/eslint-plugin-dialtone/lib/rules/deprecated-headline-sizes.js | Adds DtText-specific branch to migrate xxl/xxxl sizes to variant="headline-2xl/3xl"; canFixToVariant guard prevents unsafe auto-fixes. |
| packages/eslint-plugin-dialtone/lib/util/vue-attribute-helpers.js | New shared utility extracting element/attribute helpers previously duplicated across lint rules; removeAttributeFix correctly strips leading whitespace. |
| packages/combinator/src/lib/info.js | Fix: passes {} to default factory functions so rawProps-reading defaults (like variant's default) don't throw on undefined. |
| packages/dialtone-css/lib/build/less/components/text.less | Adds d-text--fs-, d-text--ff-, and d-text--italic modifier classes with correct specificity pattern; reformatted to consistent indentation. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[DtText rendered] --> B{variant prop set?}
B -->|yes| C[getVariantClass: TEXT_VARIANT_MODIFIERS lookup]
B -->|no, kind set| D[getVariantClass: legacy kind+size→CSS suffix]
B -->|neither| E[variant defaults to body-md]
E --> C
C --> F{size prop set?}
D --> G{usesLegacyKindSize?}
G -->|yes| H[skip getFontSizeClass]
G -->|no| F
F -->|null/undefined| I[no font-size class]
F -->|numeric token| J{in TEXT_FONT_SIZE_MODIFIERS?}
J -->|yes| K[emit d-text--fs-N class]
J -->|no, t-shirt value| L[warn + no class]
C --> M[getFamilyClass: TEXT_FAMILY_MODIFIERS]
M --> N{italic prop?}
N -->|true| O[emit d-text--italic]
N -->|false| P[done]
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[DtText rendered] --> B{variant prop set?}
B -->|yes| C[getVariantClass: TEXT_VARIANT_MODIFIERS lookup]
B -->|no, kind set| D[getVariantClass: legacy kind+size→CSS suffix]
B -->|neither| E[variant defaults to body-md]
E --> C
C --> F{size prop set?}
D --> G{usesLegacyKindSize?}
G -->|yes| H[skip getFontSizeClass]
G -->|no| F
F -->|null/undefined| I[no font-size class]
F -->|numeric token| J{in TEXT_FONT_SIZE_MODIFIERS?}
J -->|yes| K[emit d-text--fs-N class]
J -->|no, t-shirt value| L[warn + no class]
C --> M[getFamilyClass: TEXT_FAMILY_MODIFIERS]
M --> N{italic prop?}
N -->|true| O[emit d-text--italic]
N -->|false| P[done]
Reviews (3): Last reviewed commit: "fix(combinator): DLT-3487 support raw pr..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/dialtone-vue/components/Text/Text.vue (1)
407-425: 🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy liftEnforce
sizeonly when paired with explicitvariantor legacykind.
getFontSizeClass()currently allows<dt-text size="...">whenkindis absent. That conflicts with the required contract in this PR discussion (size must be paired withvariantor legacykind, otherwise warn + no class). This root behavior also drives the now-misaligned tests/docs.Proposed fix direction
methods: { + hasExplicitVariant() { + return Object.prototype.hasOwnProperty.call( + (this.$?.vnode?.props) || {}, + 'variant', + ); + }, + getFontSizeClass() { if (this.size === null || this.size === undefined) { return null; } + if (!this.kind && !this.hasExplicitVariant()) { + console.warn( + '[DtText] `size` must be paired with `variant` or legacy `kind`.', + ); + return null; + } + if (this.usesLegacyKindSize()) { return null; }🤖 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 `@packages/dialtone-vue/components/Text/Text.vue` around lines 407 - 425, In the getFontSizeClass() method, add validation to enforce that the size prop can only be used when paired with an explicit variant or legacy kind. Add a check after the null/undefined validation that returns null and logs a warning if size is provided but neither variant nor kind (legacy) is present. This validation should occur before the usesLegacyKindSize() check to ensure size is only applied with the required context.packages/eslint-plugin-dialtone/lib/rules/deprecated-tshirt-sizes.js (1)
57-77: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winTighten DtText fallback: current numeric autofix path is too permissive and breaks the intended size contract.
At Line 154 onward, when
getDtTextVariant()cannot safely derive a variant, the code falls through todeprecatedSizeand auto-fixes (size="sm"→:size="200"). That permits standalone DtTextsizeusage instead of enforcing the “pair withvariantor legacykind” contract, and it also risks unsafe fixes when attributes are provided through argument-lessv-bind="{ ... }"(wherekind/variantpresence is not detectable via current helpers).Please short-circuit DtText
sizehandling to a DtText-specific non-fixable/manual report whenever safe derivation is not proven, rather than falling back to generic numeric autofix.Suggested direction
if (isDtText && propName === 'size') { const dtTextVariant = getDtTextVariant(node, sizeValue); + const hasObjectBind = node.parent?.attributes?.some( + (attr) => + attr.directive && + attr.key?.name?.name === 'bind' && + !attr.key?.argument, + ); if (dtTextVariant) { // existing safe autofix ... return; } - if ( - hasAttribute(node, 'kind') && - !hasAttribute(node, 'variant') - ) { + if ( + hasObjectBind || + !hasAttribute(node, 'variant') || + hasAttribute(node, 'kind') + ) { context.report({ node, messageId: 'deprecatedDtTextSizeManual', data: { oldSize: sizeValue }, }); return; } } // generic numeric fallback should stay for non-DtText components onlyAlso applies to: 121-184
🤖 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 `@packages/eslint-plugin-dialtone/lib/rules/deprecated-tshirt-sizes.js` around lines 57 - 77, The getDtTextVariant function is being used to safely derive variant attributes for DtText components, but when it returns null (indicating unsafe derivation), the code falls back to the generic deprecatedSize handling which auto-fixes the size value unsafely. Instead, add a DtText-specific check: after calling getDtTextVariant(), if it returns null for a DtText node, report this as a non-fixable error requiring manual intervention rather than falling through to the deprecatedSize autofix that assumes the numeric conversion is safe. This ensures the rule properly enforces that DtText size attributes must be paired with variant or kind attributes, and prevents dangerous automatic fixes when the presence of these attributes cannot be reliably detected.
🤖 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 `@packages/eslint-plugin-dialtone/tests/lib/rules/deprecated-tshirt-sizes.js`:
- Around line 155-210: Add new test cases to the deprecated-tshirt-sizes test
file after the existing dt-text test cases to cover regression scenarios where
dt-text uses object v-bind syntax with kind or variant attributes combined with
deprecated static size. For dt-text with v-bind="{ kind: ... }" and size="sm",
expect an error with messageId 'deprecatedDtTextSizeManual' (output: null). For
dt-text with v-bind="{ variant: ... }" and size="sm", similarly expect an error
with messageId 'deprecatedDtTextSizeManual' (output: null). These test cases
prevent the rule from silently falling back to numeric autofix in
unknown-composition scenarios.
---
Outside diff comments:
In `@packages/dialtone-vue/components/Text/Text.vue`:
- Around line 407-425: In the getFontSizeClass() method, add validation to
enforce that the size prop can only be used when paired with an explicit variant
or legacy kind. Add a check after the null/undefined validation that returns
null and logs a warning if size is provided but neither variant nor kind
(legacy) is present. This validation should occur before the
usesLegacyKindSize() check to ensure size is only applied with the required
context.
In `@packages/eslint-plugin-dialtone/lib/rules/deprecated-tshirt-sizes.js`:
- Around line 57-77: The getDtTextVariant function is being used to safely
derive variant attributes for DtText components, but when it returns null
(indicating unsafe derivation), the code falls back to the generic
deprecatedSize handling which auto-fixes the size value unsafely. Instead, add a
DtText-specific check: after calling getDtTextVariant(), if it returns null for
a DtText node, report this as a non-fixable error requiring manual intervention
rather than falling through to the deprecatedSize autofix that assumes the
numeric conversion is safe. This ensures the rule properly enforces that DtText
size attributes must be paired with variant or kind attributes, and prevents
dangerous automatic fixes when the presence of these attributes cannot be
reliably detected.
🪄 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: ASSERTIVE
Plan: Enterprise
Run ID: 80d07404-74bb-400c-88c2-0aeb6d2a385e
📒 Files selected for processing (14)
apps/dialtone-documentation/docs/_data/type.jsonapps/dialtone-documentation/docs/components/text.mdapps/dialtone-documentation/docs/guides/migration/typography/index.mdpackages/dialtone-docs/src/content/reference/reference-component-api-patterns.mdpackages/dialtone-vue/components/Text/Text.stories.jspackages/dialtone-vue/components/Text/Text.test.jspackages/dialtone-vue/components/Text/Text.vuepackages/eslint-plugin-dialtone/docs/rules/deprecated-headline-sizes.mdpackages/eslint-plugin-dialtone/docs/rules/deprecated-tshirt-sizes.mdpackages/eslint-plugin-dialtone/lib/rules/deprecated-headline-sizes.jspackages/eslint-plugin-dialtone/lib/rules/deprecated-tshirt-sizes.jspackages/eslint-plugin-dialtone/lib/util/vue-attribute-helpers.jspackages/eslint-plugin-dialtone/tests/lib/rules/deprecated-headline-sizes.jspackages/eslint-plugin-dialtone/tests/lib/rules/deprecated-tshirt-sizes.js
💤 Files with no reviewable changes (1)
- apps/dialtone-documentation/docs/_data/type.json
Francis Rupert (francisrupert)
requested changes
Jun 24, 2026
Contributor
There was a problem hiding this comment.
Joshua Hynes (@hynes-dialpad) I see you made some updates, though hadn't officially re-requested review – but this jumped out at me and must be resolved.
Francis Rupert (francisrupert)
added
the
no-visual-test
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
apps/dialtone-documentation/docs/components/text.md (1)
85-115: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winUse a fenced
vue demoblock for the new Size example.This adds a live example as raw inline markup plus a separate
code-onlyblock, so the rendered example and shown code can drift. Wrap it in a single```vue demoblock and let the code tab derive from the demo markup unless you truly need custom code.As per path instructions, “ensure fenced code demos are complete and use
```vue demoblocks for new examples” and “Prefer auto-extracted demo code from the demo markup.”🤖 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 `@apps/dialtone-documentation/docs/components/text.md` around lines 85 - 115, The new Size example in the Text docs should be a single live demo, not raw inline markup plus a separate code-only snippet. Update the example in the text documentation to use one fenced vue demo block with the dt-text markup so the rendered preview and displayed code stay in sync, and remove the standalone code-only block for this case.Source: Path instructions
packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md (1)
106-113: 🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick winThe overlay event table documents the wrong contract for legacy components.
DtModal,DtTooltip, andDtToastare listed here asupdate:open, but the repo contract still treats those three as legacyupdate:showemitters. This pushes stale API guidance into the Dialtone reference content.Suggested fix
-| DtModal | `update:open` | -| DtTooltip | `update:open` | -| DtToast | `update:open` | +| DtModal | `update:show` | +| DtTooltip | `update:show` | +| DtToast | `update:show` |As per coding guidelines, “Use
update:showfor legacy Modal, Tooltip, and Toast overlay events in dialtone-vue.” As per path instructions, “Flag content edits that describe APIs, props, or behavior that has since changed in the source packages (stale 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 `@packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md` around lines 106 - 113, The visibility-toggle overlay event table is documenting the wrong emit contract for legacy components. Update the reference content so the entries for DtModal, DtTooltip, and DtToast use the legacy `update:show` event, while keeping DtPopover on `update:open`; make the change in the overlay event table within the reference component API patterns doc to match the current source package contract.Sources: Coding guidelines, Path instructions
packages/dialtone-vue/components/Text/Text.vue (1)
408-423: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winDon't let invalid
variantunlock rawsizeclasses.This gate only checks whether
variantis present, not whether it resolved to a supported composition. A typo like<dt-text variant="body-typo" size="300">will still emitd-text--fs-300aftergetVariantClass()returnsnull, which reintroduces the standalone raw-size behavior this follow-up is trying to block.Suggested fix
if (this.usesLegacyKindSize()) { return null; } + + if ( + !this.variant || + !Object.prototype.hasOwnProperty.call(TEXT_VARIANT_MODIFIERS, this.variant) + ) { + return null; + } const size = String(this.size);🤖 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 `@packages/dialtone-vue/components/Text/Text.vue` around lines 408 - 423, The size guard in Text.vue still allows raw size classes when variant is present but invalid, so update the logic around getVariantClass() and usesLegacyKindSize() to treat unsupported variants as unrecognized rather than unlocking size-only behavior. Make the size fallback depend on a valid resolved variant/composition, not just the presence of this.variant, so cases like an invalid variant string do not return TEXT_FONT_SIZE_MODIFIERS classes.
♻️ Duplicate comments (1)
packages/dialtone-vue/components/Text/Text.stories.js (1)
30-37: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winKeep Storybook’s default args aligned with the component default.
Text.vuenow defaultsvarianttonull, andText.test.jsexplicitly checks that<dt-text>inherits by default. SettingargsData.variant = 'body-md'makes the default story/documentation describe a different contract and hides the new “size without variant/kind” behavior in Controls. Keep this unset here and use a separate story for a pre-styled example.Suggested fix
- variant: 'body-md', + variant: undefined,As per path instructions, “Keep component source code, tests, Storybook stories, component docs JSON, VuePress documentation, MCP server data, and public docs JSON in sync when creating or updating components.”
🤖 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 `@packages/dialtone-vue/components/Text/Text.stories.js` around lines 30 - 37, The Storybook default args for Text are out of sync with the component’s default behavior because argsData.variant is hardcoded to a pre-styled value instead of reflecting Text.vue’s null default. Update the argsData object in Text.stories.js to leave variant unset, and keep the existing default story focused on inherited styling; if you still need a styled example, add a separate story that explicitly sets variant. Refer to argsData and the Text story exports when making the change so the controls and docs match Text.vue and Text.test.js.Source: Path instructions
🤖 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 `@apps/dialtone-documentation/docs/guides/migration/typography/index.md`:
- Around line 393-400: The migration example is inconsistent because the
“Before” case shows only a raw d-fs-200 utility, while the “After” case adds
variant="body-md" and changes more than font size. Update the example in the
typography guide so it either remains a utility-only migration (using the
relevant d-fs-* class) or changes the “Before” markup to an existing composed
text style that already has a variant. Use the surrounding migration guidance
and the dt-text example to keep the snippet aligned with the intended use of
size, variant, and legacy kind.
In `@packages/eslint-plugin-dialtone/tests/lib/rules/deprecated-tshirt-sizes.js`:
- Around line 187-190: Mark the dynamic dt-text size test cases in
deprecated-tshirt-sizes.js as non-fixable by adding output: null to the
RuleTester entries that currently only assert errors for unpaired dynamic
bindings. Use the existing dt-text test blocks around the unpaired dynamic size
cases and mirror the static output: null coverage already present so the tests
will fail if a fixer is added later.
---
Outside diff comments:
In `@apps/dialtone-documentation/docs/components/text.md`:
- Around line 85-115: The new Size example in the Text docs should be a single
live demo, not raw inline markup plus a separate code-only snippet. Update the
example in the text documentation to use one fenced vue demo block with the
dt-text markup so the rendered preview and displayed code stay in sync, and
remove the standalone code-only block for this case.
In
`@packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md`:
- Around line 106-113: The visibility-toggle overlay event table is documenting
the wrong emit contract for legacy components. Update the reference content so
the entries for DtModal, DtTooltip, and DtToast use the legacy `update:show`
event, while keeping DtPopover on `update:open`; make the change in the overlay
event table within the reference component API patterns doc to match the current
source package contract.
In `@packages/dialtone-vue/components/Text/Text.vue`:
- Around line 408-423: The size guard in Text.vue still allows raw size classes
when variant is present but invalid, so update the logic around
getVariantClass() and usesLegacyKindSize() to treat unsupported variants as
unrecognized rather than unlocking size-only behavior. Make the size fallback
depend on a valid resolved variant/composition, not just the presence of
this.variant, so cases like an invalid variant string do not return
TEXT_FONT_SIZE_MODIFIERS classes.
---
Duplicate comments:
In `@packages/dialtone-vue/components/Text/Text.stories.js`:
- Around line 30-37: The Storybook default args for Text are out of sync with
the component’s default behavior because argsData.variant is hardcoded to a
pre-styled value instead of reflecting Text.vue’s null default. Update the
argsData object in Text.stories.js to leave variant unset, and keep the existing
default story focused on inherited styling; if you still need a styled example,
add a separate story that explicitly sets variant. Refer to argsData and the
Text story exports when making the change so the controls and docs match
Text.vue and Text.test.js.
🪄 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: ASSERTIVE
Plan: Enterprise
Run ID: fea2b989-e9fb-4b3a-97e9-e639d46fce2b
📒 Files selected for processing (9)
apps/dialtone-documentation/docs/components/text.mdapps/dialtone-documentation/docs/guides/migration/typography/index.mdpackages/dialtone-docs/src/content/reference/reference-component-api-patterns.mdpackages/dialtone-vue/components/Text/Text.stories.jspackages/dialtone-vue/components/Text/Text.test.jspackages/dialtone-vue/components/Text/Text.vuepackages/eslint-plugin-dialtone/docs/rules/deprecated-tshirt-sizes.mdpackages/eslint-plugin-dialtone/lib/rules/deprecated-tshirt-sizes.jspackages/eslint-plugin-dialtone/tests/lib/rules/deprecated-tshirt-sizes.js
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
dialpad/ios(manual)dialpad/firespotter(manual)dialpad/semantic-release-changelog-json(auto-detected)dialpad/conventional-changelog-angular(auto-detected)
Francis Rupert (francisrupert)
approved these changes
Jun 29, 2026
Francis Rupert (francisrupert)
left a comment
Francis Rupert (francisrupert)
left a comment
Contributor
There was a problem hiding this comment.
Great update. I have updates for the Combinator in #1343 that will do a better job of exclusions: e.g. if variant is selected, the kind prop is disabled, among others.
Plus all the presets in variants_text.js will be updated to use variant instead of current kind+size.
My comments below are purely documentation. Approving for the moment so you merge after doing those.
…-typography-api # Conflicts: # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/avatar-dark.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/loader-dark.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/loader-light.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/modal-dark.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/modal-light.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/motion-text-dark.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/motion-text-light.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/prose-dark.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/prose-light.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tab-group-dark.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tab-group-light.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tabs-dark.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tabs-light.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/text-dark.png # apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/text-light.png
Contributor
|
✔️ Deploy previews ready! |
Joshua Hynes (hynes-dialpad)
deleted the
feat/DLT-3487-dt-text-typography-api
branch
June 30, 2026 03:26
7 tasks
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Jul 3, 2026
# [1.2.0-next.14](combinator/v1.2.0-next.13...combinator/v1.2.0-next.14) (2026-07-03) ### Features * **Combinator:** DLT-3479 add combinator grid view ([#1337](#1337)) ([b1f5599](b1f5599)) * **Combinator:** DLT-3489 DLT-3490 DLT-3491 refine control panel ui ([#1343](#1343)) ([0385c2f](0385c2f)) * **Text:** DLT-3487 expose full typography size scale ([#1334](#1334)) ([0c8f4c6](0c8f4c6))
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Jul 3, 2026
# [8.81.0-next.4](dialtone-css/v8.81.0-next.3...dialtone-css/v8.81.0-next.4) (2026-07-03) ### Bug Fixes * **Scripts:** NO-JIRA improve theme-to-mode migration script ([#1338](#1338)) ([59f220f](59f220f)) ### Features * **Text:** DLT-3487 expose full typography size scale ([#1334](#1334)) ([0c8f4c6](0c8f4c6))
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Jul 3, 2026
# [2.0.0-next.1](dialtone-tokens/v1.48.0-next.20...dialtone-tokens/v2.0.0-next.1) (2026-07-03) ### Features * **Dialtone Tokens:** NO-JIRA publish swift prerelease tokens on next ([#1353](#1353)) ([294e1f0](294e1f0)) * **Text:** DLT-3487 expose full typography size scale ([#1334](#1334)) ([0c8f4c6](0c8f4c6)) ### BREAKING CHANGES * **Dialtone Tokens:** Dialtone version 10
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Jul 3, 2026
# [3.223.0-next.3](dialtone-vue/v3.223.0-next.2...dialtone-vue/v3.223.0-next.3) (2026-07-03) ### Bug Fixes * **Modal:** DLT-3476 do not close when drag starts inside dialog and ends on backdrop ([#1322](#1322)) ([4d5726b](4d5726b)) * **Popover:** NO-JIRA guard onShow against window access after component unmount ([#1320](#1320)) ([4690585](4690585)) * **Rich Text Editor:** DP-190440 strip trailing <br> before </p> on paste ([#1326](#1326)) ([28737c0](28737c0)) ### Features * **Combinator:** DLT-3489 DLT-3490 DLT-3491 refine control panel ui ([#1343](#1343)) ([0385c2f](0385c2f)) * **Text:** DLT-3487 expose full typography size scale ([#1334](#1334)) ([0c8f4c6](0c8f4c6))
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Jul 3, 2026
# [1.14.0-next.3](eslint-plugin-dialtone/v1.14.0-next.2...eslint-plugin-dialtone/v1.14.0-next.3) (2026-07-03) ### Bug Fixes * **Eslint Plugin Dialtone:** NO-JIRA declare eslint-plugin-n devDependency lost to pnpm 11 hoisting change ([2998ec7](2998ec7)) ### Features * **Combinator:** DLT-3489 DLT-3490 DLT-3491 refine control panel ui ([#1343](#1343)) ([0385c2f](0385c2f)) * **Text:** DLT-3487 expose full typography size scale ([#1334](#1334)) ([0c8f4c6](0c8f4c6))
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Jul 3, 2026
# [10.0.0-next.1](dialtone/v9.188.0-next.4...dialtone/v10.0.0-next.1) (2026-07-03) ### Bug Fixes * **Dialtone Cli:** NO-JIRA wire into release and publish pipelines ([#1321](#1321)) ([84d9c3c](84d9c3c)) * **Eslint Plugin Dialtone:** NO-JIRA declare eslint-plugin-n devDependency lost to pnpm 11 hoisting change ([2998ec7](2998ec7)) * **Modal:** DLT-3476 do not close when drag starts inside dialog and ends on backdrop ([#1322](#1322)) ([4d5726b](4d5726b)) * **Popover:** NO-JIRA guard onShow against window access after component unmount ([#1320](#1320)) ([4690585](4690585)) * **Rich Text Editor:** DP-190440 strip trailing <br> before </p> on paste ([#1326](#1326)) ([28737c0](28737c0)) * **Scripts:** NO-JIRA improve theme-to-mode migration script ([#1338](#1338)) ([59f220f](59f220f)) ### Documentation * **Content:** DLT-3501 refresh content guidance IA ([#1345](#1345)) ([4085112](4085112)) * **Content:** DLT-3502 create writing approach guidance ([#1347](#1347)) ([a0c540d](a0c540d)) ### Features * **Combinator:** DLT-3479 add combinator grid view ([#1337](#1337)) ([b1f5599](b1f5599)) * **Combinator:** DLT-3489 DLT-3490 DLT-3491 refine control panel ui ([#1343](#1343)) ([0385c2f](0385c2f)) * **Dialtone Tokens:** NO-JIRA publish swift prerelease tokens on next ([#1353](#1353)) ([294e1f0](294e1f0)) * **Text:** DLT-3487 expose full typography size scale ([#1334](#1334)) ([0c8f4c6](0c8f4c6)) ### BREAKING CHANGES * **Dialtone Tokens:** Dialtone version 10
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Jul 14, 2026
# [3.224.0-next.1](dialtone-vue/v3.223.1...dialtone-vue/v3.224.0-next.1) (2026-07-14) ### Bug Fixes * **Components:** dlt-3408 components clean up ([#1264](#1264)) ([38c383a](38c383a)) * **Components:** no-jira update tree-shaking export ([#1270](#1270)) ([f12ddcc](f12ddcc)) * **Dialtone Vue:** NO-JIRA declare @vitejs/plugin-react devDependency for storybook build ([0a02bf8](0a02bf8)) * **Editor:** NO-JIRA remove extra blank line in editor.mdx ([18c47ef](18c47ef)) * **Filter Pill, Mode Island:** NO-JIRA make next-only code SSR-safe after static rendering merge ([cd174ca](cd174ca)) * **Image Viewer:** DLT-3456 trap focus within the modal via v-dt-focustrap directive ([#1313](#1313)) ([a5aa3e7](a5aa3e7)) * **Modal:** auto-detect shadow root and teleport dialog into it ([#1268](#1268)) ([f945c84](f945c84)) * NO-JIRA regenerate pnpm-lock.yaml after staging merge ([4462a1a](4462a1a)) * **Resizable, Box:** DLT-3445 accept full layout token set ([#1293](#1293)) ([4a63990](4a63990)) * **Resizable:** DLT-3444 center handle position ([#1291](#1291)) ([0d5d639](0d5d639)) * **Rich Text Editor:** bubble menu error ([68e3591](68e3591)) * **Segmented Control:** DLT-3443 correct background color of traveling indicator ([#1290](#1290)) ([5fc4fa8](5fc4fa8)) * **Split Button, Filter Pill:** DLT-3260 DLT-3261 correct misalignment at size 100 ([#1176](#1176)) ([fe2b777](fe2b777)) * **Tabs:** DLT-3251 improve accessibility ([#1171](#1171)) ([01b101e](01b101e)) * **Validation Messages:** DLT-3430 fix VoiceOver silent on validation messages ([#1285](#1285)) ([96adfdf](96adfdf)) ### Code Refactoring * **Box:** DLT-3333 rename percent prop values to p-suffix ([#1208](#1208)) ([e5fa5da](e5fa5da)) * **Combobox Multi Select:** NO-JIRA use logical css properties ([#1104](#1104)) ([a675daf](a675daf)) * **Components,recipes:** DLT-3043 DLT-3046 logical start/end naming with deprecated backward-compatible fallbacks ([#1079](#1079)) ([1d26a4e](1d26a4e)) * **Components:** DLT-3100 remove rootClass references ([#1184](#1184)) ([6531783](6531783)) * **Components:** DLT-3160 standardize v-model event handling ([#1201](#1201)) ([f1624d4](f1624d4)) * **Components:** dlt-3196 components to pascal case ([#1255](#1255)) ([aa6d259](aa6d259)) * **Components:** dlt-3282 renamed show prop to open ([#1190](#1190)) ([5509d0f](5509d0f)) * **Components:** dlt-3283 refactor prop/slots to be consistent ([#1196](#1196)) ([2d22c76](2d22c76)) * **Components:** DLT-3284 refactor props to not have native html attributes names ([#1204](#1204)) ([48a0f57](48a0f57)) * **Modal:** DLT-3262 migrate DtModal to native dialog element ([#1179](#1179)) ([589edb5](589edb5)) * **Modal:** DLT-3453 trap focus with v-dt-focustrap directive ([#1316](#1316)) ([6e2a868](6e2a868)) * **Popover:** DLT-3455 trap focus with v-dt-focustrap directive ([#1312](#1312)) ([e57e227](e57e227)) * **Resizable:** DLT-3335 align size props on --dt-layout-* instead of --dt-size-* ([#1215](#1215)) ([c156dbc](c156dbc)) * **Text:** DLT-3302 tone prop uses css variables instead of css utilities ([#1197](#1197)) ([75df16f](75df16f)) * **Tokens,css,link,text,breadcrumbs,input Group,split Button:** tokens, CSS foundation, deprecations, tooling DLT-3011 DLT-2961 DLT-3068 DLT-3069 DLT-3070 DLT-3071 DLT-3072 ([#1092](#1092)) ([7783090](7783090)) * **Tokens:** DLT-3013 convert color system from HSL to OKLCH ([#1060](#1060)) ([42dc418](42dc418)) * **Validation Messages:** DLT-3422 update to use icon slot over embedded icon ([#1272](#1272)) ([344b737](344b737)) ### Documentation * **Combinator:** DLT-3424 bridge logical to physical naming ([#1273](#1273)) ([ad4a5a1](ad4a5a1)) * **Css Utilities:** DLT-3337 migrate internal utility-class consumers to token-indexed names and rewrite radius docs ([#1212](#1212)) ([d675238](d675238)) * **Dialtone Vue:** DLT-3226 update documentation and consuming code to numeric size scale ([#1158](#1158)) ([149c763](149c763)) * DLT-3345 migrate d-stack*/d-flow* wrappers to DtStack ([#1218](#1218)) ([fa090ef](fa090ef)) * DLT-3434 build pipeline for component wall thumbs ([#1278](#1278)) ([cb9992f](cb9992f)) * **Playground:** DLT-3119 refine playground UI and integrate across doc site ([#1127](#1127)) ([ba6b599](ba6b599)) ### Features * **Avatar:** DLT-2942 updated avatar component ([#1047](#1047)) ([e50563d](e50563d)) * **Avatar:** DLT-3161 change from clickable to "interactive" ([#1182](#1182)) ([2d00fe0](2d00fe0)) * **Banner, Notice, Toast, Breadcrumbs, Checkbox, Radio, Input, Select Menu, Empty State:** visual refresh, dt-text integration, form api parity DLT-2944 DLT-2945 DLT-2949 DLT-2959 DLT-2960 DLT-2957 ([#1091](#1091)) ([16e908a](16e908a)) * **Banner:** DLT-3454 trap focus with v-dt-focustrap directive ([#1310](#1310)) ([22faacf](22faacf)) * **Box:** DLT-3315 new DtBox primitive component ([#1203](#1203)) ([e0c942e](e0c942e)) * **Box:** DLT-3523 add positioning props to DtBox ([#1355](#1355)) ([68a6570](68a6570)) * **Box:** NO-JIRA add overlay surface value ([#1328](#1328)) ([ea7a8a5](ea7a8a5)) * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **Chip:** DLT-3195 change interactive prop default from true to false ([#1246](#1246)) ([30a5ea2](30a5ea2)) * **Colors:** DLT-3354 split green palette into distinct light and dark mode values ([#1225](#1225)) ([cf63034](cf63034)) * **Combinator:** DLT-3312 preview resolved value in sized props ([#1199](#1199)) ([61bb610](61bb610)) * **Combinator:** DLT-3489 DLT-3490 DLT-3491 refine control panel ui ([#1343](#1343)) ([0385c2f](0385c2f)) * **Components:** dlt-3096 add slot classes ([#1214](#1214)) ([5f6528e](5f6528e)) * **Components:** DLT-3157 align critical/positive prop values and CSS class names ([#1177](#1177)) ([edd98b2](edd98b2)) * **Components:** DLT-3159 enforce positive boolean props ([#1198](#1198)) ([ac73bdc](ac73bdc)) * **Css Utilities, Design Tokens:** DLT-3330 DLT-3332 add off-scale pixel-indexed layout tokens and sizing utilities ([#1206](#1206)) ([1054875](1054875)) * **Css Utilities, Eslint Plugin Dialtone:** DLT-3329 update border-radius css utilities and associated tooling ([#1211](#1211)) ([6bc3599](6bc3599)) * **Design Tokens, Text, Link, Box, Css:** DLT-3338 add info semantic tokens and consumers ([#1210](#1210)) ([2f04b45](2f04b45)) * **Design Tokens:** DLT-3368 DLT-3371 DLT-3410 add material dimension and brand-locked pairings ([#1252](#1252)) ([eeedc67](eeedc67)) * **Dialtone Css, Dialtone Tokens, Dialtone Vue:** DLT-3197 DLT-3198 DLT-3199 DLT-3200 DLT-3201 DLT-3202 DLT-3203 DLT-3204 DLT-3205 DLT-3206 DLT-3207 DLT-3208 DLT-3209 DLT-3210 DLT-3211 token-stop utility classes, migration tooling, and documentation ([#1150](#1150)) ([6237b84](6237b84)) * **Dialtone Vue:** DLT-3225 migrate component size props to numeric ordinal scale ([#1157](#1157)) ([725bd41](725bd41)) * DLT-3534 align size prop types across components and modal fullscreen ([#1362](#1362)) ([8fb88a1](8fb88a1)) * **Eslint Plugin Dialtone:** DLT-3365 add deprecated-stack-flow-classes rule ([#1247](#1247)) ([8554f5a](8554f5a)) * **Filter Pill:** DLT-2941 DtFilterPill improvements ([#1110](#1110)) ([23c5689](23c5689)) * **Focusgroup:** DLT-3285 add v-dt-focusgroup directive for declarative roving tabindex ([#1187](#1187)) ([e1ea074](e1ea074)) * **Focustrap:** DLT-3297 add v-dt-focustrap directive for declarative focus trapping ([#1195](#1195)) ([6ef9a21](6ef9a21)) * **Hovercard:** DLT-2845 add focus trap to hovercard content ([#1330](#1330)) ([b5aa615](b5aa615)) * **Link,button:** DLT-3012 add underline prop ([#1059](#1059)) ([1cb91ea](1cb91ea)) * **Link:** DLT-3529 add unstyled variant ([#1360](#1360)) ([b90c2cc](b90c2cc)) * **Modal:** DLT-3432 add transparentBackdrop prop ([#1277](#1277)) ([daace31](daace31)) * **Modal:** NO-JIRA apply headerClass to header text element ([#1279](#1279)) ([3cb4282](3cb4282)) * **Mode Directive, Mode Island:** DLT-3067 DLT-3078 DLT-3077 add `v-dt-mode` directive ([#1109](#1109)) ([f97efca](f97efca)) * **Popover, Tooltip:** DLT-3419 auto-append to nearest dialog for top-layer support ([#1266](#1266)) ([a5427e8](a5427e8)) * **Presence, Avatar:** DLT-3438 add icons to presence ([#1287](#1287)) ([51062be](51062be)) * **Prose:** DLT-3245 new component ([#1169](#1169)) ([adee928](adee928)) * **Scrollbar:** DLT-3158 implement object props ([#1249](#1249)) ([09ff456](09ff456)) * **Segmented Control:** DLT-413 new component ([#1144](#1144)) ([ad4c6c3](ad4c6c3)) * **Split Button:** DLT-3257 add show-divider prop ([#1173](#1173)) ([5bef411](5bef411)) * **Tabs:** DLT-3114 add vertical orientation variant ([#1120](#1120)) ([3290a23](3290a23)) * **Tabs:** DLT-3162 add spread prop for horizontal distribution ([#1135](#1135)) ([6e7cd04](6e7cd04)) * **Text List:** DLT-3530 add DtTextList component ([#1363](#1363)) ([9c9fc0d](9c9fc0d)) * **Text:** DLT-3487 expose full typography size scale ([#1334](#1334)) ([0c8f4c6](0c8f4c6)) * **Text:** export text component from dialtone-vue ([757fdb7](757fdb7)) * **Tokens, Css:** DLT-3331 rename success tokens and utility classes to positive ([#1230](#1230)) ([34bdff5](34bdff5)) * **Tokens:** DLT-2937 introduce spacing and layout token systems ([#1045](#1045)) ([de23e12](de23e12)) * **Tokens:** update color ramps and consumer color migration tools DLT-3004 DLT-3005 DLT-3006 DLT-3007 DLT-3008 ([#1054](#1054)) ([28cb1de](28cb1de)) * **Validation Messages:** DLT-3423 add info variant ([#1274](#1274)) ([412154b](412154b)) ### Reverts * remove accidental next-shadows commits from next ([868a502](868a502))
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Aug 10, 2026
# [3.225.0-next.1](dialtone-vue/v3.224.0...dialtone-vue/v3.225.0-next.1) (2026-08-10) ### Bug Fixes * **Chip, Combobox Multi Select:** DLT-3554 DLT-3555 correct chip spacing and multi-select alignment ([#1380](#1380)) ([bb53556](bb53556)) * **Components:** dlt-3408 components clean up ([#1264](#1264)) ([38c383a](38c383a)) * **Components:** no-jira update tree-shaking export ([#1270](#1270)) ([f12ddcc](f12ddcc)) * **Dialtone Vue:** NO-JIRA declare @vitejs/plugin-react devDependency for storybook build ([0a02bf8](0a02bf8)) * DLT-3552 suppress unintended focus rings in component regions ([#1376](#1376)) ([c792768](c792768)) * **Docs:** DLT-3558 correct out-of-sync [@values](https://github.com/values) JSDoc annotations ([#1383](#1383)) ([0ef001b](0ef001b)) * **Editor:** NO-JIRA remove extra blank line in editor.mdx ([18c47ef](18c47ef)) * **Filter Pill, Mode Island:** NO-JIRA make next-only code SSR-safe after static rendering merge ([cd174ca](cd174ca)) * **Image Viewer:** DLT-3456 trap focus within the modal via v-dt-focustrap directive ([#1313](#1313)) ([a5aa3e7](a5aa3e7)) * **Modal:** auto-detect shadow root and teleport dialog into it ([#1268](#1268)) ([f945c84](f945c84)) * NO-JIRA regenerate pnpm-lock.yaml after staging merge ([4462a1a](4462a1a)) * **Resizable, Box:** DLT-3445 accept full layout token set ([#1293](#1293)) ([4a63990](4a63990)) * **Resizable:** DLT-3444 center handle position ([#1291](#1291)) ([0d5d639](0d5d639)) * **Rich Text Editor:** bubble menu error ([68e3591](68e3591)) * **Segmented Control:** DLT-3443 correct background color of traveling indicator ([#1290](#1290)) ([5fc4fa8](5fc4fa8)) * **Split Button, Filter Pill:** DLT-3260 DLT-3261 correct misalignment at size 100 ([#1176](#1176)) ([fe2b777](fe2b777)) * **Tab Group:** DLT-3564 emit target panel id on before-change ([#1386](#1386)) ([0c7b5c6](0c7b5c6)) * **Tabs:** DLT-3251 improve accessibility ([#1171](#1171)) ([01b101e](01b101e)) * **Validation Messages:** DLT-3430 fix VoiceOver silent on validation messages ([#1285](#1285)) ([96adfdf](96adfdf)) ### Code Refactoring * **Box:** DLT-3333 rename percent prop values to p-suffix ([#1208](#1208)) ([e5fa5da](e5fa5da)) * **Combobox Multi Select:** NO-JIRA use logical css properties ([#1104](#1104)) ([a675daf](a675daf)) * **Components,recipes:** DLT-3043 DLT-3046 logical start/end naming with deprecated backward-compatible fallbacks ([#1079](#1079)) ([1d26a4e](1d26a4e)) * **Components:** DLT-3100 remove rootClass references ([#1184](#1184)) ([6531783](6531783)) * **Components:** DLT-3160 standardize v-model event handling ([#1201](#1201)) ([f1624d4](f1624d4)) * **Components:** dlt-3196 components to pascal case ([#1255](#1255)) ([aa6d259](aa6d259)) * **Components:** dlt-3282 renamed show prop to open ([#1190](#1190)) ([5509d0f](5509d0f)) * **Components:** dlt-3283 refactor prop/slots to be consistent ([#1196](#1196)) ([2d22c76](2d22c76)) * **Components:** DLT-3284 refactor props to not have native html attributes names ([#1204](#1204)) ([48a0f57](48a0f57)) * **Dialtone Vue,dialtone Css:** DLT-3536 clean up remaining legacy prop migration references ([#1374](#1374)) ([0629638](0629638)) * **Dialtone Vue,dialtone Css:** DLT-3537 remove recipes ([#1371](#1371)) ([8611a05](8611a05)) * **Modal:** DLT-3262 migrate DtModal to native dialog element ([#1179](#1179)) ([589edb5](589edb5)) * **Modal:** DLT-3453 trap focus with v-dt-focustrap directive ([#1316](#1316)) ([6e2a868](6e2a868)) * **Popover:** DLT-3455 trap focus with v-dt-focustrap directive ([#1312](#1312)) ([e57e227](e57e227)) * **Resizable:** DLT-3335 align size props on --dt-layout-* instead of --dt-size-* ([#1215](#1215)) ([c156dbc](c156dbc)) * **Text:** DLT-3302 tone prop uses css variables instead of css utilities ([#1197](#1197)) ([75df16f](75df16f)) * **Tokens,css,link,text,breadcrumbs,input Group,split Button:** tokens, CSS foundation, deprecations, tooling DLT-3011 DLT-2961 DLT-3068 DLT-3069 DLT-3070 DLT-3071 DLT-3072 ([#1092](#1092)) ([7783090](7783090)) * **Tokens:** DLT-3013 convert color system from HSL to OKLCH ([#1060](#1060)) ([42dc418](42dc418)) * **Validation Messages:** DLT-3422 update to use icon slot over embedded icon ([#1272](#1272)) ([344b737](344b737)) ### Documentation * **Combinator:** DLT-3424 bridge logical to physical naming ([#1273](#1273)) ([ad4a5a1](ad4a5a1)) * **Css Utilities:** DLT-3337 migrate internal utility-class consumers to token-indexed names and rewrite radius docs ([#1212](#1212)) ([d675238](d675238)) * **Dialtone Vue:** DLT-3226 update documentation and consuming code to numeric size scale ([#1158](#1158)) ([149c763](149c763)) * DLT-3345 migrate d-stack*/d-flow* wrappers to DtStack ([#1218](#1218)) ([fa090ef](fa090ef)) * DLT-3434 build pipeline for component wall thumbs ([#1278](#1278)) ([cb9992f](cb9992f)) * **Playground:** DLT-3119 refine playground UI and integrate across doc site ([#1127](#1127)) ([ba6b599](ba6b599)) ### Features * **Avatar:** DLT-2942 updated avatar component ([#1047](#1047)) ([e50563d](e50563d)) * **Avatar:** DLT-3161 change from clickable to "interactive" ([#1182](#1182)) ([2d00fe0](2d00fe0)) * **Banner, Notice, Toast, Breadcrumbs, Checkbox, Radio, Input, Select Menu, Empty State:** visual refresh, dt-text integration, form api parity DLT-2944 DLT-2945 DLT-2949 DLT-2959 DLT-2960 DLT-2957 ([#1091](#1091)) ([16e908a](16e908a)) * **Banner:** DLT-3454 trap focus with v-dt-focustrap directive ([#1310](#1310)) ([22faacf](22faacf)) * **Box:** DLT-3315 new DtBox primitive component ([#1203](#1203)) ([e0c942e](e0c942e)) * **Box:** DLT-3523 add positioning props to DtBox ([#1355](#1355)) ([68a6570](68a6570)) * **Box:** NO-JIRA add overlay surface value ([#1328](#1328)) ([ea7a8a5](ea7a8a5)) * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **Chip:** DLT-3195 change interactive prop default from true to false ([#1246](#1246)) ([30a5ea2](30a5ea2)) * **Colors:** DLT-3354 split green palette into distinct light and dark mode values ([#1225](#1225)) ([cf63034](cf63034)) * **Combinator:** DLT-3312 preview resolved value in sized props ([#1199](#1199)) ([61bb610](61bb610)) * **Combinator:** DLT-3489 DLT-3490 DLT-3491 refine control panel ui ([#1343](#1343)) ([0385c2f](0385c2f)) * **Components:** dlt-3096 add slot classes ([#1214](#1214)) ([5f6528e](5f6528e)) * **Components:** DLT-3157 align critical/positive prop values and CSS class names ([#1177](#1177)) ([edd98b2](edd98b2)) * **Components:** DLT-3159 enforce positive boolean props ([#1198](#1198)) ([ac73bdc](ac73bdc)) * **Css Utilities, Design Tokens:** DLT-3330 DLT-3332 add off-scale pixel-indexed layout tokens and sizing utilities ([#1206](#1206)) ([1054875](1054875)) * **Css Utilities, Eslint Plugin Dialtone:** DLT-3329 update border-radius css utilities and associated tooling ([#1211](#1211)) ([6bc3599](6bc3599)) * **Design Tokens, Text, Link, Box, Css:** DLT-3338 add info semantic tokens and consumers ([#1210](#1210)) ([2f04b45](2f04b45)) * **Design Tokens:** DLT-3368 DLT-3371 DLT-3410 add material dimension and brand-locked pairings ([#1252](#1252)) ([eeedc67](eeedc67)) * **Dialtone Css, Dialtone Tokens, Dialtone Vue:** DLT-3197 DLT-3198 DLT-3199 DLT-3200 DLT-3201 DLT-3202 DLT-3203 DLT-3204 DLT-3205 DLT-3206 DLT-3207 DLT-3208 DLT-3209 DLT-3210 DLT-3211 token-stop utility classes, migration tooling, and documentation ([#1150](#1150)) ([6237b84](6237b84)) * **Dialtone Vue:** DLT-3225 migrate component size props to numeric ordinal scale ([#1157](#1157)) ([725bd41](725bd41)) * DLT-3534 align size prop types across components and modal fullscreen ([#1362](#1362)) ([8fb88a1](8fb88a1)) * **Eslint Plugin Dialtone:** DLT-3365 add deprecated-stack-flow-classes rule ([#1247](#1247)) ([8554f5a](8554f5a)) * **Filter Pill:** DLT-2941 DtFilterPill improvements ([#1110](#1110)) ([23c5689](23c5689)) * **Focusgroup:** DLT-3285 add v-dt-focusgroup directive for declarative roving tabindex ([#1187](#1187)) ([e1ea074](e1ea074)) * **Focustrap:** DLT-3297 add v-dt-focustrap directive for declarative focus trapping ([#1195](#1195)) ([6ef9a21](6ef9a21)) * **Hovercard:** DLT-2845 add focus trap to hovercard content ([#1330](#1330)) ([b5aa615](b5aa615)) * **Link,button:** DLT-3012 add underline prop ([#1059](#1059)) ([1cb91ea](1cb91ea)) * **Link:** DLT-3529 add unstyled variant ([#1360](#1360)) ([b90c2cc](b90c2cc)) * **Modal:** DLT-3432 add transparentBackdrop prop ([#1277](#1277)) ([daace31](daace31)) * **Modal:** NO-JIRA apply headerClass to header text element ([#1279](#1279)) ([3cb4282](3cb4282)) * **Mode Directive, Mode Island:** DLT-3067 DLT-3078 DLT-3077 add `v-dt-mode` directive ([#1109](#1109)) ([f97efca](f97efca)) * **Popover, Tooltip:** DLT-3419 auto-append to nearest dialog for top-layer support ([#1266](#1266)) ([a5427e8](a5427e8)) * **Presence, Avatar:** DLT-3438 add icons to presence ([#1287](#1287)) ([51062be](51062be)) * **Prose:** DLT-3245 new component ([#1169](#1169)) ([adee928](adee928)) * **Scrollbar:** DLT-3158 implement object props ([#1249](#1249)) ([09ff456](09ff456)) * **Segmented Control:** DLT-413 new component ([#1144](#1144)) ([ad4c6c3](ad4c6c3)) * **Split Button:** DLT-3257 add show-divider prop ([#1173](#1173)) ([5bef411](5bef411)) * **Tabs:** DLT-3114 add vertical orientation variant ([#1120](#1120)) ([3290a23](3290a23)) * **Tabs:** DLT-3162 add spread prop for horizontal distribution ([#1135](#1135)) ([6e7cd04](6e7cd04)) * **Text List:** DLT-3530 add DtTextList component ([#1363](#1363)) ([9c9fc0d](9c9fc0d)) * **Text:** DLT-3487 expose full typography size scale ([#1334](#1334)) ([0c8f4c6](0c8f4c6)) * **Text:** export text component from dialtone-vue ([757fdb7](757fdb7)) * **Tokens, Css:** DLT-3331 rename success tokens and utility classes to positive ([#1230](#1230)) ([34bdff5](34bdff5)) * **Tokens:** DLT-2937 introduce spacing and layout token systems ([#1045](#1045)) ([de23e12](de23e12)) * **Tokens:** update color ramps and consumer color migration tools DLT-3004 DLT-3005 DLT-3006 DLT-3007 DLT-3008 ([#1054](#1054)) ([28cb1de](28cb1de)) * **Validation Messages:** DLT-3423 add info variant ([#1274](#1274)) ([412154b](412154b)) ### Reverts * remove accidental next-shadows commits from next ([868a502](868a502))
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
3 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-3487
📖 Description
DtTextsizefor raw font-size control, including the new 50, 75, 450, and 550-800 stops while keeping 125.variant,family, anditalicsupport toDtText, withvariantused for complete typography composition and numericsizeavailable as an override.variantinstead of the older numericsizesuggestions.💡 Context
DtTextpreviously coupled composition and size throughkind + size, and thesizeprop did not expose all available font-size token stops. This keeps the legacy API backward compatible while giving new usage a clearer split:variantfor text composition,sizefor raw font-size tokens,familyfor font-family selection, anditalicfor font style.✅ Validation
Passed locally:
pnpm --dir packages/dialtone-vue exec vitest run components/Text/Text.test.js --test-timeout=10000pnpm --dir packages/eslint-plugin-dialtone exec mocha tests/lib/rules/deprecated-tshirt-sizes.js tests/lib/rules/deprecated-headline-sizes.jspnpm --dir packages/dialtone-css run lint(passes with existing warnings)pnpm --dir packages/dialtone-docs run buildpnpm --dir packages/dialtone-docs run testpnpm --dir packages/dialtone-docs run check-freshnesspnpm --dir packages/dialtone-tokens run testpnpm --dir apps/dialtone-documentation exec markdownlint docs/components/text.md docs/guides/migration/typography/index.md docs/utilities/typography/font-size.mdLocal caveats:
pnpm nx run eslint-plugin-dialtone:testhit local Nx project graph/daemon issues and later hung; focused rule tests passed directly.pnpm --dir apps/dialtone-documentation run lintfails on existing unrelated markdownlint issues outside this PR's changed typography docs.📝 Checklist
For all PRs:
For all Vue changes:
For all CSS changes:
🔮 Next Steps
📷 Screenshots / GIFs
Not included. The PR updates generated docs thumbnails and should be reviewed in the docs deploy preview.
🔗 Sources
None.