Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AnglePickerControl: Style to better fit in narrow contexts and improve RTL layout #49046

Merged
merged 8 commits into from
Mar 17, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,6 @@ function AngleCircle( {
ref={ angleCircleRef }
onMouseDown={ startDrag }
className="components-angle-picker-control__angle-circle"
style={ isDragging ? { cursor: 'grabbing' } : undefined }
{ ...props }
>
<CircleIndicatorWrapper
Expand Down
41 changes: 14 additions & 27 deletions packages/components/src/angle-picker-control/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,16 @@ import classnames from 'classnames';
*/
import deprecated from '@wordpress/deprecated';
import { forwardRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { isRTL, __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { FlexBlock, FlexItem } from '../flex';
import { FlexBlock } from '../flex';
import { Spacer } from '../spacer';
import NumberControl from '../number-control';
import AngleCircle from './angle-circle';
import { Root } from './styles/angle-picker-control-styles';
import { space } from '../ui/utils/space';
import { Text } from '../text';
import { Spacer } from '../spacer';
import { COLORS } from '../utils/colors-values';
import { Root, UnitText } from './styles/angle-picker-control-styles';

import type { WordPressComponentProps } from '../ui/context';
import type { AnglePickerControlProps } from './types';
Expand Down Expand Up @@ -64,13 +61,18 @@ function UnforwardedAnglePickerControl(

const classes = classnames( 'components-angle-picker-control', className );

const unitText = <UnitText>°</UnitText>;
const [ prefixedUnitText, suffixedUnitText ] = isRTL()
? [ unitText, null ]
: [ null, unitText ];

return (
<Root
{ ...restProps }
ref={ ref }
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
className={ classes }
gap={ 4 }
gap={ 2 }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice.

>
<FlexBlock>
<NumberControl
Expand All @@ -83,32 +85,17 @@ function UnforwardedAnglePickerControl(
step="1"
value={ value }
spinControls="none"
suffix={
<Spacer
as={ Text }
marginBottom={ 0 }
marginRight={ space( 3 ) }
style={ {
color: COLORS.ui.theme,
} }
>
°
</Spacer>
}
prefix={ prefixedUnitText }
suffix={ suffixedUnitText }
/>
</FlexBlock>
<FlexItem
style={ {
marginBottom: space( 1 ),
marginTop: 'auto',
} }
>
<Spacer marginBottom="1" marginTop="auto">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. Not for this PR, but for layouts like this I'd probably first try using the NumberControl without a label, and wrap the entire thing in a separate BaseControl. I hope our components support that kind of composability without messing up the HTML semantics.

<AngleCircle
aria-hidden="true"
value={ value }
onChange={ onChange }
/>
</FlexItem>
</Spacer>
</Root>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this one actually do? Mostly for curiosity.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's the size of the dot on the knob. Previously it was used as a radius. As part of simplifying the styles used to draw the dot it was more straightforward to use as a diameter (which also makes it consistent with CIRCLE_SIZE which is a diameter).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh interesting, thanks for the response! I don't know that we'd ever want to actually change the size of the knob situationally, so I guess it good that it isn't surfaced as a prop :)


const deprecatedBottomMargin = ( {
__nextHasNoMarginBottom,
Expand All @@ -39,6 +40,10 @@ export const CircleRoot = styled.div`
height: ${ CIRCLE_SIZE }px;
overflow: hidden;
width: ${ CIRCLE_SIZE }px;
:active {
cursor: grabbing;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice.

}
`;

export const CircleIndicatorWrapper = styled.div`
Expand All @@ -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 ) };
`;