fix(pattern): fixed gutter between cards using gridCondensed property #1034
Conversation
|
Deploy preview created for package Built with commit: 81fb11ec9cc837aa0f9c3f7530b0fe01964a8b7a |
| > *:not(:last-child) { | ||
| margin-bottom: 0; | ||
| margin-top: $carbon--grid-gutter--condensed / 2; | ||
| margin-bottom: $carbon--grid-gutter--condensed / 2; |
There was a problem hiding this comment.
I think I saw carbon-design-system/carbon#4960 got merged in. These lines of code may not be necessary anymore.
There was a problem hiding this comment.
you mean we could remove these props and just have ${prefix}--grid--condensed this in JSX right?
There was a problem hiding this comment.
But we do need margin-bottom: $carbon--grid-gutter--condensed / 2 this prop in that I guess. Because when I remove both of them it looks like this.
There was a problem hiding this comment.
Looks like they might not have releasee it yet for some reason. I thought they were doing nightly builds. I guess we can wait a little longer.
|
This is looking a lot cleaner! 🎉 With that said there are some minor grid alignment issues we need to resolve. It doesn't have a Unless it's supposed to be full width, in that case it's still slightly off. I think the learn template maxes out its width out, but in general should we plan for when the adopter uses the full-width grid modifier? @jeffchew @annawen1 @kennylam @raphaelamadeu |
packages/patterns-react/src/patterns/CardSection/CardSection.js
Outdated
Show resolved
Hide resolved
mkothur
force-pushed
the
bug/976-cardSec-condensedGrid
branch
from
6f5dd8f
to
f8771d5
Compare
mkothur
force-pushed
the
bug/976-cardSec-condensedGrid
branch
from
2b925a0
to
744d855
Compare
| @@ -77,7 +77,7 @@ const cardsGroup = { | |||
| }, | |||
| { | |||
| image: { | |||
| defaultImage: 'http://picsum.photos/id/1003/1056/480', | |||
| defaultImage: 'https://picsum.photos/id/1018/1056/480', | |||
There was a problem hiding this comment.
I can't add a comment, but on line L#67 above. The image isn't rendering. I added https, and it seemed to work for me?
mkothur
force-pushed
the
bug/976-cardSec-condensedGrid
branch
from
744d855
to
0127eac
Compare
Related Ticket(s)
Related to ticket #976
Description
Added the grid condensed property in cardSection pattern which will help to create spacing between cards. And restructure the JSX little bit to match the CSS changes.
And also added margin in logo_grid CSS to look nicer.
Changelog
Changed
CardSection - js and scss
logGrid - scss