Code quality: Remove unnecessary BaseControl usage from video block (#…

…14179)

## Description
This PR applies a simple change to remove unnecessary BaseControl usage in the video block.
It makes the video block code compliant with the lint rule being added on #14151.

I tried a different approach use the BaseControl as a label for the button being rendered inside it, but in my tests with a screen reader the button text stops being used and BaseControl label starts getting used, in this case, this change does not make sense, the button text should be used.

## How has this been tested?
I checked that the Poster Image buttons still work.
I checked that no visual changes happen.

packages/block-library/src/video/edit.js

@@ -219,8 +219,10 @@ class VideoEdit extends Component {
 						<MediaUploadCheck>
 							<BaseControl
 								className="editor-video-poster-control"
-								label={ __( 'Poster Image' ) }
 							>
+								<BaseControl.VisualLabel>
+									{ __( 'Poster Image' ) }
+								</BaseControl.VisualLabel>
 								<MediaUpload
 									title={ __( 'Select Poster Image' ) }
 									onSelect={ this.onSelectPoster }

packages/components/CHANGELOG.md

@@ -1,8 +1,9 @@
-## 7.2.1 (Unreleased)
+## 7.3.0 (Unreleased)
 
 ### New Features
 
 - Added a new `render` property to `FormFileUpload` component. Allowing users of the component to custom the UI for their needs.
+- Added a new `BaseControl.VisualLabel` component.
 
 ### Bug fixes
 

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

@@ -62,3 +62,44 @@ The content to be displayed within the BaseControl.
 
 - Type: `Element`
 - Required: Yes
+
+## BaseControl.VisualLabel
+
+`BaseControl.VisualLabel` component is used to render a purely visual label inside a `BaseControl` component.
+It should only be used in cases where the children being rendered inside BaseControl are already properly labeled, e.g., a button, but we want an additional visual label for that section equivalent to the labels BaseControl would otherwise use if the label prop was passed.
+
+
+## Usage
+```jsx
+import { BaseControl } from '@wordpress/components';
+
+const MyBaseControl = () => (
+	<BaseControl
+		help="Pressing the Select an author buttom will open a modal that allows an advanced mechanism for author selection"
+	>
+		<BaseControl.VisualLabel>
+			Author
+		</BaseControl.VisualLabel>
+		<Button>
+			Select an author
+		</Button>
+	</BaseControl>
+);
+```
+
+### Props
+
+#### className
+
+The class that will be added with `components-base-control__label` to the classes of the wrapper div.
+If no className is passed only `components-base-control__label` is used.
+
+- Type: `String`
+- Required: No
+
+#### children
+
+The content to be displayed within the `BaseControl.VisualLabel`.
+
+- Type: `Element`
+- Required: Yes

packages/components/src/base-control/index.js

@@ -8,12 +8,21 @@ function BaseControl( { id, label, help, className, children } ) {
 		<div className={ classnames( 'components-base-control', className ) }>
 			<div className="components-base-control__field">
 				{ label && id && <label className="components-base-control__label" htmlFor={ id }>{ label }</label> }
-				{ label && ! id && <span className="components-base-control__label">{ label }</span> }
+				{ label && ! id && <BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel> }
 				{ children }
 			</div>
 			{ !! help && <p id={ id + '__help' } className="components-base-control__help">{ help }</p> }
 		</div>
 	);
 }
 
+BaseControl.VisualLabel = ( { className, children } ) => {
+	className = classnames( 'components-base-control__label', className );
+	return (
+		<span className={ className }>
+			{ children }
+		</span>
+	);
+};
+
 export default BaseControl;