[DO NOT MERGE] feat: navigation light mode #2730

Lelith · 2024-04-25T08:51:12Z

Purpose of PR

Change the color schema of the Navbar component from dark to light. This is not a new variation but a complete switch of style. The overall structure and layout of the component is unchanged.
But some of the classNames are changed in order to be more meaningful.

changeset-bot · 2024-04-25T08:51:16Z

⚠️ No Changeset found

Latest commit: 76cc3f7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2024-04-25T08:51:18Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
forma-36	✅ Ready (Inspect)	Visit Preview	May 17, 2024 11:00am

github-actions · 2024-04-25T12:21:10Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
CommonJS	132.98 KB (+0.07% 🔺)	2.7 s (+0.07% 🔺)	900 ms (+36.36% 🔺)	3.6 s
Module	129.58 KB (0%)	2.6 s (0%)	726 ms (+3.14% 🔺)	3.4 s

damann · 2024-04-26T11:45:55Z

Looks good. Thanks so much! Just two tiny things:
2. There’s something weird happening with the borders of the space switcher not being even.
3. Could you shave off a few pixels on the right margins of the Apps button so that the hover state looks more even between the label and the arrow?

denkristoffer · 2024-04-29T12:47:47Z

As far as I can tell from the design we don't want the background coloured border to separate the items:

denkristoffer · 2024-04-29T14:54:59Z

Are you also seeing this weird behaviour with the background cut in half on the hover?

denkristoffer

I am noticing a few minor differences from the design, I don't know how much we want to nitpick them though. Any thoughts @damann?

There's a difference in the green colour used for the environments.
The selected state is currently "inside" the hover state background, in the design it lives below it.
The burger menu icon seems smaller in the design.

packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx

Co-authored-by: Kristoffer <denkristoffer@users.noreply.github.com>

* feat: introduce new notification 'info' variant for NavbarAccount * chore: bump version

* feat: set maxWidth for navbar * feat: enable wide and fullscreen variants * chore: remove unused import * feat: only limit the content width not the components

Lelith force-pushed the feat/navigation_light_mode branch from 52cba3c to f2fcc21 Compare April 25, 2024 10:08

vercel bot had a problem deploying to Preview April 25, 2024 10:09 Failure

vercel bot had a problem deploying to Preview April 25, 2024 10:19 Failure

vercel bot deployed to Preview April 25, 2024 12:20 View deployment

vercel bot deployed to Preview April 25, 2024 13:54 View deployment

vercel bot deployed to Preview April 25, 2024 15:29 View deployment

vercel bot deployed to Preview April 25, 2024 15:41 View deployment

Lelith force-pushed the feat/navigation_light_mode branch from 4785d52 to bf171e5 Compare April 29, 2024 11:29

Lelith changed the title ~~Feat/navigation light mode~~ feat/navigation light mode Apr 29, 2024

Lelith added the don't merge label Apr 29, 2024

vercel bot deployed to Preview April 29, 2024 11:33 View deployment

vercel bot deployed to Preview April 29, 2024 12:04 View deployment

Lelith requested review from denkristoffer and cf-remylenoir April 29, 2024 12:08

vercel bot deployed to Preview April 29, 2024 12:11 View deployment

vercel bot deployed to Preview April 29, 2024 14:31 View deployment

Lelith force-pushed the feat/navigation_light_mode branch from e9498cb to bd10031 Compare April 30, 2024 06:34

vercel bot deployed to Preview April 30, 2024 06:38 View deployment

vercel bot deployed to Preview April 30, 2024 07:19 View deployment

vercel bot deployed to Preview April 30, 2024 07:42 View deployment

vercel bot deployed to Preview April 30, 2024 08:12 View deployment

denkristoffer reviewed Apr 30, 2024

View reviewed changes

packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx Outdated Show resolved Hide resolved

damann marked this pull request as ready for review April 30, 2024 08:38

damann self-requested a review as a code owner April 30, 2024 08:38

Lelith and others added 20 commits May 14, 2024 09:05

chore: remove unused code

795157d

style: fix border styling

0e6a87d

style: fix right side spacing

8db16c8

chore: create 5.0.0-alpha.0 version

38e97f7

fix: remove negative visual space between switcher elements

b42d63b

fix: change to non opaque color to avoid color blending

eeacb02

chore: remove unused import

78bbc2c

feat: adjust highlight colors

db239ab

feat: update icon colors

bd10647

feat: polish spacings

81275f2

Update packages/components/navbar/stories/Navbar.stories.tsx

6f8937a

Co-authored-by: Kristoffer <denkristoffer@users.noreply.github.com>

feat: unify focus glow styles

8665a90

feat: adjust sizing, spacings, focus styles

3e9ca02

feat: adjust skeleton

3f92058

fix: switcher item positioning, focus style

06f9b21

fix: replace old icon

75d9b6d

fix: replace old icon

677f99c

build: bump version from release

89b4dbe

feat: new variant for navbar account notif [Light Navigation] (#2751)

a905c83

* feat: introduce new notification 'info' variant for NavbarAccount * chore: bump version

chore: use latest versions

d1a6baf

Lelith force-pushed the feat/navigation_light_mode branch from ad06143 to d1a6baf Compare May 14, 2024 07:24

vercel bot deployed to Preview May 14, 2024 07:28 View deployment

vercel bot deployed to Preview May 16, 2024 12:30 View deployment

vercel bot deployed to Preview May 16, 2024 13:05 View deployment

vercel bot deployed to Preview May 16, 2024 13:18 View deployment

Lelith force-pushed the feat/navigation_light_mode branch from 7d0f364 to d1a6baf Compare May 16, 2024 13:27

feat: introduce size variants for light navbar (#2760)

6736b26

* feat: set maxWidth for navbar * feat: enable wide and fullscreen variants * chore: remove unused import * feat: only limit the content width not the components

vercel bot deployed to Preview May 17, 2024 09:54 View deployment

chore: new alpha release

76cc3f7

vercel bot deployed to Preview May 17, 2024 11:00 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DO NOT MERGE] feat: navigation light mode #2730

[DO NOT MERGE] feat: navigation light mode #2730

Lelith commented Apr 25, 2024

changeset-bot bot commented Apr 25, 2024 •

edited

vercel bot commented Apr 25, 2024 •

edited

github-actions bot commented Apr 25, 2024 •

edited

damann commented Apr 26, 2024

denkristoffer commented Apr 29, 2024

denkristoffer commented Apr 29, 2024

denkristoffer left a comment

[DO NOT MERGE] feat: navigation light mode #2730

Are you sure you want to change the base?

[DO NOT MERGE] feat: navigation light mode #2730

Conversation

Lelith commented Apr 25, 2024

Purpose of PR

changeset-bot bot commented Apr 25, 2024 • edited

⚠️ No Changeset found

vercel bot commented Apr 25, 2024 • edited

github-actions bot commented Apr 25, 2024 • edited

size-limit report 📦

damann commented Apr 26, 2024

denkristoffer commented Apr 29, 2024

denkristoffer commented Apr 29, 2024

denkristoffer left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Apr 25, 2024 •

edited

vercel bot commented Apr 25, 2024 •

edited

github-actions bot commented Apr 25, 2024 •

edited