feat(components): DLT-3157 align critical/positive prop values and CSS class names#1177
Merged
Brad Paugh (braddialpad) merged 7 commits intonextfrom Apr 12, 2026
Merged
feat(components): DLT-3157 align critical/positive prop values and CSS class names#1177Brad Paugh (braddialpad) merged 7 commits intonextfrom
Brad Paugh (braddialpad) merged 7 commits intonextfrom
Conversation
Brad Paugh (braddialpad)
requested review from
Francis Rupert (francisrupert),
Ignacio Ropolo (iropolo) and
Nina Repetto (ninarepetto)
as code owners
Contributor
|
Please add either the |
Brad Paugh (braddialpad)
added
the
no-visual-test
Brad Paugh (braddialpad)
changed the title
![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: c8d0688033
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "Codex (@codex) address that feedback".
Francis Rupert (francisrupert)
requested changes
Apr 8, 2026
Contributor
Francis Rupert (francisrupert)
left a comment
Francis Rupert (francisrupert)
left a comment
There was a problem hiding this comment.
Remapping props looking as expected.
One major update to make regarding @deprecated-values.
Would documentation updates be a followup PR for all affected components?
e.g. Badge...
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:
WalkthroughRenamed semantic variants across the repository: Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes ✨ 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: 18
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (7)
packages/dialtone-vue/components/badge/badge_constants.js (1)
1-9:⚠️ Potential issue | 🔴 CriticalRestore
successinBADGE_TYPE_MODIFIERSto preserve deprecated prop support.Removing the
successkey makestype="success"resolve to no modifier class and fails the backward-compatibility contract.Suggested fix
export const BADGE_TYPE_MODIFIERS = { default: '', info: 'd-badge--info', + success: 'd-badge--success', positive: 'd-badge--positive', warning: 'd-badge--warning', critical: 'd-badge--critical', bulletin: 'd-badge--bulletin', ai: 'd-badge--ai', };As per coding guidelines, "Keep reviews short: flag primarily issues that make the PR unsafe to merge and/or difficult to maintain."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/dialtone-vue/components/badge/badge_constants.js` around lines 1 - 9, The BADGE_TYPE_MODIFIERS map removed the legacy "success" key causing type="success" to lose its modifier; restore backward compatibility by adding a "success" entry to BADGE_TYPE_MODIFIERS (map "success" to the same class as the current positive variant, e.g., 'd-badge--positive') so components reading BADGE_TYPE_MODIFIERS continue to apply the expected modifier for type="success".packages/dialtone-vue/components/link/index.js (1)
2-11:⚠️ Potential issue | 🟠 MajorRestore deprecated constant re-exports to keep the public API backward-compatible.
Line 3–4 introduces new names, but removing
DANGER/SUCCESSfrom this entrypoint can break existing consumers importing from@/components/link(or equivalent public path). If backward compatibility is a goal for this PR, keep deprecated aliases exported here.Proposed fix
export { CRITICAL, POSITIVE, + CRITICAL as DANGER, // deprecated alias + POSITIVE as SUCCESS, // deprecated alias WARNING, MUTED, MENTION, LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier, } from './link_constants';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/dialtone-vue/components/link/index.js` around lines 2 - 11, Restore the deprecated re-exports DANGER and SUCCESS from this module so consumers importing from the public entry still work: export the existing constants CRITICAL and POSITIVE under the old names (i.e., re-export DANGER as an alias for CRITICAL and SUCCESS as an alias for POSITIVE) alongside the current exports (CRITICAL, POSITIVE, WARNING, MUTED, MENTION, LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier) to preserve backward compatibility with existing imports.packages/dialtone-css/lib/build/less/components/forms.less (1)
160-174:⚠️ Potential issue | 🟠 MajorKeep legacy validation class aliases in CSS selectors.
The PR goal says old class names remain functional, but these selectors drop the legacy names. Add aliases so existing markup using
--error/--successkeeps working.Suggested fix
-.d-validation-message--critical { +.d-validation-message--critical, +.d-validation-message--error { --validation-color-text: var(--dt-color-foreground-critical); ... } -.d-validation-message--positive { +.d-validation-message--positive, +.d-validation-message--success { --validation-color-text: var(--dt-color-foreground-success); ... }As per coding guidelines, "Flag primarily issues that make the PR unsafe to merge and/or difficult to maintain."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/dialtone-css/lib/build/less/components/forms.less` around lines 160 - 174, The selectors for .d-validation-message--critical and .d-validation-message--positive drop legacy aliases (error/success), breaking existing markup; update the selectors to include the legacy class names (e.g., add .d-validation-message--error as an alias for .d-validation-message--critical and .d-validation-message--success as an alias for .d-validation-message--positive) so both names share the same declarations (including the ::before mask and --validation-color-text variable) and preserve behavior for old markup.packages/dialtone-vue/components/validation_messages/validation_messages.vue (1)
91-99:⚠️ Potential issue | 🟠 MajorRestore legacy
error/successhandling inmessageTypeClass.
messageTypeClassno longer resolves deprecated message types, so legacy payloads can render without validation classes. Please keep aliases until deprecations are removed.Suggested fix
messageTypeClass (type) { const messageTypesClasses = { critical: 'base-input__message--critical d-validation-message--critical', + error: 'base-input__message--critical d-validation-message--critical', warning: 'base-input__message--warning d-validation-message--warning', positive: 'base-input__message--positive d-validation-message--positive', + success: 'base-input__message--positive d-validation-message--positive', }; return messageTypesClasses[type]; },As per coding guidelines, "Flag primarily issues that make the PR unsafe to merge and/or difficult to maintain."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/dialtone-vue/components/validation_messages/validation_messages.vue` around lines 91 - 99, messageTypeClass currently only returns classes for 'critical'/'warning'/'positive' and ignores legacy aliases; update messageTypeClass (or the messageTypesClasses map) to treat deprecated types 'error' as 'critical' and 'success' as 'positive' so old payloads still resolve to the proper class names; ensure the mapping happens before the lookup (or add alias keys in messageTypesClasses) and keep existing keys 'critical', 'warning', 'positive' intact.packages/dialtone-vue/components/button/button_constants.js (1)
18-25:⚠️ Potential issue | 🔴 Critical
kind="danger"backward compatibility is broken.Removing
dangerfromBUTTON_KIND_MODIFIERSmakesDtButton.kindfail validation and lose kind styling for legacy usage. Keepdangeras a deprecated alias.Proposed fix
export const BUTTON_KIND_MODIFIERS = { default: '', muted: 'd-btn--muted', critical: 'd-btn--critical', + // Deprecated alias + danger: 'd-btn--critical', positive: 'd-btn--positive', inverted: 'd-btn--inverted', unstyled: 'd-btn--unstyled', }; export const INVALID_COMBINATION = [ @@ { circle: true, kind: 'critical', importance: 'outlined', message: _invalidCombinationMessage(true, 'critical', 'outlined'), }, + { + circle: true, + kind: 'danger', + importance: 'outlined', + message: _invalidCombinationMessage(true, 'danger', 'outlined'), + },Also applies to: 54-58
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/dialtone-vue/components/button/button_constants.js` around lines 18 - 25, Restore the deprecated "danger" alias in BUTTON_KIND_MODIFIERS so legacy DtButton.kind="danger" still passes validation and receives the correct styling; add an entry "danger": "d-btn--critical" (matching the critical modifier) in the BUTTON_KIND_MODIFIERS object and keep any existing "critical" entry as-is to preserve backward compatibility for DtButton.kind.packages/dialtone-vue/components/checkbox/checkbox.test.js (1)
215-241:⚠️ Potential issue | 🟠 MajorAdd regression tests for deprecated validation aliases (
success/error).Current assertions only cover
positive/critical, so backward compatibility is unverified in this suite.As per coding guidelines, "Flag missing tests for non-trivial logic changes — untested behavior is unverified behavior."
Also applies to: 480-499
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/dialtone-vue/components/checkbox/checkbox.test.js` around lines 215 - 241, Add regression tests that assert the deprecated validation aliases map to the same classes as the new types: create two new it blocks in the same "When a validation state is provided" suite that set mockProps.validationState to VALIDATION_MESSAGE_TYPES.SUCCESS and VALIDATION_MESSAGE_TYPES.ERROR (or the string aliases 'success'/'error' if those are used), call updateWrapper(), and expect wrapper.find(`.${CHECKBOX_INPUT_VALIDATION_CLASSES[VALIDATION_MESSAGE_TYPES.POSITIVE]}`).exists() toBe(true) for success and wrapper.find(`.${CHECKBOX_INPUT_VALIDATION_CLASSES[VALIDATION_MESSAGE_TYPES.CRITICAL]}`).exists() toBe(true) for error; use the same patterns as the existing positive/warning/critical tests and keep mockProps.description populated.packages/dialtone-vue/components/link/link.test.js (1)
65-153:⚠️ Potential issue | 🟠 MajorMissing compatibility tests for deprecated
kindpath inDtLink.
DtLinknow has compatibility logic viaresolvedTone, but this suite only validatestone. Please add tests that verify deprecatedkind(including legacy values) still applies correct classes, plus behavior when bothtoneandkindare passed.Suggested test additions
describe('Presentation Tests', () => { + describe('Backward compatibility', () => { + it('applies class when deprecated kind is used', () => { + mockProps = { kind: CRITICAL }; + updateWrapper(); + expect(nativeLink.classes('d-link--critical')).toBe(true); + }); + + it('supports legacy kind aliases', () => { + mockProps = { kind: 'danger' }; + updateWrapper(); + expect(nativeLink.classes('d-link--critical')).toBe(true); + }); + + it('defines precedence when both tone and kind are provided', () => { + mockProps = { tone: POSITIVE, kind: CRITICAL }; + updateWrapper(); + // assert intended precedence explicitly + expect(nativeLink.classes('d-link--critical')).toBe(true); + }); + });As per coding guidelines, "Flag missing tests for non-trivial logic changes — untested behavior is unverified behavior."
Also applies to: 274-293
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/dialtone-vue/components/link/link.test.js` around lines 65 - 153, The test suite covers tone/inverted behavior but misses compatibility tests for the deprecated kind prop and resolvedTone logic; add unit tests in link.test.js that set mockProps.kind to legacy values (and combinations of mockProps.kind + mockProps.tone) then call updateWrapper() and assert nativeLink.classes(...) matches the same modifiers used by getLinkKindModifier and LINK_KIND_MODIFIERS (e.g., verify legacy kind maps to the expected class and that kind is respected when tone is absent or overridden when both provided), reusing existing helpers like updateWrapper, nativeLink, getLinkKindModifier, LINK_KIND_MODIFIERS, and asserting both inverted true/false cases.
🧹 Nitpick comments (1)
apps/dialtone-documentation/docs/components/input-group.md (1)
186-188: Align remaining example identifiers/text withcriticalnaming.A few example identifiers/text still use
errorwhile the shown type/legend arecritical(Line 186, Line 211, Line 213, Line 223, Line 234). This makes the docs internally inconsistent.Suggested doc cleanup
- name="input-group-with-error-message" + name="input-group-with-critical-message" ... - name="input-group-with-error-message" + name="input-group-with-critical-message" ... - :messages="[{ message: `Error`, type: VALIDATION_MESSAGE_TYPES.CRITICAL }]" + :messages="[{ message: `Critical`, type: VALIDATION_MESSAGE_TYPES.CRITICAL }]" ... - name="input-group-with-error-messages-hidden" + name="input-group-with-critical-messages-hidden" ... - name="input-group-with-error-messages-hidden" + name="input-group-with-critical-messages-hidden"As per coding guidelines, "flag primarily issues that make the PR unsafe to merge and/or difficult to maintain."
Also applies to: 211-214, 223-236
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dialtone-documentation/docs/components/input-group.md` around lines 186 - 188, The example block defined by name="input-group-with-error-message" and legend="With Critical Message" currently mixes "error" identifiers/text with the shown :messages type 'critical'; update all remaining example identifiers and display text (e.g., any props, labels, CSS classes, IDs or message strings that still read "error") to use "critical" instead so the example is consistent with :messages="[{ message: 'Critical', type: 'critical' }]" and the legend; search for occurrences of "error" within this example (including nearby examples referenced around the same component) and rename them to "critical" while preserving functionality and casing.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/dialtone-css/lib/build/less/components/input.less`:
- Around line 293-299: The PR removed legacy validation class aliases causing
regressions; restore `.d-input--error` and `.d-input--success` as aliases of the
new `.d-input--critical` and `.d-input--positive` by adding rule blocks that set
`--input-color-border` to `var(--dt-inputs-color-border-critical)` and
`var(--dt-inputs-color-border-success)` respectively (use the same !important
flag), so both old and new class names produce identical border color behavior.
In `@packages/dialtone-css/lib/build/less/components/selects.less`:
- Around line 140-147: The new selectors drop legacy aliases and break backwards
compatibility; update the stylesheet so the legacy class names map to the same
rules by adding the legacy selectors (.d-select__input--success and
.d-select__input--error) alongside the new ones (.d-select__input--positive and
.d-select__input--critical), including their :hover variants, so both sets of
modifiers set the same CSS variable (--input-color-border) to
var(--dt-inputs-color-border-success) and var(--dt-inputs-color-border-critical)
respectively.
In `@packages/dialtone-css/lib/build/less/recipes/top_banner_info.less`:
- Around line 32-34: The new rule defines .d-recipe-top-banner-info--positive
but removed the legacy .d-recipe-top-banner-info--success alias; restore
backward compatibility by adding the legacy selector
(.d-recipe-top-banner-info--success) to the same rule or by duplicating the
declaration so both selectors share background-color:
var(--dt-color-surface-success), ensuring existing consumers using --success
continue to work; update the rule that currently targets
.d-recipe-top-banner-info--positive to include
.d-recipe-top-banner-info--success as an equivalent selector.
In `@packages/dialtone-vue/common/constants/index.js`:
- Around line 11-15: The public enum VALIDATION_MESSAGE_TYPES removed deprecated
keys ERROR and SUCCESS which is a breaking change; restore backward
compatibility by adding ERROR: 'critical' and SUCCESS: 'positive' entries to the
existing VALIDATION_MESSAGE_TYPES object (so ERROR maps to the same value as
CRITICAL and SUCCESS maps to the same value as POSITIVE) and keep the current
CRITICAL/WARNING/POSITIVE keys unchanged (update the export of
VALIDATION_MESSAGE_TYPES accordingly).
In `@packages/dialtone-vue/common/mixins/input.test.js`:
- Line 24: Add a second passing test for the deprecated "success"
validationState: update the test in input.test.js to call the same helper
itBehavesLikePassesCustomPropValidation for the validation prop with the
deprecated value (e.g., pass 'success' or VALIDATION_MESSAGE_TYPES.SUCCESS) in
addition to the existing POSITIVE case so compatibility for the deprecated alias
is covered; ensure you reference the same prop variable used in the current call
and keep the new call adjacent to the existing
itBehavesLikePassesCustomPropValidation(prop, VALIDATION_MESSAGE_TYPES.POSITIVE)
line.
In `@packages/dialtone-vue/common/utils/index.js`:
- Around line 114-127: getValidationState currently ignores legacy message types
("error" and "success") causing old payloads to be treated as null; update the
function to normalize aliases before checking types: map legacy "error" ->
VALIDATION_MESSAGE_TYPES.CRITICAL and "success" ->
VALIDATION_MESSAGE_TYPES.POSITIVE (or extend VALIDATION_MESSAGE_TYPES to include
aliases) and ensure hasFormattedMessageOfType checks these normalized keys
(refer to getValidationState, VALIDATION_MESSAGE_TYPES, and
hasFormattedMessageOfType to locate the logic), so existing message payloads are
recognized and return the correct validation state.
In `@packages/dialtone-vue/common/validators.test.js`:
- Line 54: Add a test case that ensures the deprecated type string 'success' is
treated the same as VALIDATION_MESSAGE_TYPES.POSITIVE: copy the existing
positive test pattern (the case that uses type:
VALIDATION_MESSAGE_TYPES.POSITIVE) and add a passing assertion that supplying {
type: 'success', ... } yields the same normalized output/behavior as the
POSITIVE case; update validators.test.js to include this deprecated 'success'
passing case so backward-compatibility is explicitly covered.
In `@packages/dialtone-vue/components/badge/badge.test.js`:
- Around line 84-97: The second duplicate "When type is positive" test should be
replaced with a compatibility test for the deprecated "success" value: change
the describe/title to "When type is success", call await wrapper.setProps({
type: 'success' }) inside the it block, and assert that
badge.classes(BADGE_TYPE_MODIFIERS.positive) is true (verifying "success" maps
to the positive modifier); this updates the duplicated positive test to cover
backward compatibility using the existing wrapper, badge, and
BADGE_TYPE_MODIFIERS symbols.
In `@packages/dialtone-vue/components/banner/banner.vue`:
- Around line 121-126: The banner prop "kind" needs a legacy-value fallback so
deprecated values map to current modifiers: before validating/resolving the
class (where NOTICE_KINDS is used and in the class resolution logic around the
computed that builds the modifier class), normalize kind by mapping "error" ->
"danger" and "success" -> "success" (or the current success token) and then
proceed with NOTICE_KINDS.includes(kind) and the existing class lookup; update
both the prop handling (validator/normalization) and the class resolution code
path (the code around the modifier-class computation at the other occurrence) to
use the normalized kind.
In `@packages/dialtone-vue/components/button/button.test.js`:
- Around line 73-95: Remove the duplicate "When button has kind set to critical"
test block (keep a single case that asserts wrapper.setProps({ kind: 'critical'
}) yields the d-btn--critical class via wrapper.find('.base-button__button') and
.classes()), and add a new test that explicitly covers the deprecated alias by
setting wrapper.setProps({ kind: 'danger' }) and another setting
wrapper.setProps({ linkKind: 'danger' }) (or the component's legacy prop)
asserting they also produce the d-btn--critical class to prevent regressions;
update test descriptions to reflect deprecation and ensure you reference the
same selector ('.base-button__button'), wrapper.setProps, and .classes() checks.
In `@packages/dialtone-vue/components/checkbox/checkbox_constants.js`:
- Around line 1-5: CHECKBOX_INPUT_VALIDATION_CLASSES lost legacy keys so callers
using deprecated values ('error' and 'success') no longer resolve classes;
reintroduce the aliases by adding 'error' mapping to the same value as
'critical' and 'success' mapping to the same value as 'positive' in the
CHECKBOX_INPUT_VALIDATION_CLASSES export so existing callers continue to work
without_pre-normalization.
In `@packages/dialtone-vue/components/modal/modal.test.js`:
- Around line 223-233: Extend the test block that currently checks only
'critical' to also assert that bannerKind: 'positive' yields the
MODAL_BANNER_KINDS.positive class and that the deprecated aliases resolve to the
expected current kinds (set bannerKind: 'error' and assert it maps to
MODAL_BANNER_KINDS.critical; set bannerKind: 'success' and assert it maps to
MODAL_BANNER_KINDS.positive). Use the same pattern as the existing test: call
wrapper.setProps({ show: true, bannerKind: '<kind>', bannerTitle: 'title' }),
find banner via wrapper.find('[data-qa="dt-modal-banner"]'), and assert
banner.classes(MODAL_BANNER_KINDS.<expected>) is true.
In `@packages/dialtone-vue/components/notice/notice_constants.js`:
- Line 1: NOTICE_KINDS was changed to remove legacy values and breaks backward
compatibility; restore the deprecated entries 'error' and 'success' in the
NOTICE_KINDS array so existing consumers/validation continue to work. Update the
NOTICE_KINDS constant to include 'error' and 'success' (optionally add an inline
comment marking them as deprecated) and run/update any related validation/tests
that rely on NOTICE_KINDS to ensure no regressions.
In `@packages/dialtone-vue/components/notice/notice.test.js`:
- Around line 88-101: Add test assertions to preserve deprecated kind
compatibility by adding two cases mirroring the existing 'critical' and
'positive' tests: set wrapper.setProps({ kind: 'error' }) and assert
rootElement.classes('d-notice--critical') is true, and set wrapper.setProps({
kind: 'success' }) and assert rootElement.classes('d-notice--positive') is true;
place these alongside the existing describe blocks so the wrapper and
rootElement usage is identical to the current tests.
In `@packages/dialtone-vue/components/notice/notice.vue`:
- Around line 112-119: The component currently accepts deprecated kinds
"error"/"success" but doesn't normalize them before computing classes/icons, so
update the code to map those deprecated values to the current ones (error ->
critical, success -> positive) before any class/icon resolution: add a small
normalizer (e.g. a computed getter like normalizedKind or a normalizeKind(kind)
helper) and use that in noticeClass and the icon resolution logic instead of raw
this.kind; keep the validator/NOTICE_KINDS as-is (or expand it to accept the
deprecated strings) but ensure all styling/icon lookups use normalizedKind so
deprecated values render correctly.
In `@packages/dialtone-vue/components/select_menu/select_menu_constants.js`:
- Around line 16-20: The object SELECT_STATE_MODIFIERS currently only contains
keys critical/warning/positive; add deprecated alias keys error and success that
map to the new class names (error -> 'd-select__input--critical' and success ->
'd-select__input--positive') so existing validation-state usages keep working;
update the SELECT_STATE_MODIFIERS definition to include these alias entries
(preserve existing keys and values) and add a brief comment that error/success
are deprecated aliases for backward compatibility.
In `@packages/dialtone-vue/components/split_button/split_button.test.js`:
- Around line 98-105: Add a companion test to cover the deprecated kind="danger"
alongside the new critical case: inside the same describe block (When kind is
set to critical) or a new describe for backward compatibility, set mockProps = {
kind: 'danger' } and call updateWrapper() and then assert that
startButton.classes().includes('d-btn--critical') and
endButton.classes().includes('d-btn--critical') are true (same expectations as
for 'critical'), so the legacy path is exercised; use the existing helper
functions/variables (mockProps, updateWrapper, startButton, endButton) to locate
and implement the new test.
In `@packages/dialtone-vue/components/toast/toast.test.js`:
- Around line 117-124: Add tests that assert deprecated kind aliases map to the
expected classes: after the existing 'critical' spec, add two new cases that set
mockProps = { kind: 'error' } and mockProps = { kind: 'success' }, call
updateWrapper(), and expect toast.classes('d-toast--critical') toBe(true) for
'error' and toast.classes('d-toast--success') toBe(true) for 'success'. Use the
same test pattern and helpers (mockProps, updateWrapper, toast.classes) as the
existing spec to validate backward compatibility.
---
Outside diff comments:
In `@packages/dialtone-css/lib/build/less/components/forms.less`:
- Around line 160-174: The selectors for .d-validation-message--critical and
.d-validation-message--positive drop legacy aliases (error/success), breaking
existing markup; update the selectors to include the legacy class names (e.g.,
add .d-validation-message--error as an alias for .d-validation-message--critical
and .d-validation-message--success as an alias for
.d-validation-message--positive) so both names share the same declarations
(including the ::before mask and --validation-color-text variable) and preserve
behavior for old markup.
In `@packages/dialtone-vue/components/badge/badge_constants.js`:
- Around line 1-9: The BADGE_TYPE_MODIFIERS map removed the legacy "success" key
causing type="success" to lose its modifier; restore backward compatibility by
adding a "success" entry to BADGE_TYPE_MODIFIERS (map "success" to the same
class as the current positive variant, e.g., 'd-badge--positive') so components
reading BADGE_TYPE_MODIFIERS continue to apply the expected modifier for
type="success".
In `@packages/dialtone-vue/components/button/button_constants.js`:
- Around line 18-25: Restore the deprecated "danger" alias in
BUTTON_KIND_MODIFIERS so legacy DtButton.kind="danger" still passes validation
and receives the correct styling; add an entry "danger": "d-btn--critical"
(matching the critical modifier) in the BUTTON_KIND_MODIFIERS object and keep
any existing "critical" entry as-is to preserve backward compatibility for
DtButton.kind.
In `@packages/dialtone-vue/components/checkbox/checkbox.test.js`:
- Around line 215-241: Add regression tests that assert the deprecated
validation aliases map to the same classes as the new types: create two new it
blocks in the same "When a validation state is provided" suite that set
mockProps.validationState to VALIDATION_MESSAGE_TYPES.SUCCESS and
VALIDATION_MESSAGE_TYPES.ERROR (or the string aliases 'success'/'error' if those
are used), call updateWrapper(), and expect
wrapper.find(`.${CHECKBOX_INPUT_VALIDATION_CLASSES[VALIDATION_MESSAGE_TYPES.POSITIVE]}`).exists()
toBe(true) for success and
wrapper.find(`.${CHECKBOX_INPUT_VALIDATION_CLASSES[VALIDATION_MESSAGE_TYPES.CRITICAL]}`).exists()
toBe(true) for error; use the same patterns as the existing
positive/warning/critical tests and keep mockProps.description populated.
In `@packages/dialtone-vue/components/link/index.js`:
- Around line 2-11: Restore the deprecated re-exports DANGER and SUCCESS from
this module so consumers importing from the public entry still work: export the
existing constants CRITICAL and POSITIVE under the old names (i.e., re-export
DANGER as an alias for CRITICAL and SUCCESS as an alias for POSITIVE) alongside
the current exports (CRITICAL, POSITIVE, WARNING, MUTED, MENTION, LINK_VARIANTS,
LINK_KIND_MODIFIERS, getLinkKindModifier) to preserve backward compatibility
with existing imports.
In `@packages/dialtone-vue/components/link/link.test.js`:
- Around line 65-153: The test suite covers tone/inverted behavior but misses
compatibility tests for the deprecated kind prop and resolvedTone logic; add
unit tests in link.test.js that set mockProps.kind to legacy values (and
combinations of mockProps.kind + mockProps.tone) then call updateWrapper() and
assert nativeLink.classes(...) matches the same modifiers used by
getLinkKindModifier and LINK_KIND_MODIFIERS (e.g., verify legacy kind maps to
the expected class and that kind is respected when tone is absent or overridden
when both provided), reusing existing helpers like updateWrapper, nativeLink,
getLinkKindModifier, LINK_KIND_MODIFIERS, and asserting both inverted true/false
cases.
In
`@packages/dialtone-vue/components/validation_messages/validation_messages.vue`:
- Around line 91-99: messageTypeClass currently only returns classes for
'critical'/'warning'/'positive' and ignores legacy aliases; update
messageTypeClass (or the messageTypesClasses map) to treat deprecated types
'error' as 'critical' and 'success' as 'positive' so old payloads still resolve
to the proper class names; ensure the mapping happens before the lookup (or add
alias keys in messageTypesClasses) and keep existing keys 'critical', 'warning',
'positive' intact.
---
Nitpick comments:
In `@apps/dialtone-documentation/docs/components/input-group.md`:
- Around line 186-188: The example block defined by
name="input-group-with-error-message" and legend="With Critical Message"
currently mixes "error" identifiers/text with the shown :messages type
'critical'; update all remaining example identifiers and display text (e.g., any
props, labels, CSS classes, IDs or message strings that still read "error") to
use "critical" instead so the example is consistent with :messages="[{ message:
'Critical', type: 'critical' }]" and the legend; search for occurrences of
"error" within this example (including nearby examples referenced around the
same component) and rename them to "critical" while preserving functionality and
casing.
🪄 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
Run ID: 0fd70071-86b9-4c5f-9523-c72d32d5729e
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (98)
.mcp.jsonapps/dialtone-documentation/docs/components/badge.mdapps/dialtone-documentation/docs/components/banner.mdapps/dialtone-documentation/docs/components/button.mdapps/dialtone-documentation/docs/components/checkbox-group.mdapps/dialtone-documentation/docs/components/checkbox.mdapps/dialtone-documentation/docs/components/combobox-multi-select.mdapps/dialtone-documentation/docs/components/input-group.mdapps/dialtone-documentation/docs/components/input.mdapps/dialtone-documentation/docs/components/link.mdapps/dialtone-documentation/docs/components/modal.mdapps/dialtone-documentation/docs/components/notice.mdapps/dialtone-documentation/docs/components/radio-group.mdapps/dialtone-documentation/docs/components/radio.mdapps/dialtone-documentation/docs/components/select-menu.mdapps/dialtone-documentation/docs/components/split-button.mdapps/dialtone-documentation/docs/components/toast.mdapps/dialtone-documentation/docs/components/validation-messages.mdpackages/dialtone-css/lib/build/less/components/badge.lesspackages/dialtone-css/lib/build/less/components/button.lesspackages/dialtone-css/lib/build/less/components/forms.lesspackages/dialtone-css/lib/build/less/components/input.lesspackages/dialtone-css/lib/build/less/components/link.lesspackages/dialtone-css/lib/build/less/components/modal.lesspackages/dialtone-css/lib/build/less/components/notice.lesspackages/dialtone-css/lib/build/less/components/selects.lesspackages/dialtone-css/lib/build/less/recipes/top_banner_info.lesspackages/dialtone-vue/common/constants/index.jspackages/dialtone-vue/common/mixins/input.test.jspackages/dialtone-vue/common/utils.test.jspackages/dialtone-vue/common/utils/index.jspackages/dialtone-vue/common/validators.test.jspackages/dialtone-vue/components/badge/badge.test.jspackages/dialtone-vue/components/badge/badge.vuepackages/dialtone-vue/components/badge/badge_constants.jspackages/dialtone-vue/components/badge/badge_examples.story.vuepackages/dialtone-vue/components/banner/banner.stories.jspackages/dialtone-vue/components/banner/banner.vuepackages/dialtone-vue/components/banner/banner_default.story.vuepackages/dialtone-vue/components/button/button.test.jspackages/dialtone-vue/components/button/button.vuepackages/dialtone-vue/components/button/button_constants.jspackages/dialtone-vue/components/button/button_variants.story.vuepackages/dialtone-vue/components/checkbox/checkbox.test.jspackages/dialtone-vue/components/checkbox/checkbox_constants.jspackages/dialtone-vue/components/checkbox/checkbox_variants.story.vuepackages/dialtone-vue/components/checkbox_group/checkbox_group_variants.story.vuepackages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.stories.jspackages/dialtone-vue/components/emoji_text_wrapper/emoji_text_wrapper_variants.story.vuepackages/dialtone-vue/components/input/input.stories.jspackages/dialtone-vue/components/input/input.test.jspackages/dialtone-vue/components/input/input.vuepackages/dialtone-vue/components/input/input_constants.jspackages/dialtone-vue/components/input_group/input_group_variants.story.vuepackages/dialtone-vue/components/link/index.jspackages/dialtone-vue/components/link/link.test.jspackages/dialtone-vue/components/link/link.vuepackages/dialtone-vue/components/link/link_constants.jspackages/dialtone-vue/components/modal/modal.stories.jspackages/dialtone-vue/components/modal/modal.test.jspackages/dialtone-vue/components/modal/modal.vuepackages/dialtone-vue/components/modal/modal_constants.jspackages/dialtone-vue/components/modal/modal_default.story.vuepackages/dialtone-vue/components/notice/notice.stories.jspackages/dialtone-vue/components/notice/notice.test.jspackages/dialtone-vue/components/notice/notice.vuepackages/dialtone-vue/components/notice/notice_constants.jspackages/dialtone-vue/components/notice/notice_default.story.vuepackages/dialtone-vue/components/notice/notice_icon.vuepackages/dialtone-vue/components/radio/radio.test.jspackages/dialtone-vue/components/radio/radio_constants.jspackages/dialtone-vue/components/radio/radio_variants.story.vuepackages/dialtone-vue/components/radio_group/radio_group_variants.story.vuepackages/dialtone-vue/components/rich_text_editor/rich_text_editor.vuepackages/dialtone-vue/components/select_menu/select_menu.test.jspackages/dialtone-vue/components/select_menu/select_menu_constants.jspackages/dialtone-vue/components/select_menu/select_menu_variants.story.vuepackages/dialtone-vue/components/split_button/split_button.test.jspackages/dialtone-vue/components/split_button/split_button.vuepackages/dialtone-vue/components/toast/layouts/toast_layout_alternate.vuepackages/dialtone-vue/components/toast/layouts/toast_layout_alternate_icon.vuepackages/dialtone-vue/components/toast/layouts/toast_layout_default.vuepackages/dialtone-vue/components/toast/toast.stories.jspackages/dialtone-vue/components/toast/toast.test.jspackages/dialtone-vue/components/toast/toast.vuepackages/dialtone-vue/components/toast/toast_default.story.vuepackages/dialtone-vue/components/validation_messages/validation_messages.stories.jspackages/dialtone-vue/components/validation_messages/validation_messages.test.jspackages/dialtone-vue/components/validation_messages/validation_messages.vuepackages/dialtone-vue/directives/tooltip_directive/tooltip_directive_default.story.vuepackages/dialtone-vue/docs/storybook/writing_storybook.mdxpackages/dialtone-vue/recipes/conversation_view/message_input/message_input_link.vuepackages/dialtone-vue/recipes/item_layout/contact_info/contact_info.stories.jspackages/dialtone-vue/recipes/item_layout/contact_info/contact_info_variants.story.vuepackages/dialtone-vue/recipes/leftbar/callbox/callbox_variants.story.vuepackages/dialtone-vue/recipes/notices/top_banner_info/top_banner_info.test.jspackages/dialtone-vue/recipes/notices/top_banner_info/top_banner_info.vuepackages/dialtone-vue/recipes/notices/top_banner_info/top_banner_info_variants.story.vue
Contributor
Author
|
Made additional changes for various documentation, storybook files, examples etc that still did not contain sufficient changes. docsite / storybook / everything else should be fully updated with critical/positive naming now. This was done as a full breaking change in javascript/vue files. The old keys etc have been removed. Legacy classes in .less files will however remain for pure html/css implementations. |
Contributor
Author
|
Francis Rupert (@francisrupert) noticed our tokens IE DtText is also mapping to token names via it's "tone" prop. "success", "success-strong". Assuming this would have to change as well if we're changing token names |
Contributor
Yeah, you can create I did that with... ... which reads from the description field... "headline": {
"xxl": {
"value": { ... },
"type": "typography",
"description": "(DEPRECATED) Largest text style for extra extra large content."
}
}I don't feel great about that now that I look at it. I think I was averse to adding a {
"headline-xxl": {
"value": { ... },
"type": "typography",
"$deprecated": "Use ... instead", // or just true
"description": "Largest text style for extra extra large content."
}
}...and eliminate Perhaps logged as a followup task since
Same for creating
And yes to updating for DtText. 
|
Francis Rupert (francisrupert)
approved these changes
Apr 10, 2026
Contributor
Francis Rupert (francisrupert)
left a comment
Francis Rupert (francisrupert)
left a comment
There was a problem hiding this comment.
Skimmed through all lines, and skimmed through all doc pages. Only noticed one, below. Going ahead and approving, though note the below finding and my other response about Design Token / CSS Utility.
At least one missing error to critical in DtInput variants file.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md`:
- Around line 147-149: The markdown code fences for the two snippets that expose
provided props are missing language identifiers; update the fenced code blocks
that show "provides: { groupContext: { selected, disabled }, setFocus }" and
"provides: { groupContext: { name, disabled, validationState, value,
selectedValues }, setGroupValue }" to use a language tag (e.g., ```javascript)
so MD040 linting passes, keeping the exact content intact and only adding the
language after the opening triple backticks.
🪄 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
Run ID: 2afdcb2c-2b8f-45f7-863f-4b5e645bbffe
📒 Files selected for processing (7)
apps/dialtone-documentation/docs/components/mode-island.mdapps/dialtone-documentation/docs/scratch.mdpackages/combinator/src/variants/variants_checkbox_group.jspackages/combinator/src/variants/variants_input.jspackages/combinator/src/variants/variants_radio_group.jspackages/combinator/src/variants/variants_validation_messages.jspackages/dialtone-docs/src/content/reference/reference-component-api-patterns.md
✅ Files skipped from review due to trivial changes (4)
- packages/combinator/src/variants/variants_radio_group.js
- apps/dialtone-documentation/docs/components/mode-island.md
- packages/combinator/src/variants/variants_checkbox_group.js
- packages/combinator/src/variants/variants_validation_messages.js
Comment on lines
147
to
149
| ``` | ||
| provides: { groupContext: { selected, disabled }, setFocus } | ||
| ``` |
Contributor
There was a problem hiding this comment.
Add fenced-code languages to satisfy markdown linting.
Both code blocks are missing a language identifier (MD040), which can fail docs lint pipelines.
Suggested patch
-```
+```javascript
provides: { groupContext: { selected, disabled }, setFocus }- +javascript
provides: { groupContext: { name, disabled, validationState, value, selectedValues }, setGroupValue }
Also applies to: 153-155
🧰 Tools
🪛 markdownlint-cli2 (0.22.0)
[warning] 147-147: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md`
around lines 147 - 149, The markdown code fences for the two snippets that
expose provided props are missing language identifiers; update the fenced code
blocks that show "provides: { groupContext: { selected, disabled }, setFocus }"
and "provides: { groupContext: { name, disabled, validationState, value,
selectedValues }, setGroupValue }" to use a language tag (e.g., ```javascript)
so MD040 linting passes, keeping the exact content intact and only adding the
language after the opening triple backticks.
Contributor
|
✔️ Deploy previews ready! |
This was referenced Apr 13, 2026
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Apr 15, 2026
# [1.2.0-next.4](combinator/v1.2.0-next.3...combinator/v1.2.0-next.4) (2026-04-15) ### Code Refactoring * **Components:** DLT-3100 remove rootClass references ([#1184](#1184)) ([6531783](6531783)) * **Text:** DLT-3302 tone prop uses css variables instead of css utilities ([#1197](#1197)) ([75df16f](75df16f)) ### Documentation * DLT-3250 display component status badges in sidebar and page headers ([#1170](#1170)) ([7d5f5d5](7d5f5d5)) * **Playground:** DLT-3242 segmented control for compact enum props ([#1165](#1165)) ([fa440d8](fa440d8)) ### Features * **Components:** DLT-3157 align critical/positive prop values and CSS class names ([#1177](#1177)) ([edd98b2](edd98b2)) * **Split Button:** DLT-3257 add show-divider prop ([#1173](#1173)) ([5bef411](5bef411))
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Apr 15, 2026
# [8.80.0-next.1](dialtone-css/v8.79.0...dialtone-css/v8.80.0-next.1) (2026-04-15) ### Bug Fixes * **Split Button, Filter Pill:** DLT-3260 DLT-3261 correct misalignment at size 100 ([#1176](#1176)) ([fe2b777](fe2b777)) * **Stylelint:** disable hue-degree-notation rule and update OKLCH color syntax ([81f886e](81f886e)) * **Tokens:** wrap css math expressions with calc() in layered build ([#966](#966)) ([1635f61](1635f61)) ### Code Refactoring * **Css:** DLT-1876 css logical properties ([#872](#872)) ([1acd6c9](1acd6c9)) * **Modal:** DLT-3262 migrate DtModal to native dialog element ([#1179](#1179)) ([589edb5](589edb5)) * **Notice,banner,toast:** DLT-3296 decouple CSS and fix specificity violations ([#1194](#1194)) ([9579ac0](9579ac0)) * **Style:** DLT-3014 wrap all styles in css cascade layers ([#1061](#1061)) ([f8b3fed](f8b3fed)) * **Text:** DLT-2883 rename headline sizes from xxl => 2xl, etc ([#1029](#1029)) ([0ac86f3](0ac86f3)) * **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-2884 deprecate space tokens in favor of size tokens ([#1013](#1013)) ([63f6d2f](63f6d2f)) * **Tokens:** DLT-3013 convert color system from HSL to OKLCH ([#1060](#1060)) ([42dc418](42dc418)) ### Documentation * **Css Utilities:** DLT-3295 DLT-3280 mark physical utilities as deprecated ([#1193](#1193)) ([73f1479](73f1479)) * DLT-1510 DLT-1511 DLT-1512 site redesign and ia ([#968](#968)) ([6ea7eb9](6ea7eb9)) * DLT-2908 ui kits landing page ([#1049](#1049)) ([d805b9d](d805b9d)) * **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)) * **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)) * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **Components:** DLT-3157 align critical/positive prop values and CSS class names ([#1177](#1177)) ([edd98b2](edd98b2)) * **Css Utility:** DLT-2715 add default color for border css utilities ([#874](#874)) ([71310ab](71310ab)) * **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)) * **Eslint Plugin Dialtone:** DLT-3047 physical-to-logical naming migration tooling ([#1163](#1163)) ([d94dc4b](d94dc4b)) * **Eslint Plugin Dialtone:** DLT-3227 DLT-3228 add deprecated-tshirt-sizes ESLint rule and migration codemod ([#1159](#1159)) ([21a011f](21a011f)) * **Filter Pill:** DLT-2704 create component ([#473](#473)) ([6267445](6267445)) * **Filter Pill:** DLT-2941 DtFilterPill improvements ([#1110](#1110)) ([23c5689](23c5689)) * **Link,button:** DLT-3012 add underline prop ([#1059](#1059)) ([1cb91ea](1cb91ea)) * **Mode Directive, Mode Island:** DLT-3067 DLT-3078 DLT-3077 add `v-dt-mode` directive ([#1109](#1109)) ([f97efca](f97efca)) * **Segmented Control:** DLT-413 new component ([#1144](#1144)) ([ad4c6c3](ad4c6c3)) * **Split Button:** DLT-3257 add show-divider prop ([#1173](#1173)) ([5bef411](5bef411)) * **Style:** DLT-2976 update underline thickness and offset ([#1058](#1058)) ([1e56947](1e56947)) * **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:** new vue component DLT-2864 DLT-2863 DLT-2862 ([#995](#995)) ([196ef8a](196ef8a)) * **Tokens:** DLT-1977 add high contrast design tokens and theme ([#938](#938)) ([a1c0457](a1c0457)) * **Tokens:** DLT-2802 DLT-2563 layered theming system and mode island component ([#945](#945)) ([5c72c6c](5c72c6c)) * **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)) * **Typography, Tokens:** DLT-2856 DLT-2857 next typography system ([#994](#994)) ([d744e97](d744e97))
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Apr 15, 2026
# [1.48.0-next.14](dialtone-tokens/v1.48.0-next.13...dialtone-tokens/v1.48.0-next.14) (2026-04-15) ### Features * **Components:** DLT-3157 align critical/positive prop values and CSS class names ([#1177](#1177)) ([edd98b2](edd98b2))
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Apr 15, 2026
# [3.220.0-next.1](dialtone-vue/v3.219.0...dialtone-vue/v3.220.0-next.1) (2026-04-15) ### Bug Fixes * **Editor:** NO-JIRA remove extra blank line in editor.mdx ([18c47ef](18c47ef)) * **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)) ### Code Refactoring * **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-3282 renamed show prop to open ([#1190](#1190)) ([5509d0f](5509d0f)) * **Components:** dlt-3283 refactor prop/slots to be consistent ([#1196](#1196)) ([2d22c76](2d22c76)) * **Modal:** DLT-3262 migrate DtModal to native dialog element ([#1179](#1179)) ([589edb5](589edb5)) * **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)) ### Documentation * **Dialtone Vue:** DLT-3226 update documentation and consuming code to numeric size scale ([#1158](#1158)) ([149c763](149c763)) * **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)) * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **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)) * **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)) * **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)) * **Link,button:** DLT-3012 add underline prop ([#1059](#1059)) ([1cb91ea](1cb91ea)) * **Mode Directive, Mode Island:** DLT-3067 DLT-3078 DLT-3077 add `v-dt-mode` directive ([#1109](#1109)) ([f97efca](f97efca)) * **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:** export text component from dialtone-vue ([757fdb7](757fdb7)) * **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))
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Apr 15, 2026
# [9.180.0-next.1](dialtone/v9.179.0...dialtone/v9.180.0-next.1) (2026-04-15) ### Bug Fixes * **Doc:** NO-JIRA correct font size utility json ([#1015](#1015)) ([76cf0fa](76cf0fa)) * **Editor:** NO-JIRA remove extra blank line in editor.mdx ([18c47ef](18c47ef)) * possible merge issue in sidebarItem.vue ([5e2e91b](5e2e91b)) * **Split Button, Filter Pill:** DLT-3260 DLT-3261 correct misalignment at size 100 ([#1176](#1176)) ([fe2b777](fe2b777)) * **Stylelint:** disable hue-degree-notation rule and update OKLCH color syntax ([81f886e](81f886e)) * **Stylelint:** disable hue-degree-notation rule and update OKLCH color syntax ([8721f43](8721f43)) * **Tabs:** DLT-3251 improve accessibility ([#1171](#1171)) ([01b101e](01b101e)) * **Tokens:** DLT-3053 preserve root font size variable as reference ([#1093](#1093)) ([112ab4b](112ab4b)) * **Tokens:** handle multi-layer box shadows correctly in postcss plugin ([feea7f1](feea7f1)) * **Tokens:** NO-JIRA output line-height as unitless instead of percentages ([#1040](#1040)) ([33d8505](33d8505)) * **Tokens:** wrap css math expressions with calc() in layered build ([#966](#966)) ([1635f61](1635f61)) * update @dialpad/i18n dependencies to latest versions ([7a4b777](7a4b777)) ### Code Refactoring * **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-3282 renamed show prop to open ([#1190](#1190)) ([5509d0f](5509d0f)) * **Components:** dlt-3283 refactor prop/slots to be consistent ([#1196](#1196)) ([2d22c76](2d22c76)) * **Css:** DLT-1876 css logical properties ([#872](#872)) ([1acd6c9](1acd6c9)) * **Modal:** DLT-3262 migrate DtModal to native dialog element ([#1179](#1179)) ([589edb5](589edb5)) * **Notice,banner,toast:** DLT-3296 decouple CSS and fix specificity violations ([#1194](#1194)) ([9579ac0](9579ac0)) * **Style:** DLT-3014 wrap all styles in css cascade layers ([#1061](#1061)) ([f8b3fed](f8b3fed)) * **Text:** DLT-2883 rename headline sizes from xxl => 2xl, etc ([#1029](#1029)) ([0ac86f3](0ac86f3)) * **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-2884 deprecate space tokens in favor of size tokens ([#1013](#1013)) ([63f6d2f](63f6d2f)) * **Tokens:** DLT-3013 convert color system from HSL to OKLCH ([#1060](#1060)) ([42dc418](42dc418)) ### Documentation * **Components:** DLT-3178 DLT-3182 unify code examples into single code-example component ([#1147](#1147)) ([d0b6e14](d0b6e14)) * **Css Utilities:** DLT-3295 DLT-3280 mark physical utilities as deprecated ([#1193](#1193)) ([73f1479](73f1479)) * **Dialtone Vue:** DLT-3226 update documentation and consuming code to numeric size scale ([#1158](#1158)) ([149c763](149c763)) * DLT-1510 DLT-1511 DLT-1512 site redesign and ia ([#968](#968)) ([6ea7eb9](6ea7eb9)) * DLT-2908 ui kits landing page ([#1049](#1049)) ([d805b9d](d805b9d)) * DLT-3243 fenced code blocks for examples and snippets ([#1166](#1166)) ([cb169df](cb169df)) * DLT-3250 display component status badges in sidebar and page headers ([#1170](#1170)) ([7d5f5d5](7d5f5d5)) * DLT-3252 add GFM alert syntax for notices ([#1172](#1172)) ([1697911](1697911)) * DLT-3258 DLT-3259 improve sidebar search with logical keywords and fuzzy matching ([#1174](#1174)) ([2bf4639](2bf4639)) * NO-JIRA fix focus left-nav items on keypress down up ([#1106](#1106)) ([882c9b9](882c9b9)) * **Playground:** DLT-3119 refine playground UI and integrate across doc site ([#1127](#1127)) ([ba6b599](ba6b599)) * **Playground:** DLT-3242 segmented control for compact enum props ([#1165](#1165)) ([fa440d8](fa440d8)) * **Utilities:** DLT-3183 convert to vue demo fenced block ([#1167](#1167)) ([522197f](522197f)) ### 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)) * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **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 Utility:** DLT-2715 add default color for border css utilities ([#874](#874)) ([71310ab](71310ab)) * **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)) * **Eslint Plugin Dialtone:** DLT-3047 physical-to-logical naming migration tooling ([#1163](#1163)) ([d94dc4b](d94dc4b)) * **Eslint Plugin Dialtone:** DLT-3227 DLT-3228 add deprecated-tshirt-sizes ESLint rule and migration codemod ([#1159](#1159)) ([21a011f](21a011f)) * **Filter Pill:** DLT-2704 create component ([#473](#473)) ([6267445](6267445)) * **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)) * **Link,button:** DLT-3012 add underline prop ([#1059](#1059)) ([1cb91ea](1cb91ea)) * **Mode Directive, Mode Island:** DLT-3067 DLT-3078 DLT-3077 add `v-dt-mode` directive ([#1109](#1109)) ([f97efca](f97efca)) * **Segmented Control:** DLT-413 new component ([#1144](#1144)) ([ad4c6c3](ad4c6c3)) * **Split Button:** DLT-3257 add show-divider prop ([#1173](#1173)) ([5bef411](5bef411)) * **Style:** DLT-2976 update underline thickness and offset ([#1058](#1058)) ([1e56947](1e56947)) * **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:** export text component from dialtone-vue ([757fdb7](757fdb7)) * **Text:** new vue component DLT-2864 DLT-2863 DLT-2862 ([#995](#995)) ([196ef8a](196ef8a)) * **Tokens:** DLT-1977 add high contrast design tokens and theme ([#938](#938)) ([a1c0457](a1c0457)) * **Tokens:** DLT-2767 exploratory shell themes ([#909](#909)) ([3afcf63](3afcf63)) * **Tokens:** DLT-2781 create color-assistive themes ([#921](#921)) ([a6cc397](a6cc397)) * **Tokens:** DLT-2802 DLT-2563 layered theming system and mode island component ([#945](#945)) ([5c72c6c](5c72c6c)) * **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)) * **Typography, Tokens:** DLT-2856 DLT-2857 next typography system ([#994](#994)) ([d744e97](d744e97))
12 tasks
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.
Obligatory GIF (super important!)
🛠️ Type Of Change
📖 Jira Ticket
DLT-3157
📖 Description
Aligns
critical/positivenaming across components that previously useddanger/success/error. Two parallel changes:Prop values — new preferred values added alongside deprecated ones (old values remain functional):
kindcriticaldangertypepositivesuccesstone(renamed fromkind)critical,positivekind,danger,successkindcritical,positiveerror,successkindcritical,positiveerror,successkindcriticaldangerbannerKindcritical,positiveerror,successDtLink's
kindprop is renamed totonesince it only affects link text color. The oldkindprop is kept as a deprecated backward-compat fallback via aresolvedTonecomputed.CSS classes — new classes added as aliases; old classes kept for backward compatibility:
d-badge--successd-badge--positived-btn--dangerd-btn--criticald-link--danger/d-link--inverted-dangerd-link--critical/d-link--inverted-criticald-link--success/d-link--inverted-successd-link--positive/d-link--inverted-positived-modal--dangerd-modal--criticald-modal__banner--successd-modal__banner--positived-notice--error,d-banner--error,d-toast--errord-notice--critical,d-banner--critical,d-toast--criticald-notice--success,d-banner--success,d-toast--successd-notice--positive,d-banner--positive,d-toast--positive💡 Context
kindprop values were inconsistent across components — some useddanger/success/error, others already usedcritical/positive. This change standardizes oncriticalandpositiveas the canonical values going forward, while maintaining full backward compatibility with the old values and CSS classes.📦 Cross-Package Impact
dialtone-cssdialtone-vuekind→tonerenameDependency flow: CSS ← Vue → docs/MCP
📝 Checklist
For all PRs:
For all Vue changes:
For all CSS changes:
Standardizes "critical" and "positive" across components, CSS, and tokens (adds $deprecated aliases for danger/error/success); keeps backward-compatible fallbacks; renames DtLink prop kind→tone with resolvedTone; updates dialtone-css, dialtone-vue, tokens, docs, stories, and tests.