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

Jump to bottom

FontSizePicker: Deprecate bottom margin #43870

Merged
merged 3 commits into from Sep 6, 2022
Merged

FontSizePicker: Deprecate bottom margin #43870

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2fbb2da
FontSizePicker: Deprecate bottom margin
mirka Sep 2, 2022
e056cbd
Add changelog
mirka Sep 5, 2022
4ce6cf6
Merge branch 'trunk' into margin-font-size-picker
mirka Sep 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/block-editor/CHANGELOG.md
View file
Open in desktop
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Breaking change

- `FontSizePicker`: Deprecate bottom margin style. Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4 ([#43870](https://github.com/WordPress/gutenberg/pull/43870)).

## 9.8.0 (2022-08-24)

## 9.7.0 (2022-08-10)
Expand Down
9 changes: 9 additions & 0 deletions packages/block-editor/src/components/font-sizes/README.MD
View file
Open in desktop
Expand Up @@ -31,6 +31,7 @@ const MyFontSizePicker = () => {

return (
<FontSizePicker
__nextHasNoMarginBottom
value={ fontSize }
fallbackFontSize={ fallbackFontSize }
onChange={ ( newFontSize ) => {
Expand Down Expand Up @@ -79,3 +80,11 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
- Type: `Boolean`
- Required: no
- Default: `false`

### __nextHasNoMarginBottom

Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)

- Type: `Boolean`
- Required: no
- Default: `false`
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Breaking Changes

- `FontSizePicker`: Deprecate bottom margin style. Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4 ([#43870](https://github.com/WordPress/gutenberg/pull/43870)).

### Bug Fix

- `Popover`: enable auto-updating every animation frame ([#43617](https://github.com/WordPress/gutenberg/pull/43617)).
Expand Down
9 changes: 9 additions & 0 deletions packages/components/src/font-size-picker/README.md
View file
Open in desktop
Expand Up @@ -29,6 +29,7 @@ const MyFontSizePicker = () => {

return (
<FontSizePicker
__nextHasNoMarginBottom
fontSizes={ fontSizes }
value={ fontSize }
fallbackFontSize={ fallbackFontSize }
Expand Down Expand Up @@ -105,3 +106,11 @@ If `true`, a reset button will be displayed alongside the input field when a cus
- Type: `Boolean`
- Required: no
- Default: `true`

### __nextHasNoMarginBottom

Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)

- Type: `Boolean`
- Required: no
- Default: `false`
9 changes: 9 additions & 0 deletions packages/components/src/font-size-picker/index.js
View file
Open in desktop
Expand Up @@ -6,6 +6,7 @@ import classNames from 'classnames';
/**
* WordPress dependencies
*/
import deprecated from '@wordpress/deprecated';
import { __, sprintf } from '@wordpress/i18n';
import { settings } from '@wordpress/icons';
import { useState, useMemo, forwardRef } from '@wordpress/element';
Expand Down Expand Up @@ -58,6 +59,14 @@ function FontSizePicker(
},
ref
) {
if ( ! __nextHasNoMarginBottom ) {
deprecated( 'Bottom margin styles for wp.components.FontSizePicker', {
since: '6.1',
version: '6.4',
hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
} );
}

const hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(
'string'
);
Expand Down
8 changes: 3 additions & 5 deletions packages/components/src/font-size-picker/stories/index.js
View file
Open in desktop
Expand Up @@ -12,17 +12,14 @@ export default {
title: 'Components/FontSizePicker',
component: FontSizePicker,
argTypes: {
__nextHasNoMarginBottom: { control: { type: 'boolean' } },
initialValue: { table: { disable: true } }, // hide prop because it's not actually part of FontSizePicker
fallbackFontSize: {
description:
'If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.',
},
size: {
control: {
type: 'radio',
options: [ 'default', '__unstable-large' ],
},
control: { type: 'radio' },
options: [ 'default', '__unstable-large' ],
Comment on lines +21 to +22
Copy link
Member Author

Choose a reason for hiding this comment

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

Quick fix for an API change that will be deprecated in Storybook v7.

},
withReset: {
description:
Expand Down Expand Up @@ -68,6 +65,7 @@ const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => {

export const Default = FontSizePickerWithState.bind( {} );
Default.args = {
__nextHasNoMarginBottom: true,
disableCustomFontSizes: false,
fontSizes: [
{
Expand Down
17 changes: 15 additions & 2 deletions packages/components/src/font-size-picker/test/index.js
View file
Open in desktop
Expand Up @@ -28,7 +28,11 @@ describe( 'FontSizePicker', () => {
);

render(
<FontSizePicker value={ fontSize } onChange={ setFontSize } />
<FontSizePicker
value={ fontSize }
onChange={ setFontSize }
__nextHasNoMarginBottom
/>
);

const unitSelect = getUnitSelect();
Expand All @@ -52,7 +56,11 @@ describe( 'FontSizePicker', () => {
);

render(
<FontSizePicker value={ fontSize } onChange={ setFontSize } />
<FontSizePicker
value={ fontSize }
onChange={ setFontSize }
__nextHasNoMarginBottom
/>
);

const unitSelect = getUnitSelect();
Expand Down Expand Up @@ -87,6 +95,7 @@ describe( 'FontSizePicker', () => {
fontSizes={ fontSizes }
value={ fontSize }
onChange={ setFontSize }
__nextHasNoMarginBottom
/>
);

Expand Down Expand Up @@ -123,6 +132,7 @@ describe( 'FontSizePicker', () => {
fontSizes={ fontSizes }
value={ fontSize }
onChange={ setFontSize }
__nextHasNoMarginBottom
/>
);

Expand Down Expand Up @@ -182,6 +192,7 @@ describe( 'FontSizePicker', () => {
<FontSizePicker
fontSizes={ fontSizes }
value={ fontSizes[ 0 ].size }
__nextHasNoMarginBottom
/>
);
// Trigger click to open the select menu and take into account
Expand All @@ -199,6 +210,7 @@ describe( 'FontSizePicker', () => {
<FontSizePicker
fontSizes={ fontSizes }
value={ fontSizes[ 0 ].size }
__nextHasNoMarginBottom
/>
);
const element = screen.getByLabelText( 'Large' );
Expand All @@ -218,6 +230,7 @@ describe( 'FontSizePicker', () => {
<FontSizePicker
fontSizes={ fontSizes }
value={ fontSizes[ 0 ].size }
__nextHasNoMarginBottom
/>
);
const largeElement = screen.getByLabelText( 'Large' );
Expand Down