From e1deb6906a130b08e7fe69ca7fd290028deb6157 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 22 Aug 2024 19:35:00 +0900 Subject: [PATCH] Components: Decrease standard padding to 12px (#64708) * Components: Decrease standard padding to 12px * Fixup * Update snapshots * Add changelog * Fixup Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo Co-authored-by: jasmussen --- packages/components/CHANGELOG.md | 23 +++++++++++++++++++ .../components/src/color-picker/hex-input.tsx | 16 +++++-------- .../src/color-picker/input-with-slider.tsx | 16 +++++-------- .../src/custom-select-control-v2/styles.ts | 6 ++--- .../test/__snapshots__/index.test.js.snap | 8 +++---- .../src/input-control/input-base.tsx | 4 ++-- .../styles/input-control-styles.tsx | 17 +++++++------- packages/components/src/item-group/styles.ts | 6 ++--- .../test/__snapshots__/index.js.snap | 6 ++--- .../styles/select-control-styles.ts | 10 ++++---- .../components/src/text-control/style.scss | 5 ++-- .../components/src/utils/config-values.js | 10 ++++---- 12 files changed, 72 insertions(+), 55 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5d2479e3149c5..ffea5a0aac616 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,29 @@ ## Unreleased +### Enhancements + +- Decrease horizontal padding from 16px to 12px on the following components, when in the 40px default size ([#64708](https://github.com/WordPress/gutenberg/pull/64708)). + - `AnglePickerControl` + - `ColorPicker` (on the inputs) + - `CustomSelectControl` + - `CustomSelectControlV2` + - `DateTimePicker` (on the selects and inputs) + - `DimensionControl` + - `FocalPointPicker` (on the inputs) + - `FontSizePicker` (on the custom inputs) + - `GradientPicker` (on the selects and inputs) + - `InputControl` + - `NumberControl` + - `QueryControls` (on the selects and inputs) + - `RangeControl` (on the inputs) + - `SearchControl` + - `SelectControl` + - `TextControl` + - `TimePicker` (on the inputs) + - `TreeSelect` + - `UnitControl` + ### Internal - `DropdownMenu` v2: refactor to overloaded naming convention ([#64654](https://github.com/WordPress/gutenberg/pull/64654)). diff --git a/packages/components/src/color-picker/hex-input.tsx b/packages/components/src/color-picker/hex-input.tsx index 90ebc0a101bd3..ef8b5356c0edc 100644 --- a/packages/components/src/color-picker/hex-input.tsx +++ b/packages/components/src/color-picker/hex-input.tsx @@ -13,11 +13,10 @@ import { __ } from '@wordpress/i18n'; */ import { InputControl } from '../input-control'; import { Text } from '../text'; -import { Spacer } from '../spacer'; -import { space } from '../utils/space'; import { COLORS } from '../utils/colors-values'; import type { StateReducer } from '../input-control/reducer/state'; import type { HexInputProps } from './types'; +import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper'; export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => { const handleChange = ( nextValue: string | undefined ) => { @@ -48,14 +47,11 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => { return ( - # - + + + # + + } value={ color.toHex().slice( 1 ).toUpperCase() } onChange={ handleChange } diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx index 535adc3f2af6e..5e08fa42daf80 100644 --- a/packages/components/src/color-picker/input-with-slider.tsx +++ b/packages/components/src/color-picker/input-with-slider.tsx @@ -3,11 +3,10 @@ */ import { HStack } from '../h-stack'; import { Text } from '../text'; -import { Spacer } from '../spacer'; -import { space } from '../utils/space'; import { RangeControl, NumberControlWrapper } from './styles'; import { COLORS } from '../utils/colors-values'; import type { InputWithSliderProps } from './types'; +import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper'; export const InputWithSlider = ( { min, @@ -39,14 +38,11 @@ export const InputWithSlider = ( { value={ value } onChange={ onNumberControlChange } prefix={ - - { abbreviation } - + + + { abbreviation } + + } spinControls="none" size="__unstable-large" diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts index 6b7fa590f9d0b..add1a29e1602d 100644 --- a/packages/components/src/custom-select-control-v2/styles.ts +++ b/packages/components/src/custom-select-control-v2/styles.ts @@ -21,9 +21,9 @@ const ANIMATION_PARAMS = { }; const INLINE_PADDING = { - compact: 8, // space(2) - small: 8, // space(2) - default: 16, // space(4) + compact: CONFIG.controlPaddingXSmall, + small: CONFIG.controlPaddingXSmall, + default: CONFIG.controlPaddingX, }; const getSelectSize = ( diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap index 658fe7febc02b..cb6fffb5aeff0 100644 --- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap +++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap @@ -158,7 +158,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` .emotion-21 { margin-bottom: 0; - padding-right: calc(4px * 2); + padding-right: 8px; position: absolute; pointer-events: none; right: 0; @@ -440,7 +440,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` .emotion-21 { margin-bottom: 0; - padding-right: calc(4px * 2); + padding-right: 8px; position: absolute; pointer-events: none; right: 0; @@ -732,7 +732,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] .emotion-21 { margin-bottom: 0; - padding-right: calc(4px * 2); + padding-right: 8px; position: absolute; pointer-events: none; right: 0; @@ -1036,7 +1036,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] .emotion-21 { margin-bottom: 0; - padding-right: calc(4px * 2); + padding-right: 8px; position: absolute; pointer-events: none; right: 0; diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx index 58396f3ab9859..f59c2a411e05a 100644 --- a/packages/components/src/input-control/input-base.tsx +++ b/packages/components/src/input-control/input-base.tsx @@ -96,8 +96,8 @@ function InputBase( } ); const prefixSuffixContextValue = useMemo( () => { return { - InputControlPrefixWrapper: { paddingLeft }, - InputControlSuffixWrapper: { paddingRight }, + InputControlPrefixWrapper: { paddingLeft: `${ paddingLeft }px` }, + InputControlSuffixWrapper: { paddingRight: `${ paddingRight }px` }, }; }, [ paddingLeft, paddingRight ] ); 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 ddfad620b9124..7a2040af9bdff 100644 --- a/packages/components/src/input-control/styles/input-control-styles.tsx +++ b/packages/components/src/input-control/styles/input-control-styles.tsx @@ -14,7 +14,6 @@ import { Flex, FlexItem } from '../../flex'; import { Text } from '../../text'; import { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils'; import type { LabelPosition, Size } from '../types'; -import { space } from '../../utils/space'; type ContainerProps = { disabled?: boolean; @@ -188,29 +187,29 @@ export const getSizeConfig = ( { height: 40, lineHeight: 1, minHeight: 40, - paddingLeft: space( 4 ), - paddingRight: space( 4 ), + paddingLeft: CONFIG.controlPaddingX, + paddingRight: CONFIG.controlPaddingX, }, small: { height: 24, lineHeight: 1, minHeight: 24, - paddingLeft: space( 2 ), - paddingRight: space( 2 ), + paddingLeft: CONFIG.controlPaddingXSmall, + paddingRight: CONFIG.controlPaddingXSmall, }, compact: { height: 32, lineHeight: 1, minHeight: 32, - paddingLeft: space( 2 ), - paddingRight: space( 2 ), + paddingLeft: CONFIG.controlPaddingXSmall, + paddingRight: CONFIG.controlPaddingXSmall, }, '__unstable-large': { height: 40, lineHeight: 1, minHeight: 40, - paddingLeft: space( 4 ), - paddingRight: space( 4 ), + paddingLeft: CONFIG.controlPaddingX, + paddingRight: CONFIG.controlPaddingX, }, }; diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts index 66c6158f9af1a..a2d73c8dcfc59 100644 --- a/packages/components/src/item-group/styles.ts +++ b/packages/components/src/item-group/styles.ts @@ -105,12 +105,12 @@ const paddingYLarge = `calc((${ CONFIG.controlHeightLarge } - ${ baseFontHeight export const itemSizes = { small: css` - padding: ${ paddingYSmall } ${ CONFIG.controlPaddingXSmall }; + padding: ${ paddingYSmall } ${ CONFIG.controlPaddingXSmall }px; `, medium: css` - padding: ${ paddingY } ${ CONFIG.controlPaddingX }; + padding: ${ paddingY } ${ CONFIG.controlPaddingX }px; `, large: css` - padding: ${ paddingYLarge } ${ CONFIG.controlPaddingXLarge }; + padding: ${ paddingYLarge } ${ CONFIG.controlPaddingXLarge }px; `, }; diff --git a/packages/components/src/item-group/test/__snapshots__/index.js.snap b/packages/components/src/item-group/test/__snapshots__/index.js.snap index 24ecd27f68c49..4104a4bf5140c 100644 --- a/packages/components/src/item-group/test/__snapshots__/index.js.snap +++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap @@ -12,7 +12,7 @@ Snapshot Diff: >
@@ -25,7 +25,7 @@ Snapshot Diff: >
@@ -45,7 +45,7 @@ Snapshot Diff: >
diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts index 780334c67e85e..5248e7af98828 100644 --- a/packages/components/src/select-control/styles/select-control-styles.ts +++ b/packages/components/src/select-control/styles/select-control-styles.ts @@ -7,7 +7,7 @@ import styled from '@emotion/styled'; /** * Internal dependencies */ -import { COLORS, rtl } from '../../utils'; +import { COLORS, rtl, CONFIG } from '../../utils'; import { space } from '../../utils/space'; import type { SelectControlProps } from '../types'; import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper'; @@ -108,10 +108,10 @@ const sizePaddings = ( { selectSize = 'default', }: SelectProps ) => { const padding = { - default: 16, - small: 8, - compact: 8, - '__unstable-large': 16, + default: CONFIG.controlPaddingX, + small: CONFIG.controlPaddingXSmall, + compact: CONFIG.controlPaddingXSmall, + '__unstable-large': CONFIG.controlPaddingX, }; if ( ! __next40pxDefaultSize ) { diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss index d6819f86b84bf..5ae2a90b82773 100644 --- a/packages/components/src/text-control/style.scss +++ b/packages/components/src/text-control/style.scss @@ -23,7 +23,8 @@ // Subtract 1px to account for the border, which isn't included on the element // on newer components like InputControl, SelectControl, etc. - padding-left: $grid-unit-20; - padding-right: $grid-unit-20; + // These values should be shared with the `controlPaddingX` in ./utils/config-values.js + padding-left: $grid-unit-15; + padding-right: $grid-unit-15; } } diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js index 0ad1b3294a926..f76c1291a8b31 100644 --- a/packages/components/src/utils/config-values.js +++ b/packages/components/src/utils/config-values.js @@ -5,14 +5,16 @@ import { space } from './space'; import { COLORS } from './colors-values'; const CONTROL_HEIGHT = '36px'; -const CONTROL_PADDING_X = '12px'; const CONTROL_PROPS = { controlSurfaceColor: COLORS.white, controlTextActiveColor: COLORS.theme.accent, - controlPaddingX: CONTROL_PADDING_X, - controlPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`, - controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`, + + // These values should be shared with TextControl. + controlPaddingX: 12, + controlPaddingXSmall: 8, + controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate + controlBackgroundColor: COLORS.white, controlBoxShadow: 'transparent', controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,