From 3572e839511dfef3ded18c1519ff728861c46264 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Thu, 28 Nov 2024 15:44:58 +0530 Subject: [PATCH 1/8] Storybook: Add BorderRadiusControl story --- .../stories/index.story.js | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 packages/block-editor/src/components/border-radius-control/stories/index.story.js diff --git a/packages/block-editor/src/components/border-radius-control/stories/index.story.js b/packages/block-editor/src/components/border-radius-control/stories/index.story.js new file mode 100644 index 0000000000000..cd50ae668d490 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/stories/index.story.js @@ -0,0 +1,78 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import BorderRadiusControl from '../'; + +/** + * BorderRadiusControl component allows setting border radius values. + */ +const meta = { + title: 'BlockEditor/BorderRadiusControl', + component: BorderRadiusControl, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: 'Control to display border radius options.', + }, + }, + }, + argTypes: { + values: { control: 'object', description: 'Border radius values.' }, + onChange: { + action: 'onChange', + description: 'Callback to handle onChange.', + }, + }, +}; +export default meta; + +const Template = ( initialValues ) => { + const [ values, setValues ] = useState( initialValues.values ); + + return ( + { + setValues( newValues ); + initialValues.onChange( newValues ); + } } + /> + ); +}; + +export const Default = Template.bind( {} ); +Default.args = { + values: { + topLeft: '10px', + topRight: '10px', + bottomLeft: '10px', + bottomRight: '10px', + }, +}; + +/** + * This story demonstrates the control with no initial values. + */ +export const NoInitialValues = Template.bind( {} ); +NoInitialValues.args = { + values: {}, +}; + +/** + * This story demonstrates the control with mixed values. + */ +export const MixedUnits = Template.bind( {} ); +MixedUnits.args = { + values: { + topLeft: '10px', + topRight: '1em', + bottomLeft: '20%', + bottomRight: '5rem', + }, +}; From 8e88b6ce42a73d7dda5987088f613fca34d17f3e Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Mon, 2 Dec 2024 16:57:55 +0530 Subject: [PATCH 2/8] Update BorderRadiusControl story to CSF 3 --- .../stories/index.story.js | 62 ++++++------------- 1 file changed, 20 insertions(+), 42 deletions(-) diff --git a/packages/block-editor/src/components/border-radius-control/stories/index.story.js b/packages/block-editor/src/components/border-radius-control/stories/index.story.js index cd50ae668d490..35be169527d20 100644 --- a/packages/block-editor/src/components/border-radius-control/stories/index.story.js +++ b/packages/block-editor/src/components/border-radius-control/stories/index.story.js @@ -11,7 +11,7 @@ import BorderRadiusControl from '../'; /** * BorderRadiusControl component allows setting border radius values. */ -const meta = { +export default { title: 'BlockEditor/BorderRadiusControl', component: BorderRadiusControl, parameters: { @@ -30,49 +30,27 @@ const meta = { }, }, }; -export default meta; -const Template = ( initialValues ) => { - const [ values, setValues ] = useState( initialValues.values ); +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ values, setValues ] = useState( args.values ); - return ( - { - setValues( newValues ); - initialValues.onChange( newValues ); - } } - /> - ); -}; - -export const Default = Template.bind( {} ); -Default.args = { - values: { - topLeft: '10px', - topRight: '10px', - bottomLeft: '10px', - bottomRight: '10px', + return ( + { + setValues( ...changeArgs ); + onChange( ...changeArgs ); + } } + /> + ); }, -}; - -/** - * This story demonstrates the control with no initial values. - */ -export const NoInitialValues = Template.bind( {} ); -NoInitialValues.args = { - values: {}, -}; - -/** - * This story demonstrates the control with mixed values. - */ -export const MixedUnits = Template.bind( {} ); -MixedUnits.args = { - values: { - topLeft: '10px', - topRight: '1em', - bottomLeft: '20%', - bottomRight: '5rem', + args: { + values: { + topLeft: '10px', + topRight: '10px', + bottomLeft: '10px', + bottomRight: '10px', + }, }, }; From 2cba91aa2e79210616335cd67db5b563598575d2 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Thu, 12 Dec 2024 12:04:23 +0530 Subject: [PATCH 3/8] Update BorderRadiusControl story to enhance argTypes documentation --- .../stories/index.story.js | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/border-radius-control/stories/index.story.js b/packages/block-editor/src/components/border-radius-control/stories/index.story.js index 35be169527d20..85fa0c94e1df2 100644 --- a/packages/block-editor/src/components/border-radius-control/stories/index.story.js +++ b/packages/block-editor/src/components/border-radius-control/stories/index.story.js @@ -8,10 +8,7 @@ import { useState } from '@wordpress/element'; */ import BorderRadiusControl from '../'; -/** - * BorderRadiusControl component allows setting border radius values. - */ -export default { +const meta = { title: 'BlockEditor/BorderRadiusControl', component: BorderRadiusControl, parameters: { @@ -23,20 +20,33 @@ export default { }, }, argTypes: { - values: { control: 'object', description: 'Border radius values.' }, + values: { + control: 'object', + description: 'Border radius values.', + table: { + type: { summary: 'object' }, + }, + }, onChange: { action: 'onChange', + control: { type: null }, + table: { + type: { summary: 'function' }, + }, description: 'Callback to handle onChange.', }, }, }; +export default meta; + export const Default = { render: function Template( { onChange, ...args } ) { const [ values, setValues ] = useState( args.values ); return ( { setValues( ...changeArgs ); From f842b6ffff8740fb796605718c2fc2b1ab4a664f Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Sat, 14 Dec 2024 12:37:09 +0530 Subject: [PATCH 4/8] Add README for BorderRadiusControl component --- .../border-radius-control/README.md | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 packages/block-editor/src/components/border-radius-control/README.md diff --git a/packages/block-editor/src/components/border-radius-control/README.md b/packages/block-editor/src/components/border-radius-control/README.md new file mode 100644 index 0000000000000..14c068ca56b36 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/README.md @@ -0,0 +1,76 @@ +# BorderRadiusControl + +`BorderRadiusControl` is a React component that provides a user interface for managing border radius values. It allows users to control the border radius of each corner independently or link them together for uniform values. + +## Usage + +```jsx +/** + * WordPress dependencies + */ +import { BorderRadiusControl } from '@wordpress/block-editor'; +import { useState } from '@wordpress/element'; + +const MyBorderRadiusControl = () => { + const [values, setValues] = useState({ + topLeft: '10px', + topRight: '10px', + bottomLeft: '10px', + bottomRight: '10px', + }); + + return ( + + ); +}; + +// ... + +; +``` + +## Props + +The component accepts the following props: + +### values + +An object containing the border radius values for each corner. + +- Type: `Object` +- Required: No + +The values object has the following schema: + +| Property | Description | Type | +| ----------- | ------------------------------------ | ------ | +| topLeft | Border radius for top left corner | string | +| topRight | Border radius for top right corner | string | +| bottomLeft | Border radius for bottom left corner | string | +| bottomRight | Border radius for bottom right corner| string | + +Each value should be a valid CSS border radius value (e.g., '10px', '1em'). + +### onChange + +Callback function that is called when any border radius value changes. + +- Type: `Function` +- Required: Yes + +The function receives the updated values object as its argument. + +## Limitations + +The component has the following built-in constraints: + +- Minimum border radius value: 0 +- Maximum values by unit: + - px: 100 + - em: 20 + - rem: 20 + +Please refer to the component's stories for more examples of usage. From cc88c00e2444024be08d5f22eb01c17c2d69716d Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Mon, 16 Dec 2024 12:12:08 +0530 Subject: [PATCH 5/8] Update BorderRadiusControl README with correct prop requirements and defaults --- .../src/components/border-radius-control/README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/border-radius-control/README.md b/packages/block-editor/src/components/border-radius-control/README.md index 14c068ca56b36..efc0e6499eeb7 100644 --- a/packages/block-editor/src/components/border-radius-control/README.md +++ b/packages/block-editor/src/components/border-radius-control/README.md @@ -40,8 +40,9 @@ The component accepts the following props: An object containing the border radius values for each corner. -- Type: `Object` -- Required: No +- **Type:** `Object` +- **Required:** No +- **Default:** `{ topLeft: undefined, topRight: undefined, bottomLeft: undefined, bottomRight: undefined }` The values object has the following schema: @@ -58,8 +59,9 @@ Each value should be a valid CSS border radius value (e.g., '10px', '1em'). Callback function that is called when any border radius value changes. -- Type: `Function` -- Required: Yes +- **Type:** `Function` +- **Required:** Yes +- **Default:** `() => {}` The function receives the updated values object as its argument. From ff8c836e9002b14367f8f4f1249dd4934c82b243 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Mon, 30 Dec 2024 12:25:06 +0530 Subject: [PATCH 6/8] Update BorderRadiusControl README and Story --- .../border-radius-control/README.md | 24 +++---------------- .../stories/index.story.js | 8 ------- .../src/inspector-controls-tabs/README.md | 0 3 files changed, 3 insertions(+), 29 deletions(-) create mode 100644 packages/components/src/inspector-controls-tabs/README.md diff --git a/packages/block-editor/src/components/border-radius-control/README.md b/packages/block-editor/src/components/border-radius-control/README.md index efc0e6499eeb7..26a1e0eab07ea 100644 --- a/packages/block-editor/src/components/border-radius-control/README.md +++ b/packages/block-editor/src/components/border-radius-control/README.md @@ -8,7 +8,7 @@ /** * WordPress dependencies */ -import { BorderRadiusControl } from '@wordpress/block-editor'; +import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor'; import { useState } from '@wordpress/element'; const MyBorderRadiusControl = () => { @@ -26,23 +26,17 @@ const MyBorderRadiusControl = () => { /> ); }; - -// ... - -; ``` ## Props -The component accepts the following props: - ### values An object containing the border radius values for each corner. - **Type:** `Object` - **Required:** No -- **Default:** `{ topLeft: undefined, topRight: undefined, bottomLeft: undefined, bottomRight: undefined }` +- **Default:** `undefined` The values object has the following schema: @@ -63,16 +57,4 @@ Callback function that is called when any border radius value changes. - **Required:** Yes - **Default:** `() => {}` -The function receives the updated values object as its argument. - -## Limitations - -The component has the following built-in constraints: - -- Minimum border radius value: 0 -- Maximum values by unit: - - px: 100 - - em: 20 - - rem: 20 - -Please refer to the component's stories for more examples of usage. +The function receives the updated values object as its argument. \ No newline at end of file diff --git a/packages/block-editor/src/components/border-radius-control/stories/index.story.js b/packages/block-editor/src/components/border-radius-control/stories/index.story.js index 85fa0c94e1df2..28844a5e5cace 100644 --- a/packages/block-editor/src/components/border-radius-control/stories/index.story.js +++ b/packages/block-editor/src/components/border-radius-control/stories/index.story.js @@ -55,12 +55,4 @@ export const Default = { /> ); }, - args: { - values: { - topLeft: '10px', - topRight: '10px', - bottomLeft: '10px', - bottomRight: '10px', - }, - }, }; diff --git a/packages/components/src/inspector-controls-tabs/README.md b/packages/components/src/inspector-controls-tabs/README.md new file mode 100644 index 0000000000000..e69de29bb2d1d From 5c31ae24ebb5ee13fe7a1c9fbac40459bce042e5 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Mon, 30 Dec 2024 12:34:38 +0530 Subject: [PATCH 7/8] Remove Unnecessary file --- packages/components/src/inspector-controls-tabs/README.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 packages/components/src/inspector-controls-tabs/README.md diff --git a/packages/components/src/inspector-controls-tabs/README.md b/packages/components/src/inspector-controls-tabs/README.md deleted file mode 100644 index e69de29bb2d1d..0000000000000 From b4a769cd9c188ce511d2dc1c0f1b88e6b6ba693e Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Mon, 30 Dec 2024 15:09:38 +0530 Subject: [PATCH 8/8] Update README --- .../block-editor/src/components/border-radius-control/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/border-radius-control/README.md b/packages/block-editor/src/components/border-radius-control/README.md index 26a1e0eab07ea..7b048dfdb7e0d 100644 --- a/packages/block-editor/src/components/border-radius-control/README.md +++ b/packages/block-editor/src/components/border-radius-control/README.md @@ -55,6 +55,5 @@ Callback function that is called when any border radius value changes. - **Type:** `Function` - **Required:** Yes -- **Default:** `() => {}` The function receives the updated values object as its argument. \ No newline at end of file