feat: improve responsiveness for navigation [CFISO-1555]

[massao]

Purpose of PR

• Improve responsiveness for navigation

Mobile S:

Mobile Medium

Desktop S

Desktop M

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
forma-36	✅ Ready (Inspect)	Visit Preview	Jul 4, 2024 8:37am

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 92b6ffff6f07b50f06f68c4a46dca09f0441dd69

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

[cf-remylenoir]

Could you please add a story for the mobile view or see if we can fix the Storybook viewport feature? I tried using the Storybook viewport feature to get the responsiveness but it does not seem to work 🤔

[massao]

Could you please add a story for the mobile view or see if we can fix the Storybook viewport feature? I tried using the Storybook viewport feature to get the responsiveness but it does not seem to work 🤔

Added a With Responsiveness Story to make it easier, and not have to change all the others

[damann]

Once the secondary navigation icons are hidden:

• Change icon sizes to medium
• Max out the space available to the Space switcher to show as much of the label as possible, with a minimum distance of 16px to the Menu button

Not specified in the design yet:

• We should also increase the tap target of the menu to make them touch-friendly
• Add a divider line between General settings and Space settings

[Lelith]

@denkristoffer

• i double checked the designs and the icons are there always only 16x16. On all elements the clickable area is increased with the "increaseHitArea) utility function massao added
• minimum gap is added but as we can not use container based queries (because of our outdated emotion version) it's super hard to find the sweet spot of width for the switcher.

[denkristoffer]

* minimum gap is added but as we can not use container based queries (because of our outdated emotion version) it's super hard to find the sweet spot of width for the switcher.

@Lelith Just guessing but if something is not supported in emotion 10 it would probably be due to the version of stylis. Maybe we can force it to the latest version and container queries could work. Do you want to try it?

Looks like we need to use stylis v4.1.3 or newer https://github.com/thysultan/stylis/pull/304

[cf-remylenoir]

* minimum gap is added but as we can not use container based queries (because of our outdated emotion version) it's super hard to find the sweet spot of width for the switcher.

@Lelith Just guessing but if something is not supported in emotion 10 it would probably be due to the version of stylis. Maybe we can force it to the latest version and container queries could work. Do you want to try it?

Looks like we need to use stylis v4.1.3 or newer thysultan/stylis#304

Actually yes, that could work

[Lelith]

@denkristoffer @cf-remylenoir we can try it for sure, i am just at a loss where all the configuration and packages are defined for it, they are not noted in any of the package.json files for forma?

[denkristoffer]

@denkristoffer @cf-remylenoir we can try it for sure, i am just at a loss where all the configuration and packages are defined for it, they are not noted in any of the package.json files for forma?

We have to add an "overrides" key in package.json. Docs: https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides

[Lelith]

@cf-remylenoir @denkristoffer synced with Daniel and we decided to increase all icon sizes for the mobile views. had to do some overwrites for that as we do not have media queries in JS and the icon sizes are not a token, i had to handwrite them. Should we add these sizes also as tokens?

[damann]

@cf-remylenoir @denkristoffer synced with Daniel and we decided to increase all icon sizes for the mobile views. had to do some overwrites for that as we do not have media queries in JS and the icon sizes are not a token, i had to handwrite them. Should we add these sizes also as tokens?

Does that mean they don't use Icon size="medium"?

[Lelith]

@damann the icon size properties are not setup responsive, they have a single fixed size. If we want to support more responsive designs in the future, we should establish a pattern for Icon Sizes soon