Upsize typography tools (#43331)

* Replace with ToggleGroupControl * Fixup label height * Upsize components in Typography tools * Add changelog * Update snapshot
WordPress · Aug 26, 2022 · 2bd0e9e · 2bd0e9e
1 parent 9d1d8e3
commit 2bd0e9e
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 52 deletions.
diff --git a/packages/block-editor/src/hooks/font-appearance.js b/packages/block-editor/src/hooks/font-appearance.js
@@ -58,6 +58,7 @@ export function FontAppearanceEdit( props ) {
 			hasFontStyles={ hasFontStyles }
 			hasFontWeights={ hasFontWeights }
 			value={ { fontStyle, fontWeight } }
+			size="__unstable-large"
 		/>
 	);
 }

diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
@@ -132,6 +132,8 @@ export function FontFamilyEdit( {
 			fontFamilies={ fontFamilies }
 			value={ value }
 			onChange={ onChange }
+			size="__unstable-large"
+			__nextHasNoMarginBottom
 		/>
 	);
 }

diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
@@ -147,6 +147,8 @@ export function FontSizeEdit( props ) {
 			onChange={ onChange }
 			value={ fontSizeValue }
 			withReset={ false }
+			size="__unstable-large"
+			__nextHasNoMarginBottom
 		/>
 	);
 }

diff --git a/packages/block-editor/src/hooks/letter-spacing.js b/packages/block-editor/src/hooks/letter-spacing.js
@@ -46,6 +46,7 @@ export function LetterSpacingEdit( props ) {
 			value={ style?.typography?.letterSpacing }
 			onChange={ onChange }
 			__unstableInputWidth={ '100%' }
+			size="__unstable-large"
 		/>
 	);
 }

diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js
@@ -42,6 +42,7 @@ export function LineHeightEdit( props ) {
 			__nextHasNoMarginBottom={ true }
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

diff --git a/packages/block-editor/src/hooks/text-decoration.js b/packages/block-editor/src/hooks/text-decoration.js
@@ -46,6 +46,7 @@ export function TextDecorationEdit( props ) {
 		<TextDecorationControl
 			value={ style?.typography?.textDecoration }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

diff --git a/packages/block-editor/src/hooks/text-transform.js b/packages/block-editor/src/hooks/text-transform.js
@@ -46,6 +46,7 @@ export function TextTransformEdit( props ) {
 		<TextTransformControl
 			value={ style?.typography?.textTransform }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

diff --git a/packages/block-editor/src/hooks/typography.scss b/packages/block-editor/src/hooks/typography.scss
@@ -1,10 +1,4 @@
 .typography-block-support-panel {
-	.components-font-size-picker__controls,
-	.block-editor-text-decoration-control__buttons,
-	.block-editor-text-transform-control__buttons {
-		margin-bottom: 0;
-	}
-
 	.single-column {
 		grid-column: span 1;
 	}

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -18,6 +18,7 @@
 -   `AlignmentMatrixControl`: keep the physical direction in RTL languages ([#43126](https://github.com/WordPress/gutenberg/pull/43126)).
 -   `AlignmentMatrixControl`: Fix the `width` prop so it works as intended ([#43482](https://github.com/WordPress/gutenberg/pull/43482)).
 -   `SelectControl`, `CustomSelectControl`: Truncate long option strings ([#43301](https://github.com/WordPress/gutenberg/pull/43301)).
+-   `ToggleGroupControl`: Fix minor inconsistency in label height ([#43331](https://github.com/WordPress/gutenberg/pull/43331)).
 -   `Popover`: fix and improve opening animation ([#43186](https://github.com/WordPress/gutenberg/pull/43186)).
 -   `Popover`: fix incorrect deps in hooks resulting in incorrect positioning after calling `update` ([#43267](https://github.com/WordPress/gutenberg/pull/43267/)).
 -   `FontSizePicker`: Fix excessive margin between label and input ([#43304](https://github.com/WordPress/gutenberg/pull/43304)).