docs(card): explain element vs pattern #1188
Conversation
|
✅ Deploy Preview for red-hat-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Size Change: 0 B Total Size: 250 kB ℹ️ View Unchanged
|
markcaron
added
the
needs revisiting
|
@bennypowers looks like this PR is waiting for copy/content, eh? TBD on who picks this up. |
markcaron
added
docs
|
@marionnegp compare https://deploy-preview-1188--red-hat-design-system.netlify.app/patterns/card/ with https://deploy-preview-1188--red-hat-design-system.netlify.app/elements/card/guidelines/ It seems to me we should move some content around and elaborate on the patterns listen in guidelines. WDYT? |
|
Yeah, I think we can move the "Variants" section to the card pattern page. We might also want to add a link to the card pattern page in the "Other components" section of the card element docs. |
|
@marionnegp I've elaborated as much as seemed reasonable, but it wasn't clear to me how to implement most of the patterns listed here. i think we should pair on this, or if you have examples of the patterns in question, please link to them |
There was a problem hiding this comment.
Just some early feedback...
- I think the "Usage" section should be moved to a separate "Guidelines" tab, even if there's not a lot of info. Just helps to make the subnavs more consistent.
- Are code blocks getting added for each pattern?
- What do you think about having the code block span the entire accordion/disclosure and having it show more by default?
- The image card demo with the code blocks looks nice!
markcaron
removed
needs revisiting
|
I believe I've added all the Card patterns except for the Video Card (which I commented out in the code). @adamjohnson @zeroedin, We will need to discuss how to handle the play button and thumbnail in the pattern along with the described Modal solution. Do we wait for @marionnegp can you look through the patterns and let me know which ones are missing? |
|
@markcaron, I don't think you'd need to include the light gray versions. Looks like you've captured all the patterns, except for the one with the video thumbnail, which was discussed during today's office hours. I don't see that card pattern very often, so it might be ok to include in a minor release or the next milestone. The bar for the title card is too tall. Is this an issue with |
All headers as default have a margin-block-end on them (flow layer of uxdot styles). Because the h4 is slotted in the component and is not directly styled to override page styles this style bleeds through to the element. The way to fix it would be either:
|
|
@marionnegp, I would think the latter of @zeroedin's proposed solutions is the answer to fixing the title bar height. |
|
@zeroedin @marionnegp looks like we'll just need to make a change here to fix this in Charmander. Will do in another PR |
Yeah. I left a comment in the code to solve later, once we have the image slot and other adjustments being made to card in Charmander, this should resolve itself. 
The following PRs (in Charmander) will resolve the issues mentioned above:
|
|
may i suggest this path forward?
|
|
@bennypowers sorry, for some reason I didn't see your last comment before merging. We've got a couple docs and patterns updates that were dependent on these changes, so hopefully this doesn't mess up |
What I did
Notes to Reviewers
Design should review the approach taken here and comment. It seems to me that this page could use some prose for each pattern usage guidelines etc)