Skip to content

feat(components): dlt-3096 add slot classes #1214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Ignacio Ropolo (iropolo) merged 5 commits into from
Apr 21, 2026
Merged

feat(components): dlt-3096 add slot classes #1214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
452a56b
refactor(components): dlt-3096 slots refactor
Apr 20, 2026
a9ec040
Merge remote-tracking branch 'origin/next' into dlt-3096
Apr 20, 2026
49e9e3d
couple of improvements
Apr 20, 2026
734ffc2
add missing content-class
Apr 20, 2026
2a5cab4
some improvements
Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions packages/dialtone-vue/components/badge/badge.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
/>
<span
v-if="hasLeftIcon"
class="d-badge__icon-left"
:class="['d-badge__icon-left', startIconClass]"
>
<!-- @slot Slot for start icon, icon-size slot prop defaults to '200' -->
<slot
Expand All @@ -39,7 +39,7 @@
</span>
<span
v-if="hasRightIcon"
class="d-badge__icon-right"
:class="['d-badge__icon-right', endIconClass]"
>
<!-- @slot Slot for end icon, icon-size slot prop defaults to '200' -->
<slot
Expand Down Expand Up @@ -131,6 +131,22 @@ export default {
default: '',
},

/**
* Used to customize the start icon container
*/
startIconClass: {
type: [String, Array, Object],
default: '',
},

/**
* Used to customize the end icon container
*/
endIconClass: {
type: [String, Array, Object],
default: '',
},

/**
* Shows a subtle appearance for the badge
* Currently only affects the badge when type is bulletin.
Expand Down
36 changes: 36 additions & 0 deletions packages/dialtone-vue/components/banner/banner.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<dt-notice-icon
v-if="showIcon"
:kind="kind"
:icon-class="iconClass"
:class="{ 'd-notice__icon--has-title': headerText || $slots.header }"
>
<!-- @slot Slot for custom icon -->
Expand All @@ -24,6 +25,8 @@
:header-id="headerId"
:content-id="contentId"
:header-text="headerText"
:header-class="headerClass"
Comment thread
braddialpad marked this conversation as resolved.
:content-class="contentClass"
>
<template #header>
<!-- @slot Slot for the header -->
Expand All @@ -35,6 +38,7 @@
<dt-notice-action
:show-action="showAction"
:show-close="showClose"
:action-class="actionClass"
@close="$emit('close')"
>
<!-- @slot Enter a possible action for the user to take, such as a link to another page -->
Expand Down Expand Up @@ -178,6 +182,38 @@ export default {
type: String,
default: 'cover',
},

/**
* Additional class name for the icon wrapper element.
*/
iconClass: {
type: [String, Array, Object],
default: '',
},

/**
* Additional class name for the header wrapper element.
*/
headerClass: {
type: [String, Array, Object],
default: '',
},

/**
* Additional class name for the content wrapper element.
*/
contentClass: {
type: [String, Array, Object],
default: '',
},

/**
* Additional class name for the action wrapper element.
*/
actionClass: {
type: [String, Array, Object],
default: '',
},
},

emits: [
Expand Down
8 changes: 7 additions & 1 deletion packages/dialtone-vue/components/box/box.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
>
<div
data-qa="dt-box-scrollbar-content"
class="d-box__scrollbar-content"
:class="['d-box__scrollbar-content', scrollbarContentClass]"
>
<!-- @slot Slot for main content -->
<slot />
Expand Down Expand Up @@ -221,6 +221,12 @@ const props = defineProps({
* @values hidden, scroll, auto, clip, visible
*/
overflow: { type: String, default: undefined, validator: overflowValidator },

/**
* Additional CSS classes applied to the scrollbar content wrapper element.
* Only applies when scrollbar prop is set.
*/
scrollbarContentClass: { type: [String, Object, Array], default: '' },
Comment on lines +224 to +229
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# 1) Find all references to the new prop
rg -n -C2 '\bscrollbarContentClass\b'

# 2) Locate likely DtBox artifacts expected by repo conventions
fd -i 'box.vue'
fd -i 'box.test.js'
fd -i 'box.stories.js'
fd -i 'box.mdx'
fd -i '*box*.json'
fd -i '*box*.md'

# 3) Check whether those artifacts mention the new prop
rg -n -C2 '\bscrollbarContentClass\b' --iglob '*box*'

Repository: dialpad/dialtone

Length of output: 1891

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== 1. Check box.test.js for scrollbarContentClass ==="
rg -n 'scrollbarContentClass' packages/dialtone-vue/components/box/box.test.js || echo "Not found in test file"

echo -e "\n=== 2. Check box.stories.js for scrollbarContentClass ==="
rg -n 'scrollbarContentClass' packages/dialtone-vue/components/box/box.stories.js || echo "Not found in stories file"

echo -e "\n=== 3. Find box component docs JSON files ==="
find packages/dialtone-vue/components/box -name "*.json" -type f 2>/dev/null || echo "No JSON files found"

echo -e "\n=== 4. Find box component VuePress docs ==="
find . -path "*/docs*" -name "*box*" -type f 2>/dev/null | head -20

echo -e "\n=== 5. Search for MCP server data files ==="
find . -name "*mcp*" -o -name "*meta*" -o -name "*schema*" 2>/dev/null | grep -i box | head -10

echo -e "\n=== 6. Check if there's a component docs registry ==="
rg -l 'box.*component\|component.*box' --type json --type js 2>/dev/null | grep -i 'doc\|meta\|schema' | head -10

Repository: dialpad/dialtone

Length of output: 1573

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== Check VuePress box.md for scrollbarContentClass ==="
rg -n 'scrollbarContentClass' ./apps/dialtone-documentation/docs/components/box.md || echo "Not found in VuePress docs"

echo -e "\n=== Check docs/_data/ for component metadata ==="
ls -la ./apps/dialtone-documentation/docs/_data/ 2>/dev/null || echo "Directory not found"

echo -e "\n=== Search for component JSON metadata files ==="
find ./apps/dialtone-documentation -name "*box*.json" -type f 2>/dev/null

echo -e "\n=== Search for MCP server or metadata patterns ==="
find . -type f -name "*.json" -exec rg -l '"box".*"props"|"scrollbarContentClass"' {} \; 2>/dev/null | head -5

echo -e "\n=== Check if docs/_data/checkbox.json shows the expected structure ==="
head -50 ./apps/dialtone-documentation/docs/_data/checkbox.json 2>/dev/null || echo "File not found"

Repository: dialpad/dialtone

Length of output: 5347

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== Check box.test.js to see if it should document props ==="
head -80 packages/dialtone-vue/components/box/box.test.js

echo -e "\n=== Check box.stories.js to see if it should document props ==="
head -80 packages/dialtone-vue/components/box/box.stories.js

echo -e "\n=== Check if there are .mdx files for box component ==="
find packages/dialtone-vue/components/box -name "*.mdx" -type f

echo -e "\n=== Check for TypeScript definitions or prop documentation patterns ==="
find packages/dialtone-vue/components/box -type f | head -20

Repository: dialpad/dialtone

Length of output: 4570

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== Search for complete argTypesData in box.stories.js ==="
rg -A 200 'argTypesData' packages/dialtone-vue/components/box/box.stories.js | grep -E '(scrollbar|}})'

echo -e "\n=== Check if scrollbar tests exist in box.test.js ==="
rg -n 'scrollbar' packages/dialtone-vue/components/box/box.test.js

echo -e "\n=== Check box.vue for full prop list with scrollbar ==="
rg -B 5 -A 5 'scrollbar' packages/dialtone-vue/components/box/box.vue | head -60

echo -e "\n=== Check if box.stories.js mentions scrollbarContent anywhere ==="
rg -n 'scrollbar' packages/dialtone-vue/components/box/box.stories.js

Repository: dialpad/dialtone

Length of output: 118

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== Read full box.stories.js file ==="
wc -l packages/dialtone-vue/components/box/box.stories.js

echo -e "\n=== Get argTypesData section from box.stories.js ==="
sed -n '/export const argTypesData/,/^}/p' packages/dialtone-vue/components/box/box.stories.js | tail -80

echo -e "\n=== Search for scrollbar in box.test.js ==="
rg -n 'scrollbar' packages/dialtone-vue/components/box/box.test.js || echo "No scrollbar tests found"

echo -e "\n=== List all props in box.vue ==="
sed -n '/defineProps/,/^[});]/p' packages/dialtone-vue/components/box/box.vue | head -100

Repository: dialpad/dialtone

Length of output: 7170

Update all DtBox artifacts for the new scrollbarContentClass prop.

The prop was added to the Vue component but is missing from Storybook controls (argTypesData in box.stories.js), tests (box.test.js), and VuePress documentation (box.md). Per the 6-artifact sync requirement, add:

  • scrollbarContentClass entry to argTypesData in box.stories.js (with control type and description)
  • Test case in box.test.js verifying the class is applied to the scrollbar content wrapper
  • Documentation in apps/dialtone-documentation/docs/components/box.md
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/dialtone-vue/components/box/box.vue` around lines 224 - 229, Add the
new scrollbarContentClass prop across the six artifacts: in box.stories.js add a
scrollbarContentClass entry to argTypesData with a control type (string) and a
concise description matching the component prop; in box.test.js add a test in
the DtBox suite that mounts DtBox with scrollbar and scrollbarContentClass set
and asserts the provided class is present on the scrollbar content wrapper
element (target the wrapper by its class or role used in the component); and
update apps/dialtone-documentation/docs/components/box.md to document the
scrollbarContentClass prop (type, default, and brief description) so docs,
stories, and tests reflect the new prop.

});

const SCROLLBAR_INCOMPATIBLE_ELEMENTS = ['ul', 'ol', 'span', 'fieldset'];
Expand Down
10 changes: 9 additions & 1 deletion packages/dialtone-vue/components/breadcrumbs/breadcrumbs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{ [BREADCRUMBS_INVERTED_MODIFIER]: inverted },
]"
>
<ol :class="['d-breadcrumbs__list']">
<ol :class="['d-breadcrumbs__list', listClass]">
<!-- @slot default slot for breadcrumbs content -->
<slot>
<dt-breadcrumb-item
Expand Down Expand Up @@ -65,6 +65,14 @@ export default {
default: false,
},

/**
* Additional CSS class(es) applied to the list wrapper element.
*/
listClass: {
type: [String, Array, Object],
default: '',
},
Comment on lines +68 to +74
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Verify references for newly introduced class props in this PR scope.
# Expected: references in component tests, stories, docs JSON/VuePress/MCP data where applicable.

echo "== Candidate component-related files =="
fd -i 'breadcrumbs|filter_pill' packages

echo "== Prop references in likely companion artifacts =="
rg -n -C2 --iglob '*breadcrumbs*' --iglob '*filter_pill*' '\b(listClass|labelClass)\b' packages

Repository: dialpad/dialtone

Length of output: 3528

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Check for breadcrumbs test file =="
fd 'breadcrumbs' packages/dialtone-vue --type f | grep -i test

echo "== Search for listClass in breadcrumbs test (if exists) =="
find packages/dialtone-vue/components/breadcrumbs -name '*.test.js' -o -name '*.spec.js' | while read f; do
  if [ -f "$f" ]; then
    echo "Found: $f"
    rg -n 'listClass' "$f" || echo "No listClass references found"
  fi
done

echo "== Search for listClass in breadcrumbs story files =="
rg -n 'listClass' packages/dialtone-vue/components/breadcrumbs/ || echo "No listClass in breadcrumbs stories"

echo "== Check for component docs metadata files =="
find packages -name '*breadcrumbs*' -type f | grep -E '\.(json|mdx?)$' | head -20

echo "== Check for VuePress docs =="
find packages -path '*/docs/*' -name '*breadcrumb*' 2>/dev/null || echo "No VuePress breadcrumb docs found"

echo "== Check MCP server data =="
rg -l 'breadcrumbs' packages --type json | head -10

Repository: dialpad/dialtone

Length of output: 97

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== List all files in breadcrumbs directory =="
ls -la packages/dialtone-vue/components/breadcrumbs/

echo "== Check breadcrumbs.stories.js for listClass =="
rg -n 'listClass' packages/dialtone-vue/components/breadcrumbs/breadcrumbs.stories.js || echo "Not found in stories.js"

echo "== Check breadcrumbs story templates for listClass =="
rg -n 'listClass' packages/dialtone-vue/components/breadcrumbs/*.story.vue || echo "Not found in story.vue files"

echo "== Search for component docs/metadata files =="
find packages -name '*.json' -type f | xargs rg -l 'breadcrumbs' 2>/dev/null | head -5

echo "== Check for MDX documentation =="
find packages -name '*.mdx' -type f | xargs rg -l 'breadcrumbs' 2>/dev/null | head -5

Repository: dialpad/dialtone

Length of output: 1380

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Check breadcrumb.test.js for listClass =="
rg -n 'listClass' packages/dialtone-vue/components/breadcrumbs/breadcrumb.test.js || echo "Not found in breadcrumb.test.js"

echo "== Read breadcrumb.test.js to see what it tests =="
head -50 packages/dialtone-vue/components/breadcrumbs/breadcrumb.test.js

echo "== Search for component docs registry JSON =="
find packages/dialtone-vue -name '*docs*' -o -name '*registry*' -o -name '*components*' | grep -i json | head -10

echo "== Check dialtone-vue package for component metadata =="
ls -la packages/dialtone-vue/*.json 2>/dev/null || echo "No JSON files at package root"

echo "== Search for MCP data or VuePress in docs =="
find packages -type d -name 'docs' -o -type d -name '.mcp' | head -5

Repository: dialpad/dialtone

Length of output: 1204

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Search for all JSON files that might contain component metadata =="
find packages -type f -name '*.json' | xargs grep -l '"breadcrumbs"' 2>/dev/null | head -10

echo "== Check if there's a component registry or docs folder =="
ls -la packages/dialtone-vue/docs 2>/dev/null || echo "No docs folder at package root"

echo "== Look for .mdx files related to breadcrumbs =="
find packages -name '*.mdx' | xargs grep -l 'breadcrumb' 2>/dev/null || echo "No MDX breadcrumb docs"

echo "== Check breadcrumbs.stories.js content for completeness =="
cat -n packages/dialtone-vue/components/breadcrumbs/breadcrumbs.stories.js

echo "== Check breadcrumbs_variants.story.vue content =="
cat -n packages/dialtone-vue/components/breadcrumbs/breadcrumbs_variants.story.vue

Repository: dialpad/dialtone

Length of output: 131

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Direct read of breadcrumbs.stories.js =="
cat packages/dialtone-vue/components/breadcrumbs/breadcrumbs.stories.js

echo ""
echo "== Direct read of breadcrumbs_variants.story.vue =="
cat packages/dialtone-vue/components/breadcrumbs/breadcrumbs_variants.story.vue

echo ""
echo "== Check entire breadcrumb.test.js for prop coverage =="
cat packages/dialtone-vue/components/breadcrumbs/breadcrumb.test.js | head -100

Repository: dialpad/dialtone

Length of output: 5080

Add listClass to Storybook argTypes and test coverage.

The new listClass prop is defined in the component but missing from:

  • breadcrumbs.stories.js argTypes
  • breadcrumb.test.js test cases
  • Story template examples in .story.vue files

Update argTypes to include listClass alongside other props, add a test case verifying the prop applies the CSS class, and showcase it in story variants for consistency with other class props.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/dialtone-vue/components/breadcrumbs/breadcrumbs.vue` around lines 68
- 74, Add the new listClass prop to Storybook argTypes and tests: update
breadcrumbs.stories.js to include a listClass argType (matching types used for
other class props) and add examples in the existing .story.vue templates showing
its effect; then add a unit test in breadcrumb.test.js that renders the
Breadcrumbs component with listClass set to a test CSS class and asserts the
list wrapper element receives that class (refer to the prop name listClass and
the test helper/render function used in breadcrumb.test.js and the story
templates to mirror usage).


/**
* Descriptive label for the navigation content.
*/
Expand Down
46 changes: 46 additions & 0 deletions packages/dialtone-vue/components/button/button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
'd-btn__icon': kind !== 'unstyled',
'd-btn__icon--top': kind !== 'unstyled',
},
blockStartIconClass,
]"
>
<!-- @slot Icon displayed above the button label (block-start) -->
Expand All @@ -53,6 +54,7 @@
'd-btn__icon': kind !== 'unstyled',
'd-btn__icon--left': kind !== 'unstyled',
},
startIconClass,
]"
>
<!-- @slot Icon displayed at the start (left in LTR) of the button -->
Expand All @@ -71,6 +73,7 @@
'd-btn__icon': kind !== 'unstyled',
[ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',
},
iconClass,
]"
>
<!-- @slot Button icon -->
Expand Down Expand Up @@ -101,6 +104,7 @@
'd-btn__icon': kind !== 'unstyled',
'd-btn__icon--right': kind !== 'unstyled',
},
endIconClass,
]"
>
<!-- @slot Icon displayed at the end (right in LTR) of the button -->
Expand All @@ -119,6 +123,7 @@
'd-btn__icon': kind !== 'unstyled',
'd-btn__icon--bottom': kind !== 'unstyled',
},
blockEndIconClass,
]"
>
<!-- @slot Icon displayed below the button label (block-end) -->
Expand Down Expand Up @@ -313,6 +318,47 @@ export default {
default: '',
},

/**
* Used to customize the start icon container
*/
startIconClass: {
type: [String, Array, Object],
default: '',
},

/**
* Used to customize the end icon container
*/
endIconClass: {
type: [String, Array, Object],
default: '',
},

/**
* Used to customize the block-start icon container
*/
blockStartIconClass: {
type: [String, Array, Object],
default: '',
},

/**
* Used to customize the block-end icon container
*/
blockEndIconClass: {
type: [String, Array, Object],
default: '',
},

/**
* Used to customize the legacy icon container
* @deprecated Use startIconClass or endIconClass
*/
iconClass: {
type: [String, Array, Object],
default: '',
},

/**
* Whether the button should display a loading animation or not.
* @values true, false
Expand Down
19 changes: 18 additions & 1 deletion packages/dialtone-vue/components/chip/chip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@
>
<span
v-if="hasSlotContent($slots.icon)"
class="d-chip__icon"
:class="['d-chip__icon', iconClass]"
data-qa="dt-chip-icon"
>
<!-- @slot slot for Chip icon -->
<slot name="icon" />
</span>
<span
v-else-if="hasSlotContent($slots.avatar)"
:class="avatarClass"
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 20, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Restore the base avatar class in the wrapper binding.

Line 25 drops the component’s base avatar class and can break default chip avatar styling. Keep the base class and append avatarClass.

🛠️ Proposed fix 
-        :class="avatarClass"
+        :class="['d-chip__avatar', avatarClass]"

Also applies to: 166-172

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/dialtone-vue/components/chip/chip.vue` at line 25, Restore the
component's base avatar class in the wrapper's class binding instead of
replacing it with only avatarClass: ensure the wrapper element(s) that currently
use ":class=\"avatarClass\"" keep the static base class (e.g., "dt-chip__avatar"
or the component's base avatar class) and then append avatarClass (e.g.,
:class="['dt-chip__avatar', avatarClass]"); update both occurrences that bind
avatarClass (the one near the top using avatarClass and the second occurrence
around the 166-172 block) so default chip avatar styling is preserved while
still allowing custom classes.

Copy link
Copy Markdown
Contributor Author

@iropolo Ignacio Ropolo (iropolo) Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a bug. The original avatar span had no base class (), and no d-chip__avatar CSS class exists. :class="avatarClass" is correct.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iropolo, you're right — the original <span data-qa="dt-chip-avatar"> had no base class at all, so :class="avatarClass" is the correct binding. My suggestion was mistaken. Apologies for the noise!

(ᵔᴥᵔ)

✏️ Learnings added 
Learnt from: iropolo
Repo: dialpad/dialtone PR: 1214
File: packages/dialtone-vue/components/chip/chip.vue:25-25
Timestamp: 2026-04-20T18:47:06.948Z
Learning: In `packages/dialtone-vue/components/chip/chip.vue`, the avatar wrapper span (`data-qa="dt-chip-avatar"`) intentionally has no base CSS class — there is no `d-chip__avatar` class. The `:class="avatarClass"` binding is correct as-is; do not suggest adding a base class to this element.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

🧠 Learnings used 
Learnt from: francisrupert
Repo: dialpad/dialtone PR: 1199
File: packages/combinator/src/lib/tokens.js:63-64
Timestamp: 2026-04-15T19:43:14.186Z
Learning: In dialpad/dialtone's Combinator (`packages/combinator/src/lib/tokens.js`), the avatar `family` color swatch intentionally resolves against a hardcoded `data-avatar-variant="3"` to represent the mid-range hue for each of the 12 color families. The `variant` prop controls lightness/chroma within a family, not the hue itself, so it is deliberately excluded from the swatch resolver and cache key. Threading `variant` through would add complexity without meaningful benefit to the swatch's purpose.

Learnt from: braddialpad
Repo: dialpad/dialtone PR: 1177
File: packages/dialtone-vue/components/checkbox/checkbox_constants.js:1-5
Timestamp: 2026-04-09T22:23:30.222Z
Learning: In the dialtone repo (packages/dialtone-vue/components/checkbox/checkbox_constants.js), the removal of `error` and `success` keys from `CHECKBOX_INPUT_VALIDATION_CLASSES` (replaced by `critical` and `positive`) is an intentional breaking change. No deprecated alias mappings (error→critical, success→positive) are needed or desired.

Learnt from: francisrupert
Repo: dialpad/dialtone PR: 1194
File: packages/dialtone-css/lib/build/less/components/notice.less:55-59
Timestamp: 2026-04-12T21:13:39.883Z
Learning: Repo: dialpad/dialtone — PR `#1194`. For CSS-internal refactors (e.g., notice/banner/toast moving from descendant selectors to CSS custom property inheritance) that produce identical compiled CSS, maintainers consider this non-behavioral and do not require new tests; a brief compiled-CSS diff or verification note in the PR is acceptable proof.

Learnt from: braddialpad
Repo: dialpad/dialtone PR: 1177
File: packages/dialtone-vue/components/checkbox/checkbox_constants.js:1-5
Timestamp: 2026-04-09T22:23:30.222Z
Learning: In the dialtone repo (PR `#1177`), the broad rename from `error`/`success`/`danger` to `critical`/`positive` across component prop values, CSS class names, and constants is an intentional breaking change with no legacy fallback aliases desired. This applies across DtButton, DtBadge, DtBanner, DtNotice, DtToast, DtModal, DtLink, DtCheckbox, DtRadio, DtInput, DtSelectMenu, and related validation message constants.

Learnt from: braddialpad
Repo: dialpad/dialtone PR: 1177
File: packages/dialtone-vue/common/mixins/input.test.js:24-24
Timestamp: 2026-04-09T22:23:21.554Z
Learning: In the dialtone monorepo’s packages/dialtone-vue, treat the validationState rename as an intentional breaking change: `VALIDATION_MESSAGE_TYPES.ERROR`→`CRITICAL` and `VALIDATION_MESSAGE_TYPES.SUCCESS`→`POSITIVE` should use the new `'critical'`/`'positive'` string values, and do not require backward compatibility with the prior `'error'`/`'success'` values or test coverage for the old strings.

Learnt from: braddialpad
Repo: dialpad/dialtone PR: 1177
File: packages/dialtone-vue/components/banner/banner.vue:121-126
Timestamp: 2026-04-09T22:23:11.268Z
Learning: In the dialtone repo (packages/dialtone-vue/components/banner/banner.vue), the removal of `error` and `success` as valid `kind` prop values for DtBanner is an intentional breaking change. No legacy fallback mapping (error→critical, success→positive) is needed or desired for this component.

Learnt from: braddialpad
Repo: dialpad/dialtone PR: 1177
File: packages/dialtone-vue/components/split_button/split_button.test.js:98-105
Timestamp: 2026-04-09T22:26:01.570Z
Learning: In the dialtone repo (packages/dialtone-vue/components/split_button/split_button.test.js and split_button_constants.js), the removal of `danger` as a valid `kind` value for DtSplitButton (replaced by `critical`) is an intentional breaking change. No deprecated alias mapping (danger→critical) is needed or desired, and no backward-compatibility test coverage for the old `danger` string is required.

data-qa="dt-chip-avatar"
>
<!-- @slot slot for Chip avatar -->
Expand Down Expand Up @@ -153,6 +154,22 @@ export default {
type: [String, Array, Object],
default: '',
},

/**
* Additional class name for the icon wrapper element.
*/
iconClass: {
type: [String, Array, Object],
default: '',
},

/**
* Additional class name for the avatar wrapper element.
*/
avatarClass: {
type: [String, Array, Object],
default: '',
},
},

emits: [
Expand Down
36 changes: 33 additions & 3 deletions packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,10 @@
v-if="hasSlotContent($slots.header)"
#header
>
<div ref="header">
<div
ref="header"
:class="headerClass"
>
<slot name="header" />
</div>
</template>
Expand All @@ -88,7 +91,7 @@
<template #list>
<div
ref="list"
class="d-recipe-combobox-multi-select__list"
:class="['d-recipe-combobox-multi-select__list', listClass]"
@mousedown.prevent
>
<slot
Expand All @@ -109,7 +112,10 @@
v-if="hasSlotContent($slots.footer)"
#footer
>
<div ref="footer">
<div
ref="footer"
:class="footerClass"
>
<slot name="footer" />
</div>
</template>
Expand Down Expand Up @@ -374,6 +380,30 @@ export default {
type: Boolean,
default: false,
},

/**
* Additional class name for the header wrapper element.
*/
headerClass: {
type: [String, Array, Object],
default: '',
},

/**
* Additional class name for the footer wrapper element.
*/
footerClass: {
type: [String, Array, Object],
default: '',
},

/**
* Additional class name for the list wrapper element.
*/
listClass: {
type: [String, Array, Object],
default: '',
},
},

emits: [
Expand Down
18 changes: 18 additions & 0 deletions packages/dialtone-vue/components/combobox_with_popover/combobox_with_popover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
>
<div
ref="header"
:class="headerClass"
>
<slot name="header" />
</div>
Expand Down Expand Up @@ -104,6 +105,7 @@
>
<div
ref="footer"
:class="footerClass"
>
<slot name="footer" />
</div>
Expand Down Expand Up @@ -206,6 +208,22 @@ export default {
default: '',
},

/**
* Additional class for the header wrapper element.
*/
headerClass: {
type: [String, Array, Object],
default: '',
},

/**
* Additional class for the footer wrapper element.
*/
footerClass: {
type: [String, Array, Object],
default: '',
},

/**
* A method that will be called when the selection goes past the beginning of the list.
*/
Expand Down
Loading
Loading