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

FocalPointControl: Add flag to remove bottom margin #43996

Merged
merged 3 commits into from
Sep 12, 2022
Merged

FocalPointControl: Add flag to remove bottom margin #43996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5201a8
FocalPointPicker: Add flag to remove bottom margin
mirka Sep 8, 2022
e246865
Maintain current bottom margin if there is help text
mirka Sep 8, 2022
aa4ba0a
Add changelog
mirka Sep 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
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)).
Expand Down
8 changes: 7 additions & 1 deletion packages/components/src/focal-point-picker/controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ const TEXTCONTROL_MAX = 100;
const noop = () => {};

export default function FocalPointPickerControls( {
__nextHasNoMarginBottom,
hasHelpText,
onChange = noop,
point = {
x: 0.5,
Expand All @@ -45,7 +47,11 @@ export default function FocalPointPickerControls( {
};

return (
<ControlWrapper className="focal-point-picker__controls">
<ControlWrapper
className="focal-point-picker__controls"
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
hasHelpText={ hasHelpText }
>
<FocalPointUnitControl
label={ __( 'Left' ) }
value={ [ valueX, '%' ].join( '' ) }
Expand Down
4 changes: 4 additions & 0 deletions packages/components/src/focal-point-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
* ```
*/
export function FocalPointPicker( {
__nextHasNoMarginBottom,
autoPlay = true,
className,
help,
Expand Down Expand Up @@ -239,6 +240,7 @@ export function FocalPointPicker( {
return (
<BaseControl
{ ...restProps }
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
label={ label }
id={ id }
help={ help }
Expand Down Expand Up @@ -270,6 +272,8 @@ export function FocalPointPicker( {
</MediaContainer>
</MediaWrapper>
<Controls
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
hasHelpText={ !! help }
point={ { x, y } }
onChange={ ( value ) => {
onChange?.( getFinalValue( value ) );
Expand Down
27 changes: 26 additions & 1 deletion packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/**
* External dependencies
*/
import { css } from '@emotion/react';
import styled from '@emotion/styled';

/**
Expand All @@ -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`
Expand Down Expand Up @@ -54,9 +56,32 @@ export const StyledUnitControl = styled( UnitControl )`
width: 100px;
`;

const deprecatedBottomMargin = ( {
__nextHasNoMarginBottom,
}: FocalPointPickerControlsProps ) => {
return ! __nextHasNoMarginBottom
? css`
padding-bottom: 1em;
`
: undefined;
};

const extraHelpTextMargin = ( {
hasHelpText = false,
}: FocalPointPickerControlsProps ) => {
return hasHelpText
? css`
padding-bottom: 1em;
`
: undefined;
};
Comment on lines +69 to +77
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I decided it was good to keep this extra bottom margin when there is a help text provided, because the whitespace is more balanced.


export const ControlWrapper = styled( Flex )`
max-width: 320px;
padding: 1em 0;
padding-top: 1em;

${ extraHelpTextMargin }
${ deprecatedBottomMargin }
`;

export const GridView = styled.div`
Expand Down
12 changes: 12 additions & 0 deletions packages/components/src/focal-point-picker/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`).
*
Expand Down Expand Up @@ -55,6 +61,12 @@ 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;
};
Expand Down