From 300bafb006ccbc057e5dbfafb8fd55477cb81422 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 10 Feb 2025 10:50:17 +0530 Subject: [PATCH 1/4] 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 5366babc266c61..c00196e06079a6 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/4] 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 ff9007be28f1a2..2c369150e071b5 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/4] 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 a36773a8e16d66..8ca35fe539ea33 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) From beebb4860646090b9beb1446eeb881619beaf953 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Tue, 25 Aug 2026 11:03:57 +0530 Subject: [PATCH 4/4] Update changelog entry and update condition --- packages/components/CHANGELOG.md | 2 +- .../src/border-control/border-control-dropdown/hook.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c5f8221d7784bc..dd3002aa4a0515 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -33,6 +33,7 @@ - `InputControl`: Vertically center the value of date and time inputs in Safari ([#81361](https://github.com/WordPress/gutenberg/pull/81361)). - `ControlWithError`: Re-read the target's validation message when an `invalid` event is received, so a message that changed without a re-render in between (e.g. a programmatic value change followed by a synthetic `invalid` event) is not revealed stale or empty. While a `validating` custom validity is pending, the message is left untouched so the pending indicator keeps showing ([#81440](https://github.com/WordPress/gutenberg/pull/81440)). - `Button`: Apply the `has-text` class when the children that render the label are conditional, wrapped in an element, or preceded by other children, so that such buttons are no longer styled as icon-only buttons ([#81521](https://github.com/WordPress/gutenberg/pull/81521)). +- `BorderControl`: Use `1px` width when selecting the border color initially without explicitly setting width ([#69112](https://github.com/WordPress/gutenberg/pull/69112)). ### TypeScript @@ -881,7 +882,6 @@ - `FontSizePicker`: Remove Custom option from dropdown to prevent unexpected context changes during keyboard navigation ([#69038](https://github.com/WordPress/gutenberg/pull/69038)). - `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) 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 8c71c96da47778..e47e0d68d862f2 100644 --- a/packages/components/src/border-control/border-control-dropdown/hook.ts +++ b/packages/components/src/border-control/border-control-dropdown/hook.ts @@ -24,7 +24,7 @@ export function useBorderControlDropdown( const [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width ); // 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 hasZeroWidth = 0 === widthValue || undefined === widthValue; const onColorChange = ( color?: string ) => { const style =