From 97468fb44c3c04419347a8eb1995728cda36a788 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 12 Mar 2020 10:55:40 +0100 Subject: [PATCH 1/5] Refine the buttongroup. --- packages/components/src/button-group/style.scss | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss index 9c80304673b47..f1dace4f64797 100644 --- a/packages/components/src/button-group/style.scss +++ b/packages/components/src/button-group/style.scss @@ -1,17 +1,24 @@ .components-button-group { display: inline-block; - border-radius: $radius-block-ui; - border: $border-width solid $theme-color; .components-button { border-radius: 0; display: inline-flex; color: $theme-color; + box-shadow: inset 0 0 0 $border-width $theme-color; & + .components-button { margin-left: -1px; } + &:first-child { + border-radius: $radius-block-ui 0 0 $radius-block-ui; + } + + &:last-child { + border-radius: 0 $radius-block-ui $radius-block-ui 0; + } + // The focused button should be elevated so the focus ring isn't cropped, // as should the active button, because it has a different border color. &:focus, @@ -22,7 +29,7 @@ // The active button should look pressed. &.is-primary { - box-shadow: none; + box-shadow: inset 0 0 0 $border-width $theme-color; } } } From 030430ff7256b9acbe99852a407fb9e2cef55f7f Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 12 Mar 2020 11:16:55 +0100 Subject: [PATCH 2/5] Refactor am/pm picker to be buttongroup. --- packages/components/src/date-time/style.scss | 36 -------------------- packages/components/src/date-time/time.js | 15 ++++---- 2 files changed, 7 insertions(+), 44 deletions(-) diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss index c0690e9e216fb..a9bc653aeb825 100644 --- a/packages/components/src/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -118,36 +118,6 @@ color: $dark-gray-500; } - .components-datetime__time-am-button { - margin-left: 8px; - margin-right: -1px; - border-radius: 3px 0 0 3px; - } - - .components-datetime__time-pm-button { - margin-left: -1px; - border-radius: 0 3px 3px 0; - } - - .components-datetime__time-am-button:focus, - .components-datetime__time-pm-button:focus { - position: relative; - z-index: 1; - } - - .components-datetime__time-am-button.is-pressed, - .components-datetime__time-pm-button.is-pressed { - background: $light-gray-300; - border-color: $dark-gray-100; - box-shadow: inset 0 2px 5px -3px $dark-gray-500; - &:focus { - box-shadow: - inset 0 2px 5px -3px $dark-gray-500, - 0 0 0 1px $white, - 0 0 0 3px $blue-medium-focus; - } - } - .components-datetime__time-field { &-time { @@ -155,12 +125,6 @@ direction: ltr; } - - &.am-pm button { - font-size: 11px; - font-weight: 600; - } - select { margin-right: 4px; diff --git a/packages/components/src/date-time/time.js b/packages/components/src/date-time/time.js index 25955a3335af2..e167595a51c70 100644 --- a/packages/components/src/date-time/time.js +++ b/packages/components/src/date-time/time.js @@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import Button from '../button'; +import ButtonGroup from '../button-group'; /** * Module Constants @@ -318,24 +319,22 @@ class TimePicker extends Component { /> { is12Hour && ( -
+ -
+ ) } From 8efc8ef638bbdd22d706a171242d78fc5ed9136c Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 12 Mar 2020 11:27:27 +0100 Subject: [PATCH 3/5] Polish padding. Fixes #20774. --- packages/components/src/date-time/style.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss index a9bc653aeb825..b65f85977a09c 100644 --- a/packages/components/src/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -7,6 +7,10 @@ .components-datetime { padding: $grid-unit-20; + .components-popover__content & { + padding: 0; + } + .components-datetime__calendar-help { padding: $grid-unit-20; @@ -126,7 +130,7 @@ } select { - margin-right: 4px; + margin-right: $grid-unit-05; &:focus { position: relative; @@ -136,7 +140,7 @@ input[type="number"] { padding: 2px; - margin-right: 4px; + margin-right: $grid-unit-05; text-align: center; -moz-appearance: textfield; @@ -157,7 +161,7 @@ // We are assuming MM-DD-YYY correlates with AM/PM &.is-12-hour { .components-datetime__time-field-day input { - margin: 0 -4px 0 0 !important; + margin: 0 -$grid-unit-05 0 0 !important; border-radius: $radius-round-rectangle 0 0 $radius-round-rectangle !important; } .components-datetime__time-field-year input { @@ -194,5 +198,5 @@ // Hack to center the datepicker component within the popover. // It sets its own styles so centering is tricky. .components-popover .components-datetime__date { - padding-left: 4px; + padding-left: $grid-unit-05; } From c7302b7971f2dee277df4ec2732606e6deb5189c Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 12 Mar 2020 12:05:45 +0100 Subject: [PATCH 4/5] Try alternate fix. --- packages/components/src/date-time/style.scss | 6 +----- .../editor/src/components/post-publish-panel/style.scss | 6 ------ 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss index b65f85977a09c..c80ac572d6afe 100644 --- a/packages/components/src/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -5,11 +5,7 @@ /*rtl:end:ignore*/ .components-datetime { - padding: $grid-unit-20; - - .components-popover__content & { - padding: 0; - } + padding: 0; .components-datetime__calendar-help { padding: $grid-unit-20; diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index aaadde5f80884..254e67e59522c 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -78,12 +78,6 @@ .editor-post-visibility__dialog-legend { display: none; } - - // The DateTime component has an intrinsic padding in order for the horizontal scrolling to function inside a popover. - // We unset that here when used inline. - .components-datetime { - padding: 0; - } } .post-publish-panel__postpublish .components-panel__body { From 3503d1a0770a3319b37a4173007de3165452bed9 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 12 Mar 2020 12:25:24 +0100 Subject: [PATCH 5/5] Fix to pass test, and update snaps. --- .../date-time/test/__snapshots__/time.js.snap | 20 +++++++++---------- packages/components/src/date-time/time.js | 2 ++ 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/components/src/date-time/test/__snapshots__/time.js.snap b/packages/components/src/date-time/test/__snapshots__/time.js.snap index 14726e4cf644a..e27e600f089f2 100644 --- a/packages/components/src/date-time/test/__snapshots__/time.js.snap +++ b/packages/components/src/date-time/test/__snapshots__/time.js.snap @@ -317,12 +317,12 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`] value="00" /> -
@@ -330,13 +330,13 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`] PM -
+ @@ -498,12 +498,12 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = ` value="00" /> -
@@ -511,13 +511,13 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = ` PM -
+ diff --git a/packages/components/src/date-time/time.js b/packages/components/src/date-time/time.js index e167595a51c70..9d8dbce3b2db0 100644 --- a/packages/components/src/date-time/time.js +++ b/packages/components/src/date-time/time.js @@ -324,6 +324,7 @@ class TimePicker extends Component { isPrimary={ am === 'AM' } isSecondary={ am !== 'AM' } onClick={ this.updateAmPm( 'AM' ) } + className="components-datetime__time-am-button" > { __( 'AM' ) } @@ -331,6 +332,7 @@ class TimePicker extends Component { isPrimary={ am === 'PM' } isSecondary={ am !== 'PM' } onClick={ this.updateAmPm( 'PM' ) } + className="components-datetime__time-pm-button" > { __( 'PM' ) }