Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add margin-bottom lint rules for CheckboxControl, ComboboxControl, SearchControl #63679

Merged
merged 1 commit into from
Jul 18, 2024
Merged

Add margin-bottom lint rules for CheckboxControl, ComboboxControl, SearchControl #63679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,10 @@ module.exports = {
...restrictedSyntax,
...restrictedSyntaxComponents,
...[
'CheckboxControl',
'ComboboxControl',
'FocalPointPicker',
'SearchControl',
'TextareaControl',
'TreeSelect',
].map( ( componentName ) => ( {
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/inserter/media-tab/media-panel.js
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Testing instructions

Toggle the block inserter in the top left, and select the Media tab. Choose one of the options to display the search panel. The margin below the search field should be maintained at 16px (normal viewport width), and 24px (mobile viewport width).

Media search panel

Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
return (
<div className={ baseCssClass }>
<SearchControl
__nextHasNoMarginBottom
className={ `${ baseCssClass }-search` }
onChange={ setSearch }
value={ search }
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -523,11 +523,11 @@ $block-inserter-tabs-height: 44px;
}

.block-editor-inserter__media-panel-search {
margin-bottom: $grid-unit-20;
margin-bottom: $grid-unit-30;
// TODO: Consider using the Theme component to automatically adapt to a gray background.
@include break-medium() {
margin-bottom: 0;
padding: $grid-unit-20 $grid-unit-30 $grid-unit-10;
padding: $grid-unit-20 $grid-unit-30 $grid-unit-20;

&:not(:focus-within) {
--wp-components-color-background: #{$white};
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/form-input/edit.js
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Testing instructions

In Gutenberg Experiments (wp-admin/admin.php?page=gutenberg-experiments), enable the "Form and input blocks" experiment. In the block editor, insert a Form block and click on one of the text fields to show the block inspector.

Checkboxes in inspector sidebar

Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
<PanelBody title={ __( 'Settings' ) }>
{ 'checkbox' !== type && (
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'Inline label' ) }
checked={ inlineLabel }
onChange={ ( newVal ) => {
Expand All @@ -48,6 +49,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
/>
) }
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'Required' ) }
checked={ required }
onChange={ ( newVal ) => {
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/page-list/edit.js
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Testing instructions

Insert a Page List block and show the block inspector.

The excessive bottom margin is slightly corrected:

Before After
Page List block inspector, before Page List block inspector, after

Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,7 @@ export default function PageListEdit( {
{ pagesTree.length > 0 && (
<PanelBody>
<ComboboxControl
__nextHasNoMarginBottom
__next40pxDefaultSize
className="editor-page-attributes__parent"
label={ __( 'Parent' ) }
Expand Down
8 changes: 8 additions & 0 deletions packages/components/src/checkbox-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const MyCheckboxControl = () => {
const [ isChecked, setChecked ] = useState( true );
return (
<CheckboxControl
__nextHasNoMarginBottom
label="Is author"
help="Is the user a author or not?"
checked={ isChecked }
Expand Down Expand Up @@ -102,6 +103,13 @@ If indeterminate is true the state of the checkbox will be indeterminate.

- Required: No

#### `__nextHasNoMarginBottom`: `boolean`

Start opting into the new margin-free styles that will become the default in a future version.

- Required: No
- Default: `false`

## Related components

- To select one option from a set, and you want to show all the available options at once, use the `RadioControl` component.
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/checkbox-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import type { WordPressComponentProps } from '../context';
* const [ isChecked, setChecked ] = useState( true );
* return (
* <CheckboxControl
* __nextHasNoMarginBottom
* label="Is author"
* help="Is the user a author or not?"
* checked={ isChecked }
Expand Down
9 changes: 9 additions & 0 deletions packages/components/src/combobox-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ function MyComboboxControl() {
const [ filteredOptions, setFilteredOptions ] = useState( options );
return (
<ComboboxControl
__nextHasNoMarginBottom
label="Font Size"
value={ fontSize }
onChange={ setFontSize }
Expand Down Expand Up @@ -117,6 +118,14 @@ Custom renderer invoked for each option in the suggestion list. The render prop
- Type: `( args: { item: object } ) => ReactNode`
- Required: No

#### __nextHasNoMarginBottom

Start opting into the new margin-free styles that will become the default in a future version.

- Type: `Boolean`
- Required: No
- Default: `false`

## Related components

- Like this component, but without a search input, the [`CustomSelectControl`](https://developer.wordpress.org/block-editor/reference-guides/components/custom-select-control/) component.
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/combobox-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ const getIndexOfMatchingSuggestion = (
* const [ filteredOptions, setFilteredOptions ] = useState( options );
* return (
* <ComboboxControl
* __nextHasNoMarginBottom
* label="Font Size"
* value={ fontSize }
* onChange={ setFontSize }
Expand Down
Loading