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

Align NetworkDropdown component with new design #8380

Closed
wants to merge 8 commits into from

Conversation

germain-gg
Copy link
Contributor

@germain-gg germain-gg commented Apr 21, 2022

Related to element-hq/element-web#21354

💔 before 💅 After
Screen Shot 2022-04-21 at 10 30 51 Screen Shot 2022-04-21 at 10 30 30
Screen Shot 2022-04-21 at 10 31 05 Screen Shot 2022-04-21 at 10 30 36

This change is marked as an internal change (Task), so will not be included in the changelog.

Preview: https://pr8380--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

@germain-gg germain-gg requested a review from a team as a code owner April 21, 2022 09:34
@germain-gg germain-gg added the T-Task Refactoring, enabling or disabling functionality, other engineering tasks label Apr 21, 2022
@codecov
Copy link

codecov bot commented Apr 21, 2022

Codecov Report

Merging #8380 (a3752f8) into develop (146bcdd) will increase coverage by 0.00%.
The diff coverage is 41.66%.

@@           Coverage Diff            @@
##           develop    #8380   +/-   ##
========================================
  Coverage    30.40%   30.41%           
========================================
  Files          889      889           
  Lines        50507    50506    -1     
  Branches     12861    12861           
========================================
+ Hits         15359    15360    +1     
+ Misses       35148    35146    -2     
Impacted Files Coverage Δ
src/components/structures/RoomDirectory.tsx 0.94% <ø> (ø)
src/components/views/directory/NetworkDropdown.tsx 4.93% <12.50%> (+0.11%) ⬆️
...c/accessibility/context_menu/ContextMenuButton.tsx 100.00% <100.00%> (ø)
src/components/views/elements/AccessibleButton.tsx 38.09% <100.00%> (+1.50%) ⬆️

Copy link
Contributor

@kerryarchibald kerryarchibald left a comment

Choose a reason for hiding this comment

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

Looks super nice!

(Also TIL github renders the svg diff very nicely)

Copy link
Contributor

@niquewoodhouse niquewoodhouse left a comment

Choose a reason for hiding this comment

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

Minor changes requested. First off, love that you're aligning the components!

I just want to explain the design a little first for context. I noticed the Threads beta has a drop down design and I wanted to mimic the styling, so its consistent with latest dropdowns. I think between my Figma and the actual threads dropdown we have some things to align, I've updated the design here to be more like Threads dropdown (image below)

image

Default style

  • Add Show: to start of content
  • Edit border and border radius
  • Edit size of chevron to match Threads chevron

Hover style

  • Edit border radius

Dropdown style

  • Use border and box-shadow style of Threads dropdown

image

@germain-gg
Copy link
Contributor Author

Closing as #8707 took over this piece

@germain-gg germain-gg closed this Jun 1, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T-Task Refactoring, enabling or disabling functionality, other engineering tasks
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants