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/5] 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 00000000000000..cd50ae668d4906 --- /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/5] 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 cd50ae668d4906..35be169527d208 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/5] 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 35be169527d208..85fa0c94e1df2a 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/5] 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 00000000000000..14c068ca56b36c --- /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/5] 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 14c068ca56b36c..efc0e6499eeb76 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.