fix(dialtone-vue): DP-203134 hide empty message paragraph in DtNoticeContent - #1390
Conversation
…Content DtNoticeContent always rendered the message <dt-text> element even when no default-slot content was provided, unlike the header element which is already guarded by hasSlotContent($slots.header). A title-only Notice, Toast, or Banner (e.g. the 'Copied to clipboard' toast) would render an empty <p class="d-notice__message"> that still takes up line-height, throwing off vertical centering against the close icon/button. Guards the message element the same way the header already is, using the same hasSlotContent utility. Fixes DtNotice, DtToast (both layouts), and DtBanner, which all share this component.
|
Please add either the |
|
Important Review skippedNo new commits to review since the last review. ⚙️ Run configurationConfiguration used: Repository YAML (base), Central YAML (inherited), Workspace UI (inherited) Review profile: ASSERTIVE Plan: Enterprise Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Central YAML (inherited), Workspace UI (inherited) Review profile: ASSERTIVE Plan: Enterprise Run ID: 📒 Files selected for processing (2)
🔗 Linked repositories identifiedCodeRabbit considers these linked repositories for cross-repo context during reviews:
Updated Overall Judgement: ✅ Ready to merge — The change is focused and includes test coverage for the affected behavior. Walkthrough
ChangesNotice content rendering
Suggested reviewers: ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
✔️ Deploy previews ready! |
Francis Rupert (francisrupert)
left a comment
Francis Rupert (francisrupert)
left a comment
There was a problem hiding this comment.
oops, yeah. thx.
![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: 7e464bc061
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "Codex (@codex) review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "Codex (@codex) address that feedback".
| </slot> | ||
| </dt-text> | ||
| <dt-text | ||
| v-if="hasSlotContent($slots.default)" |
There was a problem hiding this comment.
When DtToast has only headerText and its message is empty or undefined, Toast.vue and ToastLayoutDefault.vue each forward <slot>{{ message }}</slot>. Vue wraps that empty fallback in Fragment VNodes, and hasSlotContent only examines the top-level vnode, so it treats the nonempty Fragment wrapper as content and this condition still renders the empty message paragraph. The new direct DtNoticeContent test bypasses this forwarding path, leaving the title-only toast scenario described by the change unfixed; cover DtToast itself and either unwrap nested fragments or suppress the empty fallback before it reaches this component.
Useful? React with 👍 / 👎.
| </slot> | ||
| </dt-text> | ||
| <dt-text | ||
| v-if="hasSlotContent($slots.default)" |
There was a problem hiding this comment.
For a title-only DtBanner, this condition now removes the only element carrying contentId, but Banner.vue still unconditionally renders aria-describedby="contentId" on the dialog. Because contentId has a generated default, every banner without message content now exposes an ARIA reference to a nonexistent element; conditionally omit aria-describedby whenever the message element is suppressed.
Useful? React with 👍 / 👎.
# [3.225.0-next.2](dialtone-vue/v3.225.0-next.1...dialtone-vue/v3.225.0-next.2) (2026-08-13) ### Bug Fixes * **Dialtone Vue:** DP-203134 hide empty message paragraph in DtNoticeContent ([#1390](#1390)) ([1e0810c](1e0810c)) * **Mode Island:** NO-JIRA fix tag order on Mode Island story ([#1389](#1389)) ([7a4d73a](7a4d73a)) * **Popover:** NO-JIRA don't hide dialog from assistive tech while it still holds focus on close ([#1392](#1392)) ([f871496](f871496)) ### Features * **Notice, Toast:** NO-JIRA pretty wrap headline ([#1393](#1393)) ([7a36b89](7a36b89))
# [10.0.0-next.13](dialtone/v10.0.0-next.12...dialtone/v10.0.0-next.13) (2026-08-13) ### Bug Fixes * **Dialtone Vue:** DP-203134 hide empty message paragraph in DtNoticeContent ([#1390](#1390)) ([1e0810c](1e0810c)) * **Mode Island:** NO-JIRA fix tag order on Mode Island story ([#1389](#1389)) ([7a4d73a](7a4d73a)) * **Popover:** NO-JIRA don't hide dialog from assistive tech while it still holds focus on close ([#1392](#1392)) ([f871496](f871496)) ### Features * **Icon:** DLT-3570 update `dialbot` and `dialpad-analytics-ai` to squircle ([#1391](#1391)) ([725fd81](725fd81)) * **Notice, Toast:** NO-JIRA pretty wrap headline ([#1393](#1393)) ([7a36b89](7a36b89))
3 participants
Context
JIRA Link: https://dialpad.atlassian.net/browse/DP-203134
The close icon in a title-only
DtNotice/DtToast/DtBanner(e.g. the "Copied to clipboard" toast) is misaligned relative to the title text.Root cause
DtNoticeContentalways renders its message<dt-text>element, even when no default-slot content is provided. The header element is already guarded withv-if="headerText || hasSlotContent(\$slots.header)", but the message element has no equivalent guard. A title-only notice ends up with an empty<p class="d-notice__message">, which still takes up line-height and throws off vertical centering against the close icon.This is shared by every consumer of
DtNoticeContent:DtNotice, bothDtToastlayouts (default and alternate), andDtBanner.Fix
Guard the message element the same way the header already is:
v-if="hasSlotContent(\$slots.default)".Tests
Added a case to
NoticeContent.test.jscovering the no-message scenario (asserts the message element does not render). Existing tests unaffected — they always pass real slot content.