[Duplicate div in Toast notiication]: Doubles intended margin

[cordesmj]

Description

The notification content is wrapped with two nested <div class="cds--toast-notification__details"> elements. This results in margin-inline-end: 1rem; being applied twice, doubling the actual margin.

Component(s) impacted

https://web-components.carbondesignsystem.com/?path=/docs/components-notifications-toast--default

Renders as

The error is here:

carbon-for-ibm-dotcom/packages/carbon-web-components/src/components/notification/toast-notification.ts

Lines 57 to 66 in 1df637a

	render() {
	const { _type: type } = this;
	return html`
	${this._renderIcon()}
	<div class="${prefix}--${type}-notification__details">
	${this._renderText()}
	</div>
	${this._renderButton()}
	`;
	}

Lines 61 and 63 are not needed because the div is already added here:

carbon-for-ibm-dotcom/packages/carbon-web-components/src/components/notification/toast-notification.ts

Lines 33 to 49 in 1df637a

	protected _renderText() {
	const { caption, subtitle, title, _type: type } = this;
	return html`
	<div class="${prefix}--${type}-notification__details">
	<div class="${prefix}--${type}-notification__title">
	${title}<slot name="title"></slot>
	</div>
	<div class="${prefix}--${type}-notification__subtitle">
	${subtitle}<slot name="subtitle"></slot>
	</div>
	<div class="${prefix}--${type}-notification__caption">
	${caption}<slot name="caption"></slot>
	</div>
	<slot></slot>
	</div>
	`;
	}

in lines 36 and 47

(Tried to create a pull request but had trouble getting through the checks gauntlet)

Browser

Chrome

Carbon for IBM.com version

v2.10.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

w3 publisher

Package

@carbon/web-components

CodeSandbox example

you can see it right in the storybook

Steps to reproduce the issue (if applicable)

Inspect the storybook: https://web-components.carbondesignsystem.com/?path=/story/components-notifications-toast--default

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues