feat: add "my projects" filter to projects list #6831
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
![codescene-delta-analysis[bot]](https://avatars.githubusercontent.com/in/53921?s=60&v=4){kind=small}
thomasheartman
force-pushed
the
feat/add-project-list-filter-selector
branch
from
1a7cf66
to
97817f6
Compare
thomasheartman
commented
Apr 11, 2024
Tymek
reviewed
Apr 11, 2024
We'll probably need to look closer at this at certain break points.
thomasheartman
force-pushed
the
feat/add-project-list-filter-selector
branch
from
000dc08
to
421c266
Compare
thomasheartman
commented
Apr 11, 2024
There was a problem hiding this comment.
This test was failing because the class name had changed. I'm assuming this is somehow caused by some of the other changes in this PR. However, it doesn't appear to have a visual effect. I'm guessing some input args to some algorithm changed which is reflected here. I think this is a safe change to make, but I'd love for you to tell me if you disagree.
Comment on lines
+139
to
+142
| const showProjectFilterButtons = useUiFlag('projectListFilterMyProjects'); | ||
| const filters = ['All projects', 'My projects']; | ||
| const [filter, setFilter] = useState(filters[0]); | ||
|
|
There was a problem hiding this comment.
❌ Getting worse: Complex Method
ProjectListNew increases in cyclomatic complexity from 16 to 17, threshold = 10
Tymek
approved these changes
Apr 12, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This PR adds the buttons (only UI, no functionality) to show either "all projects" or "my projects".
The buttons use a styled button group and are hidden behind the new
projectListFilterMyProjectsflag.The button placement breaks with the previously established page header pattern of having all actions moved to the right. To accommodate this new placement, I created a new flex container in the header called
leftActions, which is essentially just a mirror of the normal actions. I went withleftActionsinstead ofinlineStartActionsor something similar because I think it's clearer, and I don't see us adapting Unleash for different writing directions right now. We can always change it later.I have also slightly increased the end margin of the page header to accommodate the new designs and to adjust the spacing before the buttons. I adjusted the margin of the text instead of the padding of the left actions because this will keep the spacing to the page header the same on every page. Without it, we could end up in situations where the spacing changes from page to page based on whether it has left actions or not, which is probably undesirable.
Still to do:
Hover colors
Find out what the right hover color variable is. I'm using the light mode hover color for now, which works well in both light and dark modes (looks nice and is AAccessible), but it's not the same as the hover color for other buttons in dark mode.Fixed ☝🏼
Small windows
Also worth noting: at around 500px, the layout shift starts to cause problems and we end up with overlapping elements. How do we want to deal with narrower screens? Today, the UI is pretty functional until we reach about 250px. It would be nice to not increase that size.
The new version breaking at about 500px:
The old version breaking at about 250px:
Margins
We also need to figure out how much space we want on smaller windows: