Decathlon / vitamin-web

Decathlon Design System UI components for web applications
https://decathlon.github.io/vitamin-web
Apache License 2.0
279 stars 77 forks source link

feat(`@vtmn/css`, `@vtmn/svelte`, `@vtmn/react`, `@vtmn/vue`): rework `VtmnNavbarLink` for SSR #1436

Closed Tlahey closed 1 year ago

Tlahey commented 1 year ago

BREAKING CHANGE: 'VtmnNavbarLink' remove properties label and showLabel, replaced by a span slot

Changes description

Move the Label property into slot in order to apply a sr-only with breakpoints.

Context

With SSR, it is not possible to detect the width of the device. So, in order to avoid flikering effects, we have to set the label on a slot in order to apply style show/hidden on it.

How it looks

image image image image

On the navbar image image

Checklist

Does this introduce a breaking change?

Other information

Rework the css part and enhancer the CSS in order to match the figma with the VtmnBadge.

Current : image

Target : image image