From ef2af48aa9959e59ce47943209a30dd548ad0abe Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 2 Aug 2019 14:19:15 -0400 Subject: [PATCH 1/5] Make all notice-list notices the same min-height. --- packages/components/src/notice/style.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss index ad96505a1dae3..38c9a9ad3e4cb 100644 --- a/packages/components/src/notice/style.scss +++ b/packages/components/src/notice/style.scss @@ -64,8 +64,23 @@ max-width: 100vw; z-index: z-index(".components-notice-list"); + // Use different margin and line height here to ensure that these are + // the same height, regardless of whether or not they have action buttons. .components-notice__content { margin-top: 1em; margin-bottom: 1em; + line-height: $grid-size-large + ($grid-size-small * 1.5); + } + + // Move the dismiss button to account for the extra line height. + .components-notice__dismiss { + top: 2px; + } + + // Adjust button size/position to better fit with the new line height. + .components-notice__action.components-button { + margin-top: -3px; + margin-bottom: -3px; + height: $grid-size-large + ($grid-size-small / 2); } } From 7953b82680a50ed373a6faf43f2a86454aa0d1b9 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 6 Aug 2019 15:20:21 -0400 Subject: [PATCH 2/5] Undo all the absolute positioning changes. This reverts commit ef2af48aa9959e59ce47943209a30dd548ad0abe. --- packages/components/src/notice/style.scss | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss index 38c9a9ad3e4cb..ad96505a1dae3 100644 --- a/packages/components/src/notice/style.scss +++ b/packages/components/src/notice/style.scss @@ -64,23 +64,8 @@ max-width: 100vw; z-index: z-index(".components-notice-list"); - // Use different margin and line height here to ensure that these are - // the same height, regardless of whether or not they have action buttons. .components-notice__content { margin-top: 1em; margin-bottom: 1em; - line-height: $grid-size-large + ($grid-size-small * 1.5); - } - - // Move the dismiss button to account for the extra line height. - .components-notice__dismiss { - top: 2px; - } - - // Adjust button size/position to better fit with the new line height. - .components-notice__action.components-button { - margin-top: -3px; - margin-bottom: -3px; - height: $grid-size-large + ($grid-size-small / 2); } } From 76a8604444284acb3f4a73dd4a0da4c2f9e83e99 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 6 Aug 2019 15:59:57 -0400 Subject: [PATCH 3/5] Try using flexbox to properly center things. --- packages/components/src/notice/style.scss | 18 +++++++++++++----- .../src/components/editor-notices/style.scss | 4 ++-- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss index ad96505a1dae3..98b61d50f99ae 100644 --- a/packages/components/src/notice/style.scss +++ b/packages/components/src/notice/style.scss @@ -1,10 +1,12 @@ .components-notice { + display: flex; font-family: $default-font; font-size: $default-font-size; background-color: $blue-medium-100; border-left: 4px solid $blue-medium-500; margin: 5px 15px 2px; padding: 8px 12px; + align-items: center; &.is-dismissible { padding-right: 36px; @@ -28,6 +30,7 @@ } .components-notice__content { + flex-grow: 1; margin: $grid-size-small #{ $icon-button-size-small + $border-width } $grid-size-small 0; } @@ -42,10 +45,9 @@ } .components-notice__dismiss { - position: absolute; - top: 0; - right: 0; color: $dark-gray-300; + align-self: flex-start; + flex-shrink: 0; &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover, &:not(:disabled):not([aria-disabled="true"]):not(.is-default):active, @@ -65,7 +67,13 @@ z-index: z-index(".components-notice-list"); .components-notice__content { - margin-top: 1em; - margin-bottom: 1em; + margin-top: $grid-size + $grid-size-small; + margin-bottom: $grid-size + $grid-size-small; + line-height: 1.6; + } + + .components-notice__action.components-button { + margin-top: -2px; + margin-bottom: -2px; } } diff --git a/packages/editor/src/components/editor-notices/style.scss b/packages/editor/src/components/editor-notices/style.scss index 4b6d26f226d1d..1da63e9d5ae0f 100644 --- a/packages/editor/src/components/editor-notices/style.scss +++ b/packages/editor/src/components/editor-notices/style.scss @@ -25,10 +25,10 @@ box-sizing: border-box; margin: 0 0 5px; padding: 6px 12px; - min-height: $panel-header-height; + min-height: $header-height + $grid-size-small; .components-notice__dismiss { - margin: 10px 5px; + margin: 5px -5px 5px 5px; } } } From 7e467cd94ee52100b7cd29d55eeaaab566096a7c Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 7 Aug 2019 11:18:15 -0400 Subject: [PATCH 4/5] Minor: Adjust dismiss button margin. --- packages/editor/src/components/editor-notices/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/editor-notices/style.scss b/packages/editor/src/components/editor-notices/style.scss index 1da63e9d5ae0f..28ab1325f24ac 100644 --- a/packages/editor/src/components/editor-notices/style.scss +++ b/packages/editor/src/components/editor-notices/style.scss @@ -28,7 +28,7 @@ min-height: $header-height + $grid-size-small; .components-notice__dismiss { - margin: 5px -5px 5px 5px; + margin: 6px -5px 6px 5px; } } } From 17581d2c0c19106cc1f845575e42ce9d69561306 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 8 Aug 2019 08:53:16 -0400 Subject: [PATCH 5/5] Add code comments. --- packages/components/src/notice/style.scss | 3 +++ packages/editor/src/components/editor-notices/style.scss | 3 +++ 2 files changed, 6 insertions(+) diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss index e11335dc1753b..8474146bbec68 100644 --- a/packages/components/src/notice/style.scss +++ b/packages/components/src/notice/style.scss @@ -46,6 +46,8 @@ .components-notice__dismiss { color: $dark-gray-300; + + // Place the dismiss button at the top of the container, even when text wraps onto two lines. align-self: flex-start; flex-shrink: 0; @@ -72,6 +74,7 @@ line-height: 1.6; } + // Reduce margins on inline buttons so that they don't add too much extra line-height. .components-notice__action.components-button { margin-top: -2px; margin-bottom: -2px; diff --git a/packages/editor/src/components/editor-notices/style.scss b/packages/editor/src/components/editor-notices/style.scss index 28ab1325f24ac..330976df2dfe7 100644 --- a/packages/editor/src/components/editor-notices/style.scss +++ b/packages/editor/src/components/editor-notices/style.scss @@ -25,8 +25,11 @@ box-sizing: border-box; margin: 0 0 5px; padding: 6px 12px; + + // Min-height matches the height of a single-line notice with an action button. min-height: $header-height + $grid-size-small; + // Margins ensure that the dismiss button aligns to the center of the first line of text. .components-notice__dismiss { margin: 6px -5px 6px 5px; }