Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migration guide styling issues #10806

Closed
11 of 13 tasks
sophschneider opened this issue Oct 2, 2023 · 0 comments
Closed
11 of 13 tasks

Migration guide styling issues #10806

sophschneider opened this issue Oct 2, 2023 · 0 comments
Assignees
@sophschneider

Comments

@sophschneider
Copy link
Contributor

sophschneider commented Oct 2, 2023 •
edited
Loading

  • We have no ways to add collapsible content (like <details>), this would be really helpful for tech docs
  • h2 tags have enormous top padding under headers
  • syntax highlighting for tsx?
  • Padding between code blocks
  • Figure out a way to make the token tab corners round
  • dark mode copy icon [polaris.shopify.com] Feedback (on /icons) #10689
  • scroll for TOC
  • add description to top of migration guide
  • Make component snippits copiable
  • Make each migration its own subheading
  • either link from old to new guides or move guides over
  • Add a glossary for migration concepts and terms
  • Generalized workflow section
@sophschneider sophschneider changed the title Markdown styling issues Migration guide styling issues Oct 5, 2023
@sophschneider sophschneider self-assigned this Oct 5, 2023
@sophschneider sophschneider mentioned this issue Oct 5, 2023
Merged
mrcthms pushed a commit that referenced this issue Oct 12, 2023
@sophschneider @laurkim @mrcthms
Migration guide polish and examples (#10889)
f2be688 
Fixes #10806

1. Added support for `<details>` toggles on markdown
2. Added support for `collabsibleTOC` pages (off by default) so you can
quickly skip to the section you need. This isn't perfect yet (doesn't
auto open when linking directly to an anchor) but is much better than
what we currently have
3. Organized v11 to v12 styleguide into consistent steps
4. Put regex validation, mapping tables, and examples in details toggles
to make the page less overwhelming and put migration commands at the
forefront
5. Added introduction, glossary, and generalized the migration workflow
section. Put these at the top to introduce builders to the migration
6. Added descriptive titles to all component migrations naming what they
do
7. Added examples to each component migration and removed them from the
"Whats new" page
8. Added regex validation snippets to all component migrations
9. Added alert text for stepped migrations that have to be run in order
10. Cleaned up copy and overall improved migration experience giving
more context on how and why we are running the migrations. Aimed to make
it clear enough that an intern could run a migration on their code base
11. Add padding to code blocks


![toc-demo](https://github.com/Shopify/polaris/assets/20652326/c1b012b6-b576-405f-a69e-f7cc085d66f2)

![Screen Recording 2023-10-05 at 3 09 18
PM](https://github.com/Shopify/polaris/assets/20652326/4999bcbe-960b-4718-ba73-04963eeed302)

---------

Co-authored-by: Lo Kim <[email protected]>
mrcthms pushed a commit that referenced this issue Oct 12, 2023
@sophschneider @laurkim @mrcthms
Migration guide polish and examples (#10889)
6602066 
Fixes #10806

1. Added support for `<details>` toggles on markdown
2. Added support for `collabsibleTOC` pages (off by default) so you can
quickly skip to the section you need. This isn't perfect yet (doesn't
auto open when linking directly to an anchor) but is much better than
what we currently have
3. Organized v11 to v12 styleguide into consistent steps
4. Put regex validation, mapping tables, and examples in details toggles
to make the page less overwhelming and put migration commands at the
forefront
5. Added introduction, glossary, and generalized the migration workflow
section. Put these at the top to introduce builders to the migration
6. Added descriptive titles to all component migrations naming what they
do
7. Added examples to each component migration and removed them from the
"Whats new" page
8. Added regex validation snippets to all component migrations
9. Added alert text for stepped migrations that have to be run in order
10. Cleaned up copy and overall improved migration experience giving
more context on how and why we are running the migrations. Aimed to make
it clear enough that an intern could run a migration on their code base
11. Add padding to code blocks


![toc-demo](https://github.com/Shopify/polaris/assets/20652326/c1b012b6-b576-405f-a69e-f7cc085d66f2)

![Screen Recording 2023-10-05 at 3 09 18
PM](https://github.com/Shopify/polaris/assets/20652326/4999bcbe-960b-4718-ba73-04963eeed302)

---------

Co-authored-by: Lo Kim <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sophschneider sophschneider

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@sophschneider