diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss index 3eff8da877313f..8474146bbec680 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,11 @@ } .components-notice__dismiss { - position: absolute; - top: 0; - right: 0; - color: $dark-gray-500; + 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; &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover, &:not(:disabled):not([aria-disabled="true"]):not(.is-default):active, @@ -65,7 +69,14 @@ 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; + } + + // 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 4b6d26f226d1dd..330976df2dfe7b 100644 --- a/packages/editor/src/components/editor-notices/style.scss +++ b/packages/editor/src/components/editor-notices/style.scss @@ -25,10 +25,13 @@ box-sizing: border-box; margin: 0 0 5px; padding: 6px 12px; - min-height: $panel-header-height; + // 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: 10px 5px; + margin: 6px -5px 6px 5px; } } }