[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: a72e87a

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	Jul 17, 2024 2:30pm

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

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
CommonJS	136.05 KB (+0.05% 🔺)	2.8 s (+0.05% 🔺)	79 ms (+95.71% 🔺)	2.8 s
Module	132.24 KB (0%)	2.7 s (0%)	71 ms (+51.49% 🔺)	2.8 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?

* feat: increase hit area for navigation buttons * Update packages/components/navbar/src/utils.styles.ts Co-authored-by: Kristoffer <[email protected]> * refactor: remove unnecessary elements --------- Co-authored-by: Kristoffer <[email protected]>

* refactor: render navbar complete as fullscreen on storybook * feat: add mobile navigation to complete story * refactor: improve responsiveness on navbar * feat: add separate story for responsiveness * chore: update to latest version * feat: hide secondary nav children except search * docs: use only navbar compound elements * feat: prevent overflow of submenu on mobile * feat: prevent header overflow with long space names * feat: avoid overflow on small desktop screens * feat: increase icon size for mobile devices --------- Co-authored-by: Kathrin <[email protected]>

…ation_light_mode

We will merge this branch into next

* feat: change styling of upper navigation * style: apply light color schema for bottom navbar * style: apply light color schema for loading skeleton * chore: rename classes to be more meaningful * chore: remove unused import * fix: adjust component imports * style: add hover style for avatar * style: adjust position and add border to notification * chore: remove unused code * style: fix border styling * style: fix right side spacing * chore: create 5.0.0-alpha.0 version * fix: remove negative visual space between switcher elements * fix: change to non opaque color to avoid color blending * chore: remove unused import * feat: adjust highlight colors * feat: update icon colors * feat: polish spacings * feat: unify focus glow styles * feat: adjust sizing, spacings, focus styles * feat: adjust skeleton * fix: switcher item positioning, focus style * fix: replace old icon * fix: replace old icon * build: bump version from release * feat: new variant for navbar account notif [Light Navigation] (#2751) * feat: introduce new notification 'info' variant for NavbarAccount * chore: bump version * chore: use latest versions * feat: introduce size variants for light navbar (#2760) * feat: set maxWidth for navbar * feat: enable wide and fullscreen variants * chore: remove unused import * feat: only limit the content width not the components * chore: new alpha release * refactor: apply avatar changes to light navbar (#2770) * chore: new alpha release * feat: move logo out of navbar switcher (#2779) * build: bump to latest icon + icons * fix(navbar-switcher): require children * chore: alpha.9 * fix: icons and utils * chore: update lock * fix: alpha.11 This reverts commit 1d1c5f7. * feat: update navigation item style (#2783) * feat: single line navigation (#2785) * feat: refactor Navbar.Item The components for Help and Search are obsolete and can be solved with the updated NavbarItem * feat: render everything in a single line * chore: update story example * fix: adjust marginleft for icon-only links * fix: do not show separation bar * feat: adjust spacing of main navigation * feat: change Navbar Prop API * chore: update prop names * chore: reset npm dev configurator * feat: remove TopbarItem only Item should be used * chore: improve style selector * chore: add label for Account menu * feat: use semantic meaningful html tag fix: merge issues for stories * chore: pre-release "5.0.0-alpha.16" * chore: change type definition * fix: make isActive a optional prop * chore: reset package-lock file chore: fix package-lock * chore: fixing package json after rebase * feat: improve accessibility * chore: update dependencies * chore: release f36-navbar-5.0.0-alpha.17 * chore: release "5.0.0-alpha.18" * feat: adjust switcher position and style (#2803) Co-authored-by: Kathrin <[email protected]> * feat: alpha.19 * fix: add color coding to environment icon * chore: release v "5.0.0-alpha.20" * fix(navbar): centred env icon (#2804) * feat: alpha.21 * fix: navbar switcher colour (#2809) * feat: alpha.22 * feat: increase hit area for navigation buttons [CFISO-1555] (#2810) * feat: increase hit area for navigation buttons * Update packages/components/navbar/src/utils.styles.ts Co-authored-by: Kristoffer <[email protected]> * refactor: remove unnecessary elements --------- Co-authored-by: Kristoffer <[email protected]> * chore: release navbar-alpha.23 * fix: navbar rendering on website (#2811) * feat: improve responsiveness for navigation [CFISO-1555] (#2805) * refactor: render navbar complete as fullscreen on storybook * feat: add mobile navigation to complete story * refactor: improve responsiveness on navbar * feat: add separate story for responsiveness * chore: update to latest version * feat: hide secondary nav children except search * docs: use only navbar compound elements * feat: prevent overflow of submenu on mobile * feat: prevent header overflow with long space names * feat: avoid overflow on small desktop screens * feat: increase icon size for mobile devices --------- Co-authored-by: Kathrin <[email protected]> * chore: version update * docs: fix story width * chore: new version 5.0.0-alpha.24 * feat(_avbarswitcher): pass aria label prop * feat(navbar): new alpha version --------- Co-authored-by: Rémy Lenoir <[email protected]> Co-authored-by: Bohdan Hutsol <[email protected]> Co-authored-by: Renato Massao Yonamine <[email protected]> Co-authored-by: Renato Massao Yonamine <[email protected]> Co-authored-by: Kristoffer <[email protected]> Co-authored-by: Rémy Lenoir <[email protected]> Co-authored-by: Stephan Leece <[email protected]>

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

This comment was marked as resolved.

Sign in to view

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

This comment was marked as resolved.

Sign in to view

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

This comment was marked as resolved.

Sign in to view

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

massao and others added 4 commits July 8, 2024 12:54

chore: release navbar-alpha.23

82bab56

fix: navbar rendering on website (#2811)

8b7eaca

Lelith force-pushed the feat/navigation_light_mode branch from 57deffa to de25286 Compare July 8, 2024 10:56

vercel bot deployed to Preview July 8, 2024 11:02 View deployment

Lelith added 2 commits July 8, 2024 13:09

chore: version update

3a91c80

docs: fix story width

dcf7c3e

vercel bot deployed to Preview July 8, 2024 11:30 View deployment

Lelith changed the base branch from main to next-next July 8, 2024 11:52

Lelith changed the base branch from next-next to next July 8, 2024 11:54

chore: new version 5.0.0-alpha.24

97d0c94

vercel bot deployed to Preview July 8, 2024 12:14 View deployment

feat(_avbarswitcher): pass aria label prop

2e64893

vercel bot deployed to Preview July 16, 2024 12:52 View deployment

feat(navbar): new alpha version

a72e87a

vercel bot deployed to Preview July 16, 2024 13:45 View deployment

cf-remylenoir force-pushed the next branch from e94f9ce to fbba29a Compare July 17, 2024 13:40

Merge branch 'next' of github.com:contentful/forma-36 into feat/navig…

2e5f9bc

…ation_light_mode

vercel bot deployed to Preview July 17, 2024 14:30 View deployment

Lelith merged commit b26c4f1 into next Jul 17, 2024
8 of 10 checks passed

Lelith deleted the feat/navigation_light_mode branch July 17, 2024 14:58

This was referenced Aug 23, 2024

feat(icons): add BookOpenIcon #2849

Merged

feat(navbar): various navbar spacing tweaks #2855

Merged

This was referenced Sep 12, 2024

chore: fix lockfile #2872

Merged

fix(navbar): unpin avatar dep #2873

Merged

chore: lockfile v3 #2875

Merged

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

Loading

vercel bot commented Apr 25, 2024 •

edited

Loading

github-actions bot commented Apr 25, 2024 •

edited

Loading

damann commented Apr 26, 2024

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

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

[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 Loading

⚠️ No Changeset found

vercel bot commented Apr 25, 2024 • edited Loading

github-actions bot commented Apr 25, 2024 • edited Loading

size-limit report 📦

damann commented Apr 26, 2024

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

changeset-bot bot commented Apr 25, 2024 •

edited

Loading

vercel bot commented Apr 25, 2024 •

edited

Loading

github-actions bot commented Apr 25, 2024 •

edited

Loading