Create <Colors> component to replace <!-- colors --> in /design/colors.md #10146
Assignees
Comments
|
Before fixing this page @tjonx @zecarlostorre do you have an idea of how/if a color palette will fit into the new design guidance? I'm going to move this into |
|
I was thinking of making an interactive palette for this section instead of just throwing a bunch of swatches with little context. There's also a great article that shows how to do this in js: https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o |
5 tasks
yurm04
pushed a commit
that referenced
this issue
Sep 12, 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 #10146 <!-- link to issue if one exists --> <img width="2032" alt="Screenshot 2023-09-11 at 4 16 37 PM" src="https://github.com/Shopify/polaris/assets/4642404/f4f7865b-4d01-47ea-87b4-efc38d7c0585"> <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Migrating the `<!-- colors -->` directive from `makdown.mjs` to MDX renderer <!-- 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 --> ### How to 🎩 1. `yarn run dev` 2. navigate to [`/design/colors`](http://localhost:3000/design/colors) 3. The color palette should load on the page.⚠️ The `<h3>` styling of the color titles doesn't currently match what's on prod. We'll fix this in a bigger sweep of styling regressions in a future PR 🖥 [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 --------- Co-authored-by: Jess Telford <jess.telford@shopify.com>
sophschneider
pushed a commit
that referenced
this issue
Sep 19, 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 #10146 <!-- link to issue if one exists --> <img width="2032" alt="Screenshot 2023-09-11 at 4 16 37 PM" src="https://github.com/Shopify/polaris/assets/4642404/f4f7865b-4d01-47ea-87b4-efc38d7c0585"> <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Migrating the `<!-- colors -->` directive from `makdown.mjs` to MDX renderer <!-- 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 --> ### How to 🎩 1. `yarn run dev` 2. navigate to [`/design/colors`](http://localhost:3000/design/colors) 3. The color palette should load on the page.⚠️ The `<h3>` styling of the color titles doesn't currently match what's on prod. We'll fix this in a bigger sweep of styling regressions in a future PR 🖥 [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 --------- Co-authored-by: Jess Telford <jess.telford@shopify.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
polaris.shopify.com/design/colors is broken in the move to mdx because the way we are creating the color palette on that page does not play nice with mdx.
Currently the logic that replaces the code is in markdown.mjs
Right now the site will error out because mdx does not support html comments.
The text was updated successfully, but these errors were encountered: