Page MenuHomePhabricator
Differential D10979

[web] introduce NavigationSidebarTabIndicator
ClosedPublic
Actions

Authored by ginsu on Feb 6 2024, 4:56 PM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Nov 8, 10:03 PM
Unknown Object (File)
Fri, Nov 8, 10:01 PM
Unknown Object (File)
Fri, Nov 8, 7:16 PM
Unknown Object (File)
Fri, Nov 8, 7:16 PM
Unknown Object (File)
Oct 3 2024, 4:51 PM
Unknown Object (File)
Oct 3 2024, 4:50 PM
Unknown Object (File)
Sep 7 2024, 9:56 AM
Unknown Object (File)
Sep 6 2024, 11:55 PM
View All 55 Files
Subscribers
ashoat
tomek

Details

Reviewers
atul
inka
Commits
rCOMMf886867a466f: [web] introduce NavigationSidebarTabIndicator
Summary

The nav sidebar in the figma has a purple inset to indicate to the user which where they are in the navigation sidebar. This diff introduces that inset/indicator component

For context here is what it looks like in the figma:

Screenshot 2024-02-06 at 8.07.15 PM.png (750×588 px, 79 KB)

Screenshot 2024-02-06 at 8.06.36 PM.png (970×606 px, 81 KB)

Linear task: https://linear.app/comm/issue/ENG-5950/move-the-purple-inset-to-the-selected-community

Test Plan

please see the screenshots below:

home:

Screenshot 2024-02-06 at 8.01.31 PM.png (294×458 px, 25 KB)

community:

Screenshot 2024-02-06 at 8.02.56 PM.png (596×266 px, 33 KB)

settings:

Screenshot 2024-02-06 at 8.03.21 PM.png (446×370 px, 23 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu created this revision.Feb 6 2024, 4:56 PM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptFeb 6 2024, 4:57 PM
ginsu edited the summary of this revision. (Show Details)Feb 6 2024, 4:58 PM
ginsu added reviewers: atul, inka.
ginsu edited the summary of this revision. (Show Details)Feb 6 2024, 5:07 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu attached a referenced file: F1123624: Screenshot 2024-02-06 at 8.03.21 PM.png. (Show Details)
ginsu attached a referenced file: F1123623: Screenshot 2024-02-06 at 8.02.56 PM.png. (Show Details)
ginsu attached a referenced file: F1123622: Screenshot 2024-02-06 at 8.01.31 PM.png. (Show Details)
ginsu attached a referenced file: F1123626: Screenshot 2024-02-06 at 8.06.36 PM.png. (Show Details)
ginsu attached a referenced file: F1123627: Screenshot 2024-02-06 at 8.07.15 PM.png. (Show Details)
Harbormaster completed remote builds in B26602: Diff 36759.Feb 6 2024, 5:12 PM
ginsu requested review of this revision.Feb 6 2024, 5:12 PM
atul accepted this revision.EditedFeb 7 2024, 12:52 PM

Looks like it matches the designs.

(Unsolicited, but don't love all the mismatched alignment in the Test Plan screenshot)

92e919.png (1×686 px, 61 KB)

This revision is now accepted and ready to land.Feb 7 2024, 12:52 PM
atul attached a referenced file: F1126817: 92e919.png. (Show Details)Feb 7 2024, 12:54 PM
ginsu added a comment.Feb 7 2024, 2:45 PM

(Unsolicited, but don't love all the mismatched alignment in the Test Plan screenshot)

Will land this diff as is since the concern isn't in the scope of this diff, but created this issue so the concern is tracked

https://linear.app/comm/issue/ENG-6710/investigate-mismatched-alignement-in-new-web-design

Closed by commit rCOMMf886867a466f: [web] introduce NavigationSidebarTabIndicator (authored by ginsu). · Explain WhyFeb 7 2024, 2:55 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMf886867a466f: [web] introduce NavigationSidebarTabIndicator.

Revision Contents
Changeset List

Diff 36815

View Options

web/navigation-sidebar/navigation-sidebar-tab-indicator.css

Loading...
View Options

web/navigation-sidebar/navigation-sidebar-tab-indicator.react.js

Loading...