feat(mistica-css): card asset#1351
Conversation
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit 8e5d3b1. |
| <div class="mistica-card__asset-floating"> | ||
| <div class="mistica-card__asset-icon" style="background: #E6F5FD"> |
There was a problem hiding this comment.
do we need 2 divs? isn't one enough?
There was a problem hiding this comment.
Not really. It was done this way to maintain the React structure. It gets reduced and adjusted. Two classes are left: one for each type of asset — one floating and the other embedded in the card.
| height: auto; | ||
| } | ||
|
|
||
| .mistica-card__asset { |
There was a problem hiding this comment.
Mmm I have doubts about the asset approach. This container accept any type of content inside not only circle stuff.
Should this class be used for Circle component like .mistica__circle ?
should we use border-radius 50% here? i don't think so 🤔
You could include a horizontal logo like
same for floating asset
wdyt @atabel ?
There was a problem hiding this comment.
ok, this assest is only circle with icon. we can upgrade for another type of asset
There was a problem hiding this comment.
If we want to support any content there yes, I'd create a specific class for the cirlcle style (border-radius: 50%) and only apply it conditionally.
There was a problem hiding this comment.
update with:
Since it is required to include not only an icon but also images and border radius,
three values can be passed:
border-radius
height
width
This allows us to have:
icon and image positioned absolutely or in their natural position
icon and image with border radius
icon with or without background
# [16.23.0](v16.22.0...v16.23.0) (2025-05-06) ### Features * **mistica-css:** breadcrumbs ([#1349](#1349)) ([eeb36b2](eeb36b2)) * **mistica-css:** card asset ([#1351](#1351)) ([45c275f](45c275f)) * **mistica-css:** GridLayout ([#1355](#1355)) ([da0a953](da0a953)) * **mistica-css:** Table implementation ([#1352](#1352)) ([d26129e](d26129e)) * **PinField:** wrap to next line when digits don't fit in viewport ([#1359](#1359)) ([13e13ed](13e13ed)) * **TextField:** make field error aria-live ([#1348](#1348)) ([1c45c55](1c45c55))
|
🎉 This PR is included in version 16.23.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
6 participants
No description provided.