From 83083b9d71329f68b113b44a4f83b3b6a77f8063 Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Fri, 29 Nov 2024 12:23:38 +0200 Subject: [PATCH 1/5] Fixed slider knob alignment --- Slider/Slider.module.less | 1 + styles/variables-base.less | 1 + styles/variables-electro.less | 1 + 3 files changed, 3 insertions(+) diff --git a/Slider/Slider.module.less b/Slider/Slider.module.less index 3d6f081f6..4354f00cf 100644 --- a/Slider/Slider.module.less +++ b/Slider/Slider.module.less @@ -136,6 +136,7 @@ .knob { bottom: ~"calc(var(--ui-slider-proportion-end-knob) * 100%)"; top: auto; + transform: @agate-slider-knob-transform-vertical; } } diff --git a/styles/variables-base.less b/styles/variables-base.less index 0a7e80518..ef660f005 100644 --- a/styles/variables-base.less +++ b/styles/variables-base.less @@ -731,6 +731,7 @@ @agate-slider-knob-height: @agate-slider-height; @agate-slider-knob-resting-state-scale: 1; @agate-slider-knob-transform: @agate-translate-center; +@agate-slider-knob-transform-vertical: none; @agate-slider-knob-width: @agate-slider-knob-height; @agate-slider-tiny-knob-height: @agate-slider-knob-height; @agate-slider-tiny-knob-width: @agate-slider-knob-width; diff --git a/styles/variables-electro.less b/styles/variables-electro.less index abeb0090d..49ce54923 100644 --- a/styles/variables-electro.less +++ b/styles/variables-electro.less @@ -141,6 +141,7 @@ @agate-slider-knob-border-radius: @electro-border-radius; @agate-slider-knob-resting-state-scale: 0.8; @agate-slider-knob-transform: @agate-translate-center scale(@agate-slider-knob-resting-state-scale) skewX(@electro-skew); +@agate-slider-knob-transform-vertical: skewY(@electro-skew) rotate(90deg); @agate-slider-knob-width: 30px; @agate-slider-border-radius: @electro-border-radius; @agate-slider-horizontal-margin: 3px 21px; From 98288f9ef94f37f00f2c8b5604797b5f91220291 Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Tue, 3 Dec 2024 16:02:21 +0200 Subject: [PATCH 2/5] Fixed `Slider` knob alignment and `IncrementSlider` vertical alignment --- IncrementSlider/IncrementSlider.module.less | 1 + Slider/Slider.module.less | 11 ++++++++++- styles/variables-base.less | 4 +++- styles/variables-electro.less | 4 +++- 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/IncrementSlider/IncrementSlider.module.less b/IncrementSlider/IncrementSlider.module.less index ebacc904d..34139ee49 100644 --- a/IncrementSlider/IncrementSlider.module.less +++ b/IncrementSlider/IncrementSlider.module.less @@ -102,6 +102,7 @@ order: 2; margin: @agate-incrementslider-vertical-slider-margin; padding: @agate-incrementslider-vertical-slider-padding; + transform: @agate-incrementslider-bg-transform-vertical; &::before { border-radius: @agate-incrementslider-border-radius; diff --git a/Slider/Slider.module.less b/Slider/Slider.module.less index 4354f00cf..952ea4ad1 100644 --- a/Slider/Slider.module.less +++ b/Slider/Slider.module.less @@ -136,7 +136,10 @@ .knob { bottom: ~"calc(var(--ui-slider-proportion-end-knob) * 100%)"; top: auto; - transform: @agate-slider-knob-transform-vertical; + + &::before { + transform: @agate-slider-knob-transform-vertical; + } } } @@ -200,6 +203,12 @@ width: @agate-slider-active-knob-width; border-radius: @agate-slider-active-knob-border-radius; } + + &.vertical { + .knob::before { + transform: @agate-slider-active-knob-transform-vertical; + } + } } :global(.spotlight-input-touch) &.pressed { diff --git a/styles/variables-base.less b/styles/variables-base.less index ef660f005..6b0ab9821 100644 --- a/styles/variables-base.less +++ b/styles/variables-base.less @@ -713,6 +713,7 @@ @agate-slider-active-knob-border-radius: @agate-slider-knob-border-radius; @agate-slider-active-knob-height: @agate-slider-knob-height; @agate-slider-active-knob-transform: @agate-slider-knob-transform; +@agate-slider-active-knob-transform-vertical: @agate-slider-active-knob-transform; @agate-slider-active-knob-width: @agate-slider-active-knob-height; @agate-slider-active-tiny-knob-height: @agate-slider-active-knob-height; @agate-slider-active-tiny-knob-width: @agate-slider-active-knob-width; @@ -731,7 +732,7 @@ @agate-slider-knob-height: @agate-slider-height; @agate-slider-knob-resting-state-scale: 1; @agate-slider-knob-transform: @agate-translate-center; -@agate-slider-knob-transform-vertical: none; +@agate-slider-knob-transform-vertical: @agate-slider-knob-transform; @agate-slider-knob-width: @agate-slider-knob-height; @agate-slider-tiny-knob-height: @agate-slider-knob-height; @agate-slider-tiny-knob-width: @agate-slider-knob-width; @@ -752,6 +753,7 @@ // IncrementSlider // --------------------------------------- @agate-incrementslider-bg-transform: none; +@agate-incrementslider-bg-transform-vertical: none; @agate-incrementslider-border-radius: 0; @agate-incrementslider-horizontal-button-decrement-border-radius: @agate-slider-height 0 0 @agate-slider-height; @agate-incrementslider-horizontal-button-decrement-border-width: 0; diff --git a/styles/variables-electro.less b/styles/variables-electro.less index 49ce54923..6ed397389 100644 --- a/styles/variables-electro.less +++ b/styles/variables-electro.less @@ -137,11 +137,12 @@ // Slider // --------------------------------------- +@agate-slider-active-knob-transform-vertical: @agate-translate-center scale(@agate-slider-knob-resting-state-scale) rotate(90deg); @agate-slider-active-knob-width: @agate-slider-knob-width; @agate-slider-knob-border-radius: @electro-border-radius; @agate-slider-knob-resting-state-scale: 0.8; @agate-slider-knob-transform: @agate-translate-center scale(@agate-slider-knob-resting-state-scale) skewX(@electro-skew); -@agate-slider-knob-transform-vertical: skewY(@electro-skew) rotate(90deg); +@agate-slider-knob-transform-vertical: @agate-translate-center scale(@agate-slider-knob-resting-state-scale) rotate(90deg); @agate-slider-knob-width: 30px; @agate-slider-border-radius: @electro-border-radius; @agate-slider-horizontal-margin: 3px 21px; @@ -157,6 +158,7 @@ // IncrementSlider // --------------------------------------- @agate-incrementslider-bg-transform: skewX(-@electro-skew); +@agate-incrementslider-bg-transform-vertical: skewX(0); @electro-incrementslider-horizontal-slider-undertuck: 15px; // the amount the slider tucks underneath the side buttons @agate-incrementslider-horizontal-margin: 3px @agate-component-spacing; @agate-incrementslider-horizontal-slider-margin: 0 -@electro-incrementslider-horizontal-slider-undertuck; From ca351662ed867a6a11e17c3cf0d4315b900f94dd Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Wed, 4 Dec 2024 16:30:56 +0200 Subject: [PATCH 3/5] Added padding on ss-tests for `Slider` and `IncrementSlider` with vertical orientation --- .../apps/components/IncrementSlider.js | 70 +++++++++++++--- tests/screenshot/apps/components/Slider.js | 84 ++++++++++++++++--- 2 files changed, 132 insertions(+), 22 deletions(-) diff --git a/tests/screenshot/apps/components/IncrementSlider.js b/tests/screenshot/apps/components/IncrementSlider.js index e1e85e2a1..f55e391fa 100644 --- a/tests/screenshot/apps/components/IncrementSlider.js +++ b/tests/screenshot/apps/components/IncrementSlider.js @@ -25,16 +25,66 @@ const IncrementSliderTests = [ , , , - , - , - , - , - , - , - , - , - , - , + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, // RTL { locale: 'ar-SA', diff --git a/tests/screenshot/apps/components/Slider.js b/tests/screenshot/apps/components/Slider.js index 077d78f6e..96014d88a 100644 --- a/tests/screenshot/apps/components/Slider.js +++ b/tests/screenshot/apps/components/Slider.js @@ -25,18 +25,78 @@ const SliderTests = [ }, focus: true }, - , - , - , - , - , - , - , - , - , - , - , - , + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, + { + component: , + wrapper: { + padded: true + } + }, { component: , wrapper: { From f492c6a0db5cf6707c8ecc523e24a2b2ed75802a Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Thu, 5 Dec 2024 11:12:40 +0200 Subject: [PATCH 4/5] Removed padding on ss-tests for `Slider` and `IncrementSlider` with vertical orientation --- .../apps/components/IncrementSlider.js | 70 +++------------- tests/screenshot/apps/components/Slider.js | 84 +++---------------- 2 files changed, 22 insertions(+), 132 deletions(-) diff --git a/tests/screenshot/apps/components/IncrementSlider.js b/tests/screenshot/apps/components/IncrementSlider.js index f55e391fa..e1e85e2a1 100644 --- a/tests/screenshot/apps/components/IncrementSlider.js +++ b/tests/screenshot/apps/components/IncrementSlider.js @@ -25,66 +25,16 @@ const IncrementSliderTests = [ , , , - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, + , + , + , + , + , + , + , + , + , + , // RTL { locale: 'ar-SA', diff --git a/tests/screenshot/apps/components/Slider.js b/tests/screenshot/apps/components/Slider.js index 96014d88a..077d78f6e 100644 --- a/tests/screenshot/apps/components/Slider.js +++ b/tests/screenshot/apps/components/Slider.js @@ -25,78 +25,18 @@ const SliderTests = [ }, focus: true }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, - { - component: , - wrapper: { - padded: true - } - }, + , + , + , + , + , + , + , + , + , + , + , + , { component: , wrapper: { From 0e24abc286a7f0c88f7b995da1d3f82cf75a38f9 Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Thu, 5 Dec 2024 12:46:34 +0200 Subject: [PATCH 5/5] Added CHANGELOG --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6bcb0c987..e0ad01723 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ The following is a curated list of changes in the Enact agate module, newest changes on the top. +## [not released] + +### Fixed + +- `agate/IncrementSlider` and `agate/Slider` vertical knob alignment in Electro skin. + ## [3.0.0-alpha.2] - 2024-11-21 ### Fixed