-
Notifications
You must be signed in to change notification settings - Fork 43
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.
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
FAQ deep links #171
base: main
Are you sure you want to change the base?
FAQ deep links #171
Conversation
|
🟢 No design token changes found |
🟢 No visual differences foundOur visual comparison tests did not find any differences in the UI. |
</p> | ||
</FAQ.Answer> | ||
</FAQ.Item> | ||
<FAQ.Item open id="test"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry for the drive-by comment @josepmartins - this looked interesting and I was also thinking about this yesterday so hope you don't mind me dropping some feedback here? 😬
I think in practice we'd typically not want to set open
attribute by default in the markup, but rather only when required via a "deeplink" url. What do you think about passing a query param, which FAQ component reads, parses and then adds the open
attribute to the id of the relevant question?
We can then trigger the opening of the question via the URL like:
mywebsite.com?faq=1
which opens id="1"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I totally agree on not setting the open
attribute by default (we should document this). This was more of a test to showcase how the feature "should look", that's why I forced the open attribute.
Not sure about the need for a query param here (or maybe I didn't understand your proposal lol). Wouldn't it be better to use a normal anchor link (mywebsite.com#whats-the-meaning-of-life
) that scrolls down to the id of the question and the FAQ component reads, parses, and adds the open
attribute to it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To illustrate my comment above, made a commit as an example using the location.hash
to adjust the open boolean in FAQ:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🙌 I love that idea. Glad we're aligned on the optional attribute. I think your approach of doing it without query params makes total sense too. Just bear in mind that the component will need to run any window
operations in a useEffect
to mitigate SSR constraints, otherwise works for me 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I made a useHash
webhook to handle the window.hash
operations, which works pretty fine
hash-FAQ.mov
fdd3e2a
to
6b53e62
Compare
6b53e62
to
b936350
Compare
650d6bc
to
e2c685d
Compare
dc7a6eb
to
895686d
Compare
895686d
to
ebce165
Compare
2652563
to
8ceeb5c
Compare
8ceeb5c
to
88922b2
Compare
Summary
This PR showcase and create a storybook example of the FAQ items using anchored links.
Tracking issue: https://github.com/github/primer/issues/1749
👀 Preview links
hash-FAQ.mov
List of notable changes:
What should reviewers focus on?
Steps to test:
Supporting resources (related issues, external links, etc):
Contributor checklist:
Reviewer checklist:
Screenshots: