From 16b3ebed1d26a5184f79eae46e4c90ef8b9d7cff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Damian=20J=C3=B3=C5=BAwiak?= Date: Wed, 13 Nov 2024 11:37:21 +0100 Subject: [PATCH 1/4] LMS-2126 | Use container query for setting horizontal layout --- lib/js/components/Banner/Banner.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/js/components/Banner/Banner.vue b/lib/js/components/Banner/Banner.vue index 96f15a182..c454beb74 100644 --- a/lib/js/components/Banner/Banner.vue +++ b/lib/js/components/Banner/Banner.vue @@ -81,8 +81,13 @@ display: flex; flex-direction: column; padding: $space-xs; + container-type: inline-size; - @media #{breakpoint-s()} { + // in `container-type: inline-size` container query doesn't count padding into width + // `container-type: size` doesn't allow for height: auto, so we need to use inline-size and manually calculate width + // 500px - 2 * padding - 2px for border + // Alternative solution: wrap ds-banner in a div and set container-type: inline-size; there + @container (width > #{500px - 2 * $space-xs - 2px}) { &.-ds-horizontal { #{$self}__iconContainer { padding: $space-2xs 0; From 6e5aa0740ef45d2f128790937468674e15b514b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Damian=20J=C3=B3=C5=BAwiak?= Date: Wed, 13 Nov 2024 13:51:30 +0100 Subject: [PATCH 2/4] LMS-2126 | Bump stylelint to 14 --- .../Buttons/IconButton/IconButton.vue | 4 +- .../Drawer/DrawerHeader/DrawerHeader.vue | 4 +- .../Outline/OutlineItem/OutlineItem.vue | 2 +- lib/js/components/PopOver/PopOver.vue | 3 +- lib/js/components/ProgressBar/ProgressBar.vue | 1 - .../ProgressDonutChart/ProgressDonutChart.vue | 4 +- lib/styles/components/_buttons.scss | 4 +- lib/styles/settings/_fonts.scss | 12 +- lib/styles/settings/_radiuses.scss | 2 +- package.json | 7 +- stylelint.config.cjs | 33 +- yarn.lock | 730 +++++------------- 12 files changed, 265 insertions(+), 541 deletions(-) diff --git a/lib/js/components/Buttons/IconButton/IconButton.vue b/lib/js/components/Buttons/IconButton/IconButton.vue index 1a9b172a9..6c55d992a 100644 --- a/lib/js/components/Buttons/IconButton/IconButton.vue +++ b/lib/js/components/Buttons/IconButton/IconButton.vue @@ -67,11 +67,11 @@ @import '../../../../styles/settings/typography/tokens'; @mixin setIconButtonAdditions($border: null, $icon: null) { - @if $border != null { + @if $border { border: 1px solid $border; } - @if $icon != null { + @if $icon { .ds-iconButton { &__icon, &__loadingIcon { diff --git a/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue b/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue index 9d8b1d296..b064e600a 100644 --- a/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue +++ b/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue @@ -69,7 +69,7 @@ $minimal-drawer-header-height: 82px; flex-direction: column; &__secondLevel { - position: absolute !important; //it is required so firstLevel content does not make component wider when hidden, and important is needed so component does not change its width when button was clicked + position: absolute !important; // it is required so firstLevel content does not make component wider when hidden, and important is needed so component does not change its width when button was clicked } &__leftIcon { @@ -83,7 +83,7 @@ $minimal-drawer-header-height: 82px; row-gap: $space-4xs; &.-ds-hidden { - visibility: hidden; //by this we make sure that height does not change when switching to second level + visibility: hidden; // by this we make sure that height does not change when switching to second level } } diff --git a/lib/js/components/Outline/OutlineItem/OutlineItem.vue b/lib/js/components/Outline/OutlineItem/OutlineItem.vue index 4a3869ea5..dfaaa0330 100644 --- a/lib/js/components/Outline/OutlineItem/OutlineItem.vue +++ b/lib/js/components/Outline/OutlineItem/OutlineItem.vue @@ -112,7 +112,7 @@ } &__text { - @include label-l-default-regular; //it fixes whole component height + @include label-l-default-regular; // it fixes whole component height // To hide scrollbar in case Chrome renders __label higher than line-height - there are some problems with fraction of a pixel on Retina screens // https://bethinkteam.slack.com/archives/C012R8RM3A4/p1727776466931369?thread_ts=1727775029.076259&cid=C012R8RM3A4 diff --git a/lib/js/components/PopOver/PopOver.vue b/lib/js/components/PopOver/PopOver.vue index d56cd3f0f..635c41f1c 100644 --- a/lib/js/components/PopOver/PopOver.vue +++ b/lib/js/components/PopOver/PopOver.vue @@ -69,10 +69,11 @@ flex-direction: column; padding: 0; - /* stylelint-disable-next-line selector-class-pattern */ + /* stylelint-disable selector-class-pattern */ &.-ds-color-neutral :deep(.popper__arrow) { border-color: $color-neutral-background transparent !important; } + /* stylelint-enable selector-class-pattern */ &.-ds-color-neutral { background-color: $color-neutral-background; diff --git a/lib/js/components/ProgressBar/ProgressBar.vue b/lib/js/components/ProgressBar/ProgressBar.vue index c377dc5fc..cde74750b 100644 --- a/lib/js/components/ProgressBar/ProgressBar.vue +++ b/lib/js/components/ProgressBar/ProgressBar.vue @@ -67,7 +67,6 @@