Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Svelte: add repo header dropdown menu #63257

Merged
merged 14 commits into from
Jun 14, 2024
Merged

Svelte: add repo header dropdown menu #63257

merged 14 commits into from
Jun 14, 2024

Conversation

camdencheek
Copy link
Member

@camdencheek camdencheek commented Jun 13, 2024

Stacked on #63253

Completes SRCH-22 (at least most of it)

Unimplemented from the designs:

  • Mobile layout. I'm not exactly sure what the header in general should look like on mobile, but it should be pretty straightforward to move the tab items to the menu when we have that.
  • Contributors. We do not have that data available cheaply.

This adds the dropdown menu for the repo name button.

screenshot-2024-06-13_21-20-28@2x
screenshot-2024-06-13_21-19-25@2x

And the overflow menu (contains some icon and padding changes):
screenshot-2024-06-13_21-29-00@2x

Test plan

Manual testing of buttons, links, and keyboard shortcuts. Added playwright tests for the meaningful interactions with this menu.

@cla-bot cla-bot bot added the cla-signed label Jun 13, 2024
@camdencheek camdencheek changed the base branch from main to cc/kbd-design June 13, 2024 22:54
Comment on lines +3 to +5
--dropdown-padding-y: 0.375rem;
--dropdown-item-padding-y: 0.375rem;
--dropdown-item-padding-x: 0.75rem;
Copy link
Member Author

Choose a reason for hiding this comment

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

Increased these to match the designs.

@camdencheek camdencheek changed the title Cc/repo dropdown menu Svelte: add repo header dropdown menu Jun 14, 2024
@camdencheek camdencheek marked this pull request as ready for review June 14, 2024 05:33
@camdencheek camdencheek requested a review from a team June 14, 2024 05:33
@camdencheek
Copy link
Member Author

@taiyab small design feedback: with the menu open, that part of the page looks pretty busy and the dropdown menu does not stand out well against the file tree. This is especially true in dark mode (visible in the screenshot). Maybe a more aggressive shadow? Or a different placement of the menu?

Base automatically changed from cc/kbd-design to main June 14, 2024 06:12
@camdencheek camdencheek force-pushed the cc/repo-dropdown-menu branch from 911b5a7 to 16482b7 Compare June 14, 2024 06:20
Copy link
Contributor

Choose a reason for hiding this comment

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

We could consider to have RepoMenu take in a Repository GraphQL object and have it define it's own dependencies in a fragment. That would mean the component needs to compute values such as the repo URL and the display name itself but it would be more encapsulated.
No strong feelings about either solution though.

@taiyab
Copy link
Contributor

taiyab commented Jun 14, 2024

@camdencheek I've added an updated shadow style to the menus, both for light and dark, which should help differentiate it from the background.

https://www.figma.com/design/EPgl0qVbqGSumvf52brhda/Code-Search?m=auto&node-id=4119-422020&t=MJYz4JIVjK5BosZw-1

@camdencheek
Copy link
Member Author

I've added an updated shadow style to the menus,

Much better, thanks!

@camdencheek camdencheek force-pushed the cc/repo-dropdown-menu branch from cef6341 to c41656c Compare June 14, 2024 17:28
@camdencheek camdencheek enabled auto-merge (squash) June 14, 2024 17:44
@camdencheek camdencheek merged commit 7228b49 into main Jun 14, 2024
9 checks passed
@camdencheek camdencheek deleted the cc/repo-dropdown-menu branch June 14, 2024 18:11
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants