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

CustomSelectControl: Hard deprecate constrained width #58974

Merged
merged 4 commits into from
Feb 14, 2024
Merged

CustomSelectControl: Hard deprecate constrained width #58974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fec0c60
CustomSelectControl: Hard deprecate constrained width
mirka Feb 13, 2024
d0d1cd9
Remove prop from consumers
mirka Feb 13, 2024
53dacf2
Update changelog
mirka Feb 13, 2024
9f2d011
Merge branch 'trunk' into custom-select-control-width
mirka Feb 14, 2024
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: 0 additions & 1 deletion packages/block-editor/src/components/date-format-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,6 @@ function NonDefaultControls( { format, onChange } ) {
return (
<VStack>
<CustomSelectControl
__nextUnconstrainedWidth
label={ __( 'Choose a format' ) }
options={ [ ...suggestedOptions, customOption ] }
value={
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/src/components/font-appearance-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,6 @@ export default function FontAppearanceControl( props ) {
onChange={ ( { selectedItem } ) =>
onChange( selectedItem.style )
}
__nextUnconstrainedWidth
/>
)
);
Expand Down
1 change: 0 additions & 1 deletion ...block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,6 @@ export default function SpacingInputControl( {
options={ options }
label={ ariaLabel }
hideLabelFromVision={ true }
__nextUnconstrainedWidth={ true }
size={ '__unstable-large' }
onMouseOver={ onMouseOver }
onMouseOut={ onMouseOut }
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/src/hooks/position.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,6 @@ export function PositionPanelPure( {
help={ stickyHelpText }
>
<CustomSelectControl
__nextUnconstrainedWidth
__next40pxDefaultSize
className="block-editor-hooks__position-selection__select-control"
label={ __( 'Position' ) }
Expand Down
4 changes: 4 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,10 @@

## Unreleased

### Breaking Changes

- `CustomSelectControl`: Remove deprecated `__nextUnconstrainedWidth` prop and promote to default behavior ([#58974](https://github.com/WordPress/gutenberg/pull/58974)).

## 26.0.1 (2024-02-13)

### Bug Fix
Expand Down
10 changes: 0 additions & 10 deletions packages/components/src/custom-select-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ function MyCustomSelectControl() {
const [ , setFontSize ] = useState();
return (
<CustomSelectControl
__nextUnconstrainedWidth
label="Font Size"
options={ options }
onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
Expand All @@ -53,7 +52,6 @@ function MyControlledCustomSelectControl() {
const [ fontSize, setFontSize ] = useState( options[ 0 ] );
return (
<CustomSelectControl
__nextUnconstrainedWidth
label="Font Size"
options={ options }
onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
Expand Down Expand Up @@ -114,14 +112,6 @@ Can be used to externally control the value of the control, like in the `MyContr
- Type: `Object`
- Required: No

#### __nextUnconstrainedWidth
Copy link
Member

Choose a reason for hiding this comment

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

Should we also remove the corresponding prop from the legacy types:

gutenberg/packages/components/src/custom-select-control-v2/types.ts

Line 171 in 5939c41

__nextUnconstrainedWidth?: boolean;

Copy link
Member Author

Choose a reason for hiding this comment

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

Based on our discussion in #55401, we're going to keep it in the types indefinitely so consumer code can continue to compile, and to prevent future prop name collisions.

Copy link
Member

Choose a reason for hiding this comment

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

Sounds good 👍


Start opting into the unconstrained width style that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)

- Type: `Boolean`
- Required: No
- Default: `false`

#### onMouseOver

A handler for onMouseOver events.
Expand Down
25 changes: 3 additions & 22 deletions packages/components/src/custom-select-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,16 @@ import classnames from 'classnames';
import { Icon, check } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';
import { useCallback, useState } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
*/
import { VisuallyHidden } from '../visually-hidden';
import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
import SelectControlChevronDown from '../select-control/chevron-down';
import { InputBaseWithBackCompatMinWidth } from './styles';
import { StyledLabel } from '../base-control/styles/base-control-styles';
import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
import InputBase from '../input-control/input-base';

const itemToString = ( item ) => item?.name;
// This is needed so that in Windows, where
Expand Down Expand Up @@ -67,8 +66,6 @@ export default function CustomSelectControl( props ) {
const {
/** Start opting into the larger default height that will become the default size in a future version. */
__next40pxDefaultSize = false,
/** Start opting into the unconstrained width that will become the default in a future version. */
__nextUnconstrainedWidth = false,
className,
hideLabelFromVision,
label,
Expand Down Expand Up @@ -116,17 +113,6 @@ export default function CustomSelectControl( props ) {
onBlur?.( e );
}

if ( ! __nextUnconstrainedWidth ) {
deprecated(
'Constrained width styles for wp.components.CustomSelectControl',
{
since: '6.1',
version: '6.4',
hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version',
}
);
}

function getDescribedBy() {
if ( describedBy ) {
return describedBy;
Expand Down Expand Up @@ -180,14 +166,9 @@ export default function CustomSelectControl( props ) {
{ label }
</StyledLabel>
) }
<InputBaseWithBackCompatMinWidth
<InputBase
__next40pxDefaultSize={ __next40pxDefaultSize }
__nextUnconstrainedWidth={ __nextUnconstrainedWidth }
isFocused={ isOpen || isFocused }
__unstableInputWidth={
__nextUnconstrainedWidth ? undefined : 'auto'
}
labelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }
size={ size }
suffix={ <SelectControlChevronDown /> }
>
Expand Down Expand Up @@ -215,7 +196,7 @@ export default function CustomSelectControl( props ) {
</span>
) }
</SelectControlSelect>
</InputBaseWithBackCompatMinWidth>
</InputBase>
{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
{ isOpen &&
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/custom-select-control/stories/index.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ export default {

export const Default = CustomSelectControl.bind( {} );
Default.args = {
__nextUnconstrainedWidth: true,
label: 'Label',
options: [
{
Expand Down
28 changes: 0 additions & 28 deletions packages/components/src/custom-select-control/styles.ts
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/components/src/custom-select-control/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ const props = {
},
},
],
__nextUnconstrainedWidth: true,
};

const ControlledCustomSelectControl = ( { options } ) => {
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/font-size-picker/font-size-picker-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
return (
<CustomSelectControl
__next40pxDefaultSize={ __next40pxDefaultSize }
__nextUnconstrainedWidth
className="components-font-size-picker__select"
label={ __( 'Font size' ) }
hideLabelFromVision
Expand Down
Loading