From 840ec879cc5aa9698e30c0eaf1a12266bddb2ed1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Wed, 30 Oct 2024 16:49:23 +0000 Subject: [PATCH 01/10] radio control label accepts ReactNode type --- packages/components/src/radio-control/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/radio-control/types.ts b/packages/components/src/radio-control/types.ts index d1c3aa40d96481..1a37b24d672c80 100644 --- a/packages/components/src/radio-control/types.ts +++ b/packages/components/src/radio-control/types.ts @@ -17,9 +17,9 @@ export type RadioControlProps = Pick< */ options?: { /** - * The label to be shown to the user + * The label to be shown to the user. */ - label: string; + label: string | React.ReactNode; /** * The internal value compared against select and passed to onChange */ From b62bf45bf3e1136316a468ffa5daa5a7879ebc53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Wed, 30 Oct 2024 16:49:58 +0000 Subject: [PATCH 02/10] add With Component Labels story --- .../src/radio-control/stories/index.story.tsx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/packages/components/src/radio-control/stories/index.story.tsx b/packages/components/src/radio-control/stories/index.story.tsx index dae00e57962f47..ccde59e381ea9d 100644 --- a/packages/components/src/radio-control/stories/index.story.tsx +++ b/packages/components/src/radio-control/stories/index.story.tsx @@ -12,6 +12,7 @@ import { useState } from '@wordpress/element'; * Internal dependencies */ import RadioControl from '..'; +import { Path, SVG } from '@wordpress/primitives'; const meta: Meta< typeof RadioControl > = { component: RadioControl, @@ -91,3 +92,51 @@ WithOptionDescriptions.args = { }, ], }; + +export const WithComponentLabels: StoryFn< typeof RadioControl > = + Template.bind( {} ); + +function Rating( { stars, ariaLabel }: { stars: number; ariaLabel: string } ) { + const starPath = + 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'; + return ( +
+ { Array.from( { length: stars }, ( _, index ) => ( + + + + ) ) } +
+ ); +} + +WithComponentLabels.args = { + label: 'Rating', + options: [ + { + label: , + value: '5', + }, + { + label: , + value: '4', + }, + { + label: , + value: '3', + }, + { + label: , + value: '2', + }, + { + label: , + value: '1', + }, + ], +}; From 11d2f7eb3d4fc2a047e83b9896c9b649770e97a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Wed, 30 Oct 2024 16:51:53 +0000 Subject: [PATCH 03/10] update radio control Readme doc --- packages/components/src/radio-control/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/radio-control/README.md b/packages/components/src/radio-control/README.md index 5d7204ef627be3..bd0e16aadb18fb 100644 --- a/packages/components/src/radio-control/README.md +++ b/packages/components/src/radio-control/README.md @@ -104,7 +104,7 @@ A function that receives the value of the new option that is being selected as i An array of objects containing the value and label of the options. -- `label`: `string` The label to be shown to the user. +- `label`: `string` | `ReactNode` The label to be shown to the user. - `value`: `string` The internal value compared against select and passed to onChange. * Required: No From acb4f6617b399c390718bba61ba651b67ade9088 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Wed, 30 Oct 2024 18:15:58 +0000 Subject: [PATCH 04/10] add title to story labels --- .../components/src/radio-control/stories/index.story.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/src/radio-control/stories/index.story.tsx b/packages/components/src/radio-control/stories/index.story.tsx index ccde59e381ea9d..3b3efbe952b9ee 100644 --- a/packages/components/src/radio-control/stories/index.story.tsx +++ b/packages/components/src/radio-control/stories/index.story.tsx @@ -100,7 +100,11 @@ function Rating( { stars, ariaLabel }: { stars: number; ariaLabel: string } ) { const starPath = 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'; return ( -
+
{ Array.from( { length: stars }, ( _, index ) => ( Date: Wed, 27 Nov 2024 13:20:46 +0000 Subject: [PATCH 05/10] Update packages/components/src/radio-control/README.md Co-authored-by: Lena Morita --- packages/components/src/radio-control/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/radio-control/README.md b/packages/components/src/radio-control/README.md index bd0e16aadb18fb..4e6116b5d037e8 100644 --- a/packages/components/src/radio-control/README.md +++ b/packages/components/src/radio-control/README.md @@ -104,7 +104,8 @@ A function that receives the value of the new option that is being selected as i An array of objects containing the value and label of the options. -- `label`: `string` | `ReactNode` The label to be shown to the user. +- `label`: `ReactNode` The label to be shown to the user. When the label is not a string, make sure that the element is accessibly labeled. +- ``` - `value`: `string` The internal value compared against select and passed to onChange. * Required: No From 7a5bd2f479fe81142e49ed981dce7459d65fdc9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Wed, 27 Nov 2024 13:20:53 +0000 Subject: [PATCH 06/10] Update packages/components/src/radio-control/types.ts Co-authored-by: Lena Morita --- packages/components/src/radio-control/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/radio-control/types.ts b/packages/components/src/radio-control/types.ts index 1a37b24d672c80..cdf86430d696a7 100644 --- a/packages/components/src/radio-control/types.ts +++ b/packages/components/src/radio-control/types.ts @@ -19,7 +19,7 @@ export type RadioControlProps = Pick< /** * The label to be shown to the user. */ - label: string | React.ReactNode; + label: React.ReactNode; /** * The internal value compared against select and passed to onChange */ From 5d175c8d285754642100e33f376278a261d88caf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Wed, 27 Nov 2024 13:20:59 +0000 Subject: [PATCH 07/10] Update packages/components/src/radio-control/types.ts Co-authored-by: Lena Morita --- packages/components/src/radio-control/types.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/radio-control/types.ts b/packages/components/src/radio-control/types.ts index cdf86430d696a7..d42d9e58a0d216 100644 --- a/packages/components/src/radio-control/types.ts +++ b/packages/components/src/radio-control/types.ts @@ -18,6 +18,8 @@ export type RadioControlProps = Pick< options?: { /** * The label to be shown to the user. + * + * When the label is not a string, make sure that the element is accessibly labeled. */ label: React.ReactNode; /** From b9a85c08d4f79b42b999104658b9396af05428fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Wed, 27 Nov 2024 17:13:33 +0000 Subject: [PATCH 08/10] simplify RadioControl with component label story --- .../src/radio-control/stories/index.story.tsx | 43 +++++++------------ 1 file changed, 15 insertions(+), 28 deletions(-) diff --git a/packages/components/src/radio-control/stories/index.story.tsx b/packages/components/src/radio-control/stories/index.story.tsx index 3b3efbe952b9ee..73123aa9560e17 100644 --- a/packages/components/src/radio-control/stories/index.story.tsx +++ b/packages/components/src/radio-control/stories/index.story.tsx @@ -6,13 +6,14 @@ import type { Meta, StoryFn } from '@storybook/react'; /** * WordPress dependencies */ +import { starFilled } from '@wordpress/icons'; import { useState } from '@wordpress/element'; /** * Internal dependencies */ import RadioControl from '..'; -import { Path, SVG } from '@wordpress/primitives'; +import Icon from '../../icon'; const meta: Meta< typeof RadioControl > = { component: RadioControl, @@ -93,27 +94,21 @@ WithOptionDescriptions.args = { ], }; +/** + * When the label is not a string, + * make sure that the element is accessibly labeled. + */ export const WithComponentLabels: StoryFn< typeof RadioControl > = Template.bind( {} ); -function Rating( { stars, ariaLabel }: { stars: number; ariaLabel: string } ) { - const starPath = - 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'; +function Rating( { + stars, + ...restProps +}: { stars: number } & JSX.IntrinsicElements[ 'div' ] ) { return ( -
+
{ Array.from( { length: stars }, ( _, index ) => ( - - - + ) ) }
); @@ -123,23 +118,15 @@ WithComponentLabels.args = { label: 'Rating', options: [ { - label: , - value: '5', - }, - { - label: , - value: '4', - }, - { - label: , + label: , value: '3', }, { - label: , + label: , value: '2', }, { - label: , + label: , value: '1', }, ], From c6b9c9e6f3ea978180b8805e0bc3c88638683aaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Wed, 27 Nov 2024 17:19:24 +0000 Subject: [PATCH 09/10] improve the label TS type definition --- packages/components/src/radio-control/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/radio-control/types.ts b/packages/components/src/radio-control/types.ts index d42d9e58a0d216..be42504d91c0aa 100644 --- a/packages/components/src/radio-control/types.ts +++ b/packages/components/src/radio-control/types.ts @@ -21,7 +21,7 @@ export type RadioControlProps = Pick< * * When the label is not a string, make sure that the element is accessibly labeled. */ - label: React.ReactNode; + label: string | React.ReactElement; /** * The internal value compared against select and passed to onChange */ From 3c254e260bc3aa0c8d8a488a9615d8cb4127f07a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Tue, 17 Dec 2024 10:32:54 +0000 Subject: [PATCH 10/10] Update packages/components/src/radio-control/README.md Co-authored-by: Marco Ciampini --- packages/components/src/radio-control/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/radio-control/README.md b/packages/components/src/radio-control/README.md index 4e6116b5d037e8..095cfcdff9137a 100644 --- a/packages/components/src/radio-control/README.md +++ b/packages/components/src/radio-control/README.md @@ -104,7 +104,7 @@ A function that receives the value of the new option that is being selected as i An array of objects containing the value and label of the options. -- `label`: `ReactNode` The label to be shown to the user. When the label is not a string, make sure that the element is accessibly labeled. +- `label`: `string` | `React.ReactElement` The label to be shown to the user. When the label is not a string, make sure that the element is accessibly labeled. - ``` - `value`: `string` The internal value compared against select and passed to onChange.