Skip to content

Commit

Permalink
Iterations to link interface (#26551)
Browse files Browse the repository at this point in the history 
* Iterations to link interface.
* Adjusts margins on icon
* Adds in test for svg and also fixes issue with spacing

Props @jasmussen, @ellatrix
  • Loading branch information
Tammie Lister authored Nov 9, 2020
1 parent 0cfdd39 commit 4be4389
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 12 deletions.
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/link-control/search-create-button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { isFunction } from 'lodash';
import { __, sprintf } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { createInterpolateElement } from '@wordpress/element';
import { Icon, plusCircle } from '@wordpress/icons';
import { Icon, plus } from '@wordpress/icons';

export const LinkControlSearchCreate = ( {
searchTerm,
Expand Down Expand Up @@ -50,7 +50,7 @@ export const LinkControlSearchCreate = ( {
>
<Icon
className="block-editor-link-control__search-item-icon"
icon={ plusCircle }
icon={ plus }
/>

<span className="block-editor-link-control__search-item-header">
Expand Down
16 changes: 8 additions & 8 deletions packages/block-editor/src/components/link-control/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ $block-editor-link-control-number-of-actions: 1;
right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) / 2);
}

.components-button .block-editor-link-control__search-submit .has-icon {
margin: -1px;
}

.block-editor-link-control__search-results-wrapper {
position: relative;
margin-top: -$grid-unit-20 + 1px;
Expand All @@ -78,21 +82,19 @@ $block-editor-link-control-number-of-actions: 1;
height: $grid-unit-20/2;
top: 0;
bottom: auto;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

&::after {
height: $grid-unit-20;
bottom: 0;
top: auto;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
}

.block-editor-link-control__search-results-label {
padding: 15px 30px 0 30px;
padding: $grid-unit-20 $grid-unit-40 0;
display: block;
font-size: 1.1em;
font-weight: 600;
}

.block-editor-link-control__search-results {
Expand All @@ -116,7 +118,7 @@ $block-editor-link-control-number-of-actions: 1;
width: 100%;
border: none;
text-align: left;
padding: 10px 15px;
padding: $grid-unit-15 $grid-unit-20;
border-radius: 5px;
height: auto;

Expand Down Expand Up @@ -211,9 +213,8 @@ $block-editor-link-control-number-of-actions: 1;

// Separate Create button when following other suggestions.
.components-button + .block-editor-link-control__search-create {
margin-top: 20px;
overflow: visible;
padding: 12px 15px;
padding: $grid-unit-15 $grid-unit-20;

// Create fake border. We cannot use border because the button has a border
// radius applied to it
Expand All @@ -224,7 +225,6 @@ $block-editor-link-control-number-of-actions: 1;
left: 0;
display: block;
width: 100%;
border-top: 1px solid $gray-300;
}
}

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\\"><div class=\\"block-editor-link-control__search-input-wrapper\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><input required=\\"\\" class=\\"block-editor-url-input__input\\" type=\\"text\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-label=\\"URL\\" 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\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></form></div><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><div class=\\"block-editor-link-control__search-input-wrapper\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><input required=\\"\\" class=\\"block-editor-url-input__input\\" type=\\"text\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-label=\\"URL\\" 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\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z\\"></path></svg></button></div></form></div><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
2 changes: 1 addition & 1 deletion packages/icons/src/library/keyboard-return.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';

const keyboardReturn = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
<Path d="M16 4h2v9H7v3l-5-4 5-4v3h9V4z" />
<Path d="M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z" />
</SVG>
);

Expand Down

0 comments on commit 4be4389

Please sign in to comment.