Skip to content

Commit

Permalink
fix(web) avoid PF/Radio complaint at product selection (#1689)
Browse files Browse the repository at this point in the history
## Problem

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

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

## Solution

Use a plain input[type="radio"] which the corresponding CSS class to
look like a PF/Radio

## Testing

- Tested manually
  • Loading branch information
dgdavid authored Oct 22, 2024
2 parents 653ef75 + a27e229 commit c0bd649
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 9 deletions.
9 changes: 5 additions & 4 deletions web/src/assets/styles/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
15 changes: 10 additions & 5 deletions web/src/components/product/ProductSelectionPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import {
Form,
Grid,
GridItem,
Radio,
List,
ListItem,
Split,
Expand All @@ -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";
Expand All @@ -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>
Expand Down

0 comments on commit c0bd649

Please sign in to comment.