From 14b00c0075ac5e100826d8a673f996e7f2db655d Mon Sep 17 00:00:00 2001 From: paul-beldean-lgp <77739822+paul-beldean-lgp@users.noreply.github.com> Date: Fri, 9 Aug 2024 10:52:22 +0300 Subject: [PATCH] WRQ-29377: Fix ToggleButton underline position (#806) * fixed ToggleButton underline position * fixed review issues * fixed review issues --- CHANGELOG.md | 6 ++++++ ToggleButton/ToggleButton.module.less | 21 +++++++++++++++++++ styles/variables-base.less | 6 ++++++ styles/variables-carbon.less | 1 + styles/variables-electro.less | 2 ++ styles/variables-silicon.less | 6 ++++++ styles/variables-titanium.less | 3 +++ .../apps/components/ToggleButton.js | 7 +++++++ 8 files changed, 52 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e2d89810..f13b9f7a2 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. +## [unreleased] + +### Fixed + +- `agate/ToggleButton` underline position for `huge`,`small` and `smallest` sizes + ## [2.0.11] - 2024-07-22 ### Changed diff --git a/ToggleButton/ToggleButton.module.less b/ToggleButton/ToggleButton.module.less index ad0884374..3b9be66aa 100644 --- a/ToggleButton/ToggleButton.module.less +++ b/ToggleButton/ToggleButton.module.less @@ -18,6 +18,27 @@ transform: @agate-togglebutton-indicator-transform; } + &.huge { + &::after { + height: @agate-togglebutton-huge-indicator-height; + .position(@agate-togglebutton-huge-indicator-position); + } + } + + &.small { + &::after { + height: @agate-togglebutton-small-indicator-height; + .position(@agate-togglebutton-small-indicator-position); + } + } + + &.smallest { + &::after { + height: @agate-togglebutton-smallest-indicator-height; + .position(@agate-togglebutton-smallest-indicator-position); + } + } + &.underline { .client { padding-left: @agate-togglebutton-client-padding-left; diff --git a/styles/variables-base.less b/styles/variables-base.less index b4ef80624..0a7e80518 100644 --- a/styles/variables-base.less +++ b/styles/variables-base.less @@ -881,9 +881,15 @@ @agate-togglebutton-small-min-width: @agate-button-small-height; @agate-togglebutton-smallest-min-width: @agate-button-smallest-height; @agate-togglebutton-indicator-position: 0; +@agate-togglebutton-huge-indicator-position: auto 75px 33px 75px; +@agate-togglebutton-small-indicator-position: auto 24px 6px 24px; +@agate-togglebutton-smallest-indicator-position: auto 18px 3px 18px; @agate-togglebutton-indicator-border-width: 0; @agate-togglebutton-indicator-border-radius: @agate-button-border-radius; @agate-togglebutton-indicator-height: 6px; +@agate-togglebutton-huge-indicator-height: 6px; +@agate-togglebutton-small-indicator-height: 3px; +@agate-togglebutton-smallest-indicator-height: 2px; @agate-togglebutton-indicator-transform: none; @agate-togglebutton-indicator-width: auto; diff --git a/styles/variables-carbon.less b/styles/variables-carbon.less index a827814b0..b2e751d67 100644 --- a/styles/variables-carbon.less +++ b/styles/variables-carbon.less @@ -150,5 +150,6 @@ // ToggleButton // --------------------------------------- @agate-togglebutton-indicator-position: auto 33px 9px 33px; +@agate-togglebutton-smallest-indicator-position: auto 18px 6px 18px; @agate-togglebutton-indicator-height: 4px; @agate-togglebutton-indicator-border-width: 1px; diff --git a/styles/variables-electro.less b/styles/variables-electro.less index 750a4245b..abeb0090d 100644 --- a/styles/variables-electro.less +++ b/styles/variables-electro.less @@ -199,6 +199,8 @@ // ToggleButton // --------------------------------------- @agate-togglebutton-indicator-position: auto 33px 9px 33px; +@agate-togglebutton-huge-indicator-position: auto 99px 33px 63px; +@agate-togglebutton-smallest-indicator-position: auto 15px 6px 21px; @agate-togglebutton-indicator-border-radius: 0; @agate-togglebutton-indicator-transform: translateX(-6px) skewX(@electro-skew); @agate-togglebutton-indicator-border-width: 1px; diff --git a/styles/variables-silicon.less b/styles/variables-silicon.less index 44185c9fa..e0827de26 100644 --- a/styles/variables-silicon.less +++ b/styles/variables-silicon.less @@ -555,7 +555,13 @@ @agate-togglebutton-smallest-min-width: 108px; @agate-togglebutton-indicator-border-radius: 50%; @agate-togglebutton-indicator-position: 50% auto auto; +@agate-togglebutton-huge-indicator-position: @agate-togglebutton-indicator-position; +@agate-togglebutton-small-indicator-position: @agate-togglebutton-indicator-position; +@agate-togglebutton-smallest-indicator-position: @agate-togglebutton-indicator-position; @agate-togglebutton-indicator-height: 15px; +@agate-togglebutton-huge-indicator-height: @agate-togglebutton-indicator-height; +@agate-togglebutton-small-indicator-height: @agate-togglebutton-indicator-height; +@agate-togglebutton-smallest-indicator-height: @agate-togglebutton-indicator-height; @agate-togglebutton-indicator-transform: translate(-50%, -50%); @agate-togglebutton-indicator-width: @agate-togglebutton-indicator-height; diff --git a/styles/variables-titanium.less b/styles/variables-titanium.less index 5fe50fdb6..f22c81f0e 100644 --- a/styles/variables-titanium.less +++ b/styles/variables-titanium.less @@ -96,4 +96,7 @@ // ToggleButton // --------------------------------------- @agate-togglebutton-indicator-position: auto 21px 9px 21px; +@agate-togglebutton-huge-indicator-position: auto 63px 33px 63px; +@agate-togglebutton-small-indicator-position: auto 18px 6px 18px; +@agate-togglebutton-smallest-indicator-position: auto 15px 6px 15px; @agate-togglebutton-indicator-border-width: 1px; diff --git a/tests/screenshot/apps/components/ToggleButton.js b/tests/screenshot/apps/components/ToggleButton.js index 7c7bf521b..17731cb30 100644 --- a/tests/screenshot/apps/components/ToggleButton.js +++ b/tests/screenshot/apps/components/ToggleButton.js @@ -3,6 +3,13 @@ import ToggleButton from '../../../../ToggleButton'; const ToggleButtonTests = [ Click me!, Click me!, + Click me!, + Click me!, + Click me!, + Click me!, + Click me!, + Click me!, + Click me!, Click me! ];