From 300bafb006ccbc057e5dbfafb8fd55477cb81422 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 10 Feb 2025 10:50:17 +0530 Subject: [PATCH 1/3] Fix add the border width on initial border color change --- .../src/border-control/border-control-dropdown/hook.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts index 5366babc266c6..c00196e06079a 100644 --- a/packages/components/src/border-control/border-control-dropdown/hook.ts +++ b/packages/components/src/border-control/border-control-dropdown/hook.ts @@ -31,7 +31,9 @@ export function useBorderControlDropdown( } = useContextSystem( props, 'BorderControlDropdown' ); const [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width ); - const hasZeroWidth = widthValue === 0; + // If widthValue is 0, or on initial render we have width undefined. + // Need to set width to `1px`, if we change color first before adding border width. + const hasZeroWidth = widthValue === 0 || undefined === widthValue; const onColorChange = ( color?: string ) => { const style = From 315fff22cc1a06b252e604e86c1bb33f0cb463f9 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 10 Feb 2025 15:48:39 +0530 Subject: [PATCH 2/3] Updated the unit test to add `1px` width on setting the color/style to border control --- packages/components/src/border-control/test/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js index ff9007be28f1a..2c369150e071b 100644 --- a/packages/components/src/border-control/test/index.js +++ b/packages/components/src/border-control/test/index.js @@ -449,7 +449,7 @@ describe( 'BorderControl', () => { expect( props.onChange ).toHaveBeenCalledWith( { color: '#bd8600', style: undefined, - width: undefined, + width: '1px', } ); await user.type( getWidthInput(), '0' ); @@ -478,7 +478,7 @@ describe( 'BorderControl', () => { expect( props.onChange ).toHaveBeenCalledWith( { color: undefined, style: 'dashed', - width: undefined, + width: '1px', } ); await user.type( getWidthInput(), '0' ); From 79718ad6ff414643d30693406188ae2075ad6402 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 10 Feb 2025 15:58:45 +0530 Subject: [PATCH 3/3] Add the changelog entry for border control --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a36773a8e16d6..8ca35fe539ea3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased - `ComboboxControl`: Add an `isLoading` prop to show a loading spinner ([#68990](https://github.com/WordPress/gutenberg/pull/68990)) +- `BorderControl`: adjust `useBorderControlDropdown` hook to use `1px` width when selecting the border color initially without explicitly setting width ([#69112](https://github.com/WordPress/gutenberg/pull/69112)). ## 29.3.0 (2025-01-29)