-
Notifications
You must be signed in to change notification settings - Fork 258
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
refactor: adopt primer design system ui components #1589
base: main
Are you sure you want to change the base?
Conversation
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Lovely, nice touch. |
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
@afonsojramos @bmulholland - I'm pretty happy with the completeness of this initial uplift to use the GitHub Primer UI Components. I plan to update this issue later with before/after screenshots, but while that's pending, if you do happen to have a few minutes I'd appreciate your feedback by running this branch locally 🙏 |
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Sure, testing this locally now :) |
A minor nitpick: there's now two different versions of green. The Gitify logo in the tray, when there's notifs, is one -- I think the same as open PR green? The sidebar icons are another, along with the sub-icons for a notification. |
Good feedback. The sidebar icons are now using the GitHub design tokens (colors), while the others (notification type icon and tray icons) are unchanged. Post this PR I do intend to use the GitHub design token colors more extensively and reduce the amount of tailwind colors we're using |
Yeah I think temporary mismatches are fine, too. |
During further testing, noticed that when a notification row is animating out (mark as read, etc) a horizontal scroll bar is being shown temporarily. Added as an open task to the OP |
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Signed-off-by: Adam Setch <adam.setch@outlook.com>
Closes: #1541
Adopts the excellent GitHub Primer Design System Component Library - https://primer.style/components to replace our custom components and provide a level-up on user experience and visual consistency.
This PR, though sizeable, focuses on replacing the following components
I have also replaced most tests to use
data-testid
andgetByTestId
so that they're more resilient to UI changesItems found during testing that should be resolved