Skip to content

Commit

Permalink
CustomSelectControl: Hard deprecate constrained width (#58974)
Browse files Browse the repository at this point in the history
* CustomSelectControl: Hard deprecate constrained width

* Remove prop from consumers

* Update changelog

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
  • Loading branch information
3 people authored Feb 14, 2024
1 parent 6d3e24a commit 2d7a1de
Show file tree
Hide file tree
Showing 11 changed files with 7 additions and 67 deletions.
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
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
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
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
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
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

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
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
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

This file was deleted.

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
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

1 comment on commit 2d7a1de

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 2d7a1de.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7904887446
📝 Reported issues:

Please sign in to comment.