Skip to content

Commit

Permalink
Block Editor: LinkControl: Remove Reset button
Browse files Browse the repository at this point in the history
  • Loading branch information
@aduth
aduth committed Feb 3, 2020
1 parent 0a984c6 commit b5187a5
Show file tree
Hide file tree
Showing 5 changed files with 11 additions and 71 deletions.
5 changes: 0 additions & 5 deletions packages/block-editor/src/components/link-control/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,10 +150,6 @@ function LinkControl( {
setInputValue( val );
};

const resetInput = () => {
setInputValue( '' );
};

const handleDirectEntry = ( val ) => {
let type = 'URL';

Expand Down Expand Up @@ -323,7 +319,6 @@ function LinkControl( {
} }
renderSuggestions={ renderSearchResults }
fetchSuggestions={ getSearchHandler }
onReset={ resetInput }
showInitialSuggestions={ showInitialSuggestions }
/>
) : (
Expand Down
9 changes: 0 additions & 9 deletions packages/block-editor/src/components/link-control/search-input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ const LinkControlSearchInput = ( {
onSelect,
renderSuggestions,
fetchSuggestions,
onReset,
showInitialSuggestions,
} ) => {
const [ selectedSuggestion, setSelectedSuggestion ] = useState();
Expand Down Expand Up @@ -81,14 +80,6 @@ const LinkControlSearchInput = ( {
icon="editor-break"
className="block-editor-link-control__search-submit"
/>
<Button
disabled={ ! value.length }
type="reset"
label={ __( 'Reset' ) }
icon="no-alt"
className="block-editor-link-control__search-reset"
onClick={ onReset }
/>
</div>
</form>
);
Expand Down
6 changes: 4 additions & 2 deletions packages/block-editor/src/components/link-control/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
$block-editor-link-control-number-of-actions: 1;

.block-editor-link-control {
position: relative;
min-width: $modal-min-width;
Expand All @@ -11,7 +13,7 @@
display: block;
padding: 11px $grid-size-large;
margin: $grid-size-large;
padding-right: ( $icon-button-size * 2 ); // width of reset and submit buttons
padding-right: ( $icon-button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
position: relative;
border: 1px solid #e1e1e1;
border-radius: $radius-round-rectangle;
Expand Down Expand Up @@ -222,7 +224,7 @@
* were center-padded to the same width as an icon button.
*/
top: $grid-size-large + 1px + ( ( 40px - $spinner-size ) / 2 );
right: $grid-size-large + 1px + ( $icon-button-size * 2 ) + ( ( $icon-button-size - $spinner-size ) / 2 );
right: $grid-size-large + 1px + ( $icon-button-size * $block-editor-link-control-number-of-actions ) + ( ( $icon-button-size - $spinner-size ) / 2 );
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" disabled=\\"\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-editor-break\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button><button type=\\"reset\\" disabled=\\"\\" class=\\"components-button block-editor-link-control__search-reset has-icon\\" aria-label=\\"Reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div></form></div>"`;
exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" disabled=\\"\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-editor-break\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></form></div>"`;
60 changes: 6 additions & 54 deletions packages/block-editor/src/components/link-control/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,56 +217,6 @@ describe( 'Searching for a link', () => {
);
}
);

it( 'should reset the input field and the search results when search term is cleared or reset', async () => {
const searchTerm = 'Hello world';

act( () => {
render( <LinkControl />, container );
} );

let searchResultElements;
let searchInput;

// Search Input UI
searchInput = container.querySelector( 'input[aria-label="URL"]' );

// Simulate searching for a term
act( () => {
Simulate.change( searchInput, { target: { value: searchTerm } } );
} );

// fetchFauxEntitySuggestions resolves on next "tick" of event loop
await eventLoopTick();

// TODO: select these by aria relationship to autocomplete rather than arbitary selector.
searchResultElements = container.querySelectorAll(
'[role="listbox"] [role="option"]'
);

// Check we have definitely rendered some suggestions
expect( searchResultElements ).toHaveLength(
fauxEntitySuggestions.length
);

// Grab the reset button now it's available
const resetUI = container.querySelector( '[aria-label="Reset"]' );

act( () => {
Simulate.click( resetUI );
} );

await eventLoopTick();

// TODO: select these by aria relationship to autocomplete rather than arbitary selector.
searchResultElements = container.querySelectorAll(
'[role="listbox"] [role="option"]'
);
searchInput = container.querySelector( 'input[aria-label="URL"]' );

expect( searchInput.value ).toBe( '' );
expect( searchResultElements ).toHaveLength( 0 );
} );
} );

describe( 'Manual link entry', () => {
Expand Down Expand Up @@ -458,13 +408,15 @@ describe( 'Default search suggestions', () => {

expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();

//
// Reset the search to empty and check the initial suggestions are now shown.
//
const resetUI = container.querySelector( '[aria-label="Reset"]' );
const searchInput = container.querySelector(
'input[aria-label="URL"]'
);

act( () => {
Simulate.click( resetUI );
Simulate.change( searchInput, {
target: { value: '' },
} );
} );

await eventLoopTick();
Expand Down

0 comments on commit b5187a5

Please sign in to comment.