Page MenuHomePhabricator
Differential D10437

[web] introduce app list header
ClosedPublic
Actions

Authored by ginsu on Dec 21 2023, 7:12 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, May 8, 11:24 AM
Unknown Object (File)
Apr 8 2024, 7:12 PM
Unknown Object (File)
Apr 8 2024, 7:12 PM
Unknown Object (File)
Apr 8 2024, 7:12 PM
Unknown Object (File)
Apr 8 2024, 7:12 PM
Unknown Object (File)
Apr 8 2024, 7:12 PM
Unknown Object (File)
Apr 8 2024, 7:11 PM
Unknown Object (File)
Mar 15 2024, 9:53 AM
View All 31 Files
Subscribers
ashoat
tomek

Details

Reviewers
atul
rohan
kamil
Commits
rCOMMa767e932897e: [web] introduce app list header
Summary

This diff introduces the app list header. This component will be used in the app list that I will introduce in subsquent diffs

For context here is what the app list header looks like in the figma designs:

Screenshot 2023-12-21 at 10.28.49 PM.png (168×324 px, 15 KB)

Linear task: https://linear.app/comm/issue/ENG-5962/create-new-app-list-card-section

Depends on D10436

Test Plan

Please note that the placement of the app list is still getting fleshed out. The focus of this diff is just the UI/UX of the app list header

Please see the demo video below

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu created this revision.Dec 21 2023, 7:12 PM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptDec 21 2023, 7:12 PM
ginsu edited the summary of this revision. (Show Details)Dec 21 2023, 7:19 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, rohan, kamil.
ginsu added a parent revision: D10436: [web] introduce add button component.
ginsu attached a referenced file: F997012: Screen Recording 2023-12-21 at 10.18.01 PM.mov. (Show Details)
ginsu edited the test plan for this revision. (Show Details)
ginsu edited the summary of this revision. (Show Details)Dec 21 2023, 7:29 PM
ginsu attached a referenced file: F997026: Screenshot 2023-12-21 at 10.28.49 PM.png. (Show Details)
Harbormaster completed remote builds in B25308: Diff 34955.Dec 21 2023, 7:29 PM
ginsu requested review of this revision.Dec 21 2023, 7:29 PM
ginsu updated this revision to Diff 34956.Dec 21 2023, 7:38 PM

update

ginsu updated this revision to Diff 34957.Dec 21 2023, 7:45 PM

update

ginsu added inline comments.Dec 21 2023, 7:46 PM
web/theme.css
53–54 ↗(On Diff #34957)

Both of these values are black/white with 35% opacity (given to me by figma)

268 ↗(On Diff #34957)

Still unsure if I want to call this Card but this is what Ted called it in the figma, so I will use it too until I can think of something better.

Also I will probs make a Card component (or whatever I end up calling it) in a subsequent diff since this new style/component will be repeated in several places in the new web app redesign; however, I want to make this component when I introduce another card so that it is super clear what parts should be factored out, shared, etc

Harbormaster completed remote builds in B25309: Diff 34956.Dec 21 2023, 7:59 PM
Harbormaster completed remote builds in B25310: Diff 34957.Dec 21 2023, 8:03 PM
atul accepted this revision.Dec 26 2023, 5:26 PM
This revision is now accepted and ready to land.Dec 26 2023, 5:26 PM
ginsu updated this revision to Diff 35031.Dec 27 2023, 12:43 PM

rebase before landing + update

This revision was landed with ongoing or failed builds.Dec 27 2023, 12:49 PM
Closed by commit rCOMMa767e932897e: [web] introduce app list header (authored by ginsu). · Explain Why
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMa767e932897e: [web] introduce app list header.
Harbormaster completed remote builds in B25355: Diff 35031.Dec 27 2023, 1:00 PM

Revision Contents
Changeset List

PathSize
web/
app-list/
15 lines
27 lines
12 lines

Diff 35033

View Options

web/app-list/app-list-header.css

Loading...
View Options

web/app-list/app-list-header.react.js

Loading...
View Options

web/theme.css

Loading...