feat(component): improve header overflow handling #4273

alizedebray · 2024-12-13T19:23:13Z

No description provided.

swisspost-bot · 2024-12-13T19:26:26Z

Related Previews

https://preview-4273--swisspost-design-system-next.netlify.app

changeset-bot · 2024-12-16T07:45:08Z

🦋 Changeset detected

Latest commit: 3f751b2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@swisspost/design-system-components	Minor
@swisspost/design-system-components-angular-workspace	Patch
@swisspost/design-system-components-react	Minor
@swisspost/design-system-documentation	Patch
@swisspost/design-system-components-angular	Minor
@swisspost/design-system-nextjs-integration	Patch
@swisspost/design-system-styles	Minor
@swisspost/design-system-tokens	Minor
@swisspost/design-system-intranet-header	Minor
@swisspost/design-system-icons	Minor
@swisspost/design-system-migrations	Minor
@swisspost/design-system-styles-primeng	Minor
@swisspost/internet-header	Patch
@swisspost/design-system-intranet-header-workspace	Patch
@swisspost/design-system-styles-primeng-workspace	Patch
@swisspost/design-system-intranet-header-showcase	Patch

Not sure what this means? Click here to learn what changesets are.

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

This reverts commit 8f8cdb6.

gfellerph

Generally looks nice, but noticed something strange if one element has a very long name

oliverschuerch

There is no changeset file.

packages/components/src/components/post-header/post-header.tsx

packages/components/src/components/post-mainnavigation/post-mainnavigation.scss

oliverschuerch · 2024-12-19T10:40:54Z

packages/components/src/components/post-mainnavigation/post-mainnavigation.scss

+        background: var(--post-core-color-brand-white);
+        padding: var(--post-core-dimension-16);
+        box-shadow: var(--post-core-elevation-5);
+        line-height: var(--post-core-line-height-100);


I once more recommend: Never use core- or semantic-tokens, but instead use hardcoded values for now.

First time with me!
Can we discuss this? Currently the whole header is using semantic tokens and I would like to understand why you prefer raw values. Also, I would rather handle this in a separate ticket as it would involve a lot of changes not related to this PR.

Yea, I didn't mean I told you this already in particular, but I keep telling it to everyone that uses something else than component tokens 😉
I've added a DEV Discussion in the daily chat.

Conclusion from our discussion during the todays daily meeting: Avoid using core tokens, instead use sass varialbes (or if avilable use component tokens).

By the way, most of these tokens could probably being replaced with utility tokens. Which would be ok for me.

@use '@swisspost/design-system-styles/core' as post; @use '@swisspost/design-system-styles/functions/tokens'; @use '@swisspost/design-system-styles/mixins/utilities'; button { background: post.$white; padding: tokens.get('utility.padding.16', utilities.$post-spacing); box-shadow: tokens.get('utility.elevation.500', utilities.$post-elevation); line-height: tokens.get('utility.line-height.1', utilities.$ost-typo); }

packages/components/src/components/post-mainnavigation/post-mainnavigation.scss

packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx

gfellerph

Little hard to show it but if I add a lot of links, I can't scroll to the end of the list, the two megadropdowns are hidden and it won't scroll any further.

oliverschuerch · 2025-01-27T07:20:13Z

packages/components/src/components/post-mainnavigation/post-mainnavigation.scss

+        background: var(--post-core-color-brand-white);
+        padding: var(--post-core-dimension-16);
+        box-shadow: var(--post-core-elevation-5);
+        line-height: var(--post-core-line-height-100);


Yea, I didn't mean I told you this already in particular, but I keep telling it to everyone that uses something else than component tokens 😉
I've added a DEV Discussion in the daily chat.

oliverschuerch · 2025-01-27T08:23:19Z

packages/components/src/components/post-mainnavigation/post-mainnavigation.scss

+        background: var(--post-core-color-brand-white);
+        padding: var(--post-core-dimension-16);
+        box-shadow: var(--post-core-elevation-5);
+        line-height: var(--post-core-line-height-100);


Conclusion from our discussion during the todays daily meeting: Avoid using core tokens, instead use sass varialbes (or if avilable use component tokens).

alizedebray · 2025-01-27T08:55:41Z

@oliverschuerch can you also open a ticket for turning the CSS variables into Sass variables? They are used everywhere in the header, not particularly in this PR. It would be easier to do everything in one go!

oliverschuerch · 2025-01-27T11:12:28Z

@oliverschuerch can you also open a ticket for turning the CSS variables into Sass variables? They are used everywhere in the header, not particularly in this PR. It would be easier to do everything in one go!

There you go: #4530

oliverschuerch · 2025-01-27T11:15:29Z

packages/components/src/components/post-mainnavigation/post-mainnavigation.scss

+        background: var(--post-core-color-brand-white);
+        padding: var(--post-core-dimension-16);
+        box-shadow: var(--post-core-elevation-5);
+        line-height: var(--post-core-line-height-100);


By the way, most of these tokens could probably being replaced with utility tokens. Which would be ok for me.

@use '@swisspost/design-system-styles/core' as post; @use '@swisspost/design-system-styles/functions/tokens'; @use '@swisspost/design-system-styles/mixins/utilities'; button { background: post.$white; padding: tokens.get('utility.padding.16', utilities.$post-spacing); box-shadow: tokens.get('utility.elevation.500', utilities.$post-elevation); line-height: tokens.get('utility.line-height.1', utilities.$ost-typo); }

alizedebray · 2025-01-27T14:18:09Z

@oliverschuerch That would be the best of both worlds! I added a link to your comment in the ticket you created.

oliverschuerch

PR should contain a changeset

gfellerph

@alizedebray we should add extensive tests for this feature because the logic is quite complex. We can do this in a separate ticket.

sonarqubecloud · 2025-01-30T08:08:57Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@leagrdv

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. ⚠️

⚠️

⚠️ `main` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `main`. ⚠️

⚠️

⚠️ # Releases ## @swisspost/[email protected] ### Major Changes - Removed Bootstrap shadow utility classes from the Design System, as the elevation classes are replacing them. (by [@leagrdv](https://github.com/leagrdv) with [#4361](#4361)) - Renamed elevation utility classes and SCSS variables to allow for more variants in the future. (by [@leagrdv](https://github.com/leagrdv) with [#4361](#4361)) ### Minor Changes - Removed `post-popovercontainer` from the `post-megadropdown` component and added desktop animations with new slide-down and slide-up effects. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4421](#4421)) ### Patch Changes - Made the following components hidden until fully loaded to prevent flickering: `post-avatar`, `post-banner`, `post-breadcrumb`, `post-breadcrumb-item`, `post-closebutton`, `post-collapsible-trigger`, `post-footer`, `post-header`, `post-language-option`, `post-language-switch`, `post-mainnavigation`, `post-megadropdown`, `post-megadropdown-trigger`, `post-menu`, `post-menu-item`, and `post-menu-trigger`. (by [@schaertim](https://github.com/schaertim) with [#4544](#4544)) - Fixed z-indexes for header components to ensure proper stacking order. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4421](#4421)) - Updated the styles for `.focus-ring` and added documentation. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4543](#4543)) ## @swisspost/[email protected] ### Minor Changes - Improved main navigation overflow display. (by [@alizedebray](https://github.com/alizedebray) with [#4273](#4273)) - Removed `post-popovercontainer` from the `post-megadropdown` component and added desktop animations with new slide-down and slide-up effects. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4421](#4421)) ### Patch Changes - Fixed header mobile menu behavior by trapping the focus within it when opened as well as making it scrollable. (by [@leagrdv](https://github.com/leagrdv) with [#4395](#4395)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ## @swisspost/[email protected] ## @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Removed Bootstrap shadow utility classes from the Design System, as the elevation classes are replacing them. (by [@leagrdv](https://github.com/leagrdv) with [#4361](#4361)) - Renamed elevation utility classes and SCSS variables to allow for more variants in the future. (by [@leagrdv](https://github.com/leagrdv) with [#4361](#4361)) ### Minor Changes - Updated the styles for `.focus-ring` and added documentation. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4543](#4543)) - Added duplicate icons in icons health report. (by [@myrta2302](https://github.com/myrta2302) with [#4528](#4528)) ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Replaced `sessionData` and `address` properties in the sessionStorage item `klp.widget.state`. If you're looking for this info, contact the Swiss Post Design System Team! (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4553](#4553)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@leagrdv

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. ⚠️

⚠️

⚠️ `main` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `main`. ⚠️

⚠️

⚠️ # Releases ## @swisspost/[email protected] ### Major Changes - Removed the `.lh-base` utility class. (by [@leagrdv](https://github.com/leagrdv) with [#4360](#4360)) - Removed Bootstrap shadow utility classes from the Design System, as the elevation classes are replacing them. (by [@leagrdv](https://github.com/leagrdv) with [#4361](#4361)) - Renamed elevation utility classes and SCSS variables to allow for more variants in the future. (by [@leagrdv](https://github.com/leagrdv) with [#4361](#4361)) ### Minor Changes - Removed `post-popovercontainer` from the `post-megadropdown` component and added desktop animations with new slide-down and slide-up effects. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4421](#4421)) - Removed deprecated `$displayX-weight` scss variables and font-weight light (`.light`) utilities as the new Swiss Post font does not have a 300 weight version. (by [@leagrdv](https://github.com/leagrdv) with [#4531](#4531)) ### Patch Changes - Made the following components hidden until fully loaded to prevent flickering: `post-avatar`, `post-banner`, `post-breadcrumb`, `post-breadcrumb-item`, `post-closebutton`, `post-collapsible-trigger`, `post-footer`, `post-header`, `post-language-option`, `post-language-switch`, `post-mainnavigation`, `post-megadropdown`, `post-megadropdown-trigger`, `post-menu`, `post-menu-item`, and `post-menu-trigger`. (by [@schaertim](https://github.com/schaertim) with [#4544](#4544)) - Fixed z-indexes for header components to ensure proper stacking order. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4421](#4421)) - Updated the styles for `.focus-ring` and added documentation. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4543](#4543)) - Fixed high contrast mode hover and focus styles for `post-avatar` component in anchor and button contexts. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4338](#4338)) - Internalized Bootstrap text utilities into the Design System. (by [@leagrdv](https://github.com/leagrdv) with [#4360](#4360)) ## @swisspost/[email protected] ### Minor Changes - Improved main navigation overflow display. (by [@alizedebray](https://github.com/alizedebray) with [#4273](#4273)) - Removed `post-popovercontainer` from the `post-megadropdown` component and added desktop animations with new slide-down and slide-up effects. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4421](#4421)) - Added the `post-linkarea` component. (by [@veyaromain](https://github.com/veyaromain) with [#4030](#4030)) ### Patch Changes - Removed nav for `post-header` component causing blank space on scroll for screens <1025px. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4532](#4532)) - Added z-index to the `post-header` component to display it on top of other contents. (by [@leagrdv](https://github.com/leagrdv) with [#4367](#4367)) - Fixed header mobile menu behavior by trapping the focus within it when opened as well as making it scrollable. (by [@leagrdv](https://github.com/leagrdv) with [#4395](#4395)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Added a transform function to avoid unitless zero values for specific token types (like `dimension`, etc.), which allows us to use these tokens also in css `calc()` functions. Because `<number-token>`s are always interpreted as `<number>`s or `<integer>`s, "unitless 0" `<length>`s aren’t supported in calc(). Source: <https://drafts.csswg.org/css-values-3/#calc-type-checking> (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4534](#4534)) ## @swisspost/[email protected] ## @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Removed Bootstrap shadow utility classes from the Design System, as the elevation classes are replacing them. (by [@leagrdv](https://github.com/leagrdv) with [#4361](#4361)) - Renamed elevation utility classes and SCSS variables to allow for more variants in the future. (by [@leagrdv](https://github.com/leagrdv) with [#4361](#4361)) ### Minor Changes - Removed deprecated `$displayX-weight` scss variables and font-weight light (`.light`) utilities as the new Swiss Post font does not have a 300 weight version. (by [@leagrdv](https://github.com/leagrdv) with [#4531](#4531)) - Updated the styles for `.focus-ring` and added documentation. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4543](#4543)) - Added the `post-linkarea` component. (by [@veyaromain](https://github.com/veyaromain) with [#4030](#4030)) - Added duplicate icons in icons health report. (by [@myrta2302](https://github.com/myrta2302) with [#4528](#4528)) ### Patch Changes - Fixed the sizing of the technology and supported browser images on the introduction page of the documentation. (by [@schaertim](https://github.com/schaertim) with [#4549](#4549)) - Internalized Bootstrap text utilities into the Design System. (by [@leagrdv](https://github.com/leagrdv) with [#4360](#4360)) - Added fake content on the header preview to show the sticky behaviour. (by [@leagrdv](https://github.com/leagrdv) with [#4367](#4367)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Replaced `sessionData` and `address` properties in the sessionStorage item `klp.widget.state`. If you're looking for this info, contact the Swiss Post Design System Team! (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4553](#4553)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

feat(component): improve header overflow handling

78312ed

alizedebray requested a review from a team as a code owner December 13, 2024 19:23

alizedebray requested a review from oliverschuerch December 13, 2024 19:23

alizedebray linked an issue Dec 13, 2024 that may be closed by this pull request

Main navigation overflow #4250

Closed

Update post-header.scss

77f14c9

alizedebray requested a review from gfellerph December 16, 2024 07:45

alizedebray marked this pull request as draft December 16, 2024 09:21

alizedebray added 3 commits December 16, 2024 10:31

Update post-header.scss

8f8cdb6

Revert "Update post-header.scss"

4e17d71

This reverts commit 8f8cdb6.

Update preview.scss

ba0bee4

alizedebray marked this pull request as ready for review December 16, 2024 10:01

alizedebray requested a review from a team as a code owner December 16, 2024 10:01

alizedebray added 3 commits December 16, 2024 12:45

Update post-mainnavigation.tsx

359b804

Update post-mainnavigation.scss

977b06b

Add generated files

5ad0a93

gfellerph requested changes Dec 18, 2024

View reviewed changes

Fix main navigation with long text

02325d3

alizedebray requested a review from gfellerph December 19, 2024 11:00

oliverschuerch requested changes Dec 19, 2024

View reviewed changes

alizedebray added 2 commits January 7, 2025 17:20

Merge branch 'main' into 4250-main-navigation-overflow

001caa6

apply change requests

d96b366

gfellerph removed their request for review January 8, 2025 15:44

gfellerph requested changes Jan 8, 2025

View reviewed changes

alizedebray added 2 commits January 24, 2025 14:20

Merge branch 'main' into 4250-main-navigation-overflow

8d87acc

Fix navigation items selector

066dfa9

alizedebray requested review from oliverschuerch and gfellerph January 24, 2025 15:12

oliverschuerch requested changes Jan 27, 2025

View reviewed changes

alizedebray requested a review from oliverschuerch January 27, 2025 08:53

oliverschuerch requested changes Jan 27, 2025

View reviewed changes

alizedebray mentioned this pull request Jan 27, 2025

Remove core tokens from the header components #4530

Closed

alizedebray requested a review from oliverschuerch January 27, 2025 14:19

oliverschuerch requested changes Jan 27, 2025

View reviewed changes

Add changeset

af675d8

alizedebray requested a review from oliverschuerch January 28, 2025 09:47

Merge branch 'main' into 4250-main-navigation-overflow

4128e97

oliverschuerch approved these changes Jan 28, 2025

View reviewed changes

gfellerph approved these changes Jan 29, 2025

View reviewed changes

gfellerph reviewed Jan 29, 2025

View reviewed changes

Merge branch 'main' into 4250-main-navigation-overflow

3f751b2

alizedebray merged commit 395db6b into main Jan 30, 2025

alizedebray deleted the 4250-main-navigation-overflow branch January 30, 2025 08:07

alizedebray mentioned this pull request Jan 30, 2025

Add tests for header overflow #4557

Open

5 tasks

swisspost-bot mentioned this pull request Jan 30, 2025

chore(changesets): 🦋📦 publish packages (main) (next) #4547

Merged

swisspost-bot mentioned this pull request Feb 4, 2025

chore(changesets): 🦋📦 publish packages (main) (next) #4586

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(component): improve header overflow handling #4273

feat(component): improve header overflow handling #4273

alizedebray commented Dec 13, 2024

swisspost-bot commented Dec 13, 2024 •

edited

Loading

changeset-bot bot commented Dec 16, 2024 •

edited

Loading

gfellerph left a comment

oliverschuerch left a comment

oliverschuerch Dec 19, 2024

alizedebray Jan 7, 2025

oliverschuerch Jan 27, 2025

oliverschuerch Jan 27, 2025

oliverschuerch Jan 27, 2025

gfellerph left a comment

oliverschuerch Jan 27, 2025

oliverschuerch Jan 27, 2025

alizedebray commented Jan 27, 2025

oliverschuerch commented Jan 27, 2025 •

edited

Loading

oliverschuerch Jan 27, 2025

alizedebray commented Jan 27, 2025 •

edited

Loading

oliverschuerch left a comment

gfellerph left a comment

sonarqubecloud bot commented Jan 30, 2025

feat(component): improve header overflow handling #4273

feat(component): improve header overflow handling #4273

Conversation

alizedebray commented Dec 13, 2024

swisspost-bot commented Dec 13, 2024 • edited Loading

changeset-bot bot commented Dec 16, 2024 • edited Loading

🦋 Changeset detected

gfellerph left a comment

Choose a reason for hiding this comment

oliverschuerch left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gfellerph left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alizedebray commented Jan 27, 2025

oliverschuerch commented Jan 27, 2025 • edited Loading

Choose a reason for hiding this comment

alizedebray commented Jan 27, 2025 • edited Loading

oliverschuerch left a comment

Choose a reason for hiding this comment

gfellerph left a comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Jan 30, 2025

Quality Gate passed

swisspost-bot commented Dec 13, 2024 •

edited

Loading

changeset-bot bot commented Dec 16, 2024 •

edited

Loading

oliverschuerch commented Jan 27, 2025 •

edited

Loading

alizedebray commented Jan 27, 2025 •

edited

Loading