Skip to content

Commit

Permalink
Add a SearchControl component and reuse accross the UI (#32935)
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad authored Jul 7, 2021
1 parent d249fad commit 2356b2d
Show file tree
Hide file tree
Showing 24 changed files with 322 additions and 190 deletions.
6 changes: 6 additions & 0 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -1145,6 +1145,12 @@
"markdown_source": "../packages/components/src/scrollable/README.md",
"parent": "components"
},
{
"title": "SearchControl",
"slug": "search-control",
"markdown_source": "../packages/components/src/search-control/README.md",
"parent": "components"
},
{
"title": "SelectControl",
"slug": "select-control",
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ export { default as DefaultBlockAppender } from './default-block-appender';
export { default as __unstableEditorStyles } from './editor-styles';
export { default as Inserter } from './inserter';
export { default as __experimentalLibrary } from './inserter/library';
export { default as __experimentalSearchForm } from './inserter/search-form';
export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
export { MultiSelectScrollIntoView } from './selection-scroll-into-view';
export { default as NavigableToolbar } from './navigable-toolbar';
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/inserter/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@
* WordPress dependencies
*/
import { useState, useCallback, useMemo } from '@wordpress/element';
import { VisuallyHidden } from '@wordpress/components';
import { VisuallyHidden, SearchControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import Tips from './tips';
import InserterSearchForm from './search-form';
import InserterPreviewPanel from './preview-panel';
import BlockTypesTab from './block-types-tab';
import BlockPatternsTabs from './block-patterns-tab';
Expand Down Expand Up @@ -171,7 +170,8 @@ function InserterMenu( {
<div className="block-editor-inserter__main-area">
{ /* the following div is necessary to fix the sticky position of the search form */ }
<div className="block-editor-inserter__content">
<InserterSearchForm
<SearchControl
className="block-editor-inserter__search"
onChange={ ( value ) => {
if ( hoveredItem ) setHoveredItem( null );
setFilterValue( value );
Expand Down
9 changes: 6 additions & 3 deletions packages/block-editor/src/components/inserter/menu.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,16 @@ import {
import { useEffect, useState, useCallback } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { createBlock } from '@wordpress/blocks';
import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
import {
BottomSheet,
BottomSheetConsumer,
SearchControl,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import InserterSearchResults from './search-results';
import InserterSearchForm from './search-form';
import { store as blockEditorStore } from '../../store';
import InserterTabs from './tabs';
import styles from './style.scss';
Expand Down Expand Up @@ -192,7 +195,7 @@ function InserterMenu( {
header={
<>
{ showSearchForm && (
<InserterSearchForm
<SearchControl
onChange={ onChangeSearch }
value={ filterValue }
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,12 @@ import classnames from 'classnames';
*/
import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Button, SearchControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import InserterSearchForm from './search-form';
import InserterSearchResults from './search-results';
import useInsertionPoint from './hooks/use-insertion-point';
import usePatternsState from './hooks/use-patterns-state';
Expand Down Expand Up @@ -87,7 +86,8 @@ export default function QuickInserter( {
} ) }
>
{ showSearch && (
<InserterSearchForm
<SearchControl
className="block-editor-inserter__search"
value={ filterValue }
onChange={ ( value ) => {
setFilterValue( value );
Expand Down
65 changes: 0 additions & 65 deletions packages/block-editor/src/components/inserter/search-form.js

This file was deleted.

31 changes: 0 additions & 31 deletions packages/block-editor/src/components/inserter/style.native.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,37 +13,6 @@
padding-top: 8;
}

.searchForm {
height: 46px;
border-radius: 8px;
color: $gray-dark;
margin: $grid-unit-30;
background-color: $gray-light;
flex-direction: row;
justify-content: space-between;
}

.searchFormDark {
background-color: rgba($white, 0.07);
}

.searchFormInput {
color: $gray-dark;
flex: 2;
}

.searchFormInputDark {
color: $white;
}

.searchFormPlaceholder {
color: $gray;
}

.searchFormPlaceholderDark {
color: rgba($white, 0.8);
}

.inserter-tabs__wrapper {
overflow: hidden;
}
Expand Down
47 changes: 3 additions & 44 deletions packages/block-editor/src/components/inserter/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -99,55 +99,14 @@ $block-inserter-tabs-height: 44px;
}

.block-editor-inserter__search {
background: $white;
padding: $grid-unit-20;
position: sticky;
top: 0;
background: $white;
z-index: z-index(".block-editor-inserter__search");

input[type="search"].block-editor-inserter__search-input {
@include input-control;
display: block;
padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
background: $gray-100;
border: none;
width: 100%;
height: $grid-unit-60;

/* Fonts smaller than 16px causes mobile safari to zoom. */
font-size: $mobile-text-min-font-size;
@include break-small {
font-size: $default-font-size;
}

&:focus {
background: $white;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}

&::placeholder {
color: $gray-700;
}

&::-webkit-search-decoration,
&::-webkit-search-cancel-button,
&::-webkit-search-results-button,
&::-webkit-search-results-decoration {
-webkit-appearance: none;
}
}
}

.block-editor-inserter__search-icon {
position: absolute;
top: 0;
right: $grid-unit-10 + ($grid-unit-60 - $icon-size) / 2;
bottom: 0;
display: flex;
align-items: center;

> svg {
margin: $grid-unit-10;
.components-search-control__icon {
right: $grid-unit-10 + ($grid-unit-60 - $icon-size) / 2;
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor';
import { SearchControl } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
/**
Expand Down Expand Up @@ -34,7 +34,7 @@ export default function TemplatePartSelection( {
onKeyPress={ stopKeyPropagation }
onKeyDown={ preventArrowKeysPropagation }
>
<SearchForm
<SearchControl
value={ filterValue }
onChange={ setFilterValue }
className="wp-block-template-part__selection-preview-search-form"
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export { default as RangeControl } from './range-control';
export { default as ResizableBox } from './resizable-box';
export { default as ResponsiveWrapper } from './responsive-wrapper';
export { default as SandBox } from './sandbox';
export { default as SearchControl } from './search-control';
export { default as SelectControl } from './select-control';
export { default as Snackbar } from './snackbar';
export { default as SnackbarList } from './snackbar/list';
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export { default as __experimentalText } from './text';
export { default as ExternalLink } from './external-link';
export { default as TextControl } from './text-control';
export { default as ToggleControl } from './toggle-control';
export { default as SearchControl } from './search-control';
export { default as SelectControl } from './select-control';
export { default as RangeControl } from './range-control';
export { default as ResizableBox } from './resizable-box';
Expand Down
87 changes: 87 additions & 0 deletions packages/components/src/search-control/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
# SearchControl

SearchControl components let users display a search control.


## Table of contents

1. [Development guidelines](#development-guidelines)
2. [Related components](#related-components)

## Development guidelines

### Usage

Render a user interface to input the name of an additional css class.

```js
import { SearchControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

function MySearchControl( { className, setState } ) {
const [ searchInput, setSearchInput ] = useState( '' );

return (
<SearchControl
value={ searchInput }
onChange={ setSearchInput }
/>
);
}
```

### Props

The set of props accepted by the component will be specified below.
Props not included in this set will be applied to the input element.

#### label

If this property is added, a label will be generated using label property as the content.

- Type: `String`
- Required: Yes

#### placeholder

If this property is added, a specific placeholder will be used for the input.

- Type: `String`
- Required: No
#### value

The current value of the input.

- Type: `String | Number`
- Required: Yes

#### className

The class that will be added to the classes of the wrapper div.

- Type: `String`
- Required: No

#### onChange

A function that receives the value of the input.

- Type: `function`
- Required: Yes

#### help

If this property is added, a help text will be generated using help property as the content.

- Type: `String|WPElement`
- Required: No
### hideLabelFromVision

If true, the label will only be visible to screen readers.

- Type: `Boolean`
- Required: No

## Related components

- To offer users more constrained options for input, use TextControl, SelectControl, RadioControl, CheckboxControl, or RangeControl.
Loading

0 comments on commit 2356b2d

Please sign in to comment.