[Bug]: CSS classes repeated for modal and a few other components

[nstuyvesant]

Name

Nate Stuyvesant

Are you an IBM employee?

• Yes

What happened?

When any chart renders, the modal component has the CSS classes associated with several elements twice (cds--modal-container, cds--modal-header, cds--modal-close, cds--modal-footer and many more)...

<div class="cds--modal is-visible" data-modal="true" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description" tabindex="-1">
		<div class="cds--modal-container cds--modal-container">
			<div class="cds--modal-header cds--modal-header">
				<p class="cds--modal-header__label cds--type-delta cds--modal-header__label cds--type-delta" id="modal-title">Tabular representation</p>

				<p class="cds--modal-header__heading cds--type-beta cds--modal-header__heading cds--type-beta" id="modal-description">Vertical simple bar (discrete)</p>

				<button class="cds--modal-close cds--modal-close" type="button" data-modal-close="" aria-label="close modal" data-modal-primary-focus="">
					<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-label="Close" width="20" height="20" viewBox="0 0 32 32" role="img" class="cds--modal-close__icon cds--modal-close__icon">
						<path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path>
					</svg>
				</button>
			</div>

			<div class="cds--modal-content cds--modal-content">
				<table class="cds--data-table cds--data-table--no-border cds--data-table cds--data-table--no-border">
					<thead>
						<tr>
							<th scope="col">
								<div class="cds--table-header-label cds--table-header-label">Group</div>
							</th><th scope="col">
								<div class="cds--table-header-label cds--table-header-label">x-value</div>
							</th><th scope="col">
								<div class="cds--table-header-label cds--table-header-label">y-value</div>
							</th>
						</tr>
					</thead>

					<tbody>
							<tr>
								<td>Qty</td><td>Qty</td><td>65,000</td>
							</tr>
							<tr>
								<td>More</td><td>More</td><td>29,123</td>
							</tr>
							<tr>
								<td>Sold</td><td>Sold</td><td>35,213</td>
							</tr>
							<tr>
								<td>Restocking</td><td>Restocking</td><td>51,213</td>
							</tr>
							<tr>
								<td>Misc</td><td>Misc</td><td>16,932</td>
							</tr>
					</tbody>
				</table>
			</div>

			<div class="cds--modal-footer cds--modal-footer">
			  <div class="cds--cc-modal-footer-spacer"></div>
			  <button class="cds--btn cds--btn--primary cds--btn cds--btn--primary" type="button" data-modal-primary-focus="">Download as CSV</button>
			</div>
		</div></div>

Version

@carbon/charts@1.13.2

Data & options used

Any - just inspect the page and look at the elements.

Relevant log output

No response

Codesandbox example

No response

What priority level would this be in your opinion?

P1