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

RangeControl: Add support for large 40px number input size #49105

Merged
merged 20 commits into from
Jun 27, 2023
Merged

RangeControl: Add support for large 40px number input size #49105

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
7212d85
Add support for __unstable-large
richtabor Mar 15, 2023
9a8758e
Use wider number input if large
richtabor Mar 15, 2023
3710030
Add size prop to cover opacity control for testing
richtabor Mar 15, 2023
5910629
Merge `trunk` into `enhance/range-control-size`
chad1008 May 25, 2023
53f5015
implement `__next40pxDefaultSize` instead of new `size` prop
chad1008 May 25, 2023
8fa7fbd
update to support `withInput:false`
chad1008 May 30, 2023
29f8e61
remove unneeded `!imporants`
chad1008 May 30, 2023
2d90d54
move margin-botton style override to `block-editor` package
chad1008 May 30, 2023
df85c6b
update changelog
chad1008 May 30, 2023
185056a
Merge trunk into enhance/range-control-size
chad1008 May 30, 2023
faf374d
merge `trunk` into `enhance/range-control-size`
chad1008 Jun 6, 2023
15f4937
simplify `inputNumberWidth` logic
chad1008 Jun 6, 2023
b10871d
Simplify minHeight refactor
chad1008 Jun 12, 2023
28ca84d
Merge branch 'trunk' into enhance/range-control-size
chad1008 Jun 13, 2023
1500f75
update changelog entry
chad1008 Jun 13, 2023
24190be
exclude unneeded `small` size case
chad1008 Jun 20, 2023
da32f2d
simplify deprecation flow
chad1008 Jun 20, 2023
6fec45f
prefer __unstableInputWidth over a css override
chad1008 Jun 20, 2023
34f8cf7
merge trunk into feature branch
chad1008 Jun 22, 2023
9447aac
Merge branch 'trunk' into enhance/range-control-size
chad1008 Jun 27, 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
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/block-inspector/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@

// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
.components-focal-point-picker-control,
.components-query-controls {
.components-query-controls,
.components-range-control {
.components-base-control {
margin-bottom: 0;
}
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/cover/edit/inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,7 @@ export default function CoverInspectorControls( {
max={ 100 }
step={ 10 }
required
__next40pxDefaultSize
/>
</ToolsPanelItem>
</InspectorControls>
Expand Down
2 changes: 2 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

## Unreleased

- `RangeControl`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size ([#49105](https://github.com/WordPress/gutenberg/pull/49105)).

### Bug Fix

- `Popover`: Allow legitimate 0 positions to update popover position ([#51320](https://github.com/WordPress/gutenberg/pull/51320)).
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/number-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ function UnforwardedNumberControl(
} );
spinControls = 'none';
}

const inputRef = useRef< HTMLInputElement >();
const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );

Expand Down
12 changes: 10 additions & 2 deletions packages/components/src/range-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ function UnforwardedRangeControl(
railColor,
renderTooltipContent = ( v ) => v,
resetFallbackValue,
__next40pxDefaultSize = false,
shiftStep = 10,
showTooltip: showTooltipProp,
step = 1,
Expand Down Expand Up @@ -208,7 +209,6 @@ function UnforwardedRangeControl(
const offsetStyle = {
[ isRTL() ? 'right' : 'left' ]: fillValueOffset,
};

return (
<BaseControl
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
Expand All @@ -218,7 +218,10 @@ function UnforwardedRangeControl(
id={ `${ id }` }
help={ help }
>
<Root className="components-range-control__root">
<Root
className="components-range-control__root"
__next40pxDefaultSize={ __next40pxDefaultSize }
>
{ beforeIcon && (
<BeforeIconWrapper>
<Icon icon={ beforeIcon } />
Expand Down Expand Up @@ -305,6 +308,11 @@ function UnforwardedRangeControl(
onBlur={ handleOnInputNumberBlur }
onChange={ handleOnChange }
shiftStep={ shiftStep }
size={
__next40pxDefaultSize
? '__unstable-large'
: 'default'
}
step={ step }
// @ts-expect-error TODO: Investigate if the `null` value is necessary
value={ inputSliderValue }
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/range-control/input-range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ function InputRange(
ref: React.ForwardedRef< HTMLInputElement >
) {
const { describedBy, label, value, ...otherProps } = props;

return (
<BaseInputRange
{ ...otherProps }
Expand Down
36 changes: 33 additions & 3 deletions packages/components/src/range-control/styles/range-control-styles.ts
View file
Open in desktop
chad1008 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -18,23 +18,39 @@ import type {
TooltipProps,
TrackProps,
WrapperProps,
RangeControlProps,
} from '../types';
import type { NumberControlProps } from '../../number-control/types';

const rangeHeightValue = 30;
const rangeHeightValueNext = 40;
const railHeight = 4;
const rangeHeight = () =>
css( { height: rangeHeightValue, minHeight: rangeHeightValue } );
const thumbSize = 12;

export const Root = styled.div`
const rootMinHeight = ( {
__next40pxDefaultSize,
}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) =>
css( {
minHeight: __next40pxDefaultSize
? rangeHeightValueNext
: rangeHeightValue,
} );

type RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >;
export const Root = styled.div< RootProps >`
-webkit-tap-highlight-color: transparent;
align-items: flex-start;
align-items: center;
display: flex;
justify-content: flex-start;
padding: 0;
position: relative;
touch-action: none;
width: 100%;

/* TODO: remove after removing the __next40pxDefaultSize prop */
${ rootMinHeight }
Copy link
Member

Choose a reason for hiding this comment

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

Just a stylistic thing, but as a courtesy for when we actually have to remove the temporary __next* props, I find it cleaner to structure the code so that the ! __next case is already handled as the exception case.

For example:

Suggested change
/* TODO: remove after removing the __next40pxDefaultSize prop */
${ rootMinHeight }
min-height: 40px;
${ deprecatedHeight };

where deprecatedHeight only handles the ! __next40pxDefaultSize case. The clean up will be easier this way. (Actual example)

Copy link
Contributor

Choose a reason for hiding this comment

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

Apologies, I had actually suggested Chad to write code this way!

Copy link
Contributor

Choose a reason for hiding this comment

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

Either works for me, happy to switch it back to the previous approach that matches your recommendation @mirka. da32f2d

`;

const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>
Expand Down Expand Up @@ -290,13 +306,27 @@ export const Tooltip = styled.span< TooltipProps >`
) }
`;

const inputNumberWidth = ( {
size = 'default',
}: Pick< NumberControlProps, 'size' > ) => {
const sizes = {
small: space( 16 ),
Copy link
Member

Choose a reason for hiding this comment

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

We can remove this because the small case will never happen.

Copy link
Contributor

@ciampo ciampo Jun 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

My bad on this one as well! This is also the result of a change that I suggested to clean up styles and types a bit, small is there to the sizes object has, as keys, all possible values that of size prop from NumberControl.

Feel free to make changes as needed :)

Copy link
Contributor

@chad1008 chad1008 Jun 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Good point. That only got added when we decided to re-use the NumberControl prop type instead of typing this bit locally. Can remove the small case, but I had to get a little creative with the typing as a result. 24190be

Edit: this might be a moot point if we can scrip this logic altogether

default: space( 16 ),
'__unstable-large': space( 20 ),
chad1008 marked this conversation as resolved.
Show resolved Hide resolved
};

return css`
width: ${ sizes[ size ?? 'default' ] };
`;
};

// @todo: Refactor RangeControl with latest HStack configuration
// @wordpress/components/ui/hstack.
export const InputNumber = styled( NumberControl )`
display: inline-block;
font-size: 13px;
margin-top: 0;
width: ${ space( 16 ) } !important;
${ inputNumberWidth };
Copy link
Member

Choose a reason for hiding this comment

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

Would it be better/possible to use the __unstableInputWidth prop on NumberControl rather than a CSS override?

Copy link
Contributor

Choose a reason for hiding this comment

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

That seems to work well for me when testing in Storybook. Was 6fec45f along the lines you were thinking? Just to make sure I've implemented it properly.

If so, it has the added benefit of simplifying all of that inputWidth logic and typing!


input[type='number']& {
${ rangeHeight };
Expand Down
6 changes: 6 additions & 0 deletions packages/components/src/range-control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,12 @@ export type RangeControlProps = Pick<
* @default 10
*/
shiftStep?: number;
/**
* Start opting into the larger default height that will become the default size in a future version.
*
* @default false
*/
__next40pxDefaultSize?: boolean;
/**
* Forcing the Tooltip UI to show or hide. This is overridden to `false`
* when `step` is set to the special string value `any`.
Expand Down