[polaris.shopify.com] Include HTML source for examples #6688

martenbjork · 2022-07-20T13:48:56Z

🚀 Adds React/HTML switcher to component examples
🚀 Renames Examples component to ComponentExamples.
🚀 Renames CodeExample component to Code. Adds ability to contain multiple examples, rendered in tabs.
🚀 Uses this component to render code everywhere: examples, markdown, icons page.
🚀 Code now respect settings for light and dark mode. Light code in light mode, dark code in dark mode.
🚀 Fixes the broken [object object] code in AppProvider docs. We were parsing the markdown both in getInitialProps and in ReactMarkdown causing HTML, not markdown, to be passed to the Markdown component. Stringify HTML and you get [object object]...

Closes #6603
Closes #6528
Closes #6341
Closes #6531
Closes #6559

react-html-pr.mp4

Tested with VoiceOver:

voiceover.mov

martenbjork · 2022-07-21T12:25:30Z

polaris.shopify.com/src/components/Examples/Examples.tsx

                    height={iframeHeight}
                    width="100%"
                    onLoad={handleExampleLoad}
-                    ref={iframeRef}


I found the refs approach to be flaky. Maybe because the ref changes due to the Tabs. Using the id to find the iframe consistency works.

martenbjork · 2022-07-21T12:26:44Z

polaris.shopify.com/src/components/Examples/Examples.tsx

-    }
+    let attempts = 0;
+
+    const waitForExampleContent = setInterval(() => {


Just because the iframe's onLoad handler fires doesn't mean that React example has had the time to render. This timer polls the iframe to check if the example has actually been rendered.

yayayaya yep yep. iframes are just urgh

chloerice

This looks great Marten!! 🤌🏽 Had a couple questions and suggestions but nothing blocking 😁

.changeset/nine-goats-leave.md

chloerice · 2022-07-21T14:56:49Z

polaris.shopify.com/src/components/Code/Code.tsx

+  }[];
+}
+
+function Code({ tabs }: Props) {


When I first read the PR description I assumed that the Code component was a generic wrapper for any code sample on the site, but it looks like it's specific to ComponentExamples. Should we move the sub-component into a components directory inside of the ComponentExamples directory? Can the component be more generic, maybe the tabs prop could be optional? For example, rendering the Code component for the /contributing/shipping-your-contribution code page doesn't completely translate for things like yarn commands.

It is generic! Is there anything about it that made you think otherwise?

The tabs are optional — if you pass in a single example, Code will render it without tabs.

Should we just have two components? CodeTabs and CodeBlock or something? We kind of already do with HighlightedCode.

I clarified the component props a bit which maybe (?) makes the component clearer:

To render some code:

<Code code={{ title: "My example", code }} />

To render multiple pieces of code:

<Code code={[ { title: "Styles", code: cssCode }, { title: "HTML", code: htmlCode }, ]} />

In short: It's not about the tabs, it's about what you want to render. The tabs are just a happy side effect.

Happy to refactor this down the road if it causes confusion!

polaris.shopify.com/src/components/ComponentExamples/ComponentExamples.tsx

chloerice · 2022-07-21T15:00:33Z

polaris.shopify.com/src/components/ComponentExamples/ComponentExamples.tsx

+    <>
+      <h2 id="examples">Examples</h2>
+
+      <Tab.Group


Is there an opportunity to make the button-like tabs their own sub-component? They might be useful to replace the Select in the QuickStartGuides of the /contributing section as well 👀

Maaaaybe! Although I'm not sure we would want this styling for other types of tabs — it's very specific for the Code component. All the logic and a11y features come from HeadlessUI so that part is already reusable for other parts of the site.

Co-authored-by: Chloe Rice <[email protected]>

…Examples.tsx Co-authored-by: Chloe Rice <[email protected]>

chloerice · 2022-07-21T23:48:38Z

polaris.shopify.com/src/components/Code/Code.tsx

+import { useState } from "react";
+
+interface Props {
+  tabs: {


Suggested change

tabs: {

tabs?: {

alex-page · 2022-07-22T03:38:51Z

polaris.shopify.com/src/components/Code/Code.tsx

+    <div
+      className={styles.ActualCode}
+      dangerouslySetInnerHTML={{
+        __html: Prism.highlight(code, Prism.languages.javascript, "javasript"),
+      }}
+    ></div>


This should probably be pre instead of div

Maybe? It seems like prism does some stuff...

Good catch! Fixed!

alex-page · 2022-07-22T03:40:00Z

polaris.shopify.com/src/components/ComponentExamples/ComponentExamples.tsx

+    const waitForExampleContent = setInterval(() => {
+      const exampleIframe = document.getElementById(
+        "examples-iframe"
+      ) as HTMLIFrameElement;


Urgh. iFrames suck. When can we use the nextjs beta and try out layout lol

Could we maybe add a comment about what this does or why it's needed? I could imagine coming back here in a week and being confused as heck.

I updated the code to be even more explicit about what's going on, hopefully that makes it self documenting.

I'm also keen not to use iframes at all. Idea: Import the Polaris CSS and prefix every selector with a class?

alex-page · 2022-07-22T03:41:32Z

polaris.shopify.com/src/data/components.json

-        "business thumbnail",
-        "ios",
-        "android"


Going to make a seperate PR for this. It shouldn't be in this PR.

Latest from main will clean this up.

alex-page

Nice clean up, thanks @martenbjork

JaKXz · 2022-07-22T16:24:43Z

polaris.shopify.com/src/components/Code/Code.tsx

+          __html: Prism.highlight(
+            code,
+            Prism.languages.javascript,
+            "javasript"


Found a typo!

also with Prism, it’s best practice to set Prism.manual = true somewhere at the top of this file. It shouldn’t make a difference here because you haven’t used the classes on the containing element that prism searches for to replace the content, but, that can get funky. Prism.manual is also just a flag for the internals of prism not to run unless called so it’s a minor optimization but worth it :)

Fixed the typo here b3e14b7

Are you able to write up an issue around what Prism.manual = true would change or enhance with the code highlighting? I am taking a look and am not too sure I understand if it's needed.

martenbjork added 5 commits July 19, 2022 18:33

Improve examples browsing experience

98b6bbc

Design tweaks

6196272

Remove unused import

675e3ca

Make button text strong

a6b3aae

Show HTML source next to React source

510fd2e

martenbjork changed the title ~~[polaris.shopify.com] [WIP] Show html source~~ [polaris.shopify.com] [WIP] Show HTML source for examples Jul 20, 2022

martenbjork added 12 commits July 21, 2022 11:44

Merge branch 'main' into show-html-source

0b3bd78

Use the same Code component to render any code block on the site

42fa893

Add changeset

a99a605

Fix border color

72109a1

Fix link color

bce992c

Add missing alt attribute

b10dac4

Remove code formatting from longform component

467e6a6

Remove console log

41397ed

Use implicit returns

cba2ffb

Remove wrapper

29953db

Rename Examples component

a252b7a

Implement copy code button

5b8edf2

martenbjork requested review from alex-page, chloerice and gui-santos and removed request for alex-page July 21, 2022 12:42

martenbjork added 2 commits July 21, 2022 14:44

Remove import

929da6b

Fix typing

9fcdf0a

martenbjork changed the title ~~[polaris.shopify.com] [WIP] Show HTML source for examples~~ [polaris.shopify.com] Show HTML source for examples Jul 21, 2022

martenbjork changed the title ~~[polaris.shopify.com] Show HTML source for examples~~ [polaris.shopify.com] Include HTML source for examples Jul 21, 2022

martenbjork commented Jul 21, 2022

View reviewed changes

chloerice approved these changes Jul 21, 2022

View reviewed changes

Update .changeset/nine-goats-leave.md

68d2694

Co-authored-by: Chloe Rice <[email protected]>

martenbjork and others added 2 commits July 21, 2022 17:10

Update polaris.shopify.com/src/components/ComponentExamples/Component…

ea746ca

…Examples.tsx Co-authored-by: Chloe Rice <[email protected]>

Merge branch 'main' into show-html-source

14d50e8

chloerice reviewed Jul 21, 2022

View reviewed changes

alex-page reviewed Jul 22, 2022

View reviewed changes

alex-page approved these changes Jul 22, 2022

View reviewed changes

martenbjork added 3 commits July 22, 2022 09:28

Refactor code component

d14db48

Use more semantic tags for code

27fcb14

Merge branch 'main' into show-html-source

4b68771

martenbjork merged commit 738510b into main Jul 22, 2022

martenbjork deleted the show-html-source branch July 22, 2022 08:35

github-actions bot mentioned this pull request Jul 22, 2022

Version Packages #6727

Merged

JaKXz reviewed Jul 22, 2022

View reviewed changes

JaKXz mentioned this pull request Jul 22, 2022

Set Prism.manual = true to prevent unnecessary code execution #6745

Closed

github-actions bot mentioned this pull request Jul 27, 2022

Version Packages mrkldshv/polaris#1

Open

[polaris.shopify.com] Include HTML source for examples #6688

[polaris.shopify.com] Include HTML source for examples #6688

Uh oh!

Conversation

martenbjork commented Jul 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chloerice left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chloerice Jul 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alex-page Jul 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chloerice Jul 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alex-page left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

martenbjork commented Jul 20, 2022 •

edited

Loading

chloerice Jul 21, 2022 •

edited

Loading

alex-page Jul 22, 2022 •

edited

Loading

chloerice Jul 21, 2022 •

edited

Loading