Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BaseControl: Fix VisualLabel styles #37747

Merged
merged 5 commits into from
Jan 10, 2022
Merged

BaseControl: Fix VisualLabel styles #37747

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2984420
BaseControl: Fix VisualLabel styles
Mamaduka Jan 6, 2022
c061bd5
Update snapshot
Mamaduka Jan 6, 2022
ebe7259
Update another snapshot
Mamaduka Jan 6, 2022
c74c9fe
Reuse styles
Mamaduka Jan 8, 2022
d6c080d
Add changelong entry
Mamaduka Jan 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}

Expand All @@ -81,14 +86,14 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
className="block-editor-color-gradient-control__color-indicator"
>
<span
className="components-base-control__label"
className="components-base-control__label emotion-6 emotion-7"
>
Test Color
</span>
</div>
</legend>
<div
className="components-flex components-h-stack components-v-stack emotion-6 emotion-5"
className="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
data-wp-c16t={true}
data-wp-component="VStack"
>
Expand Down
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
13 changes: 11 additions & 2 deletions packages/components/src/base-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
StyledField,
StyledLabel,
StyledHelp,
StyledVisualLabel,
} from './styles/base-control-styles';

/**
Expand Down Expand Up @@ -95,8 +96,16 @@ function BaseControl( {
* @return {JSX.Element} Element
*/
BaseControl.VisualLabel = ( { className, children } ) => {
className = classnames( 'components-base-control__label', className );
return <span className={ className }>{ children }</span>;
return (
<StyledVisualLabel
className={ classnames(
'components-base-control__label',
className
) }
>
{ children }
</StyledVisualLabel>
);
};

export default BaseControl;
11 changes: 10 additions & 1 deletion packages/components/src/base-control/styles/base-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import styled from '@emotion/styled';
import { css } from '@emotion/react';

/**
* Internal dependencies
Expand All @@ -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 }
`;
45 changes: 25 additions & 20 deletions packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -141,14 +146,14 @@ exports[`ToggleGroupControl should render correctly 1`] = `
>
<div>
<span
class="components-base-control__label"
class="components-base-control__label emotion-4 emotion-5"
>
Test Toggle Group Control
</span>
</div>
<div
aria-label="Test Toggle Group Control"
class="medium components-toggle-group-control emotion-4 emotion-5"
class="medium components-toggle-group-control emotion-6 emotion-7"
data-wp-c16t="true"
data-wp-component="ToggleGroupControl"
id="toggle-group-control-0"
Expand All @@ -162,13 +167,13 @@ exports[`ToggleGroupControl should render correctly 1`] = `
tabindex="-1"
/>
<div
class="emotion-6 emotion-7"
class="emotion-8 emotion-9"
data-active="false"
>
<button
aria-checked="false"
aria-label="R"
class="emotion-8 components-toggle-group-control-option"
class="emotion-10 components-toggle-group-control-option"
data-value="rigas"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOption"
Expand All @@ -177,26 +182,26 @@ exports[`ToggleGroupControl should render correctly 1`] = `
tabindex="0"
>
<div
class="emotion-9 emotion-10"
class="emotion-11 emotion-12"
>
R
</div>
<div
aria-hidden="true"
class="emotion-11 emotion-12"
class="emotion-13 emotion-14"
>
R
</div>
</button>
</div>
<div
class="emotion-6 emotion-7"
class="emotion-8 emotion-9"
data-active="false"
>
<button
aria-checked="false"
aria-label="J"
class="emotion-8 components-toggle-group-control-option"
class="emotion-10 components-toggle-group-control-option"
data-value="jack"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOption"
Expand All @@ -205,13 +210,13 @@ exports[`ToggleGroupControl should render correctly 1`] = `
tabindex="-1"
>
<div
class="emotion-9 emotion-10"
class="emotion-11 emotion-12"
>
J
</div>
<div
aria-hidden="true"
class="emotion-11 emotion-12"
class="emotion-13 emotion-14"
>
J
</div>
Expand Down