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

[BD-46] fix Tabs not resizing on theme switch #2962

Merged
merged 1 commit into from
Dec 22, 2023
Merged

[BD-46] fix Tabs not resizing on theme switch #2962

merged 1 commit into from
Dec 22, 2023

Conversation

viktorrusakov
Copy link
Contributor

@viktorrusakov viktorrusakov commented Dec 22, 2023 •
edited

Description

Fixes useIndexOfLastVisibleChild hook to observer resizing of container element instead of whole window. This allows to correctly render More... tab on theme switch.

Deploy Preview

https://deploy-preview-2962--paragon-openedx.netlify.app/components/tabs/

Merge Checklist

  • If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
  • Does your change adhere to the documented style conventions?
  • Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
  • Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
  • Were your changes tested in the example app?
  • Is there adequate test coverage for your changes?
  • Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

  • Verify your changes were released to NPM at the expected version.
  • If you'd like, share your contribution in #show-and-tell.
  • 🎉 🙌 Celebrate! Thanks for your contribution.

@openedx-webhooks
Copy link

Thanks for the pull request, @viktorrusakov!

When this pull request is ready, tag your edX technical lead.

@openedx-webhooks openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label Dec 22, 2023
@netlify Netlify
Copy link

netlify bot commented Dec 22, 2023 •
edited

✅ Deploy Preview for paragon-openedx ready!

Name Link
🔨 Latest commit a734575
🔍 Latest deploy log https://app.netlify.com/sites/paragon-openedx/deploys/65854900b3bf3600089bf70c
😎 Deploy Preview https://deploy-preview-2962--paragon-openedx.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.

@viktorrusakov viktorrusakov linked an issue Dec 22, 2023 that may be closed by this pull request
Tabs "More..." dropdown seems to expand beyond Tabs bottom border #2445
Closed
viktorrusakov
viktorrusakov commented Dec 22, 2023
View reviewed changes
src/hooks/useIndexOfLastVisibleChild.mdx
const containerElementRef = React.useRef(null);
const [containerElementRef, setContainerElementRef] = React.useState(null);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is technically a breaking change for consumers, but I don't see any usage of this hook in Usage Insighhts table, so I think it should be okay to release it as a fix.

The reason we need to use callback ref is to trigger a re-render once the ref is attached to the DOM element, previously this re-render was caused by useWindowSize hook that was used in useIndexOfLastVisibleChild hook before this PR.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[inform] Yeah, it looks like there aren't any consumers of this hook from Paragon directly, but there are (nearly) duplicate functions that exist within frontend-app-learning (source) and frontend-app-discussions (source). They were likely implemented before we implemented the responsive Tabs in Paragon.

I agree this should probably be OK to release a fix.

@codecov Codecov
Copy link

codecov bot commented Dec 22, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (9a16ba1) 92.87% compared to head (a734575) 92.88%.
Report is 1 commits behind head on master.

Additional details and impacted files 
@@           Coverage Diff           @@
##           master    #2962   +/-   ##
=======================================
  Coverage   92.87%   92.88%           
=======================================
  Files         235      235           
  Lines        4268     4272    +4     
  Branches     1033     1033           
=======================================
+ Hits         3964     3968    +4     
  Misses        300      300           
  Partials        4        4

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

adamstankiewicz
adamstankiewicz approved these changes Dec 22, 2023
View reviewed changes
src/hooks/useIndexOfLastVisibleChild.mdx
const containerElementRef = React.useRef(null);
const [containerElementRef, setContainerElementRef] = React.useState(null);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[inform] Yeah, it looks like there aren't any consumers of this hook from Paragon directly, but there are (nearly) duplicate functions that exist within frontend-app-learning (source) and frontend-app-discussions (source). They were likely implemented before we implemented the responsive Tabs in Paragon.

I agree this should probably be OK to release a fix.

@adamstankiewicz adamstankiewicz merged commit dc38d63 into master Dec 22, 2023
10 checks passed
@adamstankiewicz adamstankiewicz deleted the rusakov/fix-tabs branch December 22, 2023 13:43
@openedx-semantic-release-bot
Copy link

🎉 This PR is included in version 21.12.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@openedx-semantic-release-bot
Copy link

🎉 This PR is included in version 22.0.0-alpha.24 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adamstankiewicz adamstankiewicz adamstankiewicz approved these changes

@PKulkoRaccoonGang PKulkoRaccoonGang PKulkoRaccoonGang approved these changes

@monteri monteri Awaiting requested review from monteri

Assignees
No one assigned
Labels
blended PR is managed through 2U's blended developmnt program released on @alpha released
Projects
No open projects
2U Blended Project
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Tabs "More..." dropdown seems to expand beyond Tabs bottom border
5 participants
@viktorrusakov @openedx-webhooks @openedx-semantic-release-bot @adamstankiewicz @PKulkoRaccoonGang