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 3 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
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
size="__unstable-large"
/>
</ToolsPanelItem>
</InspectorControls>
Expand Down
2 changes: 2 additions & 0 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,
size = 'default',
chad1008 marked this conversation as resolved.
Show resolved Hide resolved
shiftStep = 10,
showTooltip: showTooltipProp,
step = 1,
Expand Down Expand Up @@ -305,6 +306,7 @@ function UnforwardedRangeControl(
onBlur={ handleOnInputNumberBlur }
onChange={ handleOnChange }
shiftStep={ shiftStep }
size={ size }
step={ step }
// @ts-expect-error TODO: Investigate if the `null` value is necessary
value={ inputSliderValue }
Expand Down
23 changes: 21 additions & 2 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 @@ -12,6 +12,7 @@ import { COLORS, reduceMotion, rtl } from '../../utils';
import { space } from '../../ui/utils/space';

import type {
InputNumberProps,
RangeMarkProps,
RailProps,
ThumbProps,
Expand All @@ -28,7 +29,7 @@ const thumbSize = 12;

export const Root = styled.div`
-webkit-tap-highlight-color: transparent;
align-items: flex-start;
align-items: center;
display: flex;
justify-content: flex-start;
padding: 0;
Expand Down Expand Up @@ -290,13 +291,31 @@ export const Tooltip = styled.span< TooltipProps >`
) }
`;

const inputNumberWidth = ( { size }: InputNumberProps ) => {
const sizes = {
default: space( 16 ),
'__unstable-large': space( 20 ),
chad1008 marked this conversation as resolved.
Show resolved Hide resolved
};

if ( size === '__unstable-large' ) {
return css( {
width: `${ sizes[ '__unstable-large' ] } !important`,
} );
}

return css`
width: ${ sizes.default } !important;
`;
};
chad1008 marked this conversation as resolved.
Show resolved Hide resolved

// @todo: Refactor RangeControl with latest HStack configuration
// @wordpress/components/ui/hstack.
export const InputNumber = styled( NumberControl )`
display: inline-block;
font-size: 13px;
margin-bottom: 0 !important;
chad1008 marked this conversation as resolved.
Show resolved Hide resolved
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
12 changes: 12 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;
/**
* Adjusts the size of the input.
*
* @default 'default'
*/
size?: Size;
/**
* 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 Expand Up @@ -271,6 +277,12 @@ export type TrackProps = {
trackColor: CSSProperties[ 'color' ];
};

export type Size = 'default' | '__unstable-large';

export type InputNumberProps = {
size?: Size;
};

export type UseControlledRangeValueArgs = {
/**
* The initial value.
Expand Down