From d9033b7ad18fb73160d8018fb8f6da9b81419841 Mon Sep 17 00:00:00 2001 From: Sarah Norris <1645628+mikachan@users.noreply.github.com> Date: Fri, 1 Dec 2023 08:14:23 -0500 Subject: [PATCH] Font Library: Improve usability of font variant selection (#56158) * Add e2e test for variant panel * Update CheckboxControl to allow for custom label * Wrap custom label around library font variant * Use kebabCase for checkbox id * Apply checkbox changes to collection font variant * Use font slug in checkbox id * Update components changelog * Update changelog * Update packages/components/src/checkbox-control/index.tsx Co-authored-by: Jeff Ong * Fix changelog * Update snapshots --------- Co-authored-by: Jeff Ong --- packages/components/CHANGELOG.md | 1 + .../components/src/checkbox-control/README.md | 3 ++- .../components/src/checkbox-control/index.tsx | 14 +++++++------ .../test/__snapshots__/index.tsx.snap | 11 +++------- .../src/checkbox-control/test/index.tsx | 7 +++++++ .../components/src/checkbox-control/types.ts | 5 +++-- .../collection-font-variant.js | 18 ++++++++++------ .../library-font-variant.js | 18 ++++++++++------ .../specs/site-editor/font-library.spec.js | 21 +++++++++++++++++++ 9 files changed, 69 insertions(+), 29 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index ed4c83cdf1431..3b22c45f91993 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,7 @@ - `FormToggle`: fix sass deprecation warning ([#56672](https://github.com/WordPress/gutenberg/pull/56672)). - `QueryControls`: Add opt-in prop for 40px default size ([#56576](https://github.com/WordPress/gutenberg/pull/56576)). +- `CheckboxControl`: Add option to not render label ([#56158](https://github.com/WordPress/gutenberg/pull/56158)). ### Bug Fix diff --git a/packages/components/src/checkbox-control/README.md b/packages/components/src/checkbox-control/README.md index 12f792ea8577b..66f3cae2be379 100644 --- a/packages/components/src/checkbox-control/README.md +++ b/packages/components/src/checkbox-control/README.md @@ -77,11 +77,12 @@ const MyCheckboxControl = () => { The set of props accepted by the component will be specified below. Props not included in this set will be applied to the input element. -#### `label`: `string` +#### `label`: `string|false` A label for the input field, that appears at the side of the checkbox. The prop will be rendered as content a label element. If no prop is passed an empty label is rendered. +If the prop is set to false no label is rendered. - Required: No diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx index cd70bb8485ac7..54a9952d19949 100644 --- a/packages/components/src/checkbox-control/index.tsx +++ b/packages/components/src/checkbox-control/index.tsx @@ -125,12 +125,14 @@ export function CheckboxControl( /> ) : null } - + { label && ( + + ) } ); } diff --git a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap index 408f18d8c7e77..f3bdccc1ccff6 100644 --- a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap @@ -5,14 +5,14 @@ Snapshot Diff: - First value + Second value -@@ -8,17 +8,31 @@ +@@ -8,13 +8,27 @@ @@ -31,11 +31,6 @@ Snapshot Diff: /> + - ); } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js index 32e18c023cecb..010f3efdbeb91 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js @@ -3,16 +3,14 @@ */ import { useContext } from '@wordpress/element'; import { CheckboxControl, Flex } from '@wordpress/components'; -/** - * Internal dependencies - */ -import { getFontFaceVariantName } from './utils'; /** * Internal dependencies */ +import { getFontFaceVariantName } from './utils'; import { FontLibraryContext } from './context'; import FontFaceDemo from './font-demo'; +import { kebabCase } from '../../../../../block-editor/src/utils/object'; function LibraryFontVariant( { face, font } ) { const { isFontActivated, toggleActivateFont } = @@ -36,18 +34,26 @@ function LibraryFontVariant( { face, font } ) { }; const displayName = font.name + ' ' + getFontFaceVariantName( face ); + const checkboxId = kebabCase( + `${ font.slug }-${ getFontFaceVariantName( face ) }` + ); return ( -
+
+ ); } diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js index 6aca027a30e78..531398fb49590 100644 --- a/test/e2e/specs/site-editor/font-library.spec.js +++ b/test/e2e/specs/site-editor/font-library.spec.js @@ -70,5 +70,26 @@ test.describe( 'Font Library', () => { page.getByRole( 'heading', { name: 'Fonts' } ) ).toBeVisible(); } ); + + test( 'should show font variant panel when clicking on a font family', async ( { + page, + } ) => { + await page.getByRole( 'button', { name: /styles/i } ).click(); + await page + .getByRole( 'button', { name: /typography styles/i } ) + .click(); + await page + .getByRole( 'button', { + name: /manage fonts/i, + } ) + .click(); + await page.getByRole( 'button', { name: /system font/i } ).click(); + await expect( + page.getByRole( 'heading', { name: /system font/i } ) + ).toBeVisible(); + await expect( + page.getByRole( 'checkbox', { name: /system font normal/i } ) + ).toBeVisible(); + } ); } ); } );