From 690137ecb8f09da84b3b820f7cc1943700397def Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 6 Aug 2024 12:25:43 +0200 Subject: [PATCH 01/20] DataViews Actions: Update the copy of some the strings (#64099) Co-authored-by: Pascal Birchler --- .../actions/permanently-delete-post.tsx | 10 ++++----- .../src/dataviews/actions/trash-post.tsx | 22 +++++++++---------- .../editor/various/change-detection.spec.js | 2 +- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/editor/src/dataviews/actions/permanently-delete-post.tsx b/packages/editor/src/dataviews/actions/permanently-delete-post.tsx index 42efb8a32850f..2124fdc0ffa4c 100644 --- a/packages/editor/src/dataviews/actions/permanently-delete-post.tsx +++ b/packages/editor/src/dataviews/actions/permanently-delete-post.tsx @@ -48,7 +48,7 @@ const permanentlyDeletePost: Action< PostWithPermissions > = { getItemTitle( posts[ 0 ] ) ); } else { - successMessage = __( 'The posts were permanently deleted.' ); + successMessage = __( 'The items were permanently deleted.' ); } createSuccessNotice( successMessage, { type: 'snackbar', @@ -67,7 +67,7 @@ const permanentlyDeletePost: Action< PostWithPermissions > = { errorMessage = typedError.reason.message; } else { errorMessage = __( - 'An error occurred while permanently deleting the post.' + 'An error occurred while permanently deleting the item.' ); } // If we were trying to permanently delete multiple posts @@ -86,13 +86,13 @@ const permanentlyDeletePost: Action< PostWithPermissions > = { } if ( errorMessages.size === 0 ) { errorMessage = __( - 'An error occurred while permanently deleting the posts.' + 'An error occurred while permanently deleting the items.' ); } else if ( errorMessages.size === 1 ) { errorMessage = sprintf( /* translators: %s: an error message */ __( - 'An error occurred while permanently deleting the posts: %s' + 'An error occurred while permanently deleting the items: %s' ), [ ...errorMessages ][ 0 ] ); @@ -100,7 +100,7 @@ const permanentlyDeletePost: Action< PostWithPermissions > = { errorMessage = sprintf( /* translators: %s: a list of comma separated error messages */ __( - 'Some errors occurred while permanently deleting the posts: %s' + 'Some errors occurred while permanently deleting the items: %s' ), [ ...errorMessages ].join( ',' ) ); diff --git a/packages/editor/src/dataviews/actions/trash-post.tsx b/packages/editor/src/dataviews/actions/trash-post.tsx index a8e42c510a6cd..537a0ebd79a8a 100644 --- a/packages/editor/src/dataviews/actions/trash-post.tsx +++ b/packages/editor/src/dataviews/actions/trash-post.tsx @@ -23,7 +23,7 @@ import type { CoreDataError, PostWithPermissions } from '../types'; const trashPost: Action< PostWithPermissions > = { id: 'move-to-trash', - label: __( 'Move to Trash' ), + label: __( 'Move to trash' ), isPrimary: true, icon: trash, isEligible( item ) { @@ -51,15 +51,15 @@ const trashPost: Action< PostWithPermissions > = { ? sprintf( // translators: %s: The item's title. __( - 'Are you sure you want to move to trash "%s"?' + 'Are you sure you want to move "%s" to the trash?' ), getItemTitle( items[ 0 ] ) ) : sprintf( // translators: %d: The number of items (2 or more). _n( - 'Are you sure you want to move to trash %d item?', - 'Are you sure you want to move to trash %d items?', + 'Are you sure you want to move %d item to the trash ?', + 'Are you sure you want to move %d items to the trash ?', items.length ), items.length @@ -99,15 +99,15 @@ const trashPost: Action< PostWithPermissions > = { if ( promiseResult.length === 1 ) { successMessage = sprintf( /* translators: The item's title. */ - __( '"%s" moved to trash.' ), + __( '"%s" moved to the trash.' ), getItemTitle( items[ 0 ] ) ); } else { successMessage = sprintf( /* translators: The number of items. */ _n( - '%s item moved to trash.', - '%s items moved to trash.', + '%s item moved to the trash.', + '%s items moved to the trash.', items.length ), items.length @@ -130,7 +130,7 @@ const trashPost: Action< PostWithPermissions > = { typedError.reason.message; } else { errorMessage = __( - 'An error occurred while moving to trash the item.' + 'An error occurred while moving the item to the trash.' ); } // If we were trying to delete multiple items. @@ -151,13 +151,13 @@ const trashPost: Action< PostWithPermissions > = { } if ( errorMessages.size === 0 ) { errorMessage = __( - 'An error occurred while moving to trash the items.' + 'An error occurred while moving the items to the trash.' ); } else if ( errorMessages.size === 1 ) { errorMessage = sprintf( /* translators: %s: an error message */ __( - 'An error occurred while moving to trash the item: %s' + 'An error occurred while moving the item to the trash: %s' ), [ ...errorMessages ][ 0 ] ); @@ -165,7 +165,7 @@ const trashPost: Action< PostWithPermissions > = { errorMessage = sprintf( /* translators: %s: a list of comma separated error messages */ __( - 'Some errors occurred while moving to trash the items: %s' + 'Some errors occurred while moving the items to the trash: %s' ), [ ...errorMessages ].join( ',' ) ); diff --git a/test/e2e/specs/editor/various/change-detection.spec.js b/test/e2e/specs/editor/various/change-detection.spec.js index 4ac262f4c1348..30b2287a8d943 100644 --- a/test/e2e/specs/editor/various/change-detection.spec.js +++ b/test/e2e/specs/editor/various/change-detection.spec.js @@ -416,7 +416,7 @@ test.describe( 'Change detection', () => { .click(); await page .getByRole( 'menu' ) - .getByRole( 'menuitem', { name: 'Move to Trash' } ) + .getByRole( 'menuitem', { name: 'Move to trash' } ) .click(); await page .getByRole( 'dialog' ) From 30d82b88850fa277dce0dee6e178d6af5391200f Mon Sep 17 00:00:00 2001 From: "Joen A." <1204802+jasmussen@users.noreply.github.com> Date: Tue, 6 Aug 2024 13:24:47 +0200 Subject: [PATCH 02/20] Site Logo: Move tooltip to middle right. (#64296) Unlinked contributors: alaczek. Co-authored-by: jasmussen Co-authored-by: jameskoster Co-authored-by: Mamaduka Co-authored-by: mtias --- packages/block-library/src/site-logo/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index ac74ac2aeb6eb..b7e47ec542d1e 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -687,7 +687,7 @@ export default function LogoEdit( { variant="primary" label={ __( 'Choose logo' ) } showTooltip - tooltipPosition="bottom center" + tooltipPosition="middle right" onClick={ () => { open(); } } From 050c58f30ca8b0b5e9ee92da56fdc0e4dfa80b6d Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Tue, 6 Aug 2024 14:29:56 +0300 Subject: [PATCH 03/20] Navigation: Hide loading when overlay menu is selected (#64262) Co-authored-by: tyxla Co-authored-by: getdave --- packages/block-library/src/navigation/edit/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 5477dc1aeebf3..829c6395e047e 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -721,7 +721,7 @@ function Navigation( { ); const accessibleDescriptionId = `${ clientId }-desc`; - + const isHiddenByDefault = 'always' === overlayMenu; const isManageMenusButtonDisabled = ! hasManagePermissions || ! hasResolvedNavigationMenus; @@ -760,7 +760,7 @@ function Navigation( { hasIcon={ hasIcon } icon={ icon } isResponsive={ isResponsive } - isHiddenByDefault={ 'always' === overlayMenu } + isHiddenByDefault={ isHiddenByDefault } overlayBackgroundColor={ overlayBackgroundColor } overlayTextColor={ overlayTextColor } > @@ -899,13 +899,13 @@ function Navigation( { : undefined } > - { isLoading && ( + { isLoading && ! isHiddenByDefault && (
) } - { ! isLoading && ( + { ( ! isLoading || isHiddenByDefault ) && ( <> Date: Tue, 6 Aug 2024 15:16:30 +0200 Subject: [PATCH 04/20] Fix: Deleting a pattern throws a notice saying undefined deleted. (#64301) Co-authored-by: jorgefilipecosta --- packages/editor/src/store/private-actions.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js index c5fe1c260071a..0996d6eb8b9d3 100644 --- a/packages/editor/src/store/private-actions.js +++ b/packages/editor/src/store/private-actions.js @@ -393,10 +393,14 @@ export const removeTemplates = if ( items.length === 1 ) { // Depending on how the entity was retrieved its title might be // an object or simple string. - const title = - typeof items[ 0 ].title === 'string' - ? items[ 0 ].title - : items[ 0 ].title?.rendered; + let title; + if ( typeof items[ 0 ].title === 'string' ) { + title = items[ 0 ].title; + } else if ( typeof items[ 0 ].title?.rendered === 'string' ) { + title = items[ 0 ].title?.rendered; + } else if ( typeof items[ 0 ].title?.raw === 'string' ) { + title = items[ 0 ].title?.raw; + } successMessage = isResetting ? sprintf( /* translators: The template/part's name. */ From a52b95110ae225bbcb6a63af3b8700717ebc7060 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 6 Aug 2024 10:05:07 -0400 Subject: [PATCH 05/20] Move Posts Per Page, Offset, and Pages controls from the block toolbar into Inspector Controls (#58207) * Add Per Page Controls to the Query Loop block. * Update changelog. * Update the max posts per page to match the toolbar control. * Wrap per page, offset, and max pages controls to Inspector controls inside a ToolsPanel and move them to the Inspector Controls for the block. * Remove per page, offset and pages controls from block toolbar. * Rename ToolsPanel to "Display" * Fix leftover for incorrect dropdownMenuProps value. * Convert RangeControl value to number. * Add missing value checks for perPage, offset, and max pages controls. * Update e2e test * Fix PHPCS * large and minor label tweak * "posts per page" Co-authored-by: ryanwelcher Co-authored-by: afercia Co-authored-by: Mamaduka Co-authored-by: richtabor Co-authored-by: justintadlock Co-authored-by: fabiankaegy Co-authored-by: jameskoster Co-authored-by: t-hamano * Add __nextHasNoMarginBottom to the Per Page RangeControl component. --------- Co-authored-by: Andrea Fercia Co-authored-by: George Mamadashvili Co-authored-by: Rich Tabor --- packages/block-library/CHANGELOG.md | 4 + .../query/edit/inspector-controls/index.js | 57 ++++++++++++ .../inspector-controls/offset-controls.js | 31 +++++++ .../edit/inspector-controls/order-control.js | 1 - .../edit/inspector-controls/pages-control.js | 27 ++++++ .../inspector-controls/per-page-control.js | 33 +++++++ .../src/query/edit/query-toolbar.js | 91 +------------------ packages/e2e-tests/plugins/observe-typing.php | 28 ++++++ .../e2e-tests/plugins/observe-typing/index.js | 45 +++++++++ .../specs/editor/various/is-typing.spec.js | 40 ++++---- 10 files changed, 245 insertions(+), 112 deletions(-) create mode 100644 packages/block-library/src/query/edit/inspector-controls/offset-controls.js create mode 100644 packages/block-library/src/query/edit/inspector-controls/pages-control.js create mode 100644 packages/block-library/src/query/edit/inspector-controls/per-page-control.js create mode 100644 packages/e2e-tests/plugins/observe-typing.php create mode 100644 packages/e2e-tests/plugins/observe-typing/index.js diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 226183e04396e..652c89fd3540e 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### New Feature + +- Query Loop Block: Moves per page, offset, and pages controls into Inspector Controls. ([#58207](https://github.com/WordPress/gutenberg/pull/58207)) + ## 9.4.0 (2024-07-24) ## 9.3.0 (2024-07-10) diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js index 5e83ea3aaa973..2601430329092 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -27,6 +27,9 @@ import { TaxonomyControls } from './taxonomy-controls'; import StickyControl from './sticky-control'; import EnhancedPaginationControl from './enhanced-pagination-control'; import CreateNewPostLink from './create-new-post-link'; +import PerPageControl from './per-page-control'; +import OffsetControl from './offset-controls'; +import PagesControl from './pages-control'; import { unlock } from '../../../lock-unlock'; import { usePostTypes, @@ -47,7 +50,10 @@ export default function QueryInspectorControls( props ) { order, orderBy, author: authorIds, + pages, postType, + perPage, + offset, sticky, inherit, taxQuery, @@ -135,6 +141,16 @@ export default function QueryInspectorControls( props ) { showParentControl; const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + const showPostCountControl = isControlAllowed( + allowedControls, + 'postCount' + ); + const showOffSetControl = isControlAllowed( allowedControls, 'offset' ); + const showPagesControl = isControlAllowed( allowedControls, 'pages' ); + + const showDisplayPanel = + showPostCountControl || showOffSetControl || showPagesControl; + return ( <> { !! postType && ( @@ -253,6 +269,47 @@ export default function QueryInspectorControls( props ) { /> ) } + { ! inherit && showDisplayPanel && ( + { + setQuery( { + offset: 0, + pages: 0, + } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > + perPage > 0 } + > + + + offset > 0 } + onDeselect={ () => setQuery( { offset: 0 } ) } + > + + + pages > 0 } + onDeselect={ () => setQuery( { pages: 0 } ) } + > + + + + ) } { ! inherit && showFiltersPanel && ( { + return ( + { + if ( + isNaN( newOffset ) || + newOffset < MIN_OFFSET || + newOffset > MAX_OFFSET + ) { + return; + } + onChange( { offset: newOffset } ); + } } + /> + ); +}; + +export default OffsetControl; diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js index 2f6fa0e589d47..d50d3349bcbaf 100644 --- a/packages/block-library/src/query/edit/inspector-controls/order-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js @@ -27,7 +27,6 @@ const orderOptions = [ function OrderControl( { order, orderBy, onChange } ) { return ( { + return ( + { + if ( isNaN( newPages ) || newPages < 0 ) { + return; + } + onChange( { pages: newPages } ); + } } + help={ __( + 'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).' + ) } + /> + ); +}; + +export default PagesControl; diff --git a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js new file mode 100644 index 0000000000000..3e0dfbf50b70b --- /dev/null +++ b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js @@ -0,0 +1,33 @@ +/** + * WordPress dependencies + */ +import { RangeControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +const MIN_POSTS_PER_PAGE = 1; +const MAX_POSTS_PER_PAGE = 100; + +const PerPageControl = ( { perPage, offset = 0, onChange } ) => { + return ( + { + if ( + isNaN( newPerPage ) || + newPerPage < MIN_POSTS_PER_PAGE || + newPerPage > MAX_POSTS_PER_PAGE + ) { + return; + } + onChange( { perPage: newPerPage, offset } ); + } } + value={ parseInt( perPage, 10 ) } + /> + ); +}; + +export default PerPageControl; diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js index ff670d7c001a6..cc2d62a54d529 100644 --- a/packages/block-library/src/query/edit/query-toolbar.js +++ b/packages/block-library/src/query/edit/query-toolbar.js @@ -1,14 +1,8 @@ /** * WordPress dependencies */ -import { - ToolbarGroup, - Dropdown, - ToolbarButton, - __experimentalNumberControl as NumberControl, -} from '@wordpress/components'; +import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { settings } from '@wordpress/icons'; /** * Internal dependencies @@ -16,8 +10,6 @@ import { settings } from '@wordpress/icons'; import { usePatterns } from '../utils'; export default function QueryToolbar( { - attributes: { query }, - setQuery, openPatternSelectionModal, name, clientId, @@ -26,87 +18,6 @@ export default function QueryToolbar( { return ( <> - { ! query.inherit && ( - - ( - - ) } - renderContent={ () => ( - <> - { - if ( - isNaN( value ) || - value < 1 || - value > 100 - ) { - return; - } - setQuery( { - perPage: value, - } ); - } } - step="1" - value={ query.perPage } - isDragEnabled={ false } - /> - { - if ( - isNaN( value ) || - value < 0 || - value > 100 - ) { - return; - } - setQuery( { offset: value } ); - } } - step="1" - value={ query.offset } - isDragEnabled={ false } - /> - { - if ( isNaN( value ) || value < 0 ) { - return; - } - setQuery( { pages: value } ); - } } - step="1" - value={ query.pages } - isDragEnabled={ false } - help={ __( - 'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).' - ) } - /> - - ) } - /> - - ) } { hasPatterns && ( diff --git a/packages/e2e-tests/plugins/observe-typing.php b/packages/e2e-tests/plugins/observe-typing.php new file mode 100644 index 0000000000000..a9152bc79684c --- /dev/null +++ b/packages/e2e-tests/plugins/observe-typing.php @@ -0,0 +1,28 @@ + + el( + ToolbarButton, + { + onClick: onToggle, + }, + 'Open Dropdown' + ), + renderContent: () => + el( TextControl, { + label: 'Dropdown field', + value, + onChange: setValue, + __next40pxDefaultSize: true, + } ), + } ) + ), + el( 'p', {}, 'Hello Editor!' ) + ); + }, + save: () => null, + } ); +} )(); diff --git a/test/e2e/specs/editor/various/is-typing.spec.js b/test/e2e/specs/editor/various/is-typing.spec.js index 10ac90d108412..da4492a89bef3 100644 --- a/test/e2e/specs/editor/various/is-typing.spec.js +++ b/test/e2e/specs/editor/various/is-typing.spec.js @@ -4,10 +4,18 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'isTyping', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( 'gutenberg-test-observe-typing' ); + } ); + test.beforeEach( async ( { admin } ) => { await admin.createNewPost(); } ); + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.deactivatePlugin( 'gutenberg-test-observe-typing' ); + } ); + test( 'should hide the toolbar when typing', async ( { editor, page } ) => { // Enter to reach paragraph block. await page.keyboard.press( 'Enter' ); @@ -42,33 +50,23 @@ test.describe( 'isTyping', () => { page, } ) => { // Add a block with a dropdown in the toolbar that contains an input. - await editor.insertBlock( { name: 'core/query' } ); - - await editor.canvas - .getByRole( 'document', { name: 'Block: Query Loop' } ) - .getByRole( 'button', { name: 'Start blank' } ) - .click(); - - await editor.canvas - .getByRole( 'button', { name: 'Title & Date' } ) - .click(); - - await editor.openDocumentSettingsSidebar(); - await page.getByLabel( 'Custom' ).click(); + await editor.insertBlock( { name: 'e2e-tests/observe-typing' } ); // Moving the mouse shows the toolbar. await editor.showBlockToolbar(); // Open the dropdown. - const displaySettings = page.getByRole( 'button', { - name: 'Display settings', + await page + .getByRole( 'button', { + name: 'Open Dropdown', + } ) + .click(); + + const textControl = page.getByRole( 'textbox', { + name: 'Dropdown field', } ); - await displaySettings.click(); - const itemsPerPageInput = page.getByLabel( 'Items per Page' ); - // Make sure we're where we think we are - await expect( itemsPerPageInput ).toBeFocused(); // Type inside the dropdown's input - await page.keyboard.type( '00' ); + await textControl.pressSequentially( 'Hello' ); // The input should still be visible. - await expect( itemsPerPageInput ).toBeVisible(); + await expect( textControl ).toBeVisible(); } ); } ); From 8b5cdba185ca9e65847d4db6172b71a9c63332ba Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 6 Aug 2024 23:51:50 +0900 Subject: [PATCH 06/20] FontFamilyControl: Deprecate bottom margin (#64280) * FontFamilyControl: Deprecate bottom margin * Add changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- packages/block-editor/CHANGELOG.md | 4 ++ .../src/components/font-family/README.md | 8 +++ .../src/components/font-family/index.js | 16 ++++++ .../font-family/stories/index.story.js | 54 +++++++++++++++++++ 4 files changed, 82 insertions(+) create mode 100644 packages/block-editor/src/components/font-family/stories/index.story.js diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 11cc15c15f0b0..9744b5240d004 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- `FontFamilyControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#64280](https://github.com/WordPress/gutenberg/pull/64280)). + ## 13.4.0 (2024-07-24) ## 13.3.0 (2024-07-10) diff --git a/packages/block-editor/src/components/font-family/README.md b/packages/block-editor/src/components/font-family/README.md index 5300873ab8345..6b37459fd127e 100644 --- a/packages/block-editor/src/components/font-family/README.md +++ b/packages/block-editor/src/components/font-family/README.md @@ -24,6 +24,7 @@ const MyFontFamilyControl = () => { onChange={ ( newFontFamily ) => { setFontFamily( newFontFamily ); } } + __nextHasNoMarginBottom /> ); }; @@ -69,3 +70,10 @@ The current font family value. - Default: '' The rest of the props are passed down to the underlying `` instance. + +#### `__nextHasNoMarginBottom` + +- **Type:** `boolean` +- **Default:** `false` + +Start opting into the new margin-free styles that will become the default in a future version. diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index 4a40a880e537c..90a0412463b3e 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { SelectControl } from '@wordpress/components'; +import deprecated from '@wordpress/deprecated'; import { __ } from '@wordpress/i18n'; /** @@ -10,6 +11,8 @@ import { __ } from '@wordpress/i18n'; import { useSettings } from '../use-settings'; export default function FontFamilyControl( { + /** Start opting into the new margin-free styles that will become the default in a future version. */ + __nextHasNoMarginBottom = false, value = '', onChange, fontFamilies, @@ -33,8 +36,21 @@ export default function FontFamilyControl( { }; } ), ]; + + if ( ! __nextHasNoMarginBottom ) { + deprecated( + 'Bottom margin styles for wp.blockEditor.FontFamilyControl', + { + since: '6.7', + version: '7.0', + hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version', + } + ); + } + return ( + ); + }, + args: { + fontFamilies: [ + { + fontFace: [ + { + fontFamily: 'Inter', + fontStretch: 'normal', + fontStyle: 'normal', + fontWeight: '200 900', + src: [ + 'file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf', + ], + }, + ], + fontFamily: '"Inter", sans-serif', + name: 'Inter', + slug: 'inter', + }, + { + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + name: 'System Font', + slug: 'system-font', + }, + ], + __nextHasNoMarginBottom: true, + }, +}; From fa98fb5035174aeace799068171d2a59ce7ee1e8 Mon Sep 17 00:00:00 2001 From: "Joen A." <1204802+jasmussen@users.noreply.github.com> Date: Tue, 6 Aug 2024 17:01:51 +0200 Subject: [PATCH 07/20] Try: 1.5px styles icon circle. (#64187) Co-authored-by: jasmussen Co-authored-by: jameskoster --- packages/icons/src/library/styles.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/icons/src/library/styles.js b/packages/icons/src/library/styles.js index c91683d55dce1..7d3568e43fd17 100644 --- a/packages/icons/src/library/styles.js +++ b/packages/icons/src/library/styles.js @@ -5,7 +5,11 @@ import { Path, SVG } from '@wordpress/primitives'; export const styles = ( - + ); From cd0118f623cf0c3b155ed18d30f0949a4f308b70 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 7 Aug 2024 00:59:30 +0900 Subject: [PATCH 08/20] LineHeightControl: Hard deprecate bottom margin (#64281) * LineHeightControl: Hard deprecate bottom margin * Remove prop usage in app * Add changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- packages/block-editor/CHANGELOG.md | 4 ++++ .../global-styles/typography-panel.js | 1 - .../components/line-height-control/README.md | 8 ------- .../components/line-height-control/index.js | 22 +------------------ .../stories/index.story.js | 1 - .../line-height-control/test/index.js | 8 +------ .../block-editor/src/hooks/line-height.js | 1 - 7 files changed, 6 insertions(+), 39 deletions(-) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 9744b5240d004..5ba19b090d925 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- `LineHeightControl`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#64281](https://github.com/WordPress/gutenberg/pull/64281)). + ### Enhancements - `FontFamilyControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#64280](https://github.com/WordPress/gutenberg/pull/64280)). diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index f6a389a5bc96d..9bc875cdc0a30 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -474,7 +474,6 @@ export default function TypographyPanel( { panelId={ panelId } > ( ); ``` @@ -37,13 +36,6 @@ The value of the line height. A callback function that handles the application of the line height value. -#### `__nextHasNoMarginBottom` - -- **Type:** `boolean` -- **Default:** `false` - -Start opting into the new margin-free styles 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.) - ## Related components Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree. diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index 8150c2d60027e..d605aea3d2ef1 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import deprecated from '@wordpress/deprecated'; import { __ } from '@wordpress/i18n'; import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; @@ -19,8 +18,6 @@ import { const LineHeightControl = ( { value: lineHeight, onChange, - /** Start opting into the new margin-free styles that will become the default in a future version. */ - __nextHasNoMarginBottom = false, __unstableInputWidth = '60px', ...otherProps } ) => { @@ -76,20 +73,6 @@ const LineHeightControl = ( { const value = isDefined ? lineHeight : RESET_VALUE; - if ( ! __nextHasNoMarginBottom ) { - deprecated( - 'Bottom margin styles for wp.blockEditor.LineHeightControl', - { - since: '6.0', - version: '6.4', - hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version', - } - ); - } - const deprecatedStyles = __nextHasNoMarginBottom - ? undefined - : { marginBottom: 24 }; - const handleOnChange = ( nextValue, { event } ) => { if ( nextValue === '' ) { onChange(); @@ -105,10 +88,7 @@ const LineHeightControl = ( { }; return ( -
+
{ export const Default = Template.bind( {} ); Default.args = { - __nextHasNoMarginBottom: true, __unstableInputWidth: '100px', }; diff --git a/packages/block-editor/src/components/line-height-control/test/index.js b/packages/block-editor/src/components/line-height-control/test/index.js index 7a101219f2f82..b98bc93c48a83 100644 --- a/packages/block-editor/src/components/line-height-control/test/index.js +++ b/packages/block-editor/src/components/line-height-control/test/index.js @@ -19,13 +19,7 @@ const SPIN = STEP * SPIN_FACTOR; const ControlledLineHeightControl = () => { const [ value, setValue ] = useState(); - return ( - - ); + return ; }; describe( 'LineHeightControl', () => { diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js index fc8bd194c1210..9c27b9d026972 100644 --- a/packages/block-editor/src/hooks/line-height.js +++ b/packages/block-editor/src/hooks/line-height.js @@ -39,7 +39,6 @@ export function LineHeightEdit( props ) { return ( Date: Wed, 7 Aug 2024 02:03:37 +0900 Subject: [PATCH 09/20] URLInput: Hard deprecate bottom margin (#64282) * URLInput: Add story * URLInput: Hard deprecate bottom margin * Add changelog * Remove story Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- packages/block-editor/CHANGELOG.md | 1 + .../src/components/link-control/search-input.js | 1 - .../src/components/url-input/README.md | 5 ----- .../src/components/url-input/button.js | 1 - .../src/components/url-input/index.js | 16 +--------------- .../src/components/url-popover/link-editor.js | 1 - packages/block-library/src/social-link/edit.js | 1 - 7 files changed, 2 insertions(+), 24 deletions(-) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 5ba19b090d925..bc7d1b88bc9b0 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -4,6 +4,7 @@ ### Breaking Changes +- `URLInput`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#64282](https://github.com/WordPress/gutenberg/pull/64282)). - `LineHeightControl`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#64281](https://github.com/WordPress/gutenberg/pull/64281)). ### Enhancements diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js index 78730463389e2..3a5dcd4148e95 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -119,7 +119,6 @@ const LinkControlSearchInput = forwardRef(
setAttributes( { url, text: (post && post.title) || 'Click here' } ) } diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js index fca054993e7c3..6ee6b96f61e0e 100644 --- a/packages/block-editor/src/components/url-input/button.js +++ b/packages/block-editor/src/components/url-input/button.js @@ -57,7 +57,6 @@ class URLInputButton extends Component { onClick={ this.toggle } /> diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 36e279f94cc79..8360bfada853c 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -6,7 +6,6 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import deprecated from '@wordpress/deprecated'; import { __, sprintf, _n } from '@wordpress/i18n'; import { Component, createRef } from '@wordpress/element'; import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes'; @@ -416,8 +415,6 @@ class URLInput extends Component { renderControl() { const { - /** Start opting into the new margin-free styles that will become the default in a future version. */ - __nextHasNoMarginBottom = false, label = null, className, isFullWidth, @@ -473,19 +470,8 @@ class URLInput extends Component { return renderControl( controlProps, inputProps, loading ); } - if ( ! __nextHasNoMarginBottom ) { - deprecated( 'Bottom margin styles for wp.blockEditor.URLInput', { - since: '6.2', - version: '6.5', - hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version', - } ); - } - return ( - + { loading && } diff --git a/packages/block-editor/src/components/url-popover/link-editor.js b/packages/block-editor/src/components/url-popover/link-editor.js index dc9d6d45590d3..e7d39eed764b8 100644 --- a/packages/block-editor/src/components/url-popover/link-editor.js +++ b/packages/block-editor/src/components/url-popover/link-editor.js @@ -31,7 +31,6 @@ export default function LinkEditor( { { ...props } >
setAttributes( { url: nextURL } ) From 4efb352e8b3e84daf69d02209d45cc000c4a2efa Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 6 Aug 2024 15:45:58 -0400 Subject: [PATCH 10/20] Update data-core.md (#64309) Fix heading level causing issues with sidebar menu --- docs/reference-guides/data/data-core.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/reference-guides/data/data-core.md b/docs/reference-guides/data/data-core.md index f4138c49dc8d6..f08fbc960b8b2 100644 --- a/docs/reference-guides/data/data-core.md +++ b/docs/reference-guides/data/data-core.md @@ -2,7 +2,7 @@ Namespace: `core`. -### Dynamically generated selectors +## Dynamically generated selectors There are a number of user-friendly selectors that are wrappers of the more generic `getEntityRecord` and `getEntityRecords` that can be used to retrieve information for the various entities. From 0f81a4262f394139b411035b4db3a29c938b0947 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 7 Aug 2024 05:57:06 +0900 Subject: [PATCH 11/20] Add margin-bottom lint rules for ToggleControl (#64213) * Fix in ImageSettingsPanel * Fix in block hooks * Fix in Avatar block * Fix in Details block * Fix in Latest posts block * Fix in Query Loop block * Fix in Tag Cloud block * Fix in Add New Pattern modal * Fix in Create pattern modal * Fix in ReusableBlockConvertButton * Add eslint rule * Add prop to docs * Fix up Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- .eslintrc.js | 1 + .../src/components/global-styles/image-settings-panel.js | 1 + packages/block-editor/src/hooks/block-hooks.js | 1 + packages/block-library/src/avatar/edit.js | 1 + packages/block-library/src/details/edit.js | 1 + packages/block-library/src/latest-posts/edit.js | 1 + .../inspector-controls/enhanced-pagination-control.js | 1 + packages/block-library/src/tag-cloud/edit.js | 1 + packages/components/src/toggle-control/README.md | 9 +++++++++ packages/components/src/toggle-control/index.tsx | 1 + .../edit-post/src/components/init-pattern-modal/index.js | 1 + packages/patterns/src/components/create-pattern-modal.js | 1 + .../reusable-block-convert-button.js | 1 + 13 files changed, 21 insertions(+) diff --git a/.eslintrc.js b/.eslintrc.js index 97c9f395194f3..cb132fbb3d7ab 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -297,6 +297,7 @@ module.exports = { 'SearchControl', 'TextControl', 'TextareaControl', + 'ToggleControl', 'ToggleGroupControl', 'TreeSelect', ].map( ( componentName ) => ( { diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index f668e7e5efc24..4ebc20ab20198 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -67,6 +67,7 @@ export default function ImageSettingsPanel( { panelId={ panelId } > { attributes.isLink && ( setAttributes( { diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js index 3432c00d7ab0c..314556ba6d591 100644 --- a/packages/block-library/src/details/edit.js +++ b/packages/block-library/src/details/edit.js @@ -48,6 +48,7 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) { diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index ce8f75c671c83..49a24b08f68d7 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -202,6 +202,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { diff --git a/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js index 293baead3f5c6..e1001cda4dab3 100644 --- a/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js @@ -36,6 +36,7 @@ export default function EnhancedPaginationControl( { return ( <> diff --git a/packages/components/src/toggle-control/README.md b/packages/components/src/toggle-control/README.md index 3a77ef6942d2e..cf480360265ed 100644 --- a/packages/components/src/toggle-control/README.md +++ b/packages/components/src/toggle-control/README.md @@ -15,6 +15,7 @@ const MyToggleControl = () => { return ( setValue( ( state ) => ! state ) } diff --git a/packages/edit-post/src/components/init-pattern-modal/index.js b/packages/edit-post/src/components/init-pattern-modal/index.js index a40ffc5dc5856..bb448953364f0 100644 --- a/packages/edit-post/src/components/init-pattern-modal/index.js +++ b/packages/edit-post/src/components/init-pattern-modal/index.js @@ -74,6 +74,7 @@ export default function InitPatternModal() { __next40pxDefaultSize /> Date: Wed, 7 Aug 2024 07:08:17 +0900 Subject: [PATCH 12/20] SelectControl: Infer `value` type from `options` (#64069) * SelectControl: Infer `value` type from `options` * Don't infer onChange * Add static type tests Co-authored-by: Mikey Binns * Rename generic to `V` (for `value`) * Add changelog * Simplify return type --------- Co-authored-by: Mikey Binns Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: mikeybinns Co-authored-by: ciampo Co-authored-by: jsnajdr Co-authored-by: tyxla Co-authored-by: DaniGuardiola --- packages/components/CHANGELOG.md | 1 + .../components/src/date-time/time/index.tsx | 35 ++--- .../components/src/query-controls/index.tsx | 6 +- .../components/src/select-control/index.tsx | 20 ++- .../select-control/test/select-control.tsx | 125 ++++++++++++++++++ .../components/src/select-control/types.ts | 118 +++++++++-------- 6 files changed, 226 insertions(+), 79 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a71b5a0ddef35..8ecbf1528d6f0 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,6 +13,7 @@ - `TimeInput`: Expose as subcomponent of `TimePicker` ([#63145](https://github.com/WordPress/gutenberg/pull/63145)). - `RadioControl`: add support for option help text ([#63751](https://github.com/WordPress/gutenberg/pull/63751)). +- `SelectControl`: Infer `value` type from `options` ([#64069](https://github.com/WordPress/gutenberg/pull/64069)). - `Guide`: Add `__next40pxDefaultSize` to buttons ([#64181](https://github.com/WordPress/gutenberg/pull/64181)). - `SelectControl`: Pass through `options` props ([#64211](https://github.com/WordPress/gutenberg/pull/64211)). diff --git a/packages/components/src/date-time/time/index.tsx b/packages/components/src/date-time/time/index.tsx index 809376d99d303..5f706d6919009 100644 --- a/packages/components/src/date-time/time/index.tsx +++ b/packages/components/src/date-time/time/index.tsx @@ -77,10 +77,28 @@ export function TimePicker( { ); }, [ currentTime ] ); + const monthOptions = [ + { value: '01', label: __( 'January' ) }, + { value: '02', label: __( 'February' ) }, + { value: '03', label: __( 'March' ) }, + { value: '04', label: __( 'April' ) }, + { value: '05', label: __( 'May' ) }, + { value: '06', label: __( 'June' ) }, + { value: '07', label: __( 'July' ) }, + { value: '08', label: __( 'August' ) }, + { value: '09', label: __( 'September' ) }, + { value: '10', label: __( 'October' ) }, + { value: '11', label: __( 'November' ) }, + { value: '12', label: __( 'December' ) }, + ] as const; + const { day, month, year, minutes, hours } = useMemo( () => ( { day: format( date, 'dd' ), - month: format( date, 'MM' ), + month: format( + date, + 'MM' + ) as ( typeof monthOptions )[ number ][ 'value' ], year: format( date, 'yyyy' ), minutes: format( date, 'mm' ), hours: format( date, 'HH' ), @@ -146,20 +164,7 @@ export function TimePicker( { __next40pxDefaultSize __nextHasNoMarginBottom value={ month } - options={ [ - { value: '01', label: __( 'January' ) }, - { value: '02', label: __( 'February' ) }, - { value: '03', label: __( 'March' ) }, - { value: '04', label: __( 'April' ) }, - { value: '05', label: __( 'May' ) }, - { value: '06', label: __( 'June' ) }, - { value: '07', label: __( 'July' ) }, - { value: '08', label: __( 'August' ) }, - { value: '09', label: __( 'September' ) }, - { value: '10', label: __( 'October' ) }, - { value: '11', label: __( 'November' ) }, - { value: '12', label: __( 'December' ) }, - ] } + options={ monthOptions } onChange={ ( value ) => { const newDate = setMonth( date, Number( value ) - 1 ); setDate( newDate ); diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx index de53c63a9b8a8..3557335ebac5a 100644 --- a/packages/components/src/query-controls/index.tsx +++ b/packages/components/src/query-controls/index.tsx @@ -85,7 +85,11 @@ export function QueryControls( { __next40pxDefaultSize={ __next40pxDefaultSize } key="query-controls-order-select" label={ __( 'Order by' ) } - value={ `${ orderBy }/${ order }` } + value={ + orderBy === undefined || order === undefined + ? undefined + : `${ orderBy }/${ order }` + } options={ [ { label: __( 'Newest to oldest' ), diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx index 874b6ace1ea94..8a3b6bda68a16 100644 --- a/packages/components/src/select-control/index.tsx +++ b/packages/components/src/select-control/index.tsx @@ -42,8 +42,8 @@ function SelectOptions( { } ); } -function UnforwardedSelectControl( - props: WordPressComponentProps< SelectControlProps, 'select', false >, +function UnforwardedSelectControl< V extends string >( + props: WordPressComponentProps< SelectControlProps< V >, 'select', false >, ref: React.ForwardedRef< HTMLSelectElement > ) { const { @@ -82,12 +82,14 @@ function UnforwardedSelectControl( const selectedOptions = Array.from( event.target.options ).filter( ( { selected } ) => selected ); - const newValues = selectedOptions.map( ( { value } ) => value ); + const newValues = selectedOptions.map( + ( { value } ) => value as V + ); props.onChange?.( newValues, { event } ); return; } - props.onChange?.( event.target.value, { event } ); + props.onChange?.( event.target.value as V, { event } ); }; const classes = clsx( 'components-select-control', className ); @@ -164,6 +166,14 @@ function UnforwardedSelectControl( * }; * ``` */ -export const SelectControl = forwardRef( UnforwardedSelectControl ); +export const SelectControl = forwardRef( UnforwardedSelectControl ) as < + V extends string, +>( + props: WordPressComponentProps< + SelectControlProps< V >, + 'select', + false + > & { ref?: React.Ref< HTMLSelectElement > } +) => React.JSX.Element | null; export default SelectControl; diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx index f2da74d9a6e91..0e8a689108704 100644 --- a/packages/components/src/select-control/test/select-control.tsx +++ b/packages/components/src/select-control/test/select-control.tsx @@ -100,4 +100,129 @@ describe( 'SelectControl', () => { screen.getByRole( 'option', { name: 'Aria label' } ) ).toBeInTheDocument(); } ); + + /* eslint-disable jest/expect-expect */ + describe( 'static typing', () => { + describe( 'single', () => { + it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => { + const onChange: ( value: 'foo' | 'bar' ) => void = () => {}; + + ; + + value === 'string' } + />; + } ); + + it( 'should accept an explicit type argument', () => { + + // @ts-expect-error "string" is not "narrow" or "value" + value="string" + options={ [ + { + value: 'narrow', + label: 'Narrow', + }, + { + // @ts-expect-error "string" is not "narrow" or "value" + value: 'string', + label: 'String', + }, + ] } + />; + } ); + } ); + + describe( 'multiple', () => { + it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => { + const onChange: ( + value: ( 'foo' | 'bar' )[] + ) => void = () => {}; + + ; + + + // @ts-expect-error "string" is not "narrow" or "value" + value.forEach( ( v ) => v === 'string' ) + } + />; + } ); + + it( 'should accept an explicit type argument', () => { + + multiple + // @ts-expect-error "string" is not "narrow" or "value" + value={ [ 'string' ] } + options={ [ + { + value: 'narrow', + label: 'Narrow', + }, + { + // @ts-expect-error "string" is not "narrow" or "value" + value: 'string', + label: 'String', + }, + ] } + />; + } ); + } ); + } ); + /* eslint-enable jest/expect-expect */ } ); diff --git a/packages/components/src/select-control/types.ts b/packages/components/src/select-control/types.ts index a5d0d740c593c..4e7211ab9abfb 100644 --- a/packages/components/src/select-control/types.ts +++ b/packages/components/src/select-control/types.ts @@ -9,7 +9,7 @@ import type { ChangeEvent, ReactNode } from 'react'; import type { InputBaseProps } from '../input-control/types'; import type { BaseControlProps } from '../base-control/types'; -type SelectControlBaseProps = Pick< +type SelectControlBaseProps< V extends string > = Pick< InputBaseProps, | '__next36pxDefaultSize' | '__next40pxDefaultSize' @@ -27,7 +27,7 @@ type SelectControlBaseProps = Pick< * each with a `label` and `value` property, as well as any other * `