@wordpress/components 25.14.0 → 25.15.0

package/src/private-apis.ts

@@ -19,35 +19,19 @@ import { default as ProgressBar } from './progress-bar';
 import { createPrivateSlotFill } from './slot-fill';
 import {
 	DropdownMenu as DropdownMenuV2,
-	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2,
 	DropdownMenuGroup as DropdownMenuGroupV2,
 	DropdownMenuItem as DropdownMenuItemV2,
-	DropdownMenuLabel as DropdownMenuLabelV2,
-	DropdownMenuRadioGroup as DropdownMenuRadioGroupV2,
+	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2,
 	DropdownMenuRadioItem as DropdownMenuRadioItemV2,
 	DropdownMenuSeparator as DropdownMenuSeparatorV2,
-	DropdownSubMenu as DropdownSubMenuV2,
-	DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
+	DropdownMenuItemLabel as DropdownMenuItemLabelV2,
+	DropdownMenuItemHelpText as DropdownMenuItemHelpTextV2,
 } from './dropdown-menu-v2';
-import {
-	DropdownMenu as DropdownMenuV2Ariakit,
-	DropdownMenuGroup as DropdownMenuGroupV2Ariakit,
-	DropdownMenuItem as DropdownMenuItemV2Ariakit,
-	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2Ariakit,
-	DropdownMenuRadioItem as DropdownMenuRadioItemV2Ariakit,
-	DropdownMenuSeparator as DropdownMenuSeparatorV2Ariakit,
-	DropdownMenuItemLabel as DropdownMenuItemLabelV2Ariakit,
-	DropdownMenuItemHelpText as DropdownMenuItemHelpTextV2Ariakit,
-} from './dropdown-menu-v2-ariakit';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
 import Tabs from './tabs';
-
-export const { lock, unlock } =
-	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
-		'@wordpress/components'
-	);
+import { kebabCase } from './utils/strings';
+import { lock } from './lock-unlock';
 
 export const privateApis = {};
 lock( privateApis, {
@@ -60,25 +44,16 @@ lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,
+	ProgressBar,
+	Tabs,
+	Theme,
 	DropdownMenuV2,
-	DropdownMenuCheckboxItemV2,
 	DropdownMenuGroupV2,
 	DropdownMenuItemV2,
-	DropdownMenuLabelV2,
-	DropdownMenuRadioGroupV2,
+	DropdownMenuCheckboxItemV2,
 	DropdownMenuRadioItemV2,
 	DropdownMenuSeparatorV2,
-	DropdownSubMenuV2,
-	DropdownSubMenuTriggerV2,
-	ProgressBar,
-	Tabs,
-	Theme,
-	DropdownMenuV2Ariakit,
-	DropdownMenuGroupV2Ariakit,
-	DropdownMenuItemV2Ariakit,
-	DropdownMenuCheckboxItemV2Ariakit,
-	DropdownMenuRadioItemV2Ariakit,
-	DropdownMenuSeparatorV2Ariakit,
-	DropdownMenuItemLabelV2Ariakit,
-	DropdownMenuItemHelpTextV2Ariakit,
+	DropdownMenuItemLabelV2,
+	DropdownMenuItemHelpTextV2,
+	kebabCase,
 } );

package/src/radio-control/README.md

@@ -5,12 +5,6 @@ Use radio buttons when you want users to select one option from a set, and you w
 ![](https://make.wordpress.org/design/files/2018/11/radio.png)
 Selected and unselected radio buttons
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/radio-control/index.tsx

@@ -92,7 +92,10 @@ export function RadioControl(
 							}
 							{ ...additionalProps }
 						/>
-						<label htmlFor={ `${ id }-${ index }` }>
+						<label
+							className="components-radio-control__label"
+							htmlFor={ `${ id }-${ index }` }
+						>
 							{ option.label }
 						</label>
 					</div>

package/src/radio-control/style.scss

@@ -1,5 +1,32 @@
+.components-radio-control__option {
+	display: flex;
+	align-items: center;
+}
+
 .components-radio-control__input[type="radio"] {
 	@include radio-control;
-	margin-top: 0;
-	margin-right: 6px;
+
+	display: inline-flex;
+	margin: 0 6px 0 0;
+	padding: 0;
+	appearance: none;
+	cursor: pointer;
+
+	&:focus {
+		box-shadow: 0 0 0 ($border-width * 2) $components-color-background, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) $components-color-accent;
+	}
+
+	&:checked {
+		background: $components-color-accent;
+		border-color: $components-color-accent;
+
+		&::before {
+			content: "";
+			border-radius: 50%;
+		}
+	}
+}
+
+.components-radio-control__label {
+	cursor: pointer;
 }

package/src/radio-group/README.md

@@ -12,12 +12,6 @@ Use a RadioGroup component when you want users to select one option from a small
 
 ![RadioGroup component](https://wordpress.org/gutenberg/files/2018/12/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541792995815_ButtonGroup.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/range-control/README.md

@@ -2,15 +2,7 @@
 
 RangeControls are used to make selections from a range of incremental values.
 
-![](https://make.wordpress.org/design/files/2018/12/rangecontrol.png)
-
-A RangeControl for volume
-
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
+![A RangeControl for volume](https://make.wordpress.org/design/files/2018/12/rangecontrol.png)
 
 ## Design guidelines
 

package/src/range-control/index.tsx

@@ -328,7 +328,7 @@ function UnforwardedRangeControl(
 							className="components-range-control__reset"
 							disabled={ disabled || value === undefined }
 							variant="secondary"
-							isSmall
+							size="small"
 							onClick={ handleOnReset }
 						>
 							{ __( 'Reset' ) }

package/src/search-control/README.md

@@ -2,12 +2,6 @@
 
 SearchControl components let users display a search control.
 
-
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 Check out the [Storybook page](https://wordpress.github.io/gutenberg/?path=/docs/components-searchcontrol--docs) for a visual exploration of this component.
 
 ## Development guidelines

package/src/select-control/README.md

@@ -4,12 +4,6 @@ SelectControl allow users to select from a single or multiple option menu. It fu
 
 ![A “Link To” select with “none” selected.](https://wordpress.org/gutenberg/files/2018/12/select.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/select-control/styles/select-control-styles.ts

@@ -11,6 +11,7 @@ import { COLORS, rtl } from '../../utils';
 import { space } from '../../utils/space';
 import type { SelectControlProps } from '../types';
 import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
+import { fontSizeStyles } from '../../input-control/styles/input-control-styles';
 
 interface SelectProps
 	extends Pick<
@@ -30,27 +31,6 @@ const disabledStyles = ( { disabled }: SelectProps ) => {
 	} );
 };
 
-const fontSizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
-	const sizes = {
-		default: '13px',
-		small: '11px',
-		'__unstable-large': '13px',
-	};
-
-	const fontSize = sizes[ selectSize ];
-	const fontSizeMobile = '16px';
-
-	if ( ! fontSize ) return '';
-
-	return css`
-		font-size: ${ fontSizeMobile };
-
-		@media ( min-width: 600px ) {
-			font-size: ${ fontSize };
-		}
-	`;
-};
-
 const sizeStyles = ( {
 	__next40pxDefaultSize,
 	multiple,
@@ -75,6 +55,12 @@ const sizeStyles = ( {
 			paddingTop: 0,
 			paddingBottom: 0,
 		},
+		compact: {
+			height: 32,
+			minHeight: 32,
+			paddingTop: 0,
+			paddingBottom: 0,
+		},
 		'__unstable-large': {
 			height: 40,
 			minHeight: 40,
@@ -84,12 +70,7 @@ const sizeStyles = ( {
 	};
 
 	if ( ! __next40pxDefaultSize ) {
-		sizes.default = {
-			height: 32,
-			minHeight: 32,
-			paddingTop: 0,
-			paddingBottom: 0,
-		};
+		sizes.default = sizes.compact;
 	}
 
 	const style = sizes[ selectSize ] || sizes.default;
@@ -107,11 +88,12 @@ const sizePaddings = ( {
 	const padding = {
 		default: 16,
 		small: 8,
+		compact: 8,
 		'__unstable-large': 16,
 	};
 
 	if ( ! __next40pxDefaultSize ) {
-		padding.default = 8;
+		padding.default = padding.compact;
 	}
 
 	const selectedPadding = padding[ selectSize ] || padding.default;

package/src/slot-fill/index.tsx

@@ -55,9 +55,12 @@ export function UnforwardedSlot(
 }
 export const Slot = forwardRef( UnforwardedSlot );
 
-export function Provider( { children }: SlotFillProviderProps ) {
+export function Provider( {
+	children,
+	passthrough = false,
+}: SlotFillProviderProps ) {
 	const parent = useContext( SlotFillContext );
-	if ( ! parent.isDefault ) {
+	if ( ! parent.isDefault && passthrough ) {
 		return <>{ children }</>;
 	}
 	return (

package/src/slot-fill/types.ts

@@ -96,6 +96,11 @@ export type SlotFillProviderProps = {
 	 * The children elements.
 	 */
 	children: ReactNode;
+
+	/**
+	 * Whether to pass slots to the parent provider if existent.
+	 */
+	passthrough?: boolean;
 };
 
 export type SlotFillBubblesVirtuallySlotRef = RefObject< HTMLElement >;

package/src/snackbar/README.md

@@ -2,12 +2,6 @@
 
 Use Snackbars to communicate low priority, non-interruptive messages to the user.
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 A Snackbar displays a succinct message that is cleared out after a small delay. It can also offer the user options, like viewing a published post but these options should also be available elsewhere in the UI.

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

@@ -3,9 +3,15 @@
  */
 import type { Meta, StoryFn } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { wordpress } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
+import Icon from '../../icon';
 import Snackbar from '..';
 
 const meta: Meta< typeof Snackbar > = {
@@ -63,11 +69,7 @@ WithActions.args = {
 export const WithIcon: StoryFn< typeof Snackbar > = DefaultTemplate.bind( {} );
 WithIcon.args = {
 	children: 'Add an icon to make your snackbar stand out',
-	icon: (
-		<span role="img" aria-label="Icon" style={ { fontSize: 21 } }>
-			🌮
-		</span>
-	),
+	icon: <Icon style={ { fill: 'currentcolor' } } icon={ wordpress } />,
 };
 
 export const WithExplicitDismiss: StoryFn< typeof Snackbar > =

package/src/snackbar/style.scss

@@ -29,13 +29,14 @@
 	}
 
 	.components-snackbar__content-with-icon {
-		margin-left: $grid-unit-30;
+		position: relative;
+		padding-left: $icon-size;
 	}
 
 	.components-snackbar__icon {
 		position: absolute;
-		top: 24px;
-		left: 28px;
+		left: $grid-unit-10 * -1;
+		top: calc((#{$icon-size - ($default-font-size * $default-line-height)}) / -2);
 	}
 
 	.components-snackbar__dismiss-button {

package/src/snackbar/types.ts

@@ -28,7 +28,8 @@ type SnackbarOnlyProps = {
 	listRef?: MutableRefObject< HTMLDivElement | null >;
 };
 
-export type SnackbarProps = NoticeProps & SnackbarOnlyProps;
+export type SnackbarProps = Omit< NoticeProps, '__unstableHTML' > &
+	SnackbarOnlyProps;
 
 export type SnackbarListProps = {
 	notices: Array<

package/src/spacer/README.md

@@ -6,8 +6,6 @@ This feature is still experimental. “Experimental” means this is an early im
 
 `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.
 
-## Table of contents
-
 ## Usage
 
 `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`).

package/src/tab-panel/README.md

@@ -6,11 +6,6 @@ TabPanels organize content across different screens, data sets, and interactions
 
 ![The “Document” tab selected in the sidebar TabPanel.](https://wordpress.org/gutenberg/files/2019/01/s_E36D9C9B8FFA15A1A8CE224E422535A12B016F88884089575F9998E52016A49F_1541785098230_TabPanel.png)
 
-## Table of contents
-
-1. Design guidelines
-2. Development guidelines
-
 ## Design guidelines
 
 ### Usage