Alert banner close button is not vertically centered

[ambar-arkin]

Describe the bug

The alert close button is not centered. It has more space below it than above.

How to reproduce

This can be observed in any storybook example. https://storybook.core.clarity.design/?path=/story/components-alert-banner--page

Expected behavior

It should be centered.

Versions

Clarity project:

• [x] Clarity Core
• [ ] Clarity Angular/UI

Clarity version:

• [ ] v5.x
• [x] v6.x

Framework:

• [ ] Angular
• [x] React
• [ ] Vue
• [ ] Other:

Framework version: React 16.14.0

Device:

• Type: MacBook
• OS: macOS
• Browser chromium
• Version 105

Additional notes

• One possible fix is adding display: inline-flex; to cds-internal-close-button element.

Is there any way to fix this in userland till this is fixed? Willing to contribute if this is not a priority for the clarity team right now.

Edit:

• Removing height property on the button also fixes it.

As a temporary fix I can pass --cds-global-space-9: 20px to the component. But not sure if it would break anything else.

[colinreedmiller]

https://vmware.slack.com/archives/C0JF8D2LB/p1663842654580049

[lil-kim]

@colinreedmiller Please review proposed fix here: https://www.figma.com/file/ZxpTBCvcpjEmR4MaBjEns8/GH%23169---App-level-alert-text-alignment?node-id=102%3A34&t=mDZ5nxi3I7yLTgGq-1

[kevinbuhmann]

Sorry for the label and assignee churn above. I see now that the visual design still needs review.