From 515c91a20b88421d64b8e129f80be4cbc3fb0979 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 28 Jan 2020 15:30:02 -0500 Subject: [PATCH 1/4] Components: Extract spinner size as base variable Allow for reuse in computing dimensions in other stylesheets --- packages/base-styles/_variables.scss | 9 +++++---- packages/components/src/spinner/style.scss | 14 +++++++------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 2f6776824c45b0..5cb403ffd96a10 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -48,12 +48,8 @@ $content-width: 580px; // This is optimized for 70 characters. // Block UI $border-width: 1px; $block-controls-height: 36px; -$icon-button-size: 36px; -$icon-button-size-small: 24px; $inserter-tabs-height: 36px; $block-toolbar-height: $block-controls-height + $border-width; -$resize-handler-size: 15px; -$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area. // Blocks $block-left-border-width: $border-width * 3; @@ -82,6 +78,11 @@ $block-selected-vertical-margin-child: $block-edge-to-content; // Buttons & UI Widgets $radius-round-rectangle: 4px; $radius-round: 50%; +$icon-button-size: 36px; +$icon-button-size-small: 24px; +$resize-handler-size: 15px; +$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area. +$spinner-size: 18px; // Widgets screen $widget-area-width: 700px; diff --git a/packages/components/src/spinner/style.scss b/packages/components/src/spinner/style.scss index cdd363ab104efe..1fba4c387d2e2c 100644 --- a/packages/components/src/spinner/style.scss +++ b/packages/components/src/spinner/style.scss @@ -1,8 +1,8 @@ .components-spinner { display: inline-block; background-color: $dark-gray-200; - width: 18px; - height: 18px; + width: $spinner-size; + height: $spinner-size; opacity: 0.7; margin: 5px 11px 0; border-radius: 100%; @@ -13,12 +13,12 @@ content: ""; position: absolute; background-color: $white; - top: 3px; - left: 3px; - width: 4px; - height: 4px; + top: ( $spinner-size - ( $spinner-size * ( 2 / 3 ) ) ) / 2; + left: ( $spinner-size - ( $spinner-size * ( 2 / 3 ) ) ) / 2; + width: ( $spinner-size / 4.5 ); + height: ( $spinner-size / 4.5 ); border-radius: 100%; - transform-origin: 6px 6px; + transform-origin: ( $spinner-size / 3 ) ( $spinner-size / 3 ); animation: components-spinner__animation 1s infinite linear; /* rtl:end:ignore */ } From 0a984c6633fab179b9beb82de3ab6580d494994b Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 30 Jan 2020 14:48:55 -0500 Subject: [PATCH 2/4] Block Editor: LinkControl: Add Submit button as action --- .../components/link-control/search-input.js | 26 ++++++++----- .../src/components/link-control/style.scss | 39 ++++++++++++++----- .../test/__snapshots__/index.js.snap | 2 +- 3 files changed, 47 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js index 4d8f39f9489d02..532863aeddfa73 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -73,15 +73,23 @@ const LinkControlSearchInput = ( { __experimentalHandleURLSuggestions={ true } __experimentalShowInitialSuggestions={ showInitialSuggestions } /> - - "`; +exports[`Basic rendering should render 1`] = `"
"`; From b5187a554b8ed56b91ce1d7ba3194a69bb7d8809 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 3 Feb 2020 18:41:44 -0500 Subject: [PATCH 3/4] Block Editor: LinkControl: Remove Reset button --- .../src/components/link-control/index.js | 5 -- .../components/link-control/search-input.js | 9 --- .../src/components/link-control/style.scss | 6 +- .../test/__snapshots__/index.js.snap | 2 +- .../src/components/link-control/test/index.js | 60 ++----------------- 5 files changed, 11 insertions(+), 71 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 5f95d64adde6d9..69e4a1d43719ab 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -150,10 +150,6 @@ function LinkControl( { setInputValue( val ); }; - const resetInput = () => { - setInputValue( '' ); - }; - const handleDirectEntry = ( val ) => { let type = 'URL'; @@ -323,7 +319,6 @@ function LinkControl( { } } renderSuggestions={ renderSearchResults } fetchSuggestions={ getSearchHandler } - onReset={ resetInput } showInitialSuggestions={ showInitialSuggestions } /> ) : ( diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js index 532863aeddfa73..695cdae717bef9 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -35,7 +35,6 @@ const LinkControlSearchInput = ( { onSelect, renderSuggestions, fetchSuggestions, - onReset, showInitialSuggestions, } ) => { const [ selectedSuggestion, setSelectedSuggestion ] = useState(); @@ -81,14 +80,6 @@ const LinkControlSearchInput = ( { icon="editor-break" className="block-editor-link-control__search-submit" /> - "`; +exports[`Basic rendering should render 1`] = `"
"`; diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 65d7729c973dc4..6a35838c73872f 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -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( , 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', () => { @@ -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(); From 62ff4a5bb227e462a333e0e25a9fd61708556a8b Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 3 Feb 2020 18:43:12 -0500 Subject: [PATCH 4/4] Block Editor: LinkControl: Remove `disabled` from submit button Instead inherit that the form cannot be submitted since the rendered URLInput will apply a `required` attribute, preventing submission of the form, while still displaying the associated help text "You must fill out this field" --- .../block-editor/src/components/link-control/search-input.js | 1 - .../components/link-control/test/__snapshots__/index.js.snap | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js index 695cdae717bef9..44da93ab9f2ea7 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -74,7 +74,6 @@ const LinkControlSearchInput = ( { />
"`; +exports[`Basic rendering should render 1`] = `"
"`;