Merge pull request #5828 from veroglez/LPD-1261_name

feat(@clayui/card): LPD-1261 Add name to group all radio type inputs
liferay · Jun 4, 2024 · affe1ae · affe1ae
2 parents 9b9a1b0 + bd32f54
commit affe1ae
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 15 deletions.
diff --git a/packages/clay-card/src/CardWithHorizontal.tsx b/packages/clay-card/src/CardWithHorizontal.tsx
@@ -46,7 +46,10 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	 * Props to add to the radio element
 	 */
 
-	radioProps?: React.HTMLAttributes<HTMLInputElement> & {value: string};
+	radioProps?: React.HTMLAttributes<HTMLInputElement> & {
+		name: string;
+		value: string;
+	};
 
 	/**
 	 * Flag to indicate if card is selected
@@ -101,7 +104,7 @@ export const ClayCardWithHorizontal = ({
 	},
 	href,
 	onSelectChange,
-	radioProps = {value: ''},
+	radioProps = {name: '', value: ''},
 	selectableType,
 	selected = false,
 	spritemap,

diff --git a/packages/clay-card/src/CardWithInfo.tsx b/packages/clay-card/src/CardWithInfo.tsx
@@ -32,7 +32,10 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	 * Props to add to the radio element
 	 */
 
-	radioProps?: React.HTMLAttributes<HTMLInputElement> & {value: string};
+	radioProps?: React.HTMLAttributes<HTMLInputElement> & {
+		name: string;
+		value: string;
+	};
 
 	/**
 	 * Description of the file
@@ -154,7 +157,7 @@ export const ClayCardWithInfo = ({
 	imgProps,
 	labels,
 	onSelectChange,
-	radioProps = {value: ''},
+	radioProps = {name: '', value: ''},
 	selectableType,
 	selected = false,
 	spritemap,

diff --git a/packages/clay-card/src/CardWithUser.tsx b/packages/clay-card/src/CardWithUser.tsx
@@ -58,7 +58,10 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	 * Props to add to the radio element
 	 */
 
-	radioProps?: React.HTMLAttributes<HTMLInputElement> & {value: string};
+	radioProps?: React.HTMLAttributes<HTMLInputElement> & {
+		name: string;
+		value: string;
+	};
 
 	/**
 	 * Flag to indicate if card is selected
@@ -134,7 +137,7 @@ export const ClayCardWithUser = ({
 	spritemap,
 	stickerTitle,
 	selectableType,
-	radioProps = {value: ''},
+	radioProps = {name: '', value: ''},
 	userImageAlt = 'thumbnail',
 	userDisplayType,
 	userImageSrc,

diff --git a/packages/clay-card/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-card/src/__tests__/__snapshots__/index.tsx.snap
@@ -1665,6 +1665,7 @@ exports[`ClayCardWithHorizontal renders with radio button 1`] = `
         <input
           class="custom-control-input"
           disabled=""
+          name="cards"
           role="radio"
           type="radio"
           value="radio1"
@@ -2917,6 +2918,7 @@ exports[`ClayCardWithInfo renders with radio button 1`] = `
         <label>
           <input
             class="custom-control-input"
+            name="cards"
             role="radio"
             type="radio"
             value="radio1"
@@ -3461,6 +3463,7 @@ exports[`ClayCardWithUser renders with radio button 1`] = `
           <label>
             <input
               class="custom-control-input"
+              name="cards"
               role="radio"
               type="radio"
               value="radio1"

diff --git a/packages/clay-card/src/__tests__/index.tsx b/packages/clay-card/src/__tests__/index.tsx
@@ -718,7 +718,7 @@ describe('ClayCardWithUser', () => {
 				href="#"
 				name="Foo Bar"
 				onSelectChange={jest.fn()}
-				radioProps={{value: 'radio1'}}
+				radioProps={{name: 'cards', value: 'radio1'}}
 				selectableType="radio"
 				spritemap="/path/to/some/resource.svg"
 			/>
@@ -835,7 +835,7 @@ describe('ClayCardWithHorizontal', () => {
 				disabled
 				href="#"
 				onSelectChange={jest.fn()}
-				radioProps={{value: 'radio1'}}
+				radioProps={{name: 'cards', value: 'radio1'}}
 				selectableType="radio"
 				selected={false}
 				spritemap="/path/to/some/resource.svg"
@@ -1146,7 +1146,7 @@ describe('ClayCardWithInfo', () => {
 			<ClayCardWithInfo
 				href="#"
 				onSelectChange={jest.fn()}
-				radioProps={{value: 'radio1'}}
+				radioProps={{name: 'cards', value: 'radio1'}}
 				selectableType="radio"
 				selected={false}
 				spritemap="/path/to/some/resource.svg"

diff --git a/packages/clay-card/stories/Card.stories.tsx b/packages/clay-card/stories/Card.stories.tsx
@@ -116,7 +116,7 @@ export const CardWithInfo = (args: any) => {
 								},
 							]}
 							onSelectChange={(value) => setRadioValue(value)}
-							radioProps={{value: 'radio1'}}
+							radioProps={{name: 'cards', value: 'radio1'}}
 							selectableType="radio"
 							selected={radioValue === 'radio1'}
 							stickerProps={null}
@@ -132,7 +132,7 @@ export const CardWithInfo = (args: any) => {
 								},
 							]}
 							onSelectChange={(value) => setRadioValue(value)}
-							radioProps={{value: 'radio2'}}
+							radioProps={{name: 'cards', value: 'radio2'}}
 							selectableType="radio"
 							selected={radioValue === 'radio2'}
 							stickerProps={null}
@@ -270,7 +270,7 @@ export const CardWithHorizontal = (args: any) => {
 							disabled={args.disabled}
 							href="#"
 							onSelectChange={setRadioValue}
-							radioProps={{value: 'radio1'}}
+							radioProps={{name: 'cards', value: 'radio1'}}
 							selectableType="radio"
 							selected={radioValue === 'radio1'}
 							title="Radio Selectable Folder 1"
@@ -292,7 +292,7 @@ export const CardWithHorizontal = (args: any) => {
 							disabled={args.disabled}
 							href="#"
 							onSelectChange={setRadioValue}
-							radioProps={{value: 'radio2'}}
+							radioProps={{name: 'cards', value: 'radio2'}}
 							selectableType="radio"
 							selected={radioValue === 'radio2'}
 							title="Radio Selectable Folder 2"
@@ -387,7 +387,7 @@ export const CardWithUser = (args: any) => {
 							disabled={args.disabled}
 							name="Abraham Kuyper I"
 							onSelectChange={setRadioValue}
-							radioProps={{value: 'radio1'}}
+							radioProps={{name: 'cards', value: 'radio1'}}
 							selectableType="radio"
 							selected={radioValue === 'radio1'}
 							stickerTitle="User Icon"
@@ -398,7 +398,7 @@ export const CardWithUser = (args: any) => {
 							disabled={args.disabled}
 							name="Abraham Kuyper II"
 							onSelectChange={setRadioValue}
-							radioProps={{value: 'radio2'}}
+							radioProps={{name: 'cards', value: 'radio2'}}
 							selectableType="radio"
 							selected={radioValue === 'radio2'}
 							stickerTitle="User Icon"