From 798406bb954d9f028b5005b8116ac382492af989 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 28 Nov 2024 11:35:02 +0530 Subject: [PATCH 1/5] Add TextTransformControl stories --- .../stories/index.story.js | 137 +++++++++++++++--- 1 file changed, 120 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.js b/packages/block-editor/src/components/text-transform-control/stories/index.story.js index 96dd8ed479dc4e..dd7853d11be3ae 100644 --- a/packages/block-editor/src/components/text-transform-control/stories/index.story.js +++ b/packages/block-editor/src/components/text-transform-control/stories/index.story.js @@ -1,33 +1,136 @@ +/** + * Internal dependencies + */ +import TextTransformControl from '../'; + /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; /** - * Internal dependencies + * Text transform options */ -import TextTransformControl from '../'; +const TRANSFORM_OPTIONS = [ 'none', 'uppercase', 'lowercase', 'capitalize' ]; + +/** + * Demo text component to show text transform effect + */ +const DemoText = ( { transform } ) => ( +

+ This is a sample text to demonstrate the text transformation. +

+); +/** + * TextTransformControl Properties + */ export default { title: 'BlockEditor/TextTransformControl', component: TextTransformControl, argTypes: { - onChange: { action: 'onChange' }, + value: { + control: 'select', + options: TRANSFORM_OPTIONS, + description: 'Currently selected text transform value', + table: { + type: { + summary: 'string', + }, + defaultValue: { summary: 'none' }, + }, + }, + onChange: { + action: 'onChange', + control: { + type: null, + }, + description: 'Callback function when text transform changes', + table: { + type: { + summary: 'function', + }, + }, + }, + className: { + control: 'text', + description: 'Additional CSS class name to apply', + table: { + type: { summary: 'string' }, + }, + }, + }, + render: function Render( { onChange, value, className } ) { + const [ selectedTransform, setSelectedTransform ] = useState( value ); + + useEffect( () => { + setSelectedTransform( value ); + }, [ value ] ); + + const handleTransformChange = ( newValue ) => { + const updatedValue = + newValue === selectedTransform ? undefined : newValue; + setSelectedTransform( updatedValue ); + if ( onChange ) { + onChange( updatedValue ); + } + }; + + return ( +
+ + +
+ ); + }, +}; + +/** + * Story demonstrating TextTransformControl with default settings + */ +export const Default = { + args: { + value: 'none', + }, +}; + +/** + * TextTransformControl with uppercase transform selected + */ +export const WithUppercase = { + args: { + value: 'uppercase', }, }; -const Template = ( { onChange, ...args } ) => { - const [ value, setValue ] = useState(); - return ( - { - onChange( ...changeArgs ); - setValue( ...changeArgs ); - } } - value={ value } - /> - ); +/** + * TextTransformControl with lowercase transform selected + */ +export const WithLowercase = { + args: { + value: 'lowercase', + }, }; -export const Default = Template.bind( {} ); +/** + * TextTransformControl with capitalize transform selected + */ +export const WithCapitalize = { + args: { + value: 'capitalize', + }, +}; + +/** + * TextTransformControl with custom className + */ +export const WithCustomClass = { + args: { + value: 'none', + className: 'custom-text-transform-control', + }, +}; From 236dc2cb77be1db642052bdc66ea1436f0455205 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 12 Dec 2024 21:10:39 +0530 Subject: [PATCH 2/5] refactor: Removed the sample text, and extra stories and used story pattern --- .../stories/index.story.js | 126 +++++------------- 1 file changed, 32 insertions(+), 94 deletions(-) diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.js b/packages/block-editor/src/components/text-transform-control/stories/index.story.js index dd7853d11be3ae..3ff1dcedabc2e5 100644 --- a/packages/block-editor/src/components/text-transform-control/stories/index.story.js +++ b/packages/block-editor/src/components/text-transform-control/stories/index.story.js @@ -6,40 +6,24 @@ import TextTransformControl from '../'; /** * WordPress dependencies */ -import { useState, useEffect } from '@wordpress/element'; +import { useState } from '@wordpress/element'; /** - * Text transform options + * Meta configuration for Storybook */ -const TRANSFORM_OPTIONS = [ 'none', 'uppercase', 'lowercase', 'capitalize' ]; - -/** - * Demo text component to show text transform effect - */ -const DemoText = ( { transform } ) => ( -

- This is a sample text to demonstrate the text transformation. -

-); - -/** - * TextTransformControl Properties - */ -export default { +const meta = { title: 'BlockEditor/TextTransformControl', component: TextTransformControl, - argTypes: { - value: { - control: 'select', - options: TRANSFORM_OPTIONS, - description: 'Currently selected text transform value', - table: { - type: { - summary: 'string', - }, - defaultValue: { summary: 'none' }, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'Control to facilitate text transformation selections.', }, }, + }, + argTypes: { onChange: { action: 'onChange', control: { @@ -53,84 +37,38 @@ export default { }, }, className: { - control: 'text', + control: { type: 'text' }, description: 'Additional CSS class name to apply', table: { type: { summary: 'string' }, }, }, - }, - render: function Render( { onChange, value, className } ) { - const [ selectedTransform, setSelectedTransform ] = useState( value ); - - useEffect( () => { - setSelectedTransform( value ); - }, [ value ] ); - - const handleTransformChange = ( newValue ) => { - const updatedValue = - newValue === selectedTransform ? undefined : newValue; - setSelectedTransform( updatedValue ); - if ( onChange ) { - onChange( updatedValue ); - } - }; - - return ( -
- - -
- ); - }, -}; - -/** - * Story demonstrating TextTransformControl with default settings - */ -export const Default = { - args: { - value: 'none', + value: { + control: { type: null }, + description: 'Currently selected writing mode.', + table: { type: { summary: 'string' } }, + }, }, }; -/** - * TextTransformControl with uppercase transform selected - */ -export const WithUppercase = { - args: { - value: 'uppercase', - }, -}; +export default meta; /** - * TextTransformControl with lowercase transform selected + * Default Story Export */ -export const WithLowercase = { - args: { - value: 'lowercase', - }, -}; - -/** - * TextTransformControl with capitalize transform selected - */ -export const WithCapitalize = { - args: { - value: 'capitalize', - }, -}; +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState(); -/** - * TextTransformControl with custom className - */ -export const WithCustomClass = { - args: { - value: 'none', - className: 'custom-text-transform-control', + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + value={ value } + /> + ); }, }; From d247d870c9723ec259c2f61e8fb5849d0089fb88 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 19 Dec 2024 13:31:24 +0530 Subject: [PATCH 3/5] fix: Add options for the value prop and improve description --- .../stories/index.story.js | 43 ++++++------------- 1 file changed, 14 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.js b/packages/block-editor/src/components/text-transform-control/stories/index.story.js index 3ff1dcedabc2e5..c6577dd57b0d79 100644 --- a/packages/block-editor/src/components/text-transform-control/stories/index.story.js +++ b/packages/block-editor/src/components/text-transform-control/stories/index.story.js @@ -3,14 +3,6 @@ */ import TextTransformControl from '../'; -/** - * WordPress dependencies - */ -import { useState } from '@wordpress/element'; - -/** - * Meta configuration for Storybook - */ const meta = { title: 'BlockEditor/TextTransformControl', component: TextTransformControl, @@ -29,7 +21,7 @@ const meta = { control: { type: null, }, - description: 'Callback function when text transform changes', + description: 'Handles change in text transform selection.', table: { type: { summary: 'function', @@ -38,37 +30,30 @@ const meta = { }, className: { control: { type: 'text' }, - description: 'Additional CSS class name to apply', + description: 'Class name to add to the control.', table: { type: { summary: 'string' }, }, }, value: { - control: { type: null }, - description: 'Currently selected writing mode.', - table: { type: { summary: 'string' } }, + options: [ 'none', 'uppercase', 'lowercase', 'capitalize' ], + control: { type: 'radio' }, + description: 'Currently selected text transform.', + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'none' }, + }, }, }, }; export default meta; -/** - * Default Story Export - */ export const Default = { - render: function Template( { onChange, ...args } ) { - const [ value, setValue ] = useState(); - - return ( - { - onChange( ...changeArgs ); - setValue( ...changeArgs ); - } } - value={ value } - /> - ); + args: { + value: 'none', + }, + render: function Template( props ) { + return ; }, }; From ad6d22eae080d548044782f44d9dce3e232c52ad Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 19 Dec 2024 15:50:03 +0530 Subject: [PATCH 4/5] fix: Revert old template style code for render and updated argtypes --- .../stories/index.story.js | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.js b/packages/block-editor/src/components/text-transform-control/stories/index.story.js index c6577dd57b0d79..77dc550368da19 100644 --- a/packages/block-editor/src/components/text-transform-control/stories/index.story.js +++ b/packages/block-editor/src/components/text-transform-control/stories/index.story.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + /** * Internal dependencies */ @@ -36,12 +41,10 @@ const meta = { }, }, value: { - options: [ 'none', 'uppercase', 'lowercase', 'capitalize' ], - control: { type: 'radio' }, + control: { type: null }, description: 'Currently selected text transform.', table: { type: { summary: 'string' }, - defaultValue: { summary: 'none' }, }, }, }, @@ -50,10 +53,18 @@ const meta = { export default meta; export const Default = { - args: { - value: 'none', - }, - render: function Template( props ) { - return ; + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState(); + + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + value={ value } + /> + ); }, }; From 127bd6021c0b6aa5942357e40df00dc46af1306b Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Fri, 20 Dec 2024 13:06:32 +0530 Subject: [PATCH 5/5] doc: Removed default value in props --- .../src/components/text-transform-control/README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/text-transform-control/README.md b/packages/block-editor/src/components/text-transform-control/README.md index 2d40cc16ba86f8..3ed8f1da8cd6e9 100644 --- a/packages/block-editor/src/components/text-transform-control/README.md +++ b/packages/block-editor/src/components/text-transform-control/README.md @@ -1,7 +1,7 @@ # TextTransformControl The `TextTransformControl` component is responsible for rendering a control element that allows users to select and apply text transformation options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for changing the text appearance by applying different transformations such as `none`, `uppercase`, `lowercase`, `capitalize`. - + ![TextTransformConrol Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true) ## Development guidelines @@ -28,7 +28,6 @@ const MyTextTransformControlComponent = () => ( ### `value` - **Type:** `String` -- **Default:** `none` - **Options:** `none`, `uppercase`, `lowercase`, `capitalize` The current value of the Text Transform setting. You may only choose from the `Options` listed above. @@ -37,4 +36,4 @@ The current value of the Text Transform setting. You may only choose from the `O - **Type:** `Function` -A callback function invoked when the Text Transform value is changed via an interaction with any of the buttons. Called with the Text Transform value (`none`, `uppercase`, `lowercase`, `capitalize`) as the only argument. \ No newline at end of file +A callback function invoked when the Text Transform value is changed via an interaction with any of the buttons. Called with the Text Transform value (`none`, `uppercase`, `lowercase`, `capitalize`) as the only argument.