This repository has been archived by the owner on Dec 19, 2024. It is now read-only.
Match Device Navigation Tab styling #2234
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1. This is currently duplicated in the Troubleshooting problem list
pages. They are the exact same styles except for the slightly grey
background on disabled tabs. We should consolidate this style anyways.
1. Now we just need to pass in the data in the
correct order and it will be rendered correctly!
1. This has slightly different styling that we
should still pass in (for now).
2. We also need to set the font size in the navtabs
so that it is consistent across all the uses.
1. Replaced the right border with larger padding so the breadcrumbs and
the nav tabs are not so close to each other.
🔍 Existing Issues For ReviewYour pull request is modifying functions with the following pre-existing issues: 📄 File: frontend/templates/product-list/SecondaryNavigation.tsx
Did you find this useful? React with a 👍 or 👎 |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📦 Next.js Bundle Analysis for @ifixit/commerce-frontendThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
1. We actually do want this border on all screen sizes except for xl.
2. We should still have the padding on the breadcrumbs, but we now want
it to be 16px on all screen sizes.
|
dev_block 🟥 On mobile, there seems to be a small box/divider to the left of the nav bar
|
1. We don't have the breadcrumbs to the right of these tabs on mobile, so
the right border is unnecessary and looked weird. This now matches
the figma.
|
Un_dev_block 👽 Whoops, good catch. Fixed in f692b5f |
|
QA 🦖
|
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
Extracts and reuses a styled nav tab component on /Parts, /Troubleshooting/device, and /Troubleshooting pages. Reuses the components from the Troubleshooting nav tabs on parts and problem list view pages. Now the styles are consistent across the tabs.
QA
Closes https://github.com/iFixit/ifixit/issues/51876