From a27e22966ed309fb1fac1c43eb5acbe2114132a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.com>
Date: Tue, 22 Oct 2024 11:43:16 +0100
Subject: [PATCH] fix(web): avoid PF/Radio complaints

The ProductSelectionPage component was laying out PF/Radio inputs in a
not expected way, making such a component complaint because missing
prop

> https://github.com/patternfly/patternfly-react/blob/a3ffb39a0cc2c9130f7db86ad3186787ba12648e/packages/react-core/src/components/Radio/Radio.tsx#L61-L64

Thus, the selector should either, to adhere to expected layouts or to
simply use a plain input[type="radio"] which the corresponding CSS class
to look like a PF/Radio. This commit implements the latest.
---
 web/src/assets/styles/app.scss                    |  9 +++++----
 .../components/product/ProductSelectionPage.tsx   | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/web/src/assets/styles/app.scss b/web/src/assets/styles/app.scss
index 3d6e2a4166..04d35448a9 100644
--- a/web/src/assets/styles/app.scss
+++ b/web/src/assets/styles/app.scss
@@ -37,15 +37,16 @@ button.remove-link:hover {
 }
 
 #productSelectionForm {
-  .pf-v5-c-radio input {
+  input[type="radio"] {
     align-self: center;
-    width: 20px;
-    height: 20px;
+    flex-shrink: 0;
+    inline-size: 20px;
+    block-size: 20px;
   }
 
   .pf-v5-c-card {
     img {
-      width: 80px;
+      max-inline-size: 80px;
     }
 
     label {
diff --git a/web/src/components/product/ProductSelectionPage.tsx b/web/src/components/product/ProductSelectionPage.tsx
index 05560f0fe4..9c97951717 100644
--- a/web/src/components/product/ProductSelectionPage.tsx
+++ b/web/src/components/product/ProductSelectionPage.tsx
@@ -28,7 +28,6 @@ import {
   Form,
   Grid,
   GridItem,
-  Radio,
   List,
   ListItem,
   Split,
@@ -39,7 +38,8 @@ import {
 import { Page } from "~/components/core";
 import { Center } from "~/components/layout";
 import { useConfigMutation, useProduct } from "~/queries/software";
-import styles from "@patternfly/react-styles/css/utilities/Text/text";
+import pfTextStyles from "@patternfly/react-styles/css/utilities/Text/text";
+import pfRadioStyles from "@patternfly/react-styles/css/components/Radio/radio";
 import { slugify } from "~/utils";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
@@ -63,16 +63,21 @@ const Option = ({ product, isChecked, onChange }) => {
       <Card isRounded>
         <CardBody>
           <Split hasGutter>
-            <Radio
+            <input
               id={id}
+              type="radio"
               name="product"
-              isChecked={isChecked}
+              className={pfRadioStyles.radioInput}
+              checked={isChecked}
               onChange={onChange}
               aria-details={detailsId}
             />
             <img aria-hidden src={logoSrc} alt={logoAltText} />
             <Stack hasGutter>
-              <label htmlFor={id} className={`${styles.fontSizeLg} ${styles.fontWeightBold}`}>
+              <label
+                htmlFor={id}
+                className={`${pfTextStyles.fontSizeLg} ${pfTextStyles.fontWeightBold}`}
+              >
                 {product.name}
               </label>
               <p id={detailsId}>{product.description}</p>