Make dropdown header optional via new prop

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

@@ -145,6 +145,7 @@ const BorderControlDropdown = (
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
+		showDropdownHeader,
 		enableStyle = true,
 		...otherProps
 	} = useBorderControlDropdown( props );
@@ -186,15 +187,17 @@ const BorderControlDropdown = (
 	const renderContent = ( { onClose }: PopoverProps ) => (
 		<>
 			<VStack className={ popoverControlsClassName } spacing={ 6 }>
-				<HStack>
-					<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
-					<Button
-						isSmall
-						label={ __( 'Close border color' ) }
-						icon={ closeSmall }
-						onClick={ onClose }
-					/>
-				</HStack>
+				{ showDropdownHeader ? (
+					<HStack>
+						<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
+						<Button
+							isSmall
+							label={ __( 'Close border color' ) }
+							icon={ closeSmall }
+							onClick={ onClose }
+						/>
+					</HStack>
+				) : undefined }
 				<ColorPalette
 					className={ popoverContentClassName }
 					value={ color }

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

@@ -116,6 +116,13 @@ new border value.
 - 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
+
 ### `value`: `Object`
 
 An object representing a border or `undefined`. Used to set the current border

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

@@ -44,6 +44,7 @@ const BorderControl = (
 		onWidthChange,
 		placeholder,
 		previousStyleSelection,
+		showDropdownHeader,
 		sliderClassName,
 		value: border,
 		widthControlClassName,
@@ -71,6 +72,7 @@ const BorderControl = (
 						enableStyle={ enableStyle }
 						onChange={ onBorderChange }
 						previousStyleSelection={ previousStyleSelection }
+						showDropdownHeader={ showDropdownHeader }
 						__experimentalHasMultipleOrigins={
 							__experimentalHasMultipleOrigins
 						}

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

@@ -101,6 +101,7 @@ Default.args = {
 	enableStyle: true,
 	isCompact: true,
 	shouldSanitizeBorder: true,
+	showDropdownHeader: false,
 	width: '110px',
 	withSlider: true,
 	__experimentalIsRenderedInSidebar: false,

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

@@ -70,9 +70,9 @@ export type BorderControlProps = ColorProps &
 		 */
 		enableStyle?: 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.
+		 * 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.
 		 */
 		isCompact?: boolean;
 		/**
@@ -81,16 +81,22 @@ export type BorderControlProps = ColorProps &
 		 */
 		onChange: ( value?: Border ) => void;
 		/**
-		 * If opted into, sanitizing the border means that if no width or color have
-		 * been selected, the border style is also cleared and `undefined`
+		 * 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.
 		 *
 		 * @default true
 		 */
 		shouldSanitizeBorder?: boolean;
 		/**
-		 * An object representing a border or `undefined`. Used to set the current
-		 * border configuration for this component.
+		 * 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;
+		/**
+		 * An object representing a border or `undefined`. Used to set the
+		 * current border configuration for this component.
 		 */
 		value?: Border;
 		/**
@@ -99,8 +105,8 @@ export type BorderControlProps = ColorProps &
 		 */
 		width?: CSSProperties[ 'width' ];
 		/**
-		 * Flags whether this `BorderControl` should also render a `RangeControl`
-		 * for additional control over a border's width.
+		 * Flags whether this `BorderControl` should also render a
+		 * `RangeControl` for additional control over a border's width.
 		 */
 		withSlider?: boolean;
 	};
@@ -128,6 +134,12 @@ export type DropdownProps = ColorProps & {
 	 * to a non-zero value.
 	 */
 	previousStyleSelection?: string;
+	/**
+	 * 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;
 };
 
 export type StylePickerProps = LabelProps & {