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

Update Table of Contents component styling #10463

Closed
2 tasks done
yurm04 opened this issue Sep 13, 2023 · 2 comments · Fixed by #10542
Closed
2 tasks done

Update Table of Contents component styling #10463

yurm04 opened this issue Sep 13, 2023 · 2 comments · Fixed by #10542
Assignees
@laurkim
Labels
Engineering

Comments

@yurm04
Copy link
Contributor

yurm04 commented Sep 13, 2023 •
edited by laurkim
Loading

Figma

All functionality/behaviour should remain the same for the Table of Contents component.

Styling updates

  • Container around the TOC
  • Active state for the current location

Image
Image
@yurm04
Copy link
Contributor Author

yurm04 commented Sep 13, 2023

There is an existing bug/edge case/weirdness on prod in the TOC component.

The TOC does not have its own scroll container. For very long pages, the TOC does not scroll to follow the actual page position. It also get cut off at the bottom of the page. Is there a way we can gracefully handle these scenarios?

Screen.Recording.2023-09-13.at.5.02.39.PM.mov

@yurm04 yurm04 removed the untriaged label Sep 13, 2023
@laurkim laurkim self-assigned this Sep 14, 2023
@laurkim laurkim added Bug Something is broken and not working as intended in the system. Engineering and removed Bug Something is broken and not working as intended in the system. labels Sep 14, 2023
@laurkim laurkim mentioned this issue Sep 18, 2023
Merged
5 tasks
@laurkim laurkim linked a pull request Sep 18, 2023 that will close this issue
[Docs] Update Table of Contents #10542
Merged
5 tasks
@laurkim
Copy link
Contributor

laurkim commented Sep 18, 2023

There is an existing bug/edge case/weirdness on prod in the TOC component.

The TOC does not have its own scroll container. For very long pages, the TOC does not scroll to follow the actual page position. It also get cut off at the bottom of the page. Is there a way we can gracefully handle these scenarios?

Chatted with @yurm04 about this offline and the explored solutions to this ended up not providing much of a visual improvement so we are tabling that for now and hoping with refactoring of page content, TOC content being cut off for pages with a large number of sections/subsections will not be an issue.

laurkim added a commit that referenced this issue Sep 19, 2023
@laurkim
[Docs] Update Table of Contents (#10542)
95444e1 
### WHY are these changes introduced?

Resolves #10463.
Updates TOC styling based off
[Figma](https://www.figma.com/file/vO0wToyBpYjeIwr8doAAWT/Uplift-polaris.shopify.com?type=design&node-id=53%3A2996&mode=design&t=RwCrRixcmvNZ3XHy-1).

### WHAT is this pull request doing?

Updates TOC styling.
Uses polaris tokens where applicable (instead of style guide tokens)
    <details>
      <summary>TOC — before</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/1060d9ed-8941-4dd2-bdd1-9a3f066394e5"
alt="TOC — before">
    </details>
    <details>
      <summary>TOC — after</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/f9e3d48f-022b-4b23-ba4b-2a07e48253ee"
alt="TOC — after">
    </details>

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
@laurkim laurkim closed this as completed Sep 19, 2023
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this issue Apr 22, 2024
@laurkim
[Docs] Update Table of Contents (Shopify#10542)
627f769 
### WHY are these changes introduced?

Resolves Shopify#10463.
Updates TOC styling based off
[Figma](https://www.figma.com/file/vO0wToyBpYjeIwr8doAAWT/Uplift-polaris.shopify.com?type=design&node-id=53%3A2996&mode=design&t=RwCrRixcmvNZ3XHy-1).

### WHAT is this pull request doing?

Updates TOC styling.
Uses polaris tokens where applicable (instead of style guide tokens)
    <details>
      <summary>TOC — before</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/1060d9ed-8941-4dd2-bdd1-9a3f066394e5"
alt="TOC — before">
    </details>
    <details>
      <summary>TOC — after</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/f9e3d48f-022b-4b23-ba4b-2a07e48253ee"
alt="TOC — after">
    </details>

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@laurkim laurkim

Labels
Engineering
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Docs] Update Table of Contents Shopify/polaris
2 participants
@yurm04 @laurkim