[Polaris Lighthouse] Add tooling section to doc website #8027

sophschneider · 2023-01-11T18:33:01Z

WHY are these changes introduced?

Theme	`/tools`	`/tools/stylelint-polaris`	`/tools/stylelint-polaris/rules`	`/tools/stylelint-polaris/rules/{category}-{rule-name}`
Dark
Light

Builds on #8027 by adding support for a single nested route within the content folder for each rule category. <img width="1512" alt="Screenshot 2023-01-11 at 8 12 35 PM" src="https://user-images.githubusercontent.com/18447883/211952235-949aa86e-832d-4ac0-9344-ea7b964759fc.png"> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

github-actions · 2023-01-16T22:03:35Z

size-limit report 📦

Path	Size
polaris-react-cjs	212.3 KB (0%)
polaris-react-esm	137.3 KB (0%)
polaris-react-esnext	192.89 KB (0%)
polaris-react-css	42 KB (0%)

sophschneider · 2023-01-17T16:50:46Z

polaris-for-vscode/README.md

-Official VS Code extension for building with the Shopify [Polaris Design System](https://polaris.shopify.com/).
+Official VS Code extension for building with the Shopify Polaris Design System

-![Demo of Polaris for VS Code tokens autocomplete](https://github.com/Shopify/polaris/blob/main/polaris-for-vscode/docs/polaris-for-vscode-preview.gif?raw=true)


moved this file's content to polaris.shopify.com/content/tools/index.md so there is one source of truth

sophschneider · 2023-01-17T16:51:56Z

polaris.shopify.com/content/tools/index.md

+description: Extensions, plugins, and other tools to help you use Polaris to build Admin experiences.
+icon: ToolsMajor
+order: 11
+---


sophschneider · 2023-01-17T16:52:35Z

polaris.shopify.com/content/tools/polaris-for-vscode.md

+title: Polaris for VS Code
+description: Official VS Code extension for building with the Shopify Polaris Design System
+icon: HintMajor
+---


Content copied from polaris-for-vscode/README.md

sophschneider · 2023-01-17T16:53:38Z

polaris.shopify.com/content/tools/stylelint-polaris/index.md

+  - linting
+  - css
+---
+


Content copied from stylelint-polaris/README.md

sophschneider · 2023-01-17T16:56:06Z

polaris.shopify.com/content/tools/stylelint-polaris/index.md

+
+There are over 40 rules configured in Stylelint Polaris to help you avoid errors and follow stylistic and non-stylistic conventions while building for the Shopify admin.
+
+[List of Stylelint Polaris rules](/tools/stylelint-polaris/rules)


This section is new, it links to a separate index page with a list of the rules polaris.shopify.com/content/tools/stylelint-polaris/rules/index.md

This is similar to the structure stylelint uses on their own docs site (master list of rules, then individual rule pages) https://stylelint.io/user-guide/rules. This is helpful so that we can link to individual pages in the failures, and users are more likely to read additional content

sophschneider · 2023-01-17T17:13:24Z

polaris.shopify.com/src/components/FoundationsThumbnail/FoundationsThumbnail.module.scss

+
+  &[data-category='tools'] {
+    background: var(--decorative-4);
+  }


This is using the blue colour for the tools page tiles

sophschneider · 2023-01-17T17:14:18Z

polaris.shopify.com/src/components/Frame/Frame.module.scss

+            color: var(--primary);
+          }
+        }
+      }


This enables a new layer of nesting in the nav

sophschneider · 2023-01-17T17:16:06Z

polaris.shopify.com/src/styles/globals.scss

    }
    .comment {
      color: var(--code-comment);
    }


Adding styles to get diff highlighting. The colours are AA Accessibility compliant (like the rest of the site)

sophschneider · 2023-01-17T17:17:34Z

polaris.shopify.com/src/utils/foundations.ts

-    markdownFilePaths
-      .filter((path) => !path.endsWith(`index.md`))
+    itemPaths
+      .filter((path) => !path.endsWith(`content/${category}/index.md`))


This change was to get the new layer of nesting

sophschneider · 2023-01-17T17:18:24Z

stylelint-polaris/README.md

-```sh
-cd polaris-react && yarn lint:styles
-```
+[Stylelint Polaris documentation](https://polaris.shopify.com/tools/stylelint-polaris)


Moved this content to polaris.shopify.com/content/tools/stylelint-polaris/index.md for one source of truth

Builds on #8027 by adding support for a single nested route within the content folder for each rule category. <img width="1512" alt="Screenshot 2023-01-11 at 8 12 35 PM" src="https://user-images.githubusercontent.com/18447883/211952235-949aa86e-832d-4ac0-9344-ea7b964759fc.png"> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

@leileu

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris-icons@6.8.0 ### Minor Changes - [#8049](#8049) [`dca31f2a0`](dca31f2) Thanks [@leileu](https://github.com/leileu)! - Added 8 minor icons for metafields - [#8069](#8069) [`f67e2997e`](f67e299) Thanks [@leileu](https://github.com/leileu)! - Added file minor icon - [#8063](#8063) [`d5da4778c`](d5da477) Thanks [@eric-blue](https://github.com/eric-blue)! - Added minor icon for diamond_alert - [#8037](#8037) [`1aeed2414`](1aeed24) Thanks [@dGoligorsky](https://github.com/dGoligorsky)! - Added major and minor icon for Magic ### Patch Changes - [#8085](#8085) [`56b757036`](56b7570) Thanks [@sarahill](https://github.com/sarahill)! - Added icon name for magic major and minor - [#8066](#8066) [`68acc4593`](68acc45) Thanks [@kyledurand](https://github.com/kyledurand)! - Added better error documentation on icon validation ## @shopify/polaris@10.22.0 ### Minor Changes - [#8054](#8054) [`c44c96c6b`](c44c96c) Thanks [@mrcthms](https://github.com/mrcthms)! - Update focus states to be present on :focus-visible rather than :focus ### Patch Changes - [#8080](#8080) [`1c926b9da`](1c926b9) Thanks [@LauraAubin](https://github.com/LauraAubin)! - Added an optional `zIndexOverride` prop to `Tooltip` - [#8077](#8077) [`dc2ed0a5c`](dc2ed0a) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed data attribute css from legacy polyfill - [#8040](#8040) [`ba6b04c79`](ba6b04c) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed modal footer vertical alignment when noScroll is true - Updated dependencies \[[`dca31f2a0`](dca31f2), [`56b757036`](56b7570), [`f67e2997e`](f67e299), [`68acc4593`](68acc45), [`d5da4778c`](d5da477), [`1aeed2414`](1aeed24)]: - @shopify/polaris-icons@6.8.0 ## @shopify/plugin-polaris@0.0.29 ## polaris.shopify.com@0.29.0 ### Minor Changes - [#8027](#8027) [`8fc0fefdf`](8fc0fef) Thanks [@qt314](https://github.com/qt314)! - Add tooling section to document tools help build and maintain Polaris in consuming applications. ### Patch Changes - Updated dependencies \[[`dca31f2a0`](dca31f2), [`56b757036`](56b7570), [`f67e2997e`](f67e299), [`1c926b9da`](1c926b9), [`c44c96c6b`](c44c96c), [`dc2ed0a5c`](dc2ed0a), [`ba6b04c79`](ba6b04c), [`68acc4593`](68acc45), [`d5da4778c`](d5da477), [`1aeed2414`](1aeed24)]: - @shopify/polaris-icons@6.8.0 - @shopify/polaris@10.22.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

### WHY are these changes introduced? Fixes Shopify#7928 Adds tools section to polaris.shopify.com to house documentation for Polaris tooling. Migrated over docs for Stylelint Polaris and Polaris VSCode. |Theme|`/tools`|`/tools/stylelint-polaris`|`/tools/stylelint-polaris/rules`|`/tools/stylelint-polaris/rules/{category}-{rule-name}`| |---|---|---|---|---| |Dark|<img width="1512" alt="Screenshot 2023-01-17 at 11 59 49 AM" src="https://user-images.githubusercontent.com/18447883/212963342-9960e11d-1fdb-442c-898d-4afbee7c224b.png">|<img width="1512" alt="Screenshot 2023-01-17 at 1 17 32 PM" src="https://user-images.githubusercontent.com/18447883/212979357-a0c7c0be-43de-4a9d-9b0c-ee4104da13c2.png">|<img width="1512" alt="Screenshot 2023-01-17 at 11 57 25 AM" src="https://user-images.githubusercontent.com/18447883/212963394-5e485588-84c9-4cb0-95a4-292d09088d14.png">|<img width="1512" alt="Screenshot 2023-01-17 at 11 58 13 AM" src="https://user-images.githubusercontent.com/18447883/212963437-63dad6ad-e315-43a2-835f-7d7b33dcb6b3.png">| |Light|<img width="1512" alt="Screenshot 2023-01-17 at 1 23 00 PM" src="https://user-images.githubusercontent.com/18447883/212980511-b6493cb8-8602-4e25-a5cd-25ba10ec881d.png">|<img width="1512" alt="Screenshot 2023-01-17 at 1 23 07 PM" src="https://user-images.githubusercontent.com/18447883/212980538-6388c516-c45a-4106-b3ed-ba3949b0dc1e.png">|<img width="1512" alt="Screenshot 2023-01-17 at 1 23 12 PM" src="https://user-images.githubusercontent.com/18447883/212980589-f9559f4a-0c4f-4811-a20f-e124de543dcf.png">|<img width="1512" alt="Screenshot 2023-01-17 at 1 23 21 PM" src="https://user-images.githubusercontent.com/18447883/212980633-97c7556d-1d84-4d40-9588-3b142861e594.png">| Co-authored-by: Chloe Rice <chloe.rice@shopify.com>

@leileu

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris-icons@6.8.0 ### Minor Changes - [Shopify#8049](Shopify#8049) [`dca31f2a0`](Shopify@dca31f2) Thanks [@leileu](https://github.com/leileu)! - Added 8 minor icons for metafields - [Shopify#8069](Shopify#8069) [`f67e2997e`](Shopify@f67e299) Thanks [@leileu](https://github.com/leileu)! - Added file minor icon - [Shopify#8063](Shopify#8063) [`d5da4778c`](Shopify@d5da477) Thanks [@eric-blue](https://github.com/eric-blue)! - Added minor icon for diamond_alert - [Shopify#8037](Shopify#8037) [`1aeed2414`](Shopify@1aeed24) Thanks [@dGoligorsky](https://github.com/dGoligorsky)! - Added major and minor icon for Magic ### Patch Changes - [Shopify#8085](Shopify#8085) [`56b757036`](Shopify@56b7570) Thanks [@sarahill](https://github.com/sarahill)! - Added icon name for magic major and minor - [Shopify#8066](Shopify#8066) [`68acc4593`](Shopify@68acc45) Thanks [@kyledurand](https://github.com/kyledurand)! - Added better error documentation on icon validation ## @shopify/polaris@10.22.0 ### Minor Changes - [Shopify#8054](Shopify#8054) [`c44c96c6b`](Shopify@c44c96c) Thanks [@mrcthms](https://github.com/mrcthms)! - Update focus states to be present on :focus-visible rather than :focus ### Patch Changes - [Shopify#8080](Shopify#8080) [`1c926b9da`](Shopify@1c926b9) Thanks [@LauraAubin](https://github.com/LauraAubin)! - Added an optional `zIndexOverride` prop to `Tooltip` - [Shopify#8077](Shopify#8077) [`dc2ed0a5c`](Shopify@dc2ed0a) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed data attribute css from legacy polyfill - [Shopify#8040](Shopify#8040) [`ba6b04c79`](Shopify@ba6b04c) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed modal footer vertical alignment when noScroll is true - Updated dependencies \[[`dca31f2a0`](Shopify@dca31f2), [`56b757036`](Shopify@56b7570), [`f67e2997e`](Shopify@f67e299), [`68acc4593`](Shopify@68acc45), [`d5da4778c`](Shopify@d5da477), [`1aeed2414`](Shopify@1aeed24)]: - @shopify/polaris-icons@6.8.0 ## @shopify/plugin-polaris@0.0.29 ## polaris.shopify.com@0.29.0 ### Minor Changes - [Shopify#8027](Shopify#8027) [`8fc0fefdf`](Shopify@8fc0fef) Thanks [@qt314](https://github.com/qt314)! - Add tooling section to document tools help build and maintain Polaris in consuming applications. ### Patch Changes - Updated dependencies \[[`dca31f2a0`](Shopify@dca31f2), [`56b757036`](Shopify@56b7570), [`f67e2997e`](Shopify@f67e299), [`1c926b9da`](Shopify@1c926b9), [`c44c96c6b`](Shopify@c44c96c), [`dc2ed0a5c`](Shopify@dc2ed0a), [`ba6b04c79`](Shopify@ba6b04c), [`68acc4593`](Shopify@68acc45), [`d5da4778c`](Shopify@d5da477), [`1aeed2414`](Shopify@1aeed24)]: - @shopify/polaris-icons@6.8.0 - @shopify/polaris@10.22.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

chloerice added stylelint-polaris Related to the the @shopify/stylelint-polaris package polaris.shopify.com #gsd:31276 labels Jan 11, 2023

chloerice mentioned this pull request Jan 11, 2023

Stylelint Polaris doc prototype: rule category pages #8034

Merged

sam-b-rose assigned sophschneider Jan 12, 2023

chloerice mentioned this pull request Jan 13, 2023

Add rule descriptions to /tools/stylelint-polaris/rules page #8051

Closed

sophschneider force-pushed the sophie/tooling-tab branch 2 times, most recently from 7ce9452 to b79a72d Compare January 14, 2023 00:03

sophschneider force-pushed the sophie/tooling-tab branch 4 times, most recently from 111a947 to 5707670 Compare January 17, 2023 16:42

chloerice requested review from aaronccasanova, dominikwilkowski, alex-page and sam-b-rose January 17, 2023 17:01

chloerice self-assigned this Jan 17, 2023

sophschneider commented Jan 17, 2023

View reviewed changes

sophschneider marked this pull request as ready for review January 17, 2023 17:25

sophschneider force-pushed the sophie/tooling-tab branch from 80c7a15 to cfbb3b8 Compare January 17, 2023 17:36

alex-page approved these changes Jan 17, 2023

View reviewed changes

sophschneider and others added 7 commits January 17, 2023 14:46

add tooling section to doc website

13b17b3

revert some changes from merge to get nav and index page working again

b7f6ae0

add stylelint rule pages

2b9ee4a

revert collapse children since it isn't needed anymore

4ad2620

fix tool category cards and move tools to bottom of nav

94fcdf9

add placeholders for rule page descriptions

bf5dbd9

sophschneider and others added 11 commits January 17, 2023 14:46

fix generated markdown

7d944a5

Chloe's changes from #8051

961f324

Finish writing dos and donts

8b785ce

fix index page

f80ce7e

Add ignore section to rule pages

1be2322

Generalized the template of the rules page

9bb49b6

remove temp generation files

1a02771

generate rules index page

f172b44

removed old readmes for one source of truth

1897501

attempt to fix <HighlightedCode/> type error

785b214

Update rule metadata to styleguide doc URL

c439231

chloerice force-pushed the sophie/tooling-tab branch from cfbb3b8 to c439231 Compare January 17, 2023 19:47

sam-b-rose approved these changes Jan 17, 2023

View reviewed changes

list rule categories in stylelint readme

4623720

sophschneider merged commit 8fc0fef into main Jan 18, 2023

sophschneider deleted the sophie/tooling-tab branch January 18, 2023 17:48

shopify-github-actions-access bot mentioned this pull request Jan 18, 2023

Version Packages #8065

Merged

chloerice mentioned this pull request Jan 24, 2023

Link to polaris.shopify.com rule pages from rule failure messages #8067

Closed

gwyneplaine mentioned this pull request Feb 14, 2023

8248/fix toc layout #8338

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Polaris Lighthouse] Add tooling section to doc website #8027

[Polaris Lighthouse] Add tooling section to doc website #8027

Uh oh!

sophschneider commented Jan 11, 2023 •

edited by chloerice

Loading

Uh oh!

github-actions bot commented Jan 16, 2023 •

edited

Loading

Uh oh!

sophschneider Jan 17, 2023

Uh oh!

sophschneider Jan 17, 2023

Uh oh!

sophschneider Jan 17, 2023

Uh oh!

sophschneider Jan 17, 2023

Uh oh!

sophschneider Jan 17, 2023

Uh oh!

sophschneider Jan 17, 2023

Uh oh!

sophschneider Jan 17, 2023

Uh oh!

sophschneider Jan 17, 2023

Uh oh!

sophschneider Jan 17, 2023

Uh oh!

sophschneider Jan 17, 2023

Uh oh!

Uh oh!


		There are over 40 rules configured in Stylelint Polaris to help you avoid errors and follow stylistic and non-stylistic conventions while building for the Shopify admin.

		[List of Stylelint Polaris rules](/tools/stylelint-polaris/rules)

[Polaris Lighthouse] Add tooling section to doc website #8027

[Polaris Lighthouse] Add tooling section to doc website #8027

Uh oh!

Conversation

sophschneider commented Jan 11, 2023 • edited by chloerice Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

Uh oh!

github-actions bot commented Jan 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

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!

Uh oh!

sophschneider commented Jan 11, 2023 •

edited by chloerice

Loading

github-actions bot commented Jan 16, 2023 •

edited

Loading