sbb-design-systems / lyne-components

Components for Lyne Design System
https://lyne-storybook.app.sbb.ch
MIT License
45 stars 13 forks source link

[Bug]: Wrong top-padding in li-elment if multiple sbb-links are used. #1679

Closed mcilurzo closed 1 year ago

mcilurzo commented 1 year ago

Preflight Checklist

Bug type

Functionality

It affects the following packages

Components

Which version of Lyne Components are you using

0.28.4

Operating system

macOS

Browser / Browser version

Safari, Firefox, Chrome

Input mode

Mouse/Keyboard

Additional settings

No response

What happened?

When I put multiple sbb-links into one li-element, the top padding seems to be incorrect (from the second element on).

Example:

<ul class="sbb-list">
<li><sbb-link variant="inline" text-size="m" type="button" target="_blank" href="https://www.figma.com/file/UQBd7cHKav0hr9oXYp7opJ/SBB-Icons?node-id=372%3A0">als Figma Library</sbb-link></li>
<li><sbb-link variant="inline" text-size="m" type="button" target="_blank" href="https://github.com/sbb-design-systems/sbb-icons/archive/refs/heads/main.zip">als Download auf Github</sbb-link></li>
<li>Als CDN: <sbb-link variant="inline" text-size="m" type="button" target="_blank" href="https://d1s1onrtynjaa8.cloudfront.net/icons/index.json">Json mit Meta-Daten</sbb-link> <sbb-link variant="inline" text-size="m" type="button" target="_blank" href="https://d1s1onrtynjaa8.cloudfront.net/icons/bottle-apple-small.svg">Beispiel</sbb-link></li>
<li><sbb-link variant="inline" text-size="m" type="button" target="_blank" href="https://lyne-storybook.app.sbb.ch/?path=/docs/components-sbb-icon--default">als Webcomponent (siehe Lyne)</sbb-link></li>
</ul>

Steps to reproduce the issue

See example above.

Relevant log output

No response

jeripeierSBB commented 1 year ago

It's the following selector interfering with this situation

       // P has to be redefined to be more specific
        > :is(p, *) + * {
          margin-block-start: var(--sbb-spacing-responsive-xxxs);
        }