From 6434e0bc181bb1c0f5fcf48520be20f1a37afb6c Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 17 Mar 2023 12:11:23 -0700 Subject: [PATCH] `AnglePickerControl`: Style to better fit in narrow contexts and improve RTL layout (#49046) * Move `AngleCircle` inside `NumberControl` as `suffix` * Restyle * Have the degree symbol on the right for both RTL/LTR * Restyle * Add changelog entry * Correct name * Sort changelog entry --- packages/components/CHANGELOG.md | 1 + .../src/angle-picker-control/angle-circle.tsx | 1 - .../src/angle-picker-control/index.tsx | 41 +++++++------------ .../styles/angle-picker-control-styles.tsx | 25 +++++++---- 4 files changed, 31 insertions(+), 37 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4c2f655533f2bb..3be2e8f6a8cbcb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -9,6 +9,7 @@ ### Enhancements - `CustomGradientPicker`: improve initial state UI ([#49146](https://github.com/WordPress/gutenberg/pull/49146)). +- `AnglePickerControl`: Style to better fit in narrow contexts and improve RTL layout ([#49046](https://github.com/WordPress/gutenberg/pull/49046)). ## 23.6.0 (2023-03-15) diff --git a/packages/components/src/angle-picker-control/angle-circle.tsx b/packages/components/src/angle-picker-control/angle-circle.tsx index 2b80705432c410..77518efb21bc1a 100644 --- a/packages/components/src/angle-picker-control/angle-circle.tsx +++ b/packages/components/src/angle-picker-control/angle-circle.tsx @@ -91,7 +91,6 @@ function AngleCircle( { ref={ angleCircleRef } onMouseDown={ startDrag } className="components-angle-picker-control__angle-circle" - style={ isDragging ? { cursor: 'grabbing' } : undefined } { ...props } > °; + const [ prefixedUnitText, suffixedUnitText ] = isRTL() + ? [ unitText, null ] + : [ null, unitText ]; + return ( - ° - - } + prefix={ prefixedUnitText } + suffix={ suffixedUnitText } /> - + + ); } diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx index 7d97903adf5c92..f08756f33bccf8 100644 --- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx +++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx @@ -10,12 +10,13 @@ import styled from '@emotion/styled'; import { Flex } from '../../flex'; import { COLORS } from '../../utils'; import { space } from '../../ui/utils/space'; +import { Text } from '../../text'; import CONFIG from '../../utils/config-values'; import type { AnglePickerControlProps } from '../types'; const CIRCLE_SIZE = 32; -const INNER_CIRCLE_SIZE = 3; +const INNER_CIRCLE_SIZE = 6; const deprecatedBottomMargin = ( { __nextHasNoMarginBottom, @@ -39,6 +40,10 @@ export const CircleRoot = styled.div` height: ${ CIRCLE_SIZE }px; overflow: hidden; width: ${ CIRCLE_SIZE }px; + + :active { + cursor: grabbing; + } `; export const CircleIndicatorWrapper = styled.div` @@ -55,15 +60,17 @@ export const CircleIndicatorWrapper = styled.div` export const CircleIndicator = styled.div` background: ${ COLORS.ui.theme }; border-radius: 50%; - border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.ui.theme }; - bottom: 0; box-sizing: border-box; display: block; - height: 0px; - left: 0; - margin: auto; + left: 50%; + top: 4px; + transform: translateX( -50% ); position: absolute; - right: 0; - top: -${ CIRCLE_SIZE / 2 }px; - width: 0px; + width: ${ INNER_CIRCLE_SIZE }px; + height: ${ INNER_CIRCLE_SIZE }px; +`; + +export const UnitText = styled( Text )` + color: ${ COLORS.ui.theme }; + margin-right: ${ space( 3 ) }; `;