Skip to content

Commit

Permalink
Fix: Consistent UI (#23202)
Browse files Browse the repository at this point in the history 
* Improve buttongroup.

* Polish sidebar header, make close align.

* Dark text color in sidebar.

* Polish select control.

* Try, remove i/o from toggle.

* Retire $panel-padding variable.

* Tweak panel-header-height

* Make tabs consistent with inserter.

* Make solid/gradient picker consistent.

Fixes #19904.

* Address feedback, and unify panel headings.

* Reduce margin.

* Update snapshots.

* Update snapshot.

Co-authored-by: Joen Asmussen <asmussen@gmail.com>
  • Loading branch information
@jasmussen
jasmussen and Joen Asmussen committed Jun 22, 2020
1 parent 2833411 commit 6c4eb8d
Show file tree
Hide file tree
Showing 40 changed files with 103 additions and 168 deletions.
3 changes: 1 addition & 2 deletions packages/base-styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,8 @@ $grid-unit-60: 6 * $grid-unit; // 48px
$icon-size: 24px;
$button-size: 36px;
$button-size-small: 24px;
$panel-padding: 16px;
$header-height: 60px;
$panel-header-height: 50px;
$panel-header-height: $grid-unit-60;
$admin-bar-height: 32px;
$admin-bar-height-big: 46px;
$admin-sidebar-width: 160px;
Expand Down
1 change: 1 addition & 0 deletions packages/base-styles/_z-index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ $z-layers: (
".edit-post-sidebar .components-panel": -2,
".edit-post-text-editor__toolbar": 1,
".block-editor-inserter__tabs": 1,
".edit-post-sidebar__panel-tab.is-active": 1,
".block-editor-inserter__tab.is-active": 1,
".components-panel__header": 1,
".components-modal__header": 10,
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-compare/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@

.block-editor-block-compare__wrapper {
display: flex;
padding-bottom: $panel-padding;
padding-bottom: $grid-unit-20;

> div {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 50%;
padding: 0 $panel-padding 0 0;
padding: 0 $grid-unit-20 0 0;
min-width: 200px;

button {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-inspector/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@
display: block;
font-size: $default-font-size;
background: $white;
padding: ($panel-padding * 2) $panel-padding;
padding: ($grid-unit-20 * 2) $grid-unit-20;
text-align: center;
}
6 changes: 2 additions & 4 deletions packages/block-editor/src/components/colors-gradients/control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,16 +125,14 @@ function ColorGradientControlInner( {
<ButtonGroup className="block-editor-color-gradient-control__button-tabs">
<Button
isSmall
isPrimary={ currentTab === 'color' }
isSecondary={ currentTab !== 'color' }
isPressed={ currentTab === 'color' }
onClick={ () => setCurrentTab( 'color' ) }
>
{ __( 'Solid' ) }
</Button>
<Button
isSmall
isPrimary={ currentTab === 'gradient' }
isSecondary={ currentTab !== 'gradient' }
isPressed={ currentTab === 'gradient' }
onClick={ () => setCurrentTab( 'gradient' ) }
>
{ __( 'Gradient' ) }
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/inserter/style.native.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-left: $panel-padding / 2;
padding-right: $panel-padding / 2;
padding-left: $grid-unit-20 / 2;
padding-right: $grid-unit-20 / 2;
padding-top: 0;
padding-bottom: 0;
}
Expand Down Expand Up @@ -76,5 +76,5 @@
}

.columnPadding {
padding: $panel-padding;
padding: $grid-unit-20;
}
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=\\"block-editor-link-control__search-input-wrapper\\"><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input class=\\"block-editor-url-input__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\\" 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></div></form><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\\"><div class=\\"components-base-control__field\\"><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><svg width=\\"6\\" height=\\"6\\" aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 6 6\\" class=\\"components-form-toggle__off\\"><path d=\\"M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\\"></path></svg></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\\"><form><div class=\\"block-editor-link-control__search-input-wrapper\\"><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input class=\\"block-editor-url-input__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\\" 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></div></form><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\\"><div class=\\"components-base-control__field\\"><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 ...ges/block-editor/src/components/responsive-block-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 with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><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\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/url-popover/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@

.block-editor-url-popover__settings {
display: block;
padding: $panel-padding;
padding: $grid-unit-20;
border-top: $border-width solid $light-gray-500;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/button/editor.native.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
border-radius: $border-width * 4;
padding: $block-spacing;
border-width: $border-width;
margin: 2 * $panel-padding;
margin: 2 * $grid-unit-20;
background-color: $button-fallback-bg;
color: $white;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/button/rich-text.android.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.richText {
background-color: transparent;
padding-left: $panel-padding;
padding-right: $panel-padding;
margin: 10px $panel-padding;
padding-left: $grid-unit-20;
padding-right: $grid-unit-20;
margin: 10px $grid-unit-20;
}
2 changes: 1 addition & 1 deletion packages/block-library/src/button/rich-text.ios.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.richText {
margin: 10px $panel-padding;
margin: 10px $grid-unit-20;
background-color: transparent;
}
6 changes: 3 additions & 3 deletions packages/components/src/button-group/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
.components-button {
border-radius: 0;
display: inline-flex;
color: var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
color: $dark-gray-primary;
box-shadow: inset 0 0 0 $border-width $dark-gray-primary;

& + .components-button {
margin-left: -1px;
Expand All @@ -29,7 +29,7 @@

// The active button should look pressed.
&.is-primary {
box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 $border-width $dark-gray-primary;
}
}
}
6 changes: 3 additions & 3 deletions packages/components/src/color-palette/style.native.scss
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
.contentContainer {
flex-direction: row;
padding: 0 $panel-padding;
padding: 0 $grid-unit-20;
}

.container {
padding-bottom: $panel-padding;
padding-bottom: $grid-unit-20;
}

.verticalSeparator {
border-width: $border-width / 2;
border-color: $light-gray-400;
height: 38px;
margin-right: $panel-padding / 2;
margin-right: $grid-unit-20 / 2;
align-self: center;
}

Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/color-picker/style.native.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: $panel-padding;
margin-top: $panel-padding;
padding: $grid-unit-20;
margin-top: $grid-unit-20;
flex-wrap: wrap;
}

Expand Down Expand Up @@ -43,8 +43,8 @@
}

.picker {
padding: $panel-padding;
border-radius: $panel-padding / 2;
padding: $grid-unit-20;
border-radius: $grid-unit-20 / 2;
height: 200px;
}

Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/custom-select-control/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

.components-custom-select-control__label {
display: block;
margin-bottom: 5px;
margin-bottom: $grid-unit-10;
}

.components-custom-select-control__button {
Expand All @@ -26,9 +26,9 @@
box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color);
}

&-icon {
.components-custom-select-control__button-icon {
height: 100%;
padding: 0 4px;
padding: 0;
position: absolute;
right: 0;
top: 0;
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/font-size-picker/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.components-font-size-picker__controls {
max-width: $sidebar-width - ( 2 * $panel-padding );
max-width: $sidebar-width - ( 2 * $grid-unit-20 );
display: flex;
flex-wrap: wrap;
align-items: center;
Expand All @@ -14,7 +14,7 @@
margin-bottom: 0;
margin-left: 0;
margin-right: $grid-unit-10;
margin-top: 5px;
margin-top: $grid-unit-10;
width: 54px;

// Show the reset button as disabled until a value is entered.
Expand All @@ -37,7 +37,7 @@

.components-color-palette__clear {
height: 30px;
margin-top: 23px;
margin-top: 26px;
}
}

Expand Down
29 changes: 0 additions & 29 deletions packages/components/src/form-toggle/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,6 @@
import classnames from 'classnames';
import { noop } from 'lodash';

/**
* WordPress dependencies
*/
import { Path, SVG } from '@wordpress/primitives';

function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
const wrapperClasses = classnames( 'components-form-toggle', className, {
'is-checked': checked,
Expand All @@ -26,30 +21,6 @@ function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
/>
<span className="components-form-toggle__track"></span>
<span className="components-form-toggle__thumb"></span>
{ checked ? (
<SVG
className="components-form-toggle__on"
width="2"
height="6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2 6"
>
<Path d="M0 0h2v6H0z" />
</SVG>
) : (
<SVG
className="components-form-toggle__off"
width="6"
height="6"
aria-hidden="true"
role="img"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6 6"
>
<Path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z" />
</SVG>
) }
</span>
);
}
Expand Down
43 changes: 0 additions & 43 deletions packages/components/src/form-toggle/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,6 @@ $toggle-border-width: 2px;
position: relative;
display: inline-block;

// On/Off icon indicators.
.components-form-toggle__on,
.components-form-toggle__off {
position: absolute;
top: $toggle-border-width * 3;
box-sizing: border-box;
}

.components-form-toggle__off {
color: $dark-gray-300;
fill: currentColor;
right: $toggle-border-width * 3;
}

.components-form-toggle__on {
left: $toggle-border-width * 3 + 2px; // Indent 2px extra because icon is thinner.
}

// Unchecked state.
.components-form-toggle__track {
content: "";
Expand Down Expand Up @@ -90,11 +72,6 @@ $toggle-border-width: 2px;
border-width: 0; // Zero out the border color to make the thumb invisible in Windows High Contrast Mode.
transform: translateX($toggle-width - ($toggle-border-width * 4) - ($toggle-height - ($toggle-border-width * 4)));
}

&::before {
background-color: var(--wp-admin-theme-color);
border: $toggle-border-width solid var(--wp-admin-theme-color);
}
}

// Disabled state:
Expand Down Expand Up @@ -126,23 +103,3 @@ $toggle-border-width: 2px;
content: "";
}
}

// Ensure on indicator works in normal and Windows high contrast mode both.
.components-form-toggle .components-form-toggle__on {
// Outlines show up in windows high contrast mode.
outline: $border-width solid transparent;
outline-offset: -1px;

// This colors the indicator black, then inverts it for normal mode.
border: $border-width solid $black;
filter: invert(100%) contrast(500%); // This makes the icon white for normal mode, and it makes it dark blue in Windows High Contrast Mode.
}

@supports (-ms-high-contrast-adjust: auto) {
// Edge stacks outlines on top of the SVG itself, and when showing them in high contrast mode it means they get inverted again.
// Therefore, show a different style for the on indicator only in Edge and IE11.
.components-form-toggle .components-form-toggle__on {
filter: none;
border: $border-width solid $white;
}
}
12 changes: 6 additions & 6 deletions packages/components/src/mobile/bottom-sheet/styles.native.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

.emptyHeader {
margin-top: $panel-padding / 2;
margin-top: $grid-unit-20 / 2;
}


Expand Down Expand Up @@ -174,9 +174,9 @@
// Color Cell

.colorCircle {
width: 2 * $panel-padding;
height: 2 * $panel-padding;
border-radius: $panel-padding;
width: 2 * $grid-unit-20;
height: 2 * $grid-unit-20;
border-radius: $grid-unit-20;
}

// Radio Cell
Expand All @@ -194,8 +194,8 @@
.bottomSheetHeader {
flex-direction: row;
align-items: center;
padding-right: $panel-padding;
padding-left: $panel-padding;
padding-right: $grid-unit-20;
padding-left: $grid-unit-20;
min-height: 44px;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/mobile/color-settings/style.native.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
justify-content: center;
align-items: center;
align-content: center;
padding: 12px $panel-padding;
padding: 12px $grid-unit-20;
}

.colorIndicator {
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/mobile/picker/styles.native.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.separator {
margin-top: $panel-padding / 2;
margin-bottom: $panel-padding / 2;
margin-left: -$panel-padding;
margin-right: -$panel-padding;
margin-top: $grid-unit-20 / 2;
margin-bottom: $grid-unit-20 / 2;
margin-left: -$grid-unit-20;
margin-right: -$grid-unit-20;
height: $border-width;
background-color: $light-gray-400;
}
Expand Down
Loading

0 comments on commit 6c4eb8d

Please sign in to comment.