Skip to content

Commit 50a5181

Browse files
bucknattNattaya Buckleagrdv
authored
chore(doc): add padding in version selector elements on the documentation (#6698)
## 📄 Description For better readability, there is a padding added around version-selectors on v10. ## 🚀 Demo Padding added for top and bottom (8px), and right and left (12px) to keep it consistent to v9 of the Design System Webpage. <img width="1907" height="603" alt="image" src="https://github.com/user-attachments/assets/274ca6c5-2ecd-4d48-a169-d491a24a655a" /> --- ## 🔮 Design review - [ ] Design review done - [x] No design review needed --------- Co-authored-by: Nattaya Buck <[email protected]> Co-authored-by: Lea <[email protected]>
1 parent fb37ee3 commit 50a5181

File tree

2 files changed

+9
-8
lines changed

2 files changed

+9
-8
lines changed

.changeset/some-parts-raise.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@swisspost/design-system-documentation': patch
3+
---
4+
5+
Added padding in the version selector for better readability.

packages/documentation/.storybook/addons/addons.scss

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
@use '@swisspost/design-system-styles/core' as post;
2-
@use '@swisspost/design-system-styles/functions/tokens' as tokens;
3-
@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
4-
5-
tokens.$default-map: utilities.$post-spacing;
62

73
.addon-label {
84
color: var(--post-current-fg) !important;
@@ -12,19 +8,19 @@ tokens.$default-map: utilities.$post-spacing;
128
min-width: 12rem;
139
display: flex;
1410
flex-flow: column nowrap;
15-
gap: tokens.get('utility-gap-2');
11+
gap: 0.125rem;
1612
position: absolute;
1713
top: -5px;
1814
right: 0;
19-
padding: tokens.get('utility-gap-8');
15+
padding: 0.5rem;
2016
background-color: post.$white;
2117
border: post.$border-width solid post.$border-color;
2218
border-radius: post.$border-radius;
2319
font-size: 0.875rem;
2420

2521
.addon-dropdown__item {
2622
display: block;
27-
padding: tokens.get('utility-gap-8') tokens.get('utility-gap-12');
23+
padding: 0.5rem 0.75rem;
2824
border-radius: post.$border-radius-sm;
2925
text-decoration: none;
3026
color: var(--post-current-fg) !important;
@@ -42,6 +38,6 @@ tokens.$default-map: utilities.$post-spacing;
4238
.addon-button {
4339
post-icon {
4440
font-size: 1.25rem;
45-
margin-inline-end: tokens.get('utility-gap-2');
41+
margin-inline-end: 0.125rem;
4642
}
4743
}

0 commit comments

Comments
 (0)