Card accent bar in theme next when corner is rounded is leaking through border - Githubissues

jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customization and ease-of-use

https://www.saltdesignsystem.com

Apache License 2.0

131 stars 89 forks source link

Card accent bar in theme next when corner is rounded is leaking through border #3514

Closed origami-z closed 5 days ago

origami-z commented 5 months ago

Package name(s)

Core (@salt-ds/core)

Package version(s)

No response

Description

Accent bar should be contained within the boundary of Card

Steps to reproduce

https://storybook.saltdesignsystem.com/?path=/story/core-card-card--accent-variations&globals=themeNext:enable;corner:rounded

Expected behavior

No response

Operating system

[ ] macOS
[ ] Windows
[ ] Linux
[ ] iOS
[ ] Android

Browser

[ ] Chrome
[ ] Safari
[ ] Firefox
[ ] Edge

Are you a JPMorgan Chase & Co. employee?

[X] I am an employee of JPMorgan Chase & Co.

origami-z commented 4 months ago

Although overflow:hidden would resolve the bleeding, accent bar will not longer be shown over the border, especially visible during hover state.

2 possible choices 1 - make the accent bar shown behind of card board 2 - make card corner with accent bar not rounded