Skip to content

[OP-230] Update card to not use contain paint#281

Merged
Jeremy-Walton merged 1 commit intomainfrom
op-230-review-necessity-of-global-contain-paint-for-cards
Jun 25, 2025
Merged

[OP-230] Update card to not use contain paint#281
Jeremy-Walton merged 1 commit intomainfrom
op-230-review-necessity-of-global-contain-paint-for-cards

Conversation

@Jeremy-Walton
Copy link
Member

Why?

contain: paint was added to handle cases where setting a color on the card header or footer would clip the border radius set on the card. Using contain: paint Fixes this but then causes issues with other content like tooltips also getting clipped as it effectively acts like a overflow: hidden.

What Changed

  • Remove usage of contain: paint
  • Add component scoped variable for setting border radius
  • Set border radius on header and footer so if a color is used, it won't clip
  • Bump version number in prep to release

Sanity Check

  • Have you updated any usage of changed tokens?
  • Have you updated the docs with any component changes?
  • [ ] Have you updated the dependency graph with any component changes?
  • Have you run linters?
  • Have you run prettier?
  • Have you tried building the css?
  • Have you tried building storybook?
  • Do you need to update the package version?

Screenshots

Before (if contain: paint wasn't being used)

Screenshot 2025-06-25 at 11 26 31 AM

After (Fixed without needing contain: paint)

Screenshot 2025-06-25 at 11 26 33 AM

@Jeremy-Walton Jeremy-Walton self-assigned this Jun 25, 2025
@Jeremy-Walton Jeremy-Walton added bug Something isn't working Components Changes to a component labels Jun 25, 2025
@linear
Copy link

linear bot commented Jun 25, 2025

Copy link
Contributor

@theoluciano theoluciano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes sense to me 👍🏼

@Jeremy-Walton Jeremy-Walton merged commit c585a49 into main Jun 25, 2025
1 check passed
@Jeremy-Walton Jeremy-Walton deleted the op-230-review-necessity-of-global-contain-paint-for-cards branch June 25, 2025 18:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working Components Changes to a component

Development

Successfully merging this pull request may close these issues.

2 participants