From 74b48556aa11bcb9bcc760d44bc0a0a8ee936853 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Tue, 27 Sep 2022 14:42:03 +1000 Subject: [PATCH 1/5] Replace SCSS with Emotion + components --- .../components/src/font-size-picker/index.tsx | 141 ++++++++++-------- .../src/font-size-picker/style.scss | 78 ---------- .../components/src/font-size-picker/styles.ts | 44 ++++++ packages/components/src/style.scss | 1 - 4 files changed, 119 insertions(+), 145 deletions(-) delete mode 100644 packages/components/src/font-size-picker/style.scss create mode 100644 packages/components/src/font-size-picker/styles.ts diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 190ca6e1517e0..6172a1a695e3d 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import classNames from 'classnames'; import type { ReactNode, ForwardedRef } from 'react'; /** @@ -15,7 +14,6 @@ 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'; @@ -33,26 +31,32 @@ import { isSimpleCssValue, CUSTOM_FONT_SIZE, } from './utils'; -import { VStack } from '../v-stack'; import { HStack } from '../h-stack'; import type { FontSizePickerProps, FontSizeSelectOption, FontSizeToggleGroupOption, } from './types'; +import { + Container, + HeaderHint, + HeaderLabel, + Controls, + ResetButton, +} from './styles'; +import { Spacer } from '../spacer'; -// This conditional is needed to maintain the spacing before the slider in the `withSlider` case. -const MaybeVStack = ( { +const MaybeMarginBottom = ( { __nextHasNoMarginBottom, children, }: { __nextHasNoMarginBottom: boolean; children: ReactNode; } ) => - ! __nextHasNoMarginBottom ? ( + __nextHasNoMarginBottom ? ( <>{ children } ) : ( - + { children } ); const UnforwardedFontSizePicker = ( @@ -163,49 +167,51 @@ const UnforwardedFontSizePicker = ( __( 'Currently selected font size: %s' ), selectedOption.name ); - const baseClassName = 'components-font-size-picker'; return ( -
+ { __( 'Font size' ) } - - - { __( 'Size' ) } - { headerHint && ( - - { headerHint } - + + + + { __( 'Size' ) } + { headerHint && ( + + { headerHint } + + ) } + + { ! disableCustomFontSizes && ( + + ) } ) } - - { withSlider && ( - { - onChange?.( hasUnits ? newValue + 'px' : newValue ); - } } - min={ 12 } - max={ 100 } - /> - ) } - -
+ { withSlider && ( + { + onChange?.( + hasUnits ? newValue + 'px' : newValue + ); + } } + min={ 12 } + max={ 100 } + /> + ) } + + + ); }; diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss deleted file mode 100644 index e19342aabf319..0000000000000 --- a/packages/components/src/font-size-picker/style.scss +++ /dev/null @@ -1,78 +0,0 @@ -.components-font-size-picker__header { - &__hint { - margin-left: $grid-unit-05; - color: $gray-700; - } - - .components-base-control__label { - margin-bottom: 0; - } - - // This button is inheriting padding and min-width. - // @todo: we should refactor it to not need to unset this. - .components-button.is-small.has-icon:not(.has-text) { - min-width: $icon-size; - padding: 0; - } -} - -.components-font-size-picker__controls { - max-width: $sidebar-width - ( 2 * $grid-unit-20 ); - align-items: center; - margin-top: $grid-unit-10; - - &:not(.is-next-has-no-margin-bottom) { - margin-bottom: $grid-unit-30; - } - - .components-unit-control-wrapper { - .components-input-control__label { - font-weight: 300; - padding-bottom: 0 !important; - margin-bottom: $grid-unit-10 !important; - } - } - - // Apply the same height as the isSmall Reset button. - .components-font-size-picker__number { - @include input-control; - display: inline-block; - font-weight: 500; - height: 30px; - margin-bottom: 0; - margin-left: 0; - margin-right: $grid-unit-10; - margin-top: $grid-unit-10; - width: 54px; - - // Show the reset button as disabled until a value is entered. - &[value=""] + .components-button { - cursor: default; - opacity: 0.3; - pointer-events: none; - } - - &-container { - display: flex; - flex-direction: column; - } - } - - .components-color-palette__clear { - height: 30px; - } -} - -.components-font-size-picker__custom-input { - .components-range-control__slider + .dashicon { - width: 30px; - height: 30px; - } -} - -.components-font-size-picker { - border: 0; - padding: 0; - margin: 0; -} - diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts new file mode 100644 index 0000000000000..5354d78844167 --- /dev/null +++ b/packages/components/src/font-size-picker/styles.ts @@ -0,0 +1,44 @@ +/** + * External dependencies + */ +import styled from '@emotion/styled'; + +/** + * Internal dependencies + */ +import BaseControl from '../base-control'; +import Button from '../button'; +import { space } from '../ui/utils/space'; +import { COLORS } from '../utils'; +import { VStack } from '../v-stack'; +import type { FontSizePickerProps } from './types'; + +export const Container = styled.fieldset` + border: 0; + margin: 0; + padding: 0; +`; + +export const HeaderLabel = styled( BaseControl.VisualLabel )` + margin-bottom: 0; +`; + +export const HeaderHint = styled.span` + color: ${ COLORS.gray[ 700 ] }; + margin-left: ${ space( 1 ) }; +`; + +// 280px is the sidebar width. +// TODO: Remove this, @wordpress/components shouldn't care what a "sidebar" is. +export const Controls = styled( VStack )` + max-width: calc( 280px - ${ space( 4 ) } * 2 ); +`; + +export const ResetButton = styled( Button )< { + size: FontSizePickerProps[ 'size' ]; +} >` + &&& { + height: ${ ( props ) => + props.size === '__unstable-large' ? '40px' : '30px' }; + } +`; diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index 2052a40b66f8f..3c42941e0d715 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -17,7 +17,6 @@ @import "./dropdown/style.scss"; @import "./dropdown-menu/style.scss"; @import "./duotone-picker/style.scss"; -@import "./font-size-picker/style.scss"; @import "./form-toggle/style.scss"; @import "./form-token-field/style.scss"; @import "./guide/style.scss"; From b2ab4287d1729a4b682d703941ca34128c27fbb8 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 28 Sep 2022 16:02:39 +1000 Subject: [PATCH 2/5] Nuke .components-color-palette__clear --- packages/components/src/font-size-picker/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 6172a1a695e3d..86a21f2a0e4de 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -305,7 +305,6 @@ const UnforwardedFontSizePicker = ( { withReset && ( { onChange?.( undefined ); From 0f7a7bb419ccb9fa0729293c0bd4a4195aaea4a7 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 28 Sep 2022 16:30:01 +1000 Subject: [PATCH 3/5] Go back to only using VStack when __nextHasNoMarginBottom is set --- .../components/src/font-size-picker/index.tsx | 56 +++++++++---------- .../components/src/font-size-picker/styles.ts | 8 ++- 2 files changed, 33 insertions(+), 31 deletions(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 86a21f2a0e4de..565aa8dd64690 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -31,6 +31,7 @@ import { isSimpleCssValue, CUSTOM_FONT_SIZE, } from './utils'; +import { VStack } from '../v-stack'; import { HStack } from '../h-stack'; import type { FontSizePickerProps, @@ -46,17 +47,18 @@ import { } from './styles'; import { Spacer } from '../spacer'; -const MaybeMarginBottom = ( { +// This conditional is needed to maintain the spacing before the slider in the `withSlider` case. +const MaybeVStack = ( { __nextHasNoMarginBottom, children, }: { __nextHasNoMarginBottom: boolean; children: ReactNode; } ) => - __nextHasNoMarginBottom ? ( + ! __nextHasNoMarginBottom ? ( <>{ children } ) : ( - { children } + ); const UnforwardedFontSizePicker = ( @@ -199,12 +201,10 @@ const UnforwardedFontSizePicker = ( ) } - + { !! fontSizes.length && shouldUseSelectControl && @@ -243,7 +243,7 @@ const UnforwardedFontSizePicker = ( ) } { ! shouldUseSelectControl && ! showCustomValueControl && ( ) } - { withSlider && ( - { - onChange?.( - hasUnits ? newValue + 'px' : newValue - ); - } } - min={ 12 } - max={ 100 } - /> - ) } - + { withSlider && ( + { + onChange?.( hasUnits ? newValue + 'px' : newValue ); + } } + min={ 12 } + max={ 100 } + /> + ) } + ); }; diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts index 5354d78844167..f3e800d2f0315 100644 --- a/packages/components/src/font-size-picker/styles.ts +++ b/packages/components/src/font-size-picker/styles.ts @@ -10,7 +10,6 @@ import BaseControl from '../base-control'; import Button from '../button'; import { space } from '../ui/utils/space'; import { COLORS } from '../utils'; -import { VStack } from '../v-stack'; import type { FontSizePickerProps } from './types'; export const Container = styled.fieldset` @@ -30,8 +29,13 @@ export const HeaderHint = styled.span` // 280px is the sidebar width. // TODO: Remove this, @wordpress/components shouldn't care what a "sidebar" is. -export const Controls = styled( VStack )` +export const Controls = styled.div< { + __nextHasNoMarginBottom: boolean; +} >` max-width: calc( 280px - ${ space( 4 ) } * 2 ); + + ${ ( props ) => + ! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` } `; export const ResetButton = styled( Button )< { From 331f1f7e184059522aa318413de25326a968c353 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 28 Sep 2022 16:46:59 +1000 Subject: [PATCH 4/5] Update CHANGELOG.md --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index eb7405e7ec984..ddc898bd0237a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,6 +13,7 @@ - `Popover`: refactor unit tests to TypeScript and modern RTL assertions ([#44373](https://github.com/WordPress/gutenberg/pull/44373)). - `Sandbox`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44378](https://github.com/WordPress/gutenberg/pull/44378)) - `FontSizePicker`: Convert to TypeScript ([#44449](https://github.com/WordPress/gutenberg/pull/44449)). +- `FontSizePicker`: Replace SCSS with Emotion + components ([#44483](https://github.com/WordPress/gutenberg/pull/44483)). ## 21.1.0 (2022-09-21) From ba920266c8079dc10b0930d179de013e2d9eaabd Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 29 Sep 2022 09:34:16 +1000 Subject: [PATCH 5/5] Make Reset button always 30px high --- packages/components/src/font-size-picker/index.tsx | 1 - packages/components/src/font-size-picker/styles.ts | 8 ++------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 565aa8dd64690..317fadd518057 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -311,7 +311,6 @@ const UnforwardedFontSizePicker = ( } } isSmall variant="secondary" - size={ size } > { __( 'Reset' ) } diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts index f3e800d2f0315..fe04172a8fc3a 100644 --- a/packages/components/src/font-size-picker/styles.ts +++ b/packages/components/src/font-size-picker/styles.ts @@ -10,7 +10,6 @@ import BaseControl from '../base-control'; import Button from '../button'; import { space } from '../ui/utils/space'; import { COLORS } from '../utils'; -import type { FontSizePickerProps } from './types'; export const Container = styled.fieldset` border: 0; @@ -38,11 +37,8 @@ export const Controls = styled.div< { ! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` } `; -export const ResetButton = styled( Button )< { - size: FontSizePickerProps[ 'size' ]; -} >` +export const ResetButton = styled( Button )` &&& { - height: ${ ( props ) => - props.size === '__unstable-large' ? '40px' : '30px' }; + height: 30px; } `;