From f186b1946035f9aa464e24de6d45a4b3b03a06b5 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Tue, 12 Sep 2023 10:58:15 -0500 Subject: [PATCH] Replace `` with `Colors` MDX component (#10401) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Fixes https://github.com/Shopify/polaris/issues/10146 Screenshot 2023-09-11 at 4 16 37 PM ### WHAT is this pull request doing? Migrating the `` directive from `makdown.mjs` to MDX renderer ### 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 `

` 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)
Copy-paste this code in playground/Playground.tsx: ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( {/* Add the code you want to test in here */} ); } ```
### 🎩 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 --- polaris.shopify.com/content/design/colors.md | 4 +- .../src/components/Markdown/Markdown.tsx | 2 + .../components/Colors/Colors.module.scss | 27 ++++++++++ .../Markdown/components/Colors/index.tsx | 54 +++++++++++++++++++ polaris.shopify.com/src/styles/globals.scss | 28 ---------- polaris.shopify.com/src/utils/markdown.mjs | 40 -------------- polaris.shopify.com/src/utils/various.ts | 4 ++ 7 files changed, 89 insertions(+), 70 deletions(-) create mode 100644 polaris.shopify.com/src/components/Markdown/components/Colors/Colors.module.scss create mode 100644 polaris.shopify.com/src/components/Markdown/components/Colors/index.tsx diff --git a/polaris.shopify.com/content/design/colors.md b/polaris.shopify.com/content/design/colors.md index 30478bfa129..3b137b183e2 100644 --- a/polaris.shopify.com/content/design/colors.md +++ b/polaris.shopify.com/content/design/colors.md @@ -34,11 +34,11 @@ Color plays a key role in creating the overall hierarchy of a screen. Using the --- -## Color pallette +## Color palette The Polaris color palette is composed of 8 different colors, each with 10 unique shades. These colors are then used to create semantic tokens that style both Polaris components and custom components within the Shopify admin. -{ /* */ } + ## Tokens diff --git a/polaris.shopify.com/src/components/Markdown/Markdown.tsx b/polaris.shopify.com/src/components/Markdown/Markdown.tsx index b40dfccddd7..fb6dc315bf3 100644 --- a/polaris.shopify.com/src/components/Markdown/Markdown.tsx +++ b/polaris.shopify.com/src/components/Markdown/Markdown.tsx @@ -28,6 +28,7 @@ import Tooltip from '../Tooltip'; import Icon from '../Icon'; import {FeaturedCardGrid} from '../FeaturedCardGrid'; import {useCopyToClipboard} from '../../utils/hooks'; +import {Colors} from './components/Colors'; const CodeVisibilityContext = createContext<[boolean, (arg: boolean) => void]>([ false, @@ -229,6 +230,7 @@ function Markdown< TipBanner, Lede, RichCardGrid, + Colors, Tip: ({children}) => (
diff --git a/polaris.shopify.com/src/components/Markdown/components/Colors/Colors.module.scss b/polaris.shopify.com/src/components/Markdown/components/Colors/Colors.module.scss new file mode 100644 index 00000000000..c81b0bc140f --- /dev/null +++ b/polaris.shopify.com/src/components/Markdown/components/Colors/Colors.module.scss @@ -0,0 +1,27 @@ +@import '../../../../styles/variables.scss'; + +.Colors { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: var(--p-space-4); + margin-bottom: var(--p-space-8); + font-size: var(--font-size-75); + font-weight: var(--p-font-weight-semibold); + + @media (min-width: $breakpointTablet) { + grid-template-columns: repeat(10, 1fr); + } + + .ColorsSwatch { + position: relative; + overflow: hidden; + border-radius: var(--p-border-radius-2); + margin-bottom: var(--p-space-2); + + &:before { + content: ''; + display: block; + padding-bottom: 75%; + } + } +} diff --git a/polaris.shopify.com/src/components/Markdown/components/Colors/index.tsx b/polaris.shopify.com/src/components/Markdown/components/Colors/index.tsx new file mode 100644 index 00000000000..3aad2b4a31e --- /dev/null +++ b/polaris.shopify.com/src/components/Markdown/components/Colors/index.tsx @@ -0,0 +1,54 @@ +import * as colorsObj from '../../../../../../polaris-tokens/dist/esm/src/colors.mjs'; +import {capitalize} from '../../../../utils/various'; +import styles from './Colors.module.scss'; + +type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; + +type ColorValue = { + [index in ColorScale]: string; +}; + +interface Colors { + [key: string]: ColorValue; +} + +const colors = colorsObj as unknown as Colors; + +export function Colors() { + const colorOrder = [ + 'gray', + 'green', + 'teal', + 'blue', + 'purple', + 'red', + 'orange', + 'yellow', + ]; + + const colorMap = colorOrder.map((color) => { + const shades: ColorValue = colors[color] ?? []; + const swatches = Object.entries(shades) + .sort(([prevShade], [nextShade]) => + Number(prevShade) < Number(nextShade) ? 1 : -1, + ) + .map(([shade, value]) => ( +
+
+
{shade}
+
+ )); + + return ( + <> +

{capitalize(color)}

+
{swatches}
+ + ); + }); + + return <>{colorMap}; +} diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss index b7ada205f9b..22547e3ce3d 100644 --- a/polaris.shopify.com/src/styles/globals.scss +++ b/polaris.shopify.com/src/styles/globals.scss @@ -342,31 +342,3 @@ button { .tip-banner__header h4 { margin: 0 !important; } - -.colors { - display: grid; - grid-template-columns: repeat(5, 1fr); - gap: var(--p-space-4); - margin-bottom: var(--p-space-8); - font-size: var(--font-size-75); - font-weight: var(--p-font-weight-semibold); -} - -@media (min-width: $breakpointTablet) { - .colors { - grid-template-columns: repeat(10, 1fr); - } -} - -.colors-swatch { - position: relative; - overflow: hidden; - border-radius: var(--p-border-radius-2); - margin-bottom: var(--p-space-2); - - &:before { - content: ""; - display: block; - padding-bottom: 75%; - } -} diff --git a/polaris.shopify.com/src/utils/markdown.mjs b/polaris.shopify.com/src/utils/markdown.mjs index e8c0f7b8101..c70bea8ddc6 100644 --- a/polaris.shopify.com/src/utils/markdown.mjs +++ b/polaris.shopify.com/src/utils/markdown.mjs @@ -1,7 +1,5 @@ import yaml from 'js-yaml'; -import * as colors from '../../../polaris-tokens/dist/esm/src/colors.mjs'; - export const parseMarkdown = (inputMarkdown) => { const readmeSections = inputMarkdown.split('---'); const frontMatterSection = readmeSections[1]; @@ -68,40 +66,6 @@ export const parseMarkdown = (inputMarkdown) => { }); } - // Add some custom HTML to tags - const colorsRegex = //gis; - if (markdown.match(colorsRegex)) { - markdown = markdown.replace(colorsRegex, (match) => { - const colorOrder = [ - 'gray', - 'green', - 'teal', - 'blue', - 'purple', - 'red', - 'orange', - 'yellow', - ]; - - return colorOrder.reduce((acc, color) => { - const shades = colors[color] ?? []; - const swatches = Object.entries(shades) - .sort(([prevShade], [nextShade]) => - Number(prevShade) < Number(nextShade) ? 1 : -1, - ) - .map( - ([shade, value]) => - `
${shade}
`, - ) - .join(''); - - return `${acc}

${capitalize( - color, - )}

${swatches}
`; - }, ''); - }); - } - const out = { frontMatter, description, @@ -110,7 +74,3 @@ export const parseMarkdown = (inputMarkdown) => { return out; }; - -function capitalize(string) { - return string.charAt(0).toUpperCase() + string.slice(1); -} diff --git a/polaris.shopify.com/src/utils/various.ts b/polaris.shopify.com/src/utils/various.ts index 9e973a7a2de..21d79de1b3a 100644 --- a/polaris.shopify.com/src/utils/various.ts +++ b/polaris.shopify.com/src/utils/various.ts @@ -65,3 +65,7 @@ export const uppercaseFirst = (str: string): string => export const deslugify = (str: string): string => uppercaseFirst(str.replace(/-+/g, ' ')); + +export const capitalize = (str: string) => { + return str.charAt(0).toUpperCase() + str.slice(1); +};