@wordpress/components 28.10.0 → 28.12.0

package/src/{dropdown-menu-v2 → menu}/types.ts

@@ -4,9 +4,9 @@
 import type * as Ariakit from '@ariakit/react';
 import type { Placement } from '@floating-ui/react-dom';
 
-export interface DropdownMenuContext {
+export interface MenuContext {
 	/**
-	 * The ariakit store shared across all DropdownMenu subcomponents.
+	 * The ariakit store shared across all Menu subcomponents.
 	 */
 	store: Ariakit.MenuStore;
 	/**
@@ -15,33 +15,33 @@ export interface DropdownMenuContext {
 	variant?: 'toolbar';
 }
 
-export interface DropdownMenuProps {
+export interface MenuProps {
 	/**
-	 * The trigger button.
+	 * The button triggering the menu popover.
 	 */
 	trigger: React.ReactElement;
 	/**
-	 * The contents of the dropdown.
+	 * The contents of the menu (ie. one or more menu items).
 	 */
 	children?: React.ReactNode;
 	/**
-	 * The open state of the dropdown menu when it is initially rendered. Use when
+	 * The open state of the menu popover when it is initially rendered. Use when
 	 * not wanting to control its open state.
 	 *
 	 * @default false
 	 */
 	defaultOpen?: boolean;
 	/**
-	 * The controlled open state of the dropdown menu. Must be used in conjunction
+	 * The controlled open state of the menu popover. Must be used in conjunction
 	 * with `onOpenChange`.
 	 */
 	open?: boolean;
 	/**
-	 * Event handler called when the open state of the dropdown menu changes.
+	 * Event handler called when the open state of the menu popover changes.
 	 */
 	onOpenChange?: ( open: boolean ) => void;
 	/**
-	 * The modality of the dropdown menu. When set to true, interaction with
+	 * The modality of the menu popover. When set to true, interaction with
 	 * outside elements will be disabled and only menu content will be visible to
 	 * screen readers.
 	 *
@@ -49,7 +49,7 @@ export interface DropdownMenuProps {
 	 */
 	modal?: boolean;
 	/**
-	 * The placement of the dropdown menu popover.
+	 * The placement of the menu popover.
 	 *
 	 * @default 'bottom-start' for root-level menus, 'right-start' for nested menus
 	 */
@@ -80,21 +80,22 @@ export interface DropdownMenuProps {
 		  ) => boolean );
 }
 
-export interface DropdownMenuGroupProps {
+export interface MenuGroupProps {
 	/**
-	 * The contents of the dropdown menu group.
+	 * The contents of the menu group (ie. an optional menu group label and one
+	 * or more menu items).
 	 */
 	children: React.ReactNode;
 }
 
-export interface DropdownMenuGroupLabelProps {
+export interface MenuGroupLabelProps {
 	/**
-	 * The contents of the dropdown menu group.
+	 * The contents of the menu group label.
 	 */
 	children: React.ReactNode;
 }
 
-export interface DropdownMenuItemProps {
+export interface MenuItemProps {
 	/**
 	 * The contents of the menu item.
 	 */
@@ -108,7 +109,7 @@ export interface DropdownMenuItemProps {
 	 */
 	suffix?: React.ReactNode;
 	/**
-	 * Whether to hide the parent menu when the item is clicked.
+	 * Whether to hide the menu popover when the menu item is clicked.
 	 *
 	 * @default true
 	 */
@@ -119,10 +120,10 @@ export interface DropdownMenuItemProps {
 	disabled?: boolean;
 }
 
-export interface DropdownMenuCheckboxItemProps
-	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
+export interface MenuCheckboxItemProps
+	extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > {
 	/**
-	 * Whether to hide the dropdown menu when the item is clicked.
+	 * Whether to hide the menu popover when the menu item is clicked.
 	 *
 	 * @default false
 	 */
@@ -151,10 +152,10 @@ export interface DropdownMenuCheckboxItemProps
 	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 }
 
-export interface DropdownMenuRadioItemProps
-	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
+export interface MenuRadioItemProps
+	extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > {
 	/**
-	 * Whether to hide the dropdown menu when the item is clicked.
+	 * Whether to hide the menu popover when the menu item is clicked.
 	 *
 	 * @default false
 	 */
@@ -182,4 +183,4 @@ export interface DropdownMenuRadioItemProps
 	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 }
 
-export interface DropdownMenuSeparatorProps {}
+export interface MenuSeparatorProps {}

package/src/menu-item/index.tsx

@@ -56,6 +56,7 @@ function UnforwardedMenuItem(
 
 	return (
 		<Button
+			__next40pxDefaultSize
 			ref={ ref }
 			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
 			aria-checked={

package/src/menu-item/test/__snapshots__/index.js.snap

@@ -3,7 +3,7 @@
 exports[`MenuItem should match snapshot when all props provided 1`] = `
 <button
   aria-checked="true"
-  class="components-button components-menu-item__button my-class"
+  class="components-button components-menu-item__button my-class is-next-40px-default-size"
   role="menuitemcheckbox"
   type="button"
 >
@@ -35,7 +35,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
 
 exports[`MenuItem should match snapshot when info is provided 1`] = `
 <button
-  class="components-button components-menu-item__button"
+  class="components-button components-menu-item__button is-next-40px-default-size"
   role="menuitem"
   type="button"
 >
@@ -62,7 +62,7 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
 
 exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
 <button
-  class="components-button components-menu-item__button my-class"
+  class="components-button components-menu-item__button my-class is-next-40px-default-size"
   role="menuitem"
   type="button"
 >
@@ -94,7 +94,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
 
 exports[`MenuItem should match snapshot when only label provided 1`] = `
 <button
-  class="components-button components-menu-item__button"
+  class="components-button components-menu-item__button is-next-40px-default-size"
   role="menuitem"
   type="button"
 >

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -71,9 +71,9 @@ const BottomSheetNavigationScreen = ( {
 			 * callbacks triggered based upon which screen is currently active.
 			 *
 			 * Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546
+			 *
+			 * Also see https://github.com/WordPress/gutenberg/pull/41166.
 			 */
-			// see https://github.com/WordPress/gutenberg/pull/41166
-			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [] )
 	);
 
@@ -130,9 +130,7 @@ const BottomSheetNavigationScreen = ( {
 				</TouchableHighlight>
 			</ScrollView>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [
 		children,
 		isFocused,

package/src/mobile/bottom-sheet/range-cell.native.js

@@ -165,7 +165,7 @@ class BottomSheetRangeCell extends Component {
 
 		const getAccessibilityLabel = () => {
 			return sprintf(
-				/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
+				/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
 				__( '%1$s. %2$s is %3$s %4$s.' ),
 				cellProps.label,
 				settingLabel,

package/src/mobile/bottom-sheet/stepper-cell/index.native.js

@@ -159,7 +159,7 @@ class BottomSheetStepperCell extends Component {
 		};
 
 		const accessibilityLabel = sprintf(
-			/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
+			/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
 			__( '%1$s. %2$s is %3$s %4$s.' ),
 			label,
 			settingLabel,

package/src/mobile/bottom-sheet/sub-sheet/index.native.js

@@ -28,9 +28,7 @@ const BottomSheetSubSheet = ( {
 		if ( showSheet ) {
 			setIsFullScreen( isFullScreen );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ showSheet, isFullScreen ] );
 
 	return (

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -64,7 +64,7 @@ const BottomSheetSelectControl = ( {
 					onPress={ openSubSheet }
 					accessibilityRole="button"
 					accessibilityLabel={ sprintf(
-						// translators:  %1$s: Select control button label e.g. "Button width". %2$s: Select control option value e.g: "Auto, 25%".
+						// translators:  1: Select control button label e.g. "Button width". 2: Select control option value e.g: "Auto, 25%".
 						__( '%1$s. Currently selected: %2$s' ),
 						label,
 						selectedOption.label
@@ -102,7 +102,7 @@ const BottomSheetSelectControl = ( {
 							accessibilityLabel={
 								item.value === selectedValue
 									? sprintf(
-											// translators: %s: Select control option value e.g: "Auto, 25%".
+											// translators: %s: The selected option.
 											__( 'Selected: %s' ),
 											item.label
 									  )

package/src/mobile/color-settings/index.native.js

@@ -35,9 +35,7 @@ const ColorSettingsMemo = memo(
 		useEffect( () => {
 			shouldEnableBottomSheetMaxHeight( true );
 			onHandleClosingBottomSheet( null );
-			// Disable reason: deferring this refactor to the native team.
-			// see https://github.com/WordPress/gutenberg/pull/41166
-			// eslint-disable-next-line react-hooks/exhaustive-deps
+			// See https://github.com/WordPress/gutenberg/pull/41166
 		}, [] );
 		return (
 			<BottomSheet.NavigationContainer>

package/src/mobile/color-settings/picker-screen.native.js

@@ -43,9 +43,7 @@ const PickerScreen = () => {
 				onHandleHardwareButtonPress={ onHandleHardwareButtonPress }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [
 		setColor,
 		currentValue,

package/src/mobile/image/index.native.js

@@ -112,9 +112,7 @@ const ImageComponent = ( {
 			}
 		}
 		return () => ( isCurrent = false );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ url ] );
 
 	const onContainerLayout = ( event ) => {

package/src/mobile/keyboard-avoiding-view/index.ios.js

@@ -69,9 +69,7 @@ export const KeyboardAvoidingView = ( {
 			keyboardShowSubscription.remove();
 			keyboardHideSubscription.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	function onSafeAreaInsetsUpdate( { safeAreaInsets } ) {

package/src/mobile/link-picker/link-picker-results.native.js

@@ -75,9 +75,8 @@ export default function LinkPickerResults( {
 		return {
 			fetchMoreSuggestions: debounce( fetchMore, REQUEST_DEBOUNCE_DELAY ),
 		};
-		// Disable eslint rule for now, to avoid introducing a regression
+		// Not adding dependencies for now, to avoid introducing a regression
 		// (see https://github.com/WordPress/gutenberg/pull/23922#discussion_r1170634879).
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	// Prevent setting state when unmounted.
@@ -90,9 +89,7 @@ export default function LinkPickerResults( {
 		setHasAllSuggestions( false );
 		setLinks( [ directEntry ] );
 		fetchMoreSuggestions( { query, links: [ directEntry ] } );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ query ] );
 
 	const onEndReached = () => fetchMoreSuggestions( { query, links } );

package/src/mobile/link-picker/link-picker-screen.native.js

@@ -53,9 +53,7 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 				onCancel={ onCancel }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ inputValue ] );
 };
 

package/src/mobile/link-settings/index.native.js

@@ -101,9 +101,7 @@ function LinkSettings( {
 		if ( onHandleClosingBottomSheet ) {
 			onHandleClosingBottomSheet( onCloseSettingsSheet );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlInputValue, labelInputValue, linkRelInputValue ] );
 
 	useEffect( () => {
@@ -115,9 +113,7 @@ function LinkSettings( {
 		if ( url !== urlInputValue ) {
 			setUrlInputValue( url || '' );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ url ] );
 
 	useEffect( () => {
@@ -141,9 +137,7 @@ function LinkSettings( {
 		if ( prevEditorSidebarOpened && ! editorSidebarOpened ) {
 			onSetAttributes();
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ editorSidebarOpened, isVisible ] );
 
 	useEffect( () => {
@@ -156,9 +150,7 @@ function LinkSettings( {
 				url: prependHTTP( urlValue ),
 			} );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlValue ] );
 
 	const onChangeURL = useCallback(
@@ -188,9 +180,7 @@ function LinkSettings( {
 				rel: linkRelInputValue,
 			} );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlInputValue, labelInputValue, linkRelInputValue, setAttributes ] );
 
 	const onCloseSettingsSheet = useCallback( () => {
@@ -223,9 +213,7 @@ function LinkSettings( {
 				rel: updatedRel,
 			} );
 		},
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 		[ linkRelInputValue ]
 	);
 

package/src/mobile/link-settings/link-settings-screen.native.js

@@ -37,9 +37,7 @@ const LinkSettingsScreen = ( props ) => {
 				urlValue={ inputValue }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ props, inputValue, navigation, route ] );
 };
 

package/src/mobile/segmented-control/index.native.js

@@ -74,18 +74,14 @@ const SegmentedControls = ( {
 	useEffect( () => {
 		setActiveSegmentIndex( selectedSegmentIndex );
 		segmentHandler( segments[ selectedSegmentIndex ] );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	useEffect( () => {
 		positionAnimationValue.setValue(
 			calculateEndValue( activeSegmentIndex )
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ segmentsDimensions ] );
 
 	const containerStyle = usePreferredColorSchemeStyle(

package/src/mobile/utils/use-unit-converter-to-mobile.native.js

@@ -66,9 +66,7 @@ const useConvertUnitToMobile = ( value, unit, styles ) => {
 		return () => {
 			dimensionsChangeSubscription.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	const onDimensionsChange = useCallback( ( { window } ) => {
@@ -85,9 +83,7 @@ const useConvertUnitToMobile = ( value, unit, styles ) => {
 			valueToConvert,
 			valueUnit
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ windowSizes, value, unit ] );
 };
 

package/src/modal/stories/index.story.tsx

@@ -19,7 +19,8 @@ import type { ModalProps } from '../types';
 
 const meta: Meta< typeof Modal > = {
 	component: Modal,
-	title: 'Components/Modal',
+	title: 'Components/Overlays/Modal',
+	id: 'components-modal',
 	argTypes: {
 		children: {
 			control: { type: null },

package/src/navigable-container/stories/navigable-menu.story.tsx

@@ -9,7 +9,8 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { NavigableMenu } from '..';
 
 const meta: Meta< typeof NavigableMenu > = {
-	title: 'Components/NavigableMenu',
+	title: 'Components/Containers/NavigableMenu',
+	id: 'components-navigablemenu',
 	component: NavigableMenu,
 	argTypes: {
 		children: { control: { type: null } },

package/src/navigable-container/stories/tabbable-container.story.tsx

@@ -9,7 +9,8 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { TabbableContainer } from '..';
 
 const meta: Meta< typeof TabbableContainer > = {
-	title: 'Components/TabbableContainer',
+	title: 'Components/Containers/TabbableContainer',
+	id: 'components-tabbablecontainer',
 	component: TabbableContainer,
 	argTypes: {
 		children: { control: { type: null } },

package/src/navigation/index.tsx

@@ -104,9 +104,8 @@ export function Navigation( {
 		if ( activeMenu !== menu ) {
 			setActiveMenu( activeMenu );
 		}
-		// Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
+		// Not adding deps for now, as it would require either a larger refactor or some questionable workarounds.
 		// See https://github.com/WordPress/gutenberg/pull/41612 for context.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ activeMenu ] );
 
 	const context = {

package/src/navigation/item/use-navigation-tree-item.tsx

@@ -41,7 +41,7 @@ export const useNavigationTreeItem = (
 		return () => {
 			removeItem( itemId );
 		};
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Not adding deps for now, as it would require either a larger refactor.
+		// See https://github.com/WordPress/gutenberg/pull/41639
 	}, [ activeMenu, search ] );
 };

package/src/navigation/menu/menu-title-search.tsx

@@ -55,8 +55,8 @@ function MenuTitleSearch( {
 			count
 		);
 		debouncedSpeak( resultsFoundMessage );
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Not adding deps for now, as it would require either a larger refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44090
 	}, [ items, search ] );
 
 	const onClose = () => {

package/src/navigation/menu/use-navigation-tree-menu.tsx

@@ -23,7 +23,7 @@ export const useNavigationTreeMenu = ( props: NavigationMenuProps ) => {
 		return () => {
 			removeMenu( key );
 		};
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Not adding deps for now, as it would require either a larger refactor
+		// See https://github.com/WordPress/gutenberg/pull/44090
 	}, [] );
 };

package/src/navigator/stories/index.story.tsx

@@ -21,7 +21,8 @@ const meta: Meta< typeof Navigator > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		BackButton: Navigator.BackButton,
 	},
-	title: 'Components/Navigator',
+	title: 'Components/Navigation/Navigator',
+	id: 'components-navigator',
 	argTypes: {
 		as: { control: { type: null } },
 		children: { control: { type: null } },

package/src/notice/index.tsx

@@ -142,6 +142,7 @@ function Notice( {
 
 							return (
 								<Button
+									__next40pxDefaultSize
 									key={ index }
 									href={ url }
 									variant={ computedVariant }
@@ -160,6 +161,7 @@ function Notice( {
 			</div>
 			{ isDismissible && (
 				<Button
+					size="small"
 					className="components-notice__dismiss"
 					icon={ close }
 					label={ __( 'Close' ) }

package/src/notice/stories/index.story.tsx

@@ -17,7 +17,8 @@ import NoticeList from '../list';
 import type { NoticeListProps } from '../types';
 
 const meta: Meta< typeof Notice > = {
-	title: 'Components/Notice',
+	title: 'Components/Feedback/Notice',
+	id: 'components-notice',
 	component: Notice,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { NoticeList },
@@ -109,7 +110,11 @@ export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
 	return (
 		<>
 			<NoticeList notices={ notices } onRemove={ removeNotice } />
-			<Button variant="primary" onClick={ resetNotices }>
+			<Button
+				__next40pxDefaultSize
+				variant="primary"
+				onClick={ resetNotices }
+			>
 				Reset Notices
 			</Button>
 		</>

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -21,19 +21,19 @@ exports[`Notice should match snapshot 1`] = `
         class="components-notice__actions"
       >
         <a
-          class="components-button components-notice__action is-link"
+          class="components-button components-notice__action is-next-40px-default-size is-link"
           href="https://example.com"
         >
           More information
         </a>
         <button
-          class="components-button components-notice__action is-secondary"
+          class="components-button components-notice__action is-next-40px-default-size is-secondary"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="components-button components-notice__action is-primary"
+          class="components-button components-notice__action is-next-40px-default-size is-primary"
           type="button"
         >
           Submit
@@ -42,7 +42,7 @@ exports[`Notice should match snapshot 1`] = `
     </div>
     <button
       aria-label="Close"
-      class="components-button components-notice__dismiss has-icon"
+      class="components-button components-notice__dismiss is-small has-icon"
       type="button"
     >
       <svg