Revert "BorderControl: Promote to stable (WordPress#65475)"

This reverts commit 17b0b92.

packages/components/CHANGELOG.md

@@ -6,21 +6,22 @@
 
 -   `ToolsPanel`: atomic one-step state update when (un)registering panels ([#65564](https://github.com/WordPress/gutenberg/pull/65564)).
 -   `Navigator`: fix `isInitial` logic ([#65527](https://github.com/WordPress/gutenberg/pull/65527)).
+-   `ToggleGroupControl`: Fix arrow key navigation in RTL ([#65735](https://github.com/WordPress/gutenberg/pull/65735)).
 
 ### Deprecations
 
--   `__experimentalBorderControl` can now be imported as a stable `BorderControl` ([#65475](https://github.com/WordPress/gutenberg/pull/65475)).
 -   `__experimentalBorderBoxControl` can now be imported as a stable `BorderBoxControl` ([#65586](https://github.com/WordPress/gutenberg/pull/65586)).
 
 ### Enhancements
 
--   `BorderControl`: promote to stable ([#65475](https://github.com/WordPress/gutenberg/pull/65475)).
+-   `Tabs`: handle horizontal overflow and large tab lists gracefully ([#64371](https://github.com/WordPress/gutenberg/pull/64371)).
 -   `BorderBoxControl`: promote to stable ([#65586](https://github.com/WordPress/gutenberg/pull/65586)).
 -   `MenuGroup`: Simplify the MenuGroup styles within dropdown menus. ([#65561](https://github.com/WordPress/gutenberg/pull/65561)).
 -   `DatePicker`: Use compact button size. ([#65653](https://github.com/WordPress/gutenberg/pull/65653)).
 -   `Navigator`: add support for exit animation ([#64777](https://github.com/WordPress/gutenberg/pull/64777)).
 -   `Guide`: Update finish button to use the new default size ([#65680](https://github.com/WordPress/gutenberg/pull/65680)).
 -   `BorderControl`: Use `__next40pxDefaultSize` prop for Reset button ([#65682](https://github.com/WordPress/gutenberg/pull/65682)).
+-   `Navigator`: stabilize APIs ([#64613](https://github.com/WordPress/gutenberg/pull/64613)).
 
 ## 28.8.0 (2024-09-19)
 

packages/components/src/border-control/border-control-dropdown/component.tsx

@@ -7,6 +7,7 @@ import type { CSSProperties } from 'react';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,10 +17,12 @@ import Button from '../../button';
 import ColorIndicator from '../../color-indicator';
 import ColorPalette from '../../color-palette';
 import Dropdown from '../../dropdown';
+import { HStack } from '../../h-stack';
 import { VStack } from '../../v-stack';
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
 import { useBorderControlDropdown } from './hook';
+import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
 import type { ColorObject } from '../../color-palette/types';
@@ -146,6 +149,7 @@ const BorderControlDropdown = (
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
+		showDropdownHeader,
 		size,
 		__unstablePopoverProps,
 		...otherProps
@@ -193,6 +197,17 @@ const BorderControlDropdown = (
 		<>
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>
+					{ showDropdownHeader ? (
+						<HStack>
+							<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
+							<Button
+								size="small"
+								label={ __( 'Close border color' ) }
+								icon={ closeSmall }
+								onClick={ onClose }
+							/>
+						</HStack>
+					) : undefined }
 					<ColorPalette
 						className={ popoverContentClassName }
 						value={ color }

packages/components/src/border-control/border-control/README.md

@@ -1,6 +1,10 @@
-# BorderControl
+#  BorderControl
 
-An input control for a border's color, style, and width.
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+<br />
+This component provides control over a border's color, style, and width.
 
 ## Development guidelines
 
@@ -17,7 +21,7 @@ a "shape" abstraction.
 
 ```jsx
 import { useState } from 'react';
-import { BorderControl } from '@wordpress/components';
+import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const colors = [
@@ -54,49 +58,49 @@ colors are organized by multiple origins.
 
 Each color may be an object containing a `name` and `color` value.
 
--   Required: No
--   Default: `[]`
+- Required: No
+- Default: `[]`
 
 ### `disableCustomColors`: `boolean`
 
 This toggles the ability to choose custom colors.
 
--   Required: No
+- Required: No
 
 ### `disableUnits`: `boolean`
 
 This controls whether unit selection should be disabled.
 
--   Required: No
+- Required: No
 
 ### `enableAlpha`: `boolean`
 
 This controls whether the alpha channel will be offered when selecting
 custom colors.
 
--   Required: No
--   Default: `true`
+- Required: No
+- Default: `false`
 
 ### `enableStyle`: `boolean`
 
 This controls whether to support border style selection.
 
--   Required: No
--   Default: `true`
+- Required: No
+- Default: `true`
 
 ### `hideLabelFromVision`: `boolean`
 
 Provides control over whether the label will only be visible to screen readers.
 
--   Required: No
+- Required: No
 
 ### `isCompact`: `boolean`
 
 This flags the `BorderControl` to render with a more compact appearance. It
 restricts the width of the control and prevents it from expanding to take up
 additional space.
 
--   Required: No
+- Required: No
 
 ### `label`: `string`
 
@@ -105,7 +109,7 @@ If provided, a label will be generated using this as the content.
 _Whether it is visible only to screen readers is controlled via
 `hideLabelFromVision`._
 
--   Required: No
+- Required: No
 
 ### `onChange`: `( value?: Object ) => void`
 
@@ -114,32 +118,38 @@ that selects or clears, border color, style, or width.
 
 _Note: the value may be `undefined` if a user clears all border properties._
 
--   Required: Yes
+- Required: Yes
 
 ### `shouldSanitizeBorder`: `boolean`
 
 If opted into, sanitizing the border means that if no width or color have been
 selected, the border style is also cleared and `undefined` is returned as the
 new border value.
 
--   Required: No
--   Default: `true`
+- Required: No
+- Default: true
+
+### `showDropdownHeader`: `boolean`
+
+Whether or not to render a header for the border color and style picker
+dropdown. The header includes a label for the color picker and a close button.
+
+- Required: No
 
 ### `size`: `string`
 
 Size of the control.
 
--   Required: No
--   Default: `default`
--   Allowed values: `default`, `__unstable-large`
+- Required: No
+- Default: `default`
+- Allowed values: `default`, `__unstable-large`
 
 ### `value`: `Object`
 
 An object representing a border or `undefined`. Used to set the current border
 configuration for this component.
 
 Example:
-
 ```js
  {
 	color: '#72aee6',
@@ -148,25 +158,25 @@ Example:
 }
 ```
 
--   Required: No
+- Required: No
 
 ### `width`: `CSSProperties[ 'width' ]`
 
 Controls the visual width of the `BorderControl`. It has no effect if the
 `isCompact` prop is set to `true`.
 
--   Required: No
+- Required: No
 
 ### `withSlider`: `boolean`
 
 Flags whether this `BorderControl` should also render a `RangeControl` for
 additional control over a border's width.
 
--   Required: No
+- Required: No
 
 ### `__next40pxDefaultSize`: `boolean`
 
 Start opting into the larger default height that will become the default size in a future version.
 
--   Required: No
--   Default: `false`
+- Required: No
+- Default: `false`

packages/components/src/border-control/border-control/component.tsx

@@ -91,6 +91,7 @@ const UnconnectedBorderControl = (
 								previousStyleSelection={
 									previousStyleSelection
 								}
+								showDropdownHeader={ showDropdownHeader }
 								__experimentalIsRenderedInSidebar={
 									__experimentalIsRenderedInSidebar
 								}
@@ -140,7 +141,7 @@ const UnconnectedBorderControl = (
  * a "shape" abstraction.
  *
  * ```jsx
- * import { BorderControl } from '@wordpress/components';
+ * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
  * import { __ } from '@wordpress/i18n';
  *
  * const colors = [

packages/components/src/border-control/stories/index.story.tsx

@@ -16,7 +16,7 @@ import { BorderControl } from '..';
 import type { Border } from '../types';
 
 const meta: Meta< typeof BorderControl > = {
-	title: 'Components/BorderControl',
+	title: 'Components (Experimental)/BorderControl',
 	component: BorderControl,
 	argTypes: {
 		onChange: {
@@ -93,9 +93,6 @@ export const Default = Template.bind( {} );
 Default.args = {
 	colors,
 	label: 'Border',
-	enableAlpha: true,
-	enableStyle: true,
-	shouldSanitizeBorder: true,
 };
 
 /**
@@ -136,3 +133,12 @@ WithMultipleOrigins.args = {
 	...Default.args,
 	colors: multipleOriginColors,
 };
+
+/**
+ * Allow the alpha channel to be edited on each color.
+ */
+export const WithAlphaEnabled = Template.bind( {} );
+WithAlphaEnabled.args = {
+	...Default.args,
+	enableAlpha: true,
+};

packages/components/src/border-control/test/index.js

@@ -148,6 +148,19 @@ describe( 'BorderControl', () => {
 			expect( resetButton ).toBeInTheDocument();
 		} );
 
+		it( 'should render color and style popover header', async () => {
+			const user = userEvent.setup();
+			const props = createProps( { showDropdownHeader: true } );
+			render( <BorderControl { ...props } /> );
+			await openPopover( user );
+
+			const headerLabel = screen.getByText( 'Border color' );
+			const closeButton = getButton( 'Close border color' );
+
+			expect( headerLabel ).toBeInTheDocument();
+			expect( closeButton ).toBeInTheDocument();
+		} );
+
 		it( 'should not render style options when opted out of', async () => {
 			const user = userEvent.setup();
 			const props = createProps( { enableStyle: false } );
@@ -333,10 +346,10 @@ describe( 'BorderControl', () => {
 
 		it( 'should take no action when color and style popover is closed', async () => {
 			const user = userEvent.setup();
-			const props = createProps();
+			const props = createProps( { showDropdownHeader: true } );
 			render( <BorderControl { ...props } /> );
 			await openPopover( user );
-			await user.keyboard( 'Escape' );
+			await user.click( getButton( 'Close border color' ) );
 
 			expect( props.onChange ).not.toHaveBeenCalled();
 		} );

packages/components/src/border-control/types.ts

@@ -18,19 +18,12 @@ export type Border = {
 
 export type ColorProps = Pick<
 	ColorPaletteProps,
-	'colors' | '__experimentalIsRenderedInSidebar'
+	'colors' | 'enableAlpha' | '__experimentalIsRenderedInSidebar'
 > & {
 	/**
 	 * This toggles the ability to choose custom colors.
 	 */
 	disableCustomColors?: boolean;
-	/**
-	 * This controls whether the alpha channel will be offered when selecting
-	 * custom colors.
-	 *
-	 * @default true
-	 */
-	enableAlpha?: boolean;
 };
 
 export type LabelProps = {
@@ -85,8 +78,9 @@ export type BorderControlProps = ColorProps &
 		 */
 		shouldSanitizeBorder?: boolean;
 		/**
-		 * @deprecated This prop no longer has any effect.
-		 * @ignore
+		 * Whether or not to show the header for the border color and style
+		 * picker dropdown. The header includes a label for the color picker
+		 * and a close button.
 		 */
 		showDropdownHeader?: boolean;
 		/**
@@ -145,8 +139,9 @@ export type DropdownProps = ColorProps &
 		 */
 		previousStyleSelection?: string;
 		/**
-		 * @deprecated This prop no longer has any effect.
-		 * @ignore
+		 * Whether or not to render a header for the border color and style picker
+		 * dropdown. The header includes a label for the color picker and a
+		 * close button.
 		 */
 		showDropdownHeader?: boolean;
 	};

packages/components/src/index.ts

@@ -40,11 +40,7 @@ export {
 	isDefinedBorder as __experimentalIsDefinedBorder,
 	isEmptyBorder as __experimentalIsEmptyBorder,
 } from './border-box-control';
-export {
-	/** @deprecated Import `BorderControl` instead. */
-	BorderControl as __experimentalBorderControl,
-	BorderControl,
-} from './border-control';
+export { BorderControl as __experimentalBorderControl } from './border-control';
 export {
 	/** @deprecated Import `BoxControl` instead. */
 	default as __experimentalBoxControl,

storybook/manager-head.html

@@ -3,7 +3,6 @@
 		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
 			'alignmentmatrixcontrol',
 			'borderboxcontrol',
-			'bordercontrol',
 			'boxcontrol',
 			'customselectcontrol-v2',
 			'dimensioncontrol',