Skip to content

Commit

Permalink
Code quality: Remove BaseControl without label from video block
Browse files Browse the repository at this point in the history
  • Loading branch information
jorgefilipecosta committed Mar 22, 2019
1 parent 98a19b6 commit c56d823
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 2 deletions.
4 changes: 3 additions & 1 deletion packages/block-library/src/video/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
6 changes: 6 additions & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## V.V.V (Unrealeased)

### New Features

- Added a new `BaseControl.VisualLabel` component.

## 7.2.0 (2019-03-20)

### Improvements
Expand Down
41 changes: 41 additions & 0 deletions packages/components/src/base-control/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
11 changes: 10 additions & 1 deletion packages/components/src/base-control/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

0 comments on commit c56d823

Please sign in to comment.