components: Use updated range styles (#33824)

* Use updated range styles * Add CHANGELOG entry * Fix focus styles for Chrome and Safari * Fix tooltip offset * Remove default rail color value * Remove margin and fix border radius * Fix disabled styles * Fix marks and simplify tooltip positioning
WordPress · Aug 6, 2021 · e5506ed · e5506ed
1 parent 14d80aa
commit e5506ed
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 20 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   Listen to `resize` events correctly in `useBreakpointIndex`. This hook is used in `useResponsiveValue` and consequently in the `Flex` and `Grid` components  ([#33902](https://github.com/WordPress/gutenberg/pull/33902))
 
+### Breaking Change
+
+-	Updated the visual styles of the RangeControl component ([#33824](https://github.com/WordPress/gutenberg/pull/33824))
+
 ## 15.0.0 (2021-07-29)
 
 ### Breaking Change

diff --git a/packages/components/src/range-control/index.js b/packages/components/src/range-control/index.js
@@ -245,10 +245,11 @@ function RangeControl(
 						style={ { width: fillValueOffset } }
 						trackColor={ trackColor }
 					/>
-					<ThumbWrapper style={ offsetStyle }>
+					<ThumbWrapper style={ offsetStyle } disabled={ disabled }>
 						<Thumb
 							aria-hidden={ true }
 							isFocused={ isThumbFocused }
+							disabled={ disabled }
 						/>
 					</ThumbWrapper>
 					{ enableTooltip && (

diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js
@@ -12,7 +12,7 @@ import { COLORS, reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
 
 const rangeHeight = () => css( { height: 30, minHeight: 30 } );
-const thumbSize = 20;
+const thumbSize = 12;
 
 export const Root = styled.div`
 	-webkit-tap-highlight-color: transparent;
@@ -37,15 +37,13 @@ export const Wrapper = styled.div`
 	color: ${ COLORS.blue.medium.focus };
 	display: block;
 	flex: 1;
-	padding-top: 15px;
+	padding-top: 18px;
 	position: relative;
 	width: 100%;
 
 	${ wrapperColor };
 	${ rangeHeight };
 	${ wrapperMargin };
-
-	${ rtl( { marginLeft: 10 } ) }
 `;
 
 export const BeforeIconWrapper = styled.span`
@@ -83,6 +81,7 @@ export const Rail = styled.span`
 	position: absolute;
 	margin-top: 14px;
 	top: 0;
+	border-radius: 9999px;
 
 	${ railBackgroundColor };
 `;
@@ -101,7 +100,7 @@ const trackBackgroundColor = ( { disabled, trackColor } ) => {
 
 export const Track = styled.span`
 	background-color: currentColor;
-	border-radius: 1px;
+	border-radius: 9999px;
 	box-sizing: border-box;
 	height: 3px;
 	pointer-events: none;
@@ -164,48 +163,64 @@ export const MarkLabel = styled.span`
 	${ markLabelFill };
 `;
 
+const thumbColor = ( { disabled } ) =>
+	disabled
+		? css`
+				background-color: ${ COLORS.lightGray[ 800 ] };
+		  `
+		: css`
+				background-color: var( --wp-admin-theme-color );
+		  `;
+
 export const ThumbWrapper = styled.span`
 	align-items: center;
 	box-sizing: border-box;
 	display: flex;
 	height: ${ thumbSize }px;
 	justify-content: center;
-	margin-top: 5px;
+	margin-top: 9px;
 	outline: 0;
 	pointer-events: none;
 	position: absolute;
 	top: 0;
 	user-select: none;
 	width: ${ thumbSize }px;
+	border-radius: 50%;
+	transform: translateX( 4.5px );
 
-	${ rtl( { marginLeft: -10 } ) }
+	${ thumbColor };
+	${ rtl( { marginLeft: -10 } ) };
 `;
 
 const thumbFocus = ( { isFocused } ) => {
-	return css( {
-		borderColor: isFocused ? COLORS.ui.borderFocus : COLORS.darkGray[ 200 ],
-		boxShadow: isFocused
-			? `
-				0 0 0 1px ${ COLORS.ui.borderFocus }
-			`
-			: `
-				0 0 0 rgba(0, 0, 0, 0)
-			`,
-	} );
+	return isFocused
+		? css`
+				&::before {
+					content: ' ';
+					position: absolute;
+					background-color: transparent;
+					box-shadow: 0 0 0 1.5px var( --wp-admin-theme-color );
+					border-radius: 50%;
+					height: ${ thumbSize + 4 }px;
+					width: ${ thumbSize + 4 }px;
+					top: -2px;
+					left: -2px;
+				}
+		  `
+		: '';
 };
 
 export const Thumb = styled.span`
 	align-items: center;
-	background-color: white;
 	border-radius: 50%;
-	border: 1px solid ${ COLORS.darkGray[ 200 ] };
 	box-sizing: border-box;
 	height: 100%;
 	outline: 0;
 	position: absolute;
 	user-select: none;
 	width: 100%;
 
+	${ thumbColor };
 	${ thumbFocus };
 `;