Prose list style image fix (#457)

* prototype

* add changeset

* update story to only have unordered list

* update changeset

* github-actions[bot] Regenerated snapshots

* change listStyleImageUrl to imageUrl

* reset Avatar snapshot

* move Unordered List sotry to Prose.Features

* use Box instead of inline styles

* change token to --brand-Prose-unorderedList-imageUrl

* github-actions[bot] Regenerated snapshots

* reset Avatar snapshot

---------

Co-authored-by: joseph-lozano <[email protected]>

Author: Joseph Lozano

.changeset/purple-books-sneeze.md

@@ -0,0 +1,6 @@
+---
+'@primer/brand-primitives': patch
+'@primer/react-brand': patch
+---
+
+Fixed issue with prose un-ordered lists in dark mode

packages/design-tokens/scripts/build-tokens.js

@@ -206,6 +206,7 @@ const colorModeFormat = require('../src/formats/color-mode-attributes')
     `tokens/functional/components/grid/colors.json`,
     `tokens/functional/components/logosuite/colors.json`,
     `tokens/functional/components/timeline/colors.json`,
+    `tokens/functional/components/prose/colors.js`,
   ]
 
   for (const path of filesForColorModes) {

packages/design-tokens/src/tokens/functional/components/prose/colors.js

@@ -0,0 +1,12 @@
+module.exports = {
+  brand: {
+    Prose: {
+      unorderedList: {
+        imageUrl: {
+          value: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 -3 16 16' width='16' height='16' fill='black' style='display: inline-block; vertical-align: text-bottom; overflow: visible;'%3e%3cpath d='M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z'%3e%3c/path%3e%3c/svg%3e ")`,
+          dark: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 -3 16 16' width='16' height='16' fill='white' style='display: inline-block; vertical-align: text-bottom; overflow: visible;'%3e%3cpath d='M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z'%3e%3c/path%3e%3c/svg%3e ")`,
+        },
+      },
+    },
+  },
+}

packages/react/src/Prose/Prose.features.stories.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
-import {ComponentMeta, ComponentStory} from '@storybook/react'
+import {Meta, StoryFn} from '@storybook/react'
 import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport'
 import {Prose} from './Prose'
 import placeholderImage from '../fixtures/images/placeholder-600x400.png'
+import {ThemeProvider} from '../ThemeProvider'
+import {Box} from '../Box'
 
 export default {
   title: 'Components/Prose/Features',
@@ -13,7 +15,7 @@ export default {
       viewports: INITIAL_VIEWPORTS,
     },
   },
-} as ComponentMeta<typeof Prose>
+} as Meta
 
 const ExampleHtmlMarkup = `
 <h2>Heading level 2</h2>
@@ -59,24 +61,53 @@ const ExampleHtmlMarkup = `
     <p>Nunc velit odio, posuere eu felis eget, consectetur fermentum nisi. Aenean tempor odio id ornare ultrices. Quisque blandit condimentum tellus, semper efficitur sapien dapibus nec. </p>
 `
 
-export const FullWidth: ComponentStory<typeof Prose> = () => <Prose enableFullWidth html={ExampleHtmlMarkup} />
+export const FullWidth: StoryFn = () => <Prose enableFullWidth html={ExampleHtmlMarkup} />
 
-export const NarrowViewFullWidth: ComponentStory<typeof Prose> = () => (
-  <Prose enableFullWidth html={ExampleHtmlMarkup} />
-)
+export const NarrowViewFullWidth: StoryFn = () => <Prose enableFullWidth html={ExampleHtmlMarkup} />
 NarrowViewFullWidth.parameters = {
   viewport: {
     defaultViewport: 'iphonexr',
   },
 }
 NarrowViewFullWidth.storyName = 'Narrow view, full width (mobile)'
 
-export const RegularViewFullWidth: ComponentStory<typeof Prose> = () => (
-  <Prose enableFullWidth html={ExampleHtmlMarkup} />
-)
+export const RegularViewFullWidth: StoryFn = () => <Prose enableFullWidth html={ExampleHtmlMarkup} />
 RegularViewFullWidth.parameters = {
   viewport: {
     defaultViewport: 'ipad10p',
   },
 }
 RegularViewFullWidth.storyName = 'Regular view, full width (tablet)'
+
+const UnorderedListHtmlMarkup = `
+<ul>
+  <li>
+    Vivamus eu risus nec lectus consequat rutrum at vel lacus.
+  </li>
+  <li>
+    Donec at dolor ut metus imperdiet congue vel porta nunc.
+  </li>
+  <li>
+    Quisque eu tortor suscipit, congue quam in, bibendum tellus.
+  </li>
+</ul>
+`
+const UnorderedListStory: StoryFn = args => <Prose {...args} html={UnorderedListHtmlMarkup} />
+export const UnorderedList = UnorderedListStory.bind({})
+UnorderedList.args = {
+  darkMode: true,
+}
+UnorderedList.argTypes = {
+  colorMode: {
+    darkMode: 'boolean',
+  },
+}
+UnorderedList.decorators = [
+  (Story, {args: {darkMode}}) => (
+    <ThemeProvider colorMode={darkMode ? 'dark' : 'light'}>
+      <Box backgroundColor="default">
+        <Story />
+      </Box>
+    </ThemeProvider>
+  ),
+]

packages/react/src/Prose/Prose.module.css

@@ -140,7 +140,7 @@
 
 .Prose ul {
   list-style-type: image;
-  list-style-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 -3 16 16' width='16' height='16' fill='currentColor' style='display: inline-block; vertical-align: text-bottom; overflow: visible;'%3e%3cpath d='M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z'%3e%3c/path%3e%3c/svg%3e ");
+  list-style-image: var(--brand-Prose-unorderedList-imageUrl);
 }
 
 .Prose li {

packages/react/src/Prose/Prose.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import type {BaseProps} from '../component-helpers'
 import styles from './Prose.module.css'
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/prose/base.css'
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/prose/colors-with-modes.css'
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/base.css'
 
 export type ProseProps = {

packages/react/src/Prose/Prose.visual.spec.ts

@@ -39,6 +39,15 @@ test.describe('Visual Comparison: Prose', () => {
       expect(await page.screenshot()).toMatchSnapshot()
     })
   })
+  test('Prose / Unordered List', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-prose-features--unordered-list&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('Prose / Playground', async ({page}) => {
     await page.goto('http://localhost:6006/iframe.html?args=&id=components-prose--playground&viewMode=story')