From d9b406bdb21fe13eac3aa93ce9d9004241531425 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 10 Jan 2022 07:18:16 +0000 Subject: [PATCH] BaseControl: Fix VisualLabel styles (#37747) * BaseControl: Fix VisualLabel styles * Update snapshots * Reuse styles * Add changelong entry --- .../test/__snapshots__/control.js.snap | 13 ++++-- packages/components/CHANGELOG.md | 4 ++ packages/components/src/base-control/index.js | 13 +++++- .../styles/base-control-styles.js | 11 ++++- .../test/__snapshots__/index.js.snap | 45 ++++++++++--------- 5 files changed, 59 insertions(+), 27 deletions(-) diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 61d1f210199a60..488c01e33f1c17 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -40,6 +40,11 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` } .emotion-6 { + display: inline-block; + margin-bottom: calc(4px * 2); +} + +.emotion-8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -56,11 +61,11 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` justify-content: space-between; } -.emotion-6>*+*:not( marquee ) { +.emotion-8>*+*:not( marquee ) { margin-top: calc(4px * 3); } -.emotion-6>* { +.emotion-8>* { min-height: 0; } @@ -81,14 +86,14 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` className="block-editor-color-gradient-control__color-indicator" > Test Color
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 65c089c899b634..876c46b448ce33 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fix + +- Add missing styles to the `BaseControl.VisualLabel` component. ([#37747](https://github.com/WordPress/gutenberg/pull/37747)) + ## 19.2.0 (2022-01-04) ### Experimental diff --git a/packages/components/src/base-control/index.js b/packages/components/src/base-control/index.js index 7f70ce5eea9fe5..86746d6174fd61 100644 --- a/packages/components/src/base-control/index.js +++ b/packages/components/src/base-control/index.js @@ -12,6 +12,7 @@ import { StyledField, StyledLabel, StyledHelp, + StyledVisualLabel, } from './styles/base-control-styles'; /** @@ -95,8 +96,16 @@ function BaseControl( { * @return {JSX.Element} Element */ BaseControl.VisualLabel = ( { className, children } ) => { - className = classnames( 'components-base-control__label', className ); - return { children }; + return ( + + { children } + + ); }; export default BaseControl; diff --git a/packages/components/src/base-control/styles/base-control-styles.js b/packages/components/src/base-control/styles/base-control-styles.js index e47410d44d260d..9255c818583da1 100644 --- a/packages/components/src/base-control/styles/base-control-styles.js +++ b/packages/components/src/base-control/styles/base-control-styles.js @@ -2,6 +2,7 @@ * External dependencies */ import styled from '@emotion/styled'; +import { css } from '@emotion/react'; /** * Internal dependencies @@ -22,13 +23,21 @@ export const StyledField = styled.div` } `; -export const StyledLabel = styled.label` +const labelStyles = css` display: inline-block; margin-bottom: ${ space( 2 ) }; `; +export const StyledLabel = styled.label` + ${ labelStyles } +`; + export const StyledHelp = styled.p` font-size: ${ font( 'helpText.fontSize' ) }; font-style: normal; color: ${ COLORS.mediumGray.text }; `; + +export const StyledVisualLabel = styled.span` + ${ labelStyles } +`; diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap index 679369cb776cd4..8be9ab4663236b 100644 --- a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap +++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap @@ -15,6 +15,11 @@ exports[`ToggleGroupControl should render correctly 1`] = ` } .emotion-4 { + display: inline-block; + margin-bottom: calc(4px * 2); +} + +.emotion-6 { background: #fff; border: 1px solid; border-color: #757575; @@ -32,23 +37,23 @@ exports[`ToggleGroupControl should render correctly 1`] = ` } @media ( prefers-reduced-motion: reduce ) { - .emotion-4 { + .emotion-6 { transition-duration: 0ms; } } -.emotion-4:hover { +.emotion-6:hover { border-color: #757575; } -.emotion-4:focus-within { +.emotion-6:focus-within { border-color: var( --wp-admin-theme-color-darker-10, #007cba); box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b); outline: none; z-index: 1; } -.emotion-6 { +.emotion-8 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -61,7 +66,7 @@ exports[`ToggleGroupControl should render correctly 1`] = ` flex: 1; } -.emotion-8 { +.emotion-10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -100,20 +105,20 @@ exports[`ToggleGroupControl should render correctly 1`] = ` } @media ( prefers-reduced-motion: reduce ) { - .emotion-8 { + .emotion-10 { transition-duration: 0ms; } } -.emotion-8::-moz-focus-inner { +.emotion-10::-moz-focus-inner { border: 0; } -.emotion-8:active { +.emotion-10:active { background: #fff; } -.emotion-9 { +.emotion-11 { font-size: 13px; line-height: 1; position: absolute; @@ -125,7 +130,7 @@ exports[`ToggleGroupControl should render correctly 1`] = ` transform: translate( -50%, -50% ); } -.emotion-11 { +.emotion-13 { font-size: 13px; font-weight: bold; height: 0; @@ -141,14 +146,14 @@ exports[`ToggleGroupControl should render correctly 1`] = ` >
Test Toggle Group Control