From 167fac279339b37c28f73b56824eaae581a6a20b Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 29 Jul 2022 05:43:47 +0900 Subject: [PATCH 1/8] Refactor label styles for BaseControl and InputControl --- .../src/base-control/styles/base-control-styles.ts | 12 +++++++----- .../input-control/styles/input-control-styles.tsx | 4 +++- packages/components/src/utils/base-label.ts | 13 +++++++++++++ packages/components/src/utils/style-mixins.js | 1 + 4 files changed, 24 insertions(+), 6 deletions(-) create mode 100644 packages/components/src/utils/base-label.ts diff --git a/packages/components/src/base-control/styles/base-control-styles.ts b/packages/components/src/base-control/styles/base-control-styles.ts index f05ac237aa36a..87bf95d24befc 100644 --- a/packages/components/src/base-control/styles/base-control-styles.ts +++ b/packages/components/src/base-control/styles/base-control-styles.ts @@ -7,7 +7,7 @@ import { css } from '@emotion/react'; /** * Internal dependencies */ -import { font, COLORS } from '../../utils'; +import { baseLabelTypography, font, COLORS } from '../../utils'; import { space } from '../../ui/utils/space'; export const Wrapper = styled.div` @@ -33,12 +33,10 @@ export const StyledField = styled.div` `; const labelStyles = css` + ${ baseLabelTypography }; + display: inline-block; margin-bottom: ${ space( 2 ) }; -`; - -export const StyledLabel = styled.label` - ${ labelStyles } /** * Removes Chrome/Safari/Firefox user agent stylesheet padding from * StyledLabel when it is rendered as a legend. @@ -46,6 +44,10 @@ export const StyledLabel = styled.label` padding: 0; `; +export const StyledLabel = styled.label` + ${ labelStyles } +`; + const deprecatedMarginHelp = ( { __nextHasNoMarginBottom = false } ) => { return ( ! __nextHasNoMarginBottom && diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx index a7fb7ecc7fa54..1fa5dfdbd82e2 100644 --- a/packages/components/src/input-control/styles/input-control-styles.tsx +++ b/packages/components/src/input-control/styles/input-control-styles.tsx @@ -11,7 +11,7 @@ import type { CSSProperties, ReactNode } from 'react'; import type { WordPressComponentProps } from '../../ui/context'; import { Flex, FlexItem } from '../../flex'; import { Text } from '../../text'; -import { COLORS, rtl } from '../../utils'; +import { baseLabelTypography, COLORS, rtl } from '../../utils'; import type { LabelPosition, Size } from '../types'; import { space } from '../../ui/utils/space'; @@ -272,6 +272,8 @@ const labelMargin = ( { const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >` &&& { + ${ baseLabelTypography }; + box-sizing: border-box; display: block; padding-top: 0; diff --git a/packages/components/src/utils/base-label.ts b/packages/components/src/utils/base-label.ts new file mode 100644 index 0000000000000..e9c241bf2e735 --- /dev/null +++ b/packages/components/src/utils/base-label.ts @@ -0,0 +1,13 @@ +/** + * External dependencies + */ +import { css } from '@emotion/react'; + +// This is a very low-level mixin which you shouldn't have to use directly. +// Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can. +export const baseLabelTypography = css` + font-size: 11px; + font-weight: 500; + line-height: 1.4; + text-transform: uppercase; +`; diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js index a2827af341278..c858e8731fc52 100644 --- a/packages/components/src/utils/style-mixins.js +++ b/packages/components/src/utils/style-mixins.js @@ -6,3 +6,4 @@ export { font } from './font'; export { breakpoint } from './breakpoint'; export { default as CONFIG } from './config-values'; export { COLORS } from './colors-values'; +export { baseLabelTypography } from './base-label'; From c6a46053e3df9c0d16cd9e341d72651b455c8859 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 29 Jul 2022 06:10:41 +0900 Subject: [PATCH 2/8] Make BaseControl.VisualLabel props polymorphic --- packages/components/src/base-control/index.tsx | 6 +++--- packages/components/src/base-control/stories/index.tsx | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx index ab2af8858dbaa..d5b9dccf68232 100644 --- a/packages/components/src/base-control/index.tsx +++ b/packages/components/src/base-control/index.tsx @@ -2,7 +2,6 @@ * External dependencies */ import classnames from 'classnames'; -import type { FunctionComponent } from 'react'; /** * Internal dependencies @@ -16,6 +15,7 @@ import { StyledHelp, StyledVisualLabel, } from './styles/base-control-styles'; +import type { WordPressComponentProps } from '../ui/context'; /** * `BaseControl` is a component used to generate labels and help text for components handling user inputs. @@ -104,10 +104,10 @@ export const BaseControl = ( { * * ); */ -export const VisualLabel: FunctionComponent< BaseControlVisualLabelProps > = ( { +export const VisualLabel = ( { className, children, -} ) => { +}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => { return ( = ( props ) => { + // @ts-expect-error - Unclear how to fix, see also https://github.com/WordPress/gutenberg/pull/39468#discussion_r827150516 BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel'; return ( From 932974d9339ae03f748ffd4ef8ea738bcd72f7f9 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 29 Jul 2022 06:11:13 +0900 Subject: [PATCH 3/8] Clean up label styles across codebase --- .../components/border-radius-control/index.js | 5 ++++- .../components/text-decoration-control/index.js | 6 ++++-- .../components/text-transform-control/index.js | 6 ++++-- packages/components/src/box-control/index.js | 9 +++------ .../box-control/styles/box-control-styles.js | 3 +-- .../src/custom-select-control/index.js | 5 +++-- .../src/custom-select-control/style.scss | 5 ----- .../components/src/date-time/time/index.tsx | 12 +++++++----- .../components/src/date-time/time/styles.ts | 5 ----- .../components/src/font-size-picker/index.js | 17 +++++++++++------ .../components/src/form-token-field/index.tsx | 5 +++-- .../components/src/form-token-field/style.scss | 5 ----- packages/components/src/placeholder/style.scss | 4 ---- packages/components/src/tools-panel/styles.ts | 13 ------------- 14 files changed, 40 insertions(+), 60 deletions(-) diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js index 32c32c1258f22..f848efca0e688 100644 --- a/packages/block-editor/src/components/border-radius-control/index.js +++ b/packages/block-editor/src/components/border-radius-control/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { + BaseControl, RangeControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, __experimentalUseCustomUnits as useCustomUnits, @@ -70,7 +71,9 @@ export default function BorderRadiusControl( { onChange, values } ) { return (
- { __( 'Radius' ) } + + { __( 'Radius' ) } +
{ isLinked ? ( <> diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js index 6e8695ca05081..9edfb9b4a0195 100644 --- a/packages/block-editor/src/components/text-decoration-control/index.js +++ b/packages/block-editor/src/components/text-decoration-control/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { Button } from '@wordpress/components'; +import { BaseControl, Button } from '@wordpress/components'; import { formatStrikethrough, formatUnderline } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; @@ -30,7 +30,9 @@ const TEXT_DECORATIONS = [ export default function TextDecorationControl( { value, onChange } ) { return (
- { __( 'Decoration' ) } + + { __( 'Decoration' ) } +
{ TEXT_DECORATIONS.map( ( textDecoration ) => { return ( diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js index 262484d843a3b..6d85ae7b421b7 100644 --- a/packages/block-editor/src/components/text-transform-control/index.js +++ b/packages/block-editor/src/components/text-transform-control/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { Button } from '@wordpress/components'; +import { BaseControl, Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { formatCapitalize, @@ -39,7 +39,9 @@ const TEXT_TRANSFORMS = [ export default function TextTransformControl( { value, onChange } ) { return (
- { __( 'Letter case' ) } + + { __( 'Letter case' ) } +
{ TEXT_TRANSFORMS.map( ( textTransform ) => { return ( diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js index a8411ba9a1af3..6693b59af944e 100644 --- a/packages/components/src/box-control/index.js +++ b/packages/components/src/box-control/index.js @@ -8,13 +8,13 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import { BaseControl } from '../base-control'; import Button from '../button'; import { FlexItem, FlexBlock } from '../flex'; import AllInputControl from './all-input-control'; import InputControls from './input-controls'; import AxialInputControls from './axial-input-controls'; import BoxControlIcon from './icon'; -import { Text } from '../text'; import LinkedButton from './linked-button'; import { Root, @@ -120,12 +120,9 @@ export default function BoxControl( {
- + { label } - + { allowReset && ( diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js index 14238f0a5e664..1aa2c995a8235 100644 --- a/packages/components/src/box-control/styles/box-control-styles.js +++ b/packages/components/src/box-control/styles/box-control-styles.js @@ -8,7 +8,7 @@ import styled from '@emotion/styled'; */ import { Flex } from '../../flex'; import BaseUnitControl from '../../unit-control'; -import { COLORS, rtl } from '../../utils'; +import { rtl } from '../../utils'; export const Root = styled.div` box-sizing: border-box; @@ -18,7 +18,6 @@ export const Root = styled.div` `; export const Header = styled( Flex )` - color: ${ COLORS.ui.label }; margin-bottom: 8px; `; diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js index c830e6bea999a..1f3a2bf780413 100644 --- a/packages/components/src/custom-select-control/index.js +++ b/packages/components/src/custom-select-control/index.js @@ -17,6 +17,7 @@ import { useCallback, useState } from '@wordpress/element'; import { VisuallyHidden } from '../'; import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles'; import InputBase from '../input-control/input-base'; +import { StyledLabel } from '../base-control/styles/base-control-styles'; const itemToString = ( item ) => item?.name; // This is needed so that in Windows, where @@ -138,13 +139,13 @@ export default function CustomSelectControl( { ) : ( /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */ - + ) }
- { __( 'Time' ) } - + @@ -309,11 +310,12 @@ export function TimePicker( {
- { __( 'Date' ) } - + diff --git a/packages/components/src/date-time/time/styles.ts b/packages/components/src/date-time/time/styles.ts index 7bd3377376d9f..3258273477969 100644 --- a/packages/components/src/date-time/time/styles.ts +++ b/packages/components/src/date-time/time/styles.ts @@ -29,11 +29,6 @@ export const Fieldset = styled.fieldset` } `; -export const Legend = styled.legend` - margin-bottom: ${ space( 2 ) }; - padding: 0; -`; - export const TimeWrapper = styled.div` direction: ltr; display: flex; diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 816d94127853c..06bfe4286f0dc 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -8,6 +8,7 @@ import { useState, useMemo, forwardRef } from '@wordpress/element'; /** * Internal dependencies */ +import { BaseControl } from '../base-control'; import Button from '../button'; import RangeControl from '../range-control'; import { Flex, FlexItem } from '../flex'; @@ -131,12 +132,16 @@ function FontSizePicker( className={ `${ baseClassName }__header` } > - { __( 'Size' ) } - { headerHint && ( - - { headerHint } - - ) } + + { __( 'Size' ) } + { headerHint && ( + + { headerHint } + + ) } + { ! disableCustomFontSizes && ( diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index eb96daa8fd6f2..2d070cec1850a 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -34,6 +34,7 @@ import { TokensAndInputWrapperFlex } from './styles'; import SuggestionsList from './suggestions-list'; import type { FormTokenFieldProps, TokenItem } from './types'; import { FlexItem } from '../flex'; +import { StyledLabel } from '../base-control/styles/base-control-styles'; const identity = ( value: string ) => value; @@ -659,12 +660,12 @@ export function FormTokenField( props: FormTokenFieldProps ) { /* eslint-disable jsx-a11y/no-static-element-interactions */ return (
- +
Date: Mon, 1 Aug 2022 13:02:08 +0900 Subject: [PATCH 4/8] Update changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a68a1d7d39480..c73d79ffecf09 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -11,6 +11,7 @@ - Add `box-sizing` reset style mixin to utils ([#42754](https://github.com/WordPress/gutenberg/pull/42754)). - `ResizableBox`: Make tooltip background match `Tooltip` component's ([#42800](https://github.com/WordPress/gutenberg/pull/42800)). +- Update control labels to the new uppercase styles ([#42789](https://github.com/WordPress/gutenberg/pull/42789)). ### Internal From 03af77e6fdc412c15dde31a42e0012b576631e0f Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Mon, 1 Aug 2022 12:50:42 +0900 Subject: [PATCH 5/8] BaseControl.VisualLabel: Pass props through --- packages/components/src/base-control/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx index d5b9dccf68232..122577fdeba62 100644 --- a/packages/components/src/base-control/index.tsx +++ b/packages/components/src/base-control/index.tsx @@ -107,9 +107,11 @@ export const BaseControl = ( { export const VisualLabel = ( { className, children, + ...props }: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => { return ( Date: Mon, 1 Aug 2022 12:51:50 +0900 Subject: [PATCH 6/8] Remove unnecessary `className` type --- packages/components/src/base-control/types.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts index 0cefb33db0ec9..490163d92e889 100644 --- a/packages/components/src/base-control/types.ts +++ b/packages/components/src/base-control/types.ts @@ -37,6 +37,5 @@ export type BaseControlProps = { }; export type BaseControlVisualLabelProps = { - className?: string; children: ReactNode; }; From 486f9a366d9c6507d8058c280575d7efe273699e Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Mon, 1 Aug 2022 13:01:24 +0900 Subject: [PATCH 7/8] Update snapshots --- .../color-palette/test/__snapshots__/control.js.snap | 5 +++++ .../test/__snapshots__/index.js.snap | 10 ++++++++++ .../src/tools-panel/test/__snapshots__/index.js.snap | 10 ---------- 3 files changed, 15 insertions(+), 10 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 5b063aa3fd9b3..2062501ddfb7b 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 @@ -36,8 +36,13 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` } .emotion-6 { + font-size: 11px; + font-weight: 500; + line-height: 1.4; + text-transform: uppercase; display: inline-block; margin-bottom: calc(4px * 2); + padding: 0; } .emotion-8 { 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 64c1e6833c0c1..755fa94f564d3 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,8 +15,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = ` } .emotion-4 { + font-size: 11px; + font-weight: 500; + line-height: 1.4; + text-transform: uppercase; display: inline-block; margin-bottom: calc(4px * 2); + padding: 0; } .emotion-6 { @@ -268,8 +273,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = ` } .emotion-4 { + font-size: 11px; + font-weight: 500; + line-height: 1.4; + text-transform: uppercase; display: inline-block; margin-bottom: calc(4px * 2); + padding: 0; } .emotion-6 { diff --git a/packages/components/src/tools-panel/test/__snapshots__/index.js.snap b/packages/components/src/tools-panel/test/__snapshots__/index.js.snap index 395f3820e1eab..f50435d596453 100644 --- a/packages/components/src/tools-panel/test/__snapshots__/index.js.snap +++ b/packages/components/src/tools-panel/test/__snapshots__/index.js.snap @@ -105,11 +105,6 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t line-height: 1.4em; } -.emotion-6 .components-custom-select-control__label, -.emotion-6 .ej5x27r2 { - line-height: 1.4em; -} - .emotion-8 { grid-column: 1/-1; } @@ -137,11 +132,6 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t line-height: 1.4em; } -.emotion-8 .components-custom-select-control__label, -.emotion-8 .ej5x27r2 { - line-height: 1.4em; -} -
Date: Tue, 2 Aug 2022 15:41:49 +0900 Subject: [PATCH 8/8] CustomGradientPicker: Remove duplicate label styles --- .../components/src/custom-gradient-picker/style.scss | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss index e2cf0f377d4b8..10d15992566aa 100644 --- a/packages/components/src/custom-gradient-picker/style.scss +++ b/packages/components/src/custom-gradient-picker/style.scss @@ -106,15 +106,3 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1 } } } - -// All these styles should be made generic and changed on the inputs for all components. -.components-custom-gradient-picker { - .components-input-control__label { - line-height: 1; - } - label { - text-transform: uppercase; - font-size: 11px; - font-weight: 500; - } -}