From 2d7a1de35a0552309db5887a1d30c15f2a808500 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 15 Feb 2024 02:14:42 +0900 Subject: [PATCH] CustomSelectControl: Hard deprecate constrained width (#58974) * CustomSelectControl: Hard deprecate constrained width * Remove prop from consumers * Update changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- .../components/date-format-picker/index.js | 1 - .../font-appearance-control/index.js | 1 - .../input-controls/spacing-input-control.js | 1 - packages/block-editor/src/hooks/position.js | 1 - packages/components/CHANGELOG.md | 4 +++ .../src/custom-select-control/README.md | 10 ------- .../src/custom-select-control/index.js | 25 ++--------------- .../stories/index.story.js | 1 - .../src/custom-select-control/styles.ts | 28 ------------------- .../src/custom-select-control/test/index.js | 1 - .../font-size-picker-select.tsx | 1 - 11 files changed, 7 insertions(+), 67 deletions(-) delete mode 100644 packages/components/src/custom-select-control/styles.ts diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js index 7a2ed46b4a9b0..8c35b025bfccf 100644 --- a/packages/block-editor/src/components/date-format-picker/index.js +++ b/packages/block-editor/src/components/date-format-picker/index.js @@ -117,7 +117,6 @@ function NonDefaultControls( { format, onChange } ) { return ( onChange( selectedItem.style ) } - __nextUnconstrainedWidth /> ) ); diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js index c2b6ae30de7ac..f0b0d28e70c0f 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js @@ -297,7 +297,6 @@ export default function SpacingInputControl( { options={ options } label={ ariaLabel } hideLabelFromVision={ true } - __nextUnconstrainedWidth={ true } size={ '__unstable-large' } onMouseOver={ onMouseOver } onMouseOut={ onMouseOut } diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 5017cb34fc18b..e1e26d54aa242 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -288,7 +288,6 @@ export function PositionPanelPure( { help={ stickyHelpText } > setFontSize( selectedItem ) } @@ -53,7 +52,6 @@ function MyControlledCustomSelectControl() { const [ fontSize, setFontSize ] = useState( options[ 0 ] ); return ( setFontSize( selectedItem ) } @@ -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. diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js index eb3cf5ba0676e..5805e18b98dd4 100644 --- a/packages/components/src/custom-select-control/index.js +++ b/packages/components/src/custom-select-control/index.js @@ -11,7 +11,6 @@ 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 @@ -19,9 +18,9 @@ import deprecated from '@wordpress/deprecated'; 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 @@ -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, @@ -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; @@ -180,14 +166,9 @@ export default function CustomSelectControl( props ) { { label } ) } - } > @@ -215,7 +196,7 @@ export default function CustomSelectControl( props ) { ) } - + { /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
    { isOpen && diff --git a/packages/components/src/custom-select-control/stories/index.story.js b/packages/components/src/custom-select-control/stories/index.story.js index d8fea5c7baa00..ecfa3b06392ae 100644 --- a/packages/components/src/custom-select-control/stories/index.story.js +++ b/packages/components/src/custom-select-control/stories/index.story.js @@ -20,7 +20,6 @@ export default { export const Default = CustomSelectControl.bind( {} ); Default.args = { - __nextUnconstrainedWidth: true, label: 'Label', options: [ { diff --git a/packages/components/src/custom-select-control/styles.ts b/packages/components/src/custom-select-control/styles.ts deleted file mode 100644 index e16b5d0b7bdd7..0000000000000 --- a/packages/components/src/custom-select-control/styles.ts +++ /dev/null @@ -1,28 +0,0 @@ -/** - * External dependencies - */ -import { css } from '@emotion/react'; -import styled from '@emotion/styled'; - -/** - * Internal dependencies - */ -import InputBase from '../input-control/input-base'; -import { Container as InputControlContainer } from '../input-control/styles/input-control-styles'; - -type BackCompatMinWidthProps = { - __nextUnconstrainedWidth: boolean; -}; - -const backCompatMinWidth = ( props: BackCompatMinWidthProps ) => - ! props.__nextUnconstrainedWidth - ? css` - ${ InputControlContainer } { - min-width: 130px; - } - ` - : ''; - -export const InputBaseWithBackCompatMinWidth = styled( InputBase )` - ${ backCompatMinWidth } -`; diff --git a/packages/components/src/custom-select-control/test/index.js b/packages/components/src/custom-select-control/test/index.js index 52bb841a4f953..a4c61d0cdcecd 100644 --- a/packages/components/src/custom-select-control/test/index.js +++ b/packages/components/src/custom-select-control/test/index.js @@ -46,7 +46,6 @@ const props = { }, }, ], - __nextUnconstrainedWidth: true, }; const ControlledCustomSelectControl = ( { options } ) => { diff --git a/packages/components/src/font-size-picker/font-size-picker-select.tsx b/packages/components/src/font-size-picker/font-size-picker-select.tsx index 32438cfab8115..c5dca6bdb37a0 100644 --- a/packages/components/src/font-size-picker/font-size-picker-select.tsx +++ b/packages/components/src/font-size-picker/font-size-picker-select.tsx @@ -69,7 +69,6 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => { return (