Global Styles: fix overflow caused by RangeControl tooltip (WordPress…

…#65875) * RangeControl: do not render tooltip in the DOM when hidden * RangeControl: do not apply react props as attributes on wrapper element * Global Styles: add bottom padding to allow for tooltip in font size screen * CHANGELOG --- Co-authored-by: ciampo <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: tyxla <[email protected]>
karthick-murugan · Nov 13, 2024 · e9fed1f · e9fed1f
1 parent 73b996c
commit e9fed1f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Bug Fixes
 
 -   `PaletteEdit`: dedupe palette element slugs ([#65772](https://github.com/WordPress/gutenberg/pull/65772)).
+-   `RangeControl`: do not tooltip contents to the DOM when not shown ([#65875](https://github.com/WordPress/gutenberg/pull/65875)).
 -   `Tabs`: fix skipping indication animation glitch ([#65878](https://github.com/WordPress/gutenberg/pull/65878)).
 
 ## 28.9.0 (2024-10-03)

diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -57,7 +57,10 @@ const wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {
 	return '';
 };
 
-export const Wrapper = styled.div< WrapperProps >`
+export const Wrapper = styled( 'div', {
+	shouldForwardProp: ( prop: string ) =>
+		! [ 'color', '__nextHasNoMarginBottom', 'marks' ].includes( prop ),
+} )< WrapperProps >`
 	display: block;
 	flex: 1;
 	position: relative;
@@ -261,9 +264,20 @@ export const InputRange = styled.input`
 `;
 
 const tooltipShow = ( { show }: TooltipProps ) => {
-	return css( {
-		opacity: show ? 1 : 0,
-	} );
+	return css`
+		display: ${ show ? 'inline-block' : 'none' };
+		opacity: ${ show ? 1 : 0 };
+
+		@media not ( prefers-reduced-motion ) {
+			transition:
+				opacity 120ms ease,
+				display 120ms ease allow-discrete;
+		}
+
+		@starting-style {
+			opacity: 0;
+		}
+	`;
 };
 
 const tooltipPosition = ( { position }: TooltipProps ) => {
@@ -284,22 +298,17 @@ export const Tooltip = styled.span< TooltipProps >`
 	background: rgba( 0, 0, 0, 0.8 );
 	border-radius: ${ CONFIG.radiusSmall };
 	color: white;
-	display: inline-block;
 	font-size: 12px;
 	min-width: 32px;
-	opacity: 0;
 	padding: 4px 8px;
 	pointer-events: none;
 	position: absolute;
 	text-align: center;
 	user-select: none;
 	line-height: 1.4;
 
-	@media not ( prefers-reduced-motion ) {
-		transition: opacity 120ms ease;
-	}
-
 	${ tooltipShow };
+
 	${ tooltipPosition };
 	${ rtl(
 		{ transform: 'translateX(-50%)' },

diff --git a/packages/components/src/range-control/tooltip.tsx b/packages/components/src/range-control/tooltip.tsx
@@ -40,7 +40,7 @@ export default function SimpleTooltip(
 	return (
 		<Tooltip
 			{ ...restProps }
-			aria-hidden={ show }
+			aria-hidden="false"
 			className={ classes }
 			position={ position }
 			show={ show }

diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-size.js b/packages/edit-site/src/components/global-styles/font-sizes/font-size.js
@@ -197,7 +197,11 @@ function FontSize() {
 				</HStack>
 
 				<View>
-					<Spacer paddingX={ 4 }>
+					<Spacer
+						paddingX={ 4 }
+						marginBottom={ 0 }
+						paddingBottom={ 6 }
+					>
 						<VStack spacing={ 4 }>
 							<FlexItem>
 								<FontSizePreview fontSize={ fontSize } />