RangeControl: Update the default marks styles to match the padding/ma…

…rgin control (#67611) Co-authored-by: youknowriad <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Dec 6, 2024 · 5896920 · 5896920
1 parent 4251bbd
commit 5896920
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 49 deletions.
diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss
@@ -4,40 +4,11 @@
 		margin-bottom: 0;
 	}
 
-	.is-marked {
-		.components-range-control__track {
-			transition: width ease 0.1s;
-			@include reduce-motion("transition");
-		}
-
-		.components-range-control__thumb-wrapper {
-			transition: left ease 0.1s;
-			@include reduce-motion("transition");
-		}
-	}
-
 	.spacing-sizes-control__range-control,
 	.spacing-sizes-control__custom-value-range {
 		flex: 1;
 		margin-bottom: 0; // Needed for some instances of the range control, such as the Spacer block.
 	}
-
-	.components-range-control__mark {
-		transform: translateX(-50%);
-		height: $grid-unit-05;
-		width: math.div($grid-unit-05, 2);
-		background-color: $white;
-		z-index: 1;
-		top: -#{$grid-unit-05};
-	}
-
-	.components-range-control__marks {
-		margin-top: 17px;
-	}
-
-	.components-range-control__thumb-wrapper {
-		z-index: 3;
-	}
 }
 
 .spacing-sizes-control__header {

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -10,6 +10,7 @@
 
 -   `GradientPicker`: Add `enableAlpha` prop ([#66974](https://github.com/WordPress/gutenberg/pull/66974))
 -   `CustomGradientPicker`: Add `enableAlpha` prop ([#66974](https://github.com/WordPress/gutenberg/pull/66974))
+-   `RangeControl`: Update the design of the range control marks ([#67611](https://github.com/WordPress/gutenberg/pull/67611))
 
 ### Deprecations
 

diff --git a/packages/components/src/range-control/mark.tsx b/packages/components/src/range-control/mark.tsx
@@ -38,7 +38,6 @@ export default function RangeMark(
 				{ ...otherProps }
 				aria-hidden="true"
 				className={ classes }
-				isFilled={ isFilled }
 				style={ style }
 			/>
 			{ label && (

diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -130,6 +130,10 @@ export const Track = styled.span`
 	margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;
 	top: 0;
 
+	@media not ( prefers-reduced-motion ) {
+		transition: width ease 0.1s;
+	}
+
 	${ trackBackgroundColor };
 `;
 
@@ -139,28 +143,18 @@ export const MarksWrapper = styled.span`
 	position: relative;
 	width: 100%;
 	user-select: none;
+	margin-top: 17px;
 `;
 
-const markFill = ( { disabled, isFilled }: RangeMarkProps ) => {
-	let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];
-
-	if ( disabled ) {
-		backgroundColor = COLORS.gray[ 400 ];
-	}
-
-	return css( {
-		backgroundColor,
-	} );
-};
-
 export const Mark = styled.span`
-	height: ${ thumbSize }px;
-	left: 0;
 	position: absolute;
-	top: 9px;
-	width: 1px;
-
-	${ markFill };
+	left: 0;
+	top: -4px;
+	height: 4px;
+	width: 2px;
+	transform: translateX( -50% );
+	background-color: ${ COLORS.ui.background };
+	z-index: 1;
 `;
 
 const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
@@ -173,7 +167,7 @@ export const MarkLabel = styled.span`
 	color: ${ COLORS.gray[ 300 ] };
 	font-size: 11px;
 	position: absolute;
-	top: 22px;
+	top: 8px;
 	white-space: nowrap;
 
 	${ rtl( { left: 0 } ) };
@@ -207,6 +201,11 @@ export const ThumbWrapper = styled.span`
 	user-select: none;
 	width: ${ thumbSize }px;
 	border-radius: ${ CONFIG.radiusRound };
+	z-index: 3;
+
+	@media not ( prefers-reduced-motion ) {
+		transition: left ease 0.1s;
+	}
 
 	${ thumbColor };
 	${ rtl( { marginLeft: -10 } ) };