Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(styles, documentation): remove usage of deprecated utility sizing classes #4343

Merged
merged 6 commits into from
Dec 20, 2024
Merged

chore(styles, documentation): remove usage of deprecated utility sizing classes #4343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e53a882
remove all usage of size (hair, huge, etc.) variables
leagrdv Dec 18, 2024
5b54cca
clean up + changesets
leagrdv Dec 19, 2024
99fc584
Merge branch 'main' into 4173-remove-deprecated-size-variables-size-h…
leagrdv Dec 19, 2024
f67d005
Merge branch 'main' into 4173-remove-deprecated-size-variables-size-h…
leagrdv Dec 19, 2024
34403a7
try and fix popover test
leagrdv Dec 19, 2024
1306fc5
Update packages/components/cypress/fixtures/post-popover.test.html
leagrdv Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/fresh-files-crash.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@swisspost/design-system-documentation': patch
'@swisspost/design-system-components': patch
'@swisspost/design-system-styles': patch
---

Removed all usage of deprecated utility sizing classes.
5 changes: 5 additions & 0 deletions .changeset/stale-guests-love.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-styles': major
---

Removed deprecated utility sizing and line-height classes as well as `responsive-size`, `generate-utility-class` and all `bezel-*` mixins.
4 changes: 4 additions & 0 deletions packages/components/cypress/fixtures/post-popover.test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="../../node_modules/@swisspost/design-system-styles/post-external.css"
rel="stylesheet"
/>
<script src="../../dist/post-components/post-components.esm.js" type="module"></script>
</head>
<body>
Expand Down
36 changes: 20 additions & 16 deletions packages/components/src/components/post-card-control/post-card-control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
@use '@swisspost/design-system-styles/components/form-check';
@use '@swisspost/design-system-styles/components/checkbox';
@use '@swisspost/design-system-styles/components/radio-button';
@use '@swisspost/design-system-styles/tokens/utilities';
@use '@swisspost/design-system-styles/functions/tokens';

tokens.$default-map: utilities.$post-spacing;

/*
* There are a whole bunch of !important statements in this file.
Expand All @@ -22,7 +26,7 @@
:host-context(fieldset) {
&:host(:not(:last-child)) {
.card-control {
margin-bottom: post.$size-regular;
margin-bottom: tokens.get('utility-gap-16');
}
}
}
Expand All @@ -38,18 +42,18 @@
display: grid;
grid-template: 'input label icon' 'input content content' / min-content auto min-content;
align-items: center;
gap: 0 post.$size-mini;
gap: 0 tokens.get('utility-gap-8');
margin: 0;
padding: post.$size-regular;
padding: tokens.get('utility-gap-12');
background-color: var(--post-card-control-bg);
border: post.$size-line solid var(--post-card-control-border-color);
border: tokens.get('utility-gap-2') solid var(--post-card-control-border-color);
border-radius: post.$border-radius;
color: var(--post-card-control-color) !important;
cursor: pointer;

.card-control--input {
grid-area: input;
margin: post.$size-micro 0;
margin: tokens.get('utility-gap-4') 0;
background-color: var(--post-card-control-input-bg) !important;
border-color: var(--post-card-control-input-border-color) !important;
color: var(--post-card-control-input-border-color) !important;
Expand Down Expand Up @@ -79,7 +83,7 @@

.card-control--label {
grid-area: label;
margin: post.$size-micro 0;
margin: tokens.get('utility-gap-4') 0;
padding: 0 !important;
color: inherit !important;
pointer-events: none;
Expand All @@ -101,8 +105,8 @@

.card-control--icon {
grid-area: icon;
width: post.$size-big;
height: post.$size-big;
width: tokens.get('utility-gap-32');
height: tokens.get('utility-gap-32');
pointer-events: none;

> slot {
Expand Down Expand Up @@ -195,11 +199,11 @@
--post-card-control-input-border-color: FieldText;
--post-card-control-input-bg: Field;

outline: post.$size-line solid Field;
outline-offset: post.$size-line * -2;
outline: tokens.get('utility-gap-2') solid Field;
outline-offset: calc(tokens.get('utility-gap-2') * -2);

.card-control--input {
outline: post.$size-line solid Field;
outline: tokens.get('utility-gap-2') solid Field;

// selector needed to override the .form-check styles
&[type] {
Expand Down Expand Up @@ -264,7 +268,7 @@
display: block;
content: '';
position: absolute;
inset: post.$size-line;
inset: tokens.get('utility-gap-2');
background-color: SelectedItem;
z-index: 1;
}
Expand Down Expand Up @@ -296,8 +300,8 @@
display: block;
content: '';
position: absolute;
inset: post.$size-line;
border-radius: post.$size-line * 0.5;
inset: tokens.get('utility-gap-2');
border-radius: calc(tokens.get('utility-gap-2') * 0.5);
background-color: SelectedItem;
}

Expand All @@ -306,7 +310,7 @@
}

.card-control--input {
outline: post.$size-line solid Field;
outline: tokens.get('utility-gap-2') solid Field;
}
}
}
Expand Down Expand Up @@ -432,7 +436,7 @@

:host([data-context*='fieldset']:not(:last-child)) {
.card-control {
margin-bottom: post.$size-regular;
margin-bottom: tokens.get('utility-gap-16');
}
}

Expand Down
4 changes: 3 additions & 1 deletion packages/components/src/components/post-rating/post-rating.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
@use '@swisspost/design-system-styles/core' as post;
@use '@swisspost/design-system-styles/tokens/utilities';
@use '@swisspost/design-system-styles/functions/tokens';

:host {
display: inline-block;
Expand All @@ -8,7 +10,7 @@
display: flex;
flex-wrap: wrap;
overflow: hidden;
margin: 0 (-(post.$size-micro));
margin: 0 calc(tokens.get('utility-gap-4', utilities.$post-spacing) * -1);
border-radius: post.$border-radius;

.star {
Expand Down
10 changes: 7 additions & 3 deletions packages/components/src/components/post-tooltip/post-tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,15 @@
@use '@swisspost/design-system-styles/variables/color';
@use '@swisspost/design-system-styles/functions/color' as color-fn;
@use '@swisspost/design-system-styles/variables/spacing';
@use '@swisspost/design-system-styles/tokens/utilities';
@use '@swisspost/design-system-styles/functions/tokens';

tokens.$default-map: utilities.$post-spacing;

post-popovercontainer {
padding: spacing.$size-micro spacing.$size-mini;
max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini;
min-height: spacing.$size-regular;
padding: tokens.get('utility-gap-4') tokens.get('utility-gap-8');
max-width: calc(2 * tokens.get('utility-gap-112') - tokens.get('utility-gap-8'));
min-height: tokens.get('utility-gap-16');

// Creates a safe space around the popovercontainer for save pointer crossing between trigger and tooltip
&[arrow] {
Expand Down
12 changes: 8 additions & 4 deletions packages/documentation/.storybook/addons/addons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
@use '@swisspost/design-system-styles/core' as post;
@use '@swisspost/design-system-styles/functions/tokens' as tokens;
@use '@swisspost/design-system-styles/tokens/utilities' as utilities;

tokens.$default-map: utilities.$post-spacing;

.addon-label {
color: post.$body-color !important;
Expand All @@ -8,19 +12,19 @@
min-width: 12rem;
display: flex;
flex-flow: column nowrap;
gap: post.$size-line;
gap: tokens.get('utility-gap-2');
position: absolute;
top: -5px;
right: 0;
padding: post.$size-mini;
padding: tokens.get('utility-gap-8');
background-color: post.$white;
border: post.$border-width solid post.$border-color;
border-radius: post.$border-radius;
font-size: post.$font-size-sm;

.addon-dropdown__item {
display: block;
padding: post.$size-mini post.$size-small-regular;
padding: tokens.get('utility-gap-8') tokens.get('utility-gap-12');
border-radius: post.$border-radius-sm;
text-decoration: none;
color: post.$body-color !important;
Expand All @@ -38,6 +42,6 @@
.addon-button {
post-icon {
font-size: post.$font-size-20;
margin-inline-end: post.$size-line;
margin-inline-end: tokens.get('utility-gap-2');
}
}
8 changes: 6 additions & 2 deletions packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
@use '@swisspost/design-system-styles/core' as post;
@use '@swisspost/design-system-styles/functions/tokens' as tokens;
@use '@swisspost/design-system-styles/tokens/utilities' as utilities;

tokens.$default-map: utilities.$post-spacing;

.version-switcher__loading {
display: flex;
Expand All @@ -17,12 +21,12 @@

.item__deps {
display: flex;
gap: post.$size-small-regular;
gap: tokens.get('utility-gap-12');
}

.deps_dep {
display: flex;
gap: post.$size-line;
gap: tokens.get('utility-gap-2');
font-size: 85%;
}

Expand Down
26 changes: 15 additions & 11 deletions packages/documentation/.storybook/styles/components/blocks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
@use '@swisspost/design-system-styles/core' as post;
@use '@swisspost/design-system-styles/elements/body';
@use '@swisspost/design-system-styles/functions/tokens';
@use '@swisspost/design-system-styles/tokens/utilities';

tokens.$default-map: utilities.$post-spacing;

#storybook-docs {
.sbdocs-preview {
border-color: post.$border-color;
border-radius: post.$size-mini;
border-radius: tokens.get('utility-gap-8');
box-shadow: none;
}

.docblock-argstable {
border-radius: post.$size-mini;
border-radius: tokens.get('utility-gap-8');

tbody {
position: relative;
Expand All @@ -22,7 +26,7 @@
position: absolute;
inset: 0;
border: post.$border-width solid post.$border-color;
border-radius: post.$size-mini;
border-radius: tokens.get('utility-gap-8');
z-index: -1;
}

Expand All @@ -46,33 +50,33 @@
background-clip: padding-box !important;

&:first-child {
border-inline-start: post.$size-line solid transparent;
border-inline-start: tokens.get('utility-gap-2') solid transparent;
}

&:last-child {
border-inline-end: post.$size-line solid transparent;
border-inline-end: tokens.get('utility-gap-2') solid transparent;
}
}

&:first-child > td {
border-block-start: post.$size-hair solid transparent;
border-block-start: tokens.get('utility-gap-1') solid transparent;

&:first-child {
border-start-start-radius: post.$size-mini;
border-start-start-radius: tokens.get('utility-gap-8');
}

&:last-child {
border-start-end-radius: post.$size-mini;
border-start-end-radius: tokens.get('utility-gap-8');
}
}

&:last-child > td {
&:first-child {
border-end-start-radius: post.$size-mini;
border-end-start-radius: tokens.get('utility-gap-8');
}

&:last-child {
border-end-end-radius: post.$size-mini;
border-end-end-radius: tokens.get('utility-gap-8');
}
}
}
Expand All @@ -81,7 +85,7 @@
}

.docblock-source {
border-radius: post.$size-mini;
border-radius: tokens.get('utility-gap-8');
box-shadow: none;
}
}
10 changes: 7 additions & 3 deletions packages/documentation/.storybook/styles/components/tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
@use '@swisspost/design-system-styles/core' as post;
@use '../mixins';
@use '@swisspost/design-system-styles/functions/tokens';
@use '@swisspost/design-system-styles/tokens/utilities';

tokens.$default-map: utilities.$post-spacing;

@include mixins.style-docs-only-guard('post-tabs') {
&::part(tabs) {
Expand Down Expand Up @@ -30,7 +34,7 @@
}

&:where(.sb-tabs-lg, :has(post-tab-panel > .sbdocs)) {
margin-top: post.$size-big;
margin-top: tokens.get('utility-gap-32');

&::part(tabs) {
&::before {
Expand All @@ -57,9 +61,9 @@
display: block;
content: '';
position: absolute;
top: calc(100% + #{post.$size-regular});
top: calc(100% + tokens.get('utility-gap-16'));
left: 0;
right: post.$size-mini * -1;
right: calc(tokens.get('utility-gap-8') * -1);
border-top: post.$border-width dashed post.$border-color;
}
}
Expand Down
8 changes: 4 additions & 4 deletions packages/documentation/.storybook/styles/preview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
@use '@swisspost/design-system-styles/core.scss' as post;
@use '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css';
@use './components';
@use '@swisspost/design-system-styles/functions/tokens' as tokens;
@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
@use '@swisspost/design-system-styles/functions/tokens';
@use '@swisspost/design-system-styles/tokens/utilities';

tokens.$default-map: utilities.$post-color;

Expand Down Expand Up @@ -91,10 +91,10 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier
display: flex;
flex-wrap: wrap;
align-items: center;
gap: post.$size-mini;
gap: tokens.get('utility-gap-8', utilities.$post-spacing);
}
.docs-title {
margin-bottom: post.$size-mini;
margin-bottom: tokens.get('utility-gap-8', utilities.$post-spacing);

:first-child {
margin-right: auto;
Expand Down
Loading
Loading