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.

Sign up for GitHub

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

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
363a3ba
Move `AngleCircle` inside `NumberControl` as `suffix`
stokesman Nov 22, 2022
f293a27
Restyle
stokesman Mar 11, 2023
aa80b37
Have the degree symbol on the right for both RTL/LTR
stokesman Mar 11, 2023
7667eae
Restyle
stokesman Mar 16, 2023
13d8e1b
Add changelog entry
stokesman Mar 17, 2023
601d53d
Correct name
stokesman Mar 17, 2023
f17783a
Sort changelog entry
stokesman Mar 17, 2023
6835eea
Restore :focus-visible rule from f02087f
stokesman Mar 17, 2023
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
View file
Open in desktop
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
1 change: 0 additions & 1 deletion packages/components/src/angle-picker-control/angle-circle.tsx
View file
Open in desktop
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
View file
Open in desktop
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
25 changes: 16 additions & 9 deletions packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
View file
Open in desktop
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 ) };
`;