From 75a94c410e5ecec06c25e99c15f362958c402ea8 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 20 Aug 2022 01:07:43 +0900 Subject: [PATCH] ToolsPanel: Tighten grid gaps (#43424) * ToolsPanel: Tighten grid gaps * Add changelog * Replace snapshot test with more explicit test --- packages/components/CHANGELOG.md | 1 + packages/components/src/tools-panel/styles.ts | 4 +- .../test/__snapshots__/index.js.snap | 210 ------------------ .../components/src/tools-panel/test/index.js | 5 +- .../global-styles/typography-panel.js | 2 +- 5 files changed, 7 insertions(+), 215 deletions(-) delete mode 100644 packages/components/src/tools-panel/test/__snapshots__/index.js.snap diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 69356c8f97d710..889f48a151d651 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -19,6 +19,7 @@ ### Enhancements - `CustomGradientPicker`, `GradientPicker`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43387](https://github.com/WordPress/gutenberg/pull/43387)). +- `ToolsPanel`: Tighten grid gaps ([#43424](https://github.com/WordPress/gutenberg/pull/43424)). - `ToggleGroupControl`: Improve TypeScript documentation ([#43265](https://github.com/WordPress/gutenberg/pull/43265)). - `ComboboxControl`: Normalize hyphen-like characters to an ASCII hyphen ([#42942](https://github.com/WordPress/gutenberg/pull/42942)). - `FormTokenField`: Refactor away from `_.difference()` ([#43224](https://github.com/WordPress/gutenberg/pull/43224/)). diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 696cebe7393681..7fe2fc0a0a1a2c 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -20,8 +20,8 @@ const toolsPanelGrid = { grid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` }; `, spacing: css` - column-gap: ${ space( 4 ) }; - row-gap: ${ space( 6 ) }; + column-gap: ${ space( 2 ) }; + row-gap: ${ space( 4 ) }; `, item: { fullWidth: css` diff --git a/packages/components/src/tools-panel/test/__snapshots__/index.js.snap b/packages/components/src/tools-panel/test/__snapshots__/index.js.snap deleted file mode 100644 index c5a037a0f64194..00000000000000 --- a/packages/components/src/tools-panel/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,210 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ToolsPanel first and last panel items should apply first/last classes to appropriate items 1`] = ` -.emotion-0 { - display: grid; - gap: calc( 4px * 3 ); - grid-template-columns: repeat( 2, 1fr ); - grid-template-columns: repeat( 2, minmax(0, 1fr) ); - -webkit-column-gap: calc(4px * 4); - column-gap: calc(4px * 4); - row-gap: calc(4px * 6); - border-top: 1px solid #ddd; - margin-top: -1px; - padding: calc(4px * 4); -} - -.emotion-0>div:not( :first-of-type ) { - display: grid; - grid-template-columns: repeat( 2, minmax(0, 1fr) ); - -webkit-column-gap: calc(4px * 4); - column-gap: calc(4px * 4); - row-gap: calc(4px * 6); - grid-column: 1/-1; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - width: 100%; - grid-column: 1/-1; - gap: calc(4px * 2); -} - -.emotion-2>*+*:not( marquee ) { - margin-left: calc(4px * 2); -} - -.emotion-2>* { - min-width: 0; -} - -.emotion-2 .components-dropdown-menu { - margin: calc(4px * -1) 0; - line-height: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2 .components-dropdown-menu__toggle { - padding: 0; - min-width: calc(4px * 6); -} - -.emotion-4 { - color: #1e1e1e; - line-height: 1.2; - margin: 0; - color: #1e1e1e; - font-size: calc(1.95 * 13px); - font-weight: 600; - display: block; - font-size: inherit; - font-weight: 500; - line-height: normal; -} - -.emotion-4.emotion-4 { - margin: 0; -} - -.emotion-6 { - grid-column: 1/-1; - display: none; -} - -.emotion-6>div, -.emotion-6>fieldset { - padding-bottom: 0; - margin-bottom: 0; - max-width: 100%; -} - -.emotion-6.emotion-6 .ej5x27r4 { - margin-bottom: 0; -} - -.emotion-6.emotion-6 .ej5x27r4 .ej5x27r3:last-child { - margin-bottom: 0; -} - -.emotion-6 .ej5x27r1 { - margin-bottom: 0; -} - -.emotion-6.emotion-6 .em5sgkm3 label { - line-height: 1.4em; -} - -.emotion-8 { - grid-column: 1/-1; -} - -.emotion-8>div, -.emotion-8>fieldset { - padding-bottom: 0; - margin-bottom: 0; - max-width: 100%; -} - -.emotion-8.emotion-8 .ej5x27r4 { - margin-bottom: 0; -} - -.emotion-8.emotion-8 .ej5x27r4 .ej5x27r3:last-child { - margin-bottom: 0; -} - -.emotion-8 .ej5x27r1 { - margin-bottom: 0; -} - -.emotion-8.emotion-8 .em5sgkm3 label { - line-height: 1.4em; -} - -
-
-
-

- Panel header -

-
- -
-
-
-
-
- Item 2 -
-
-
-
- Item 3 -
-
-
-
-
-`; diff --git a/packages/components/src/tools-panel/test/index.js b/packages/components/src/tools-panel/test/index.js index ffe696e388aa5d..bd788abd2604cd 100644 --- a/packages/components/src/tools-panel/test/index.js +++ b/packages/components/src/tools-panel/test/index.js @@ -1069,7 +1069,7 @@ describe( 'ToolsPanel', () => { describe( 'first and last panel items', () => { it( 'should apply first/last classes to appropriate items', () => { - const { container } = render( + render( @@ -1113,7 +1113,8 @@ describe( 'ToolsPanel', () => { expect( item3 ).toBeInTheDocument(); expect( screen.queryByText( 'Item 4' ) ).not.toBeInTheDocument(); - expect( container ).toMatchSnapshot(); + expect( item2.parentElement ).toHaveClass( 'first' ); + expect( item3.parentElement ).toHaveClass( 'last' ); } ); } ); } ); diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js index 1ad4f99b106cff..c6fe46b3160d30 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -144,7 +144,7 @@ export default function TypographyPanel( { name, element } ) { > Aa
- + { element === 'heading' && (