WRQ-29377: Fix ToggleButton underline position (#806)

* fixed ToggleButton underline position * fixed review issues * fixed review issues
enactjs · Aug 9, 2024 · 14b00c0 · 14b00c0
1 parent 6d0f0bf
commit 14b00c0
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -3,6 +3,13 @@ import ToggleButton from '../../../../ToggleButton';
 const ToggleButtonTests = [
 	<ToggleButton>Click me!</ToggleButton>,
 	<ToggleButton underline>Click me!</ToggleButton>,
+	<ToggleButton underline defaultSelected>Click me!</ToggleButton>,
+	<ToggleButton underline size="huge">Click me!</ToggleButton>,
+	<ToggleButton underline size="huge" defaultSelected>Click me!</ToggleButton>,
+	<ToggleButton underline size="small">Click me!</ToggleButton>,
+	<ToggleButton underline size="small" defaultSelected>Click me!</ToggleButton>,
+	<ToggleButton underline size="smallest">Click me!</ToggleButton>,
+	<ToggleButton underline size="smallest" defaultSelected>Click me!</ToggleButton>,
 	<ToggleButton size="small">Click me!</ToggleButton>
 ];