Ui enhancements

WordPress · Dec 8, 2021 · 9201bca · 9201bca
1 parent a5951b4
commit 9201bca
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 24 deletions.
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -28,6 +28,7 @@ import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
 import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
 import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
+import classNames from 'classnames';
 
 // translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
 const colorIndicatorAriaLabel = __( '(%s: color %s)' );
@@ -145,26 +146,25 @@ export const PanelColorGradientSettingsInner = ( {
 			title={ showTitle ? titleElement : undefined }
 			{ ...props }
 		>
-			<ItemGroup isBordered isSeparated>
+			<ItemGroup isBordered isSeparated className="block-editor-panel-color-gradient-settings__item-group">
 				{ settings.map( ( setting, index ) => (
 					<Dropdown
+						className="block-editor-panel-color-gradient-settings__dropdown"
 						key={ index }
-						contentClassName="block-editor-panel-color-gradient-settings__dropdown"
-						renderToggle={ ( { onToggle } ) => {
+						contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
+						renderToggle={ ( { isOpen, onToggle } ) => {
 							return (
 								<Item
 									onClick={ onToggle }
-									className="block-editor-panel-color-gradient-settings__item"
+									className={ classNames( 'block-editor-panel-color-gradient-settings__item', { 'is-open': isOpen } ) }
 								>
 									<HStack justify="flex-start">
-										<FlexItem>
-											<ColorIndicator
-												colorValue={
-													setting.gradientValue ??
-													setting.colorValue
-												}
-											/>
-										</FlexItem>
+										<ColorIndicator
+											colorValue={
+												setting.gradientValue ??
+												setting.colorValue
+											}
+										/>
 										<FlexItem>{ setting.label }</FlexItem>
 									</HStack>
 								</Item>

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -50,17 +50,39 @@
 
 }
 
+.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
+	overflow: visible;
+	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
+	border: none;
+	border-radius: $radius-block-ui;
+
+	& > div {
+		width: $sidebar-width;
+	}
+}
+
 @include break-medium() {
-	.block-editor-panel-color-gradient-settings__dropdown .components-popover__content {
+	.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
 		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
 		margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
 	}
 }
 
+.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
+	border-bottom-width: 0px;
+}
+
 .block-editor-panel-color-gradient-settings__item {
+	padding-top: $grid-unit-15 !important;
+	padding-bottom: $grid-unit-15 !important;
 	.component-color-indicator {
 		// Show a diagonal line (crossed out) for empty swatches.
 		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 	}
+
+	&.is-open {
+		background: $gray-100;
+		color: var(--wp-admin-theme-color);
+	}
 }
 
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
@@ -10,7 +10,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 
 /**
@@ -132,11 +132,15 @@ export default function ColorPalette( {
 			enableAlpha={ enableAlpha }
 		/>
 	);
-
+	let dropdownPosition;
+	if ( __experimentalIsRenderedInSidebar ) {
+		dropdownPosition = isRTL() ? 'bottom right' : 'bottom left';
+	}
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
 				<Dropdown
+					position={ dropdownPosition }
 					contentClassName={ classnames(
 						'components-color-palette__custom-color-dropdown-content',
 						{

diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts
@@ -54,6 +54,9 @@ export const buttonView = css`
 
 export const buttonActive = css`
 	color: ${ COLORS.white };
+	&:active {
+		background: transparent;
+	}
 `;
 
 export const ButtonContentView = styled.div`

diff --git a/...omponents/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx b/...omponents/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx
@@ -35,21 +35,35 @@ function ToggleGroupControlBackdrop( {
 			return;
 		}
 
-		const { x: parentX } = containerNode.getBoundingClientRect();
-		const { width: offsetWidth, x } = targetNode.getBoundingClientRect();
-		const borderWidth = 1;
-		const offsetLeft = x - parentX - borderWidth;
+		let dimensionsRequestId: number;
+		const computeDimensions = () => {
+			const { width: offsetWidth, x } = targetNode.getBoundingClientRect();
 
-		setLeft( offsetLeft );
-		setWidth( offsetWidth );
+			const { x: parentX } = containerNode.getBoundingClientRect();
 
-		let requestId: number;
+			const borderWidth = 1;
+			const offsetLeft = x - parentX - borderWidth;
+
+			setLeft( offsetLeft );
+			setWidth( offsetWidth );
+		}
+		// Fix to make the component appear as expected inside popovers.
+		// If the targetNode width is 0 it means the element was not yet rendered we should allow
+		// some time for the render to happen.
+		// requestAnimationFrame instead of setTimeout with a small time does not seems to work.
+		dimensionsRequestId = window.setTimeout( computeDimensions, 100 );
+
+
+		let animationRequestId: number;
 		if ( ! canAnimate ) {
-			requestId = window.requestAnimationFrame( () => {
+			animationRequestId = window.requestAnimationFrame( () => {
 				setCanAnimate( true );
 			} );
 		}
-		return () => window.cancelAnimationFrame( requestId );
+		return () => {
+			window.clearTimeout( dimensionsRequestId );
+			window.cancelAnimationFrame( animationRequestId );
+		}
 	}, [ canAnimate, containerRef, containerWidth, state, isAdaptiveWidth ] );
 
 	if ( ! renderBackdrop ) {