Create a <Card> component that can be used in a .md file
#10150
Assignees
Labels
Comments
|
@tjonx for the card backgrounds do y’all have an idea of darkmode ?
If we want to use these cards we probably wont be able to use the polaris-react card since it does not have darkmode |
|
@yurm04 @jesstelford given the above screenshots, we'll also need a |
gwyneplaine
added a commit
that referenced
this issue
Sep 18, 2023
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? Fixes #10150 <!-- link to issue if one exists --> <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> <!-- ℹ️ Delete the following for small / trivial changes --> Create a light-weight card component with the following: * responsive prop for `padding` * optional `className` prop for overrides. ### Things I've left out: * `roundedAbove` breakpoints are subtly different in polaris-react vs polaris.shopify.com, so porting this functionality over is not a straightforward exercise. I think the right call is to get the MVP lightweight card in so we can start using and iterating. We can add breakpoint parity in in a separate PR. * `backgroundColor`, not sure we need this one given the screenshots and designs in the linked issue, but happy to add this in later if I'm mistaken 👍 ### Things that are subtly different: * In polaris-react `padding` is just a mirror of the responsiveProp functionality in`Box`, in this PR I've chosen to have that functionality localized to `Card` for now, to avoid having to worry about accidentally breaking `polaris.shopify.com` Box usage in other areas of the docs. (not a strongly held opinion though) ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) <!-- Give as much information as needed to experiment with the component in the playground. --> <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
This was referenced Sep 19, 2023
AnnaCheba
pushed a commit
to AnnaCheba/polaris
that referenced
this issue
Apr 22, 2024
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? Fixes Shopify#10150 <!-- link to issue if one exists --> <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> <!-- ℹ️ Delete the following for small / trivial changes --> Create a light-weight card component with the following: * responsive prop for `padding` * optional `className` prop for overrides. ### Things I've left out: * `roundedAbove` breakpoints are subtly different in polaris-react vs polaris.shopify.com, so porting this functionality over is not a straightforward exercise. I think the right call is to get the MVP lightweight card in so we can start using and iterating. We can add breakpoint parity in in a separate PR. * `backgroundColor`, not sure we need this one given the screenshots and designs in the linked issue, but happy to add this in later if I'm mistaken 👍 ### Things that are subtly different: * In polaris-react `padding` is just a mirror of the responsiveProp functionality in`Box`, in this PR I've chosen to have that functionality localized to `Card` for now, to avoid having to worry about accidentally breaking `polaris.shopify.com` Box usage in other areas of the docs. (not a strongly held opinion though) ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) <!-- Give as much information as needed to experiment with the component in the playground. --> <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Create a primitive JSX Card component to be used across the site and for markdown content like in this figma example
Voice and ToneIf it were possible it'd be ideal to use the polaris-react
Card, but we're not able to support dark mode for that card. We should build a similar lightweight card component that's able to wrap any sort of childrenExamples of cards
Background card
Media card (vertical and horizontal)
Do / Dont card
The text was updated successfully, but these errors were encountered: