From c5201a8739c140a7cdebc15cc4e6be6b61f7b36d Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 9 Sep 2022 04:28:09 +0900 Subject: [PATCH 1/3] FocalPointPicker: Add flag to remove bottom margin --- .../src/focal-point-picker/controls.tsx | 6 +++++- .../components/src/focal-point-picker/index.tsx | 3 +++ .../styles/focal-point-picker-style.ts | 17 ++++++++++++++++- .../components/src/focal-point-picker/types.ts | 7 +++++++ 4 files changed, 31 insertions(+), 2 deletions(-) diff --git a/packages/components/src/focal-point-picker/controls.tsx b/packages/components/src/focal-point-picker/controls.tsx index 80cd6ad6a4151..0f1920c368c4f 100644 --- a/packages/components/src/focal-point-picker/controls.tsx +++ b/packages/components/src/focal-point-picker/controls.tsx @@ -22,6 +22,7 @@ const TEXTCONTROL_MAX = 100; const noop = () => {}; export default function FocalPointPickerControls( { + __nextHasNoMarginBottom, onChange = noop, point = { x: 0.5, @@ -45,7 +46,10 @@ export default function FocalPointPickerControls( { }; return ( - + { onChange?.( getFinalValue( value ) ); diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index 54304213a82d8..bbad82513e7f1 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -1,6 +1,7 @@ /** * External dependencies */ +import { css } from '@emotion/react'; import styled from '@emotion/styled'; /** @@ -9,6 +10,7 @@ import styled from '@emotion/styled'; import { Flex } from '../../flex'; import UnitControl from '../../unit-control'; import { COLORS } from '../../utils'; +import type { FocalPointPickerControlsProps } from '../types'; import { INITIAL_BOUNDS } from '../utils'; export const MediaWrapper = styled.div` @@ -54,9 +56,22 @@ export const StyledUnitControl = styled( UnitControl )` width: 100px; `; +const deprecatedBottomMargin = ( { + __nextHasNoMarginBottom, +}: Pick< FocalPointPickerControlsProps, '__nextHasNoMarginBottom' > ) => { + return ! __nextHasNoMarginBottom + ? css` + margin-bottom: 8px; // margin from BaseControl + padding-bottom: 1em; // padding from ControlWrapper + ` + : undefined; +}; + export const ControlWrapper = styled( Flex )` max-width: 320px; - padding: 1em 0; + padding-top: 1em; + + ${ deprecatedBottomMargin } `; export const GridView = styled.div` diff --git a/packages/components/src/focal-point-picker/types.ts b/packages/components/src/focal-point-picker/types.ts index 89e632f9e0925..8dc13626172c8 100644 --- a/packages/components/src/focal-point-picker/types.ts +++ b/packages/components/src/focal-point-picker/types.ts @@ -20,6 +20,12 @@ export type FocalPointPickerProps = Pick< BaseControlProps, 'help' | 'hideLabelFromVision' | 'label' > & { + /** + * Start opting into the new margin-free styles that will become the default in a future version. + * + * @default false + */ + __nextHasNoMarginBottom?: boolean; /** * Autoplays HTML5 video. This only applies to video sources (`url`). * @@ -55,6 +61,7 @@ export type FocalPointPickerProps = Pick< }; export type FocalPointPickerControlsProps = { + __nextHasNoMarginBottom?: boolean; onChange?: ( value: FocalPoint ) => void; point?: FocalPoint; }; From e24686577be44345e92914a417e62d99e1f0d8cf Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 9 Sep 2022 04:48:04 +0900 Subject: [PATCH 2/3] Maintain current bottom margin if there is help text --- .../src/focal-point-picker/controls.tsx | 2 ++ .../components/src/focal-point-picker/index.tsx | 3 ++- .../styles/focal-point-picker-style.ts | 16 +++++++++++++--- .../components/src/focal-point-picker/types.ts | 5 +++++ 4 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/components/src/focal-point-picker/controls.tsx b/packages/components/src/focal-point-picker/controls.tsx index 0f1920c368c4f..3e6d33011da73 100644 --- a/packages/components/src/focal-point-picker/controls.tsx +++ b/packages/components/src/focal-point-picker/controls.tsx @@ -23,6 +23,7 @@ const noop = () => {}; export default function FocalPointPickerControls( { __nextHasNoMarginBottom, + hasHelpText, onChange = noop, point = { x: 0.5, @@ -49,6 +50,7 @@ export default function FocalPointPickerControls( { { onChange?.( getFinalValue( value ) ); diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index bbad82513e7f1..9bae330f258f2 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -58,11 +58,20 @@ export const StyledUnitControl = styled( UnitControl )` const deprecatedBottomMargin = ( { __nextHasNoMarginBottom, -}: Pick< FocalPointPickerControlsProps, '__nextHasNoMarginBottom' > ) => { +}: FocalPointPickerControlsProps ) => { return ! __nextHasNoMarginBottom ? css` - margin-bottom: 8px; // margin from BaseControl - padding-bottom: 1em; // padding from ControlWrapper + padding-bottom: 1em; + ` + : undefined; +}; + +const extraHelpTextMargin = ( { + hasHelpText = false, +}: FocalPointPickerControlsProps ) => { + return hasHelpText + ? css` + padding-bottom: 1em; ` : undefined; }; @@ -71,6 +80,7 @@ export const ControlWrapper = styled( Flex )` max-width: 320px; padding-top: 1em; + ${ extraHelpTextMargin } ${ deprecatedBottomMargin } `; diff --git a/packages/components/src/focal-point-picker/types.ts b/packages/components/src/focal-point-picker/types.ts index 8dc13626172c8..81b683b7ce16c 100644 --- a/packages/components/src/focal-point-picker/types.ts +++ b/packages/components/src/focal-point-picker/types.ts @@ -62,6 +62,11 @@ export type FocalPointPickerProps = Pick< export type FocalPointPickerControlsProps = { __nextHasNoMarginBottom?: boolean; + /** + * A bit of extra bottom margin will be added if a `help` text + * needs to be rendered under it. + */ + hasHelpText: boolean; onChange?: ( value: FocalPoint ) => void; point?: FocalPoint; }; From aa4ba0ac5b3c1c54ca389cc25e22e93597a1601d Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 9 Sep 2022 04:53:53 +0900 Subject: [PATCH 3/3] Add changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4aa5eb6c3c710..481f3aafb5be8 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -19,6 +19,7 @@ - `ToggleControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43717](https://github.com/WordPress/gutenberg/pull/43717)). - `CheckboxControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43720](https://github.com/WordPress/gutenberg/pull/43720)). +- `FocalPointControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43996](https://github.com/WordPress/gutenberg/pull/43996)). - `TextControl`, `TextareaControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43782](https://github.com/WordPress/gutenberg/pull/43782)). - `RangeControl`: Tweak dark gray marking color to be consistent with the grays in `@wordpress/base-styles` ([#43773](https://github.com/WordPress/gutenberg/pull/43773)). - `UnitControl`: Tweak unit dropdown color to be consistent with the grays in `@wordpress/base-styles` ([#43773](https://github.com/WordPress/gutenberg/pull/43773)).