evidence icon indicating copy to clipboard operation
evidence copied to clipboard

added scroll to prop sections of docs

Open kwongz opened this issue 1 year ago • 9 comments

Description

Checklist

  • ~~For UI or styling changes, I have added a screenshot or gif showing before & after~~
  • ~~I have added a changeset~~
  • ~~I have added to the docs where applicable~~
  • ~~I have added to the VS Code extension where applicable~~

kwongz avatar Aug 13 '24 18:08 kwongz

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 29, 2024 8:17pm
next-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 29, 2024 8:17pm

vercel[bot] avatar Aug 13 '24 18:08 vercel[bot]

🦋 Changeset detected

Latest commit: 210415e2ecc872fdc28ab85f0d718d977ddf94e9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@evidence-dev/components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

changeset-bot[bot] avatar Aug 13 '24 18:08 changeset-bot[bot]

Deploy Preview for evidence-development-workspace ready!

Name Link
Latest commit 210415e2ecc872fdc28ab85f0d718d977ddf94e9
Latest deploy log https://app.netlify.com/sites/evidence-development-workspace/deploys/66d0d594f6ad9a0008dc6554
Deploy Preview https://deploy-preview-2324--evidence-development-workspace.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Aug 13 '24 18:08 netlify[bot]

Deploy Preview for evidence-test-env ready!

Name Link
Latest commit 210415e2ecc872fdc28ab85f0d718d977ddf94e9
Latest deploy log https://app.netlify.com/sites/evidence-test-env/deploys/66d0d59480a0690008dc90d3
Deploy Preview https://deploy-preview-2324--evidence-test-env.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Aug 13 '24 18:08 netlify[bot]

Deploy Preview for next-docs-evidence ready!

Name Link
Latest commit 210415e2ecc872fdc28ab85f0d718d977ddf94e9
Latest deploy log https://app.netlify.com/sites/next-docs-evidence/deploys/66d0d59495ad960008f45e13
Deploy Preview https://deploy-preview-2324--next-docs-evidence.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Aug 13 '24 18:08 netlify[bot]

Added <a href="#props-{name}" to doc's prop section.

Click on Value, scrolls you to Value in prop section, as well as updates the url (/components/big-value/#props-value)

image https://www.loom.com/share/6d859aa798c54eb2921146b1ad2900f2

Entering that URL in a new tab will scroll to the specified section once the page opens. However, an existing issue was discovered: In the example video, the Big Value component loads after the initial scroll. This change affects the height of the page, causing the viewport's scroll position to shift, so the intended scroll position is no longer accurate.

Test example for Current Docs site & Local branch with prop scroll https://www.loom.com/share/233bc359290f4d61a533576265d8ffcb

kwongz avatar Aug 13 '24 18:08 kwongz

Changed URL event listener in onMount, to fix build errors I was experiencing.

Concern: Is it an issue that all PropListing Components have an event listener for the hash changes?

kwongz avatar Aug 14 '24 20:08 kwongz

Event listener logic handled in context='module', created and removed once per page

kwongz avatar Aug 15 '24 13:08 kwongz

fix #2119

kwongz avatar Aug 28 '24 14:08 kwongz