Skip to content

Commit

Permalink
[IOPID-1610] on RadioGroup component change type of description (#199)
Browse files Browse the repository at this point in the history
## Short description
On RadioGroup component change type of description from `string` to
`string | React.ReactNode` to accept ad JSX as description.

## List of changes proposed in this pull request
- change type of description
- update example on example app 

<img width="250" alt="example app"
src="https://github.com/pagopa/io-app-design-system/assets/83651704/c1f8852d-994e-4dda-85d4-a39ddf181a90">

## How to test
Run the example app and navigate to the 'Selection' section. As you can
see from the screenshoot, the item I added has the title "Let's try with
JSX description".
  • Loading branch information
Ladirico authored Feb 26, 2024
1 parent bd42339 commit bd3cc2c
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 8 deletions.
20 changes: 14 additions & 6 deletions example/src/pages/Selection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ import {
CheckboxLabel,
Divider,
H2,
IOColors,
IOVisualCostants,
LabelSmall,
ListItemCheckbox,
ListItemSwitch,
NativeSwitch,
Expand All @@ -15,7 +17,7 @@ import {
useIOExperimentalDesign
} from "@pagopa/io-app-design-system";
import React, { useState } from "react";
import { View } from "react-native";
import { Text, View } from "react-native";
import { ComponentViewerBox } from "../components/ComponentViewerBox";
import { Screen } from "../components/Screen";

Expand Down Expand Up @@ -160,11 +162,17 @@ const mockRadioItems = (): ReadonlyArray<RadioItem<string>> => [
id: "example-icon"
},
{
startImage: { paymentLogo: "myBank" },
value: "Let's try with a basic title",
description:
"Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano.",
id: "example-paymentLogo"
value: "Let's try with JSX description",
description: (
<LabelSmall color="grey-700" weight="Regular">
Ti contatteranno solo i servizi che hanno qualcosa di importante da
dirti.{" "}
<Text style={{ color: IOColors["grey-700"], fontWeight: "600" }}>
Potrai sempre disattivare le comunicazioni che non ti interessano.
</Text>
</LabelSmall>
),
id: "example-jsx-element"
},
{
value: "Let's try with a basic title",
Expand Down
2 changes: 1 addition & 1 deletion src/components/listitems/ListItemRadio.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ type ListItemRadioLoadingProps =

type Props = WithTestID<{
value: string;
description?: string;
description?: string | React.ReactNode;
selected: boolean;
onValueChange?: (newValue: boolean) => void;
startImage?: ListItemRadioGraphicProps;
Expand Down
2 changes: 1 addition & 1 deletion src/components/radio/RadioGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ListItemRadio, ListItemRadioWithAmount } from "../listitems";
export type RadioItem<T> = {
id: T;
value: string;
description?: string;
description?: string | React.ReactNode;
disabled?: boolean;
startImage?: ComponentProps<typeof ListItemRadio>["startImage"];
loadingProps?: ComponentProps<typeof ListItemRadio>["loadingProps"];
Expand Down

0 comments on commit bd3cc2c

Please sign in to comment.