From dbe14accc0711d19585346875df4974db10a4536 Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Wed, 25 Feb 2026 13:57:46 +0100
Subject: [PATCH 1/7] add badge to radio button, make text appear disabled
---
components/Radio/Radio.tsx | 4 +++-
components/Radio/style.scss | 6 +++++-
components/Radio/types.ts | 3 +++
3 files changed, 11 insertions(+), 2 deletions(-)
diff --git a/components/Radio/Radio.tsx b/components/Radio/Radio.tsx
index cb0f1cd..65168d3 100644
--- a/components/Radio/Radio.tsx
+++ b/components/Radio/Radio.tsx
@@ -2,11 +2,12 @@ import './style.scss';
import { useHover } from '@uidotdev/usehooks';
import clsx from 'clsx';
import { isPresent } from '../../utils/isPresent';
+import { Badge } from '../Badge/Badge';
import { FieldError } from '../FieldError/FieldError';
import { RadioIndicator } from '../RadioIndicator/RadioIndicator';
import type { RadioProps } from './types';
-export const Radio = ({ text, testId, active, disabled, error, onClick }: RadioProps) => {
+export const Radio = ({ text, testId, active, disabled, error, onClick, badgeProps }: RadioProps) => {
const [ref, hover] = useHover();
return (
@@ -35,6 +36,7 @@ export const Radio = ({ text, testId, active, disabled, error, onClick }: RadioP
>
{isPresent(text) && {text}}
+ {isPresent(badgeProps) && }
diff --git a/components/Radio/style.scss b/components/Radio/style.scss
index 3635e06..0361db1 100644
--- a/components/Radio/style.scss
+++ b/components/Radio/style.scss
@@ -19,7 +19,7 @@
}
&.text {
- display: grid;
+ display: flex;
grid-template-columns: 24px auto;
grid-template-rows: 1fr;
column-gap: var(--spacing-sm);
@@ -32,6 +32,10 @@
&.disabled,
&[aria-disabled='true'] {
cursor: not-allowed;
+
+ & > span {
+ color: var(--fg-disabled);
+ }
}
}
}
diff --git a/components/Radio/types.ts b/components/Radio/types.ts
index 0db46ae..4131b19 100644
--- a/components/Radio/types.ts
+++ b/components/Radio/types.ts
@@ -1,3 +1,5 @@
+import type { BadgeProps } from '../Badge/types';
+
export interface RadioProps {
text?: string;
testId?: string;
@@ -5,4 +7,5 @@ export interface RadioProps {
disabled?: boolean;
error?: string;
onClick?: () => void;
+ badgeProps?: BadgeProps;
}
From 9a6f90c697503560ff6e7002b7c2f722babd777b Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Wed, 25 Feb 2026 14:02:00 +0100
Subject: [PATCH 2/7] lint
---
components/Radio/Radio.tsx | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/components/Radio/Radio.tsx b/components/Radio/Radio.tsx
index 65168d3..433bd0f 100644
--- a/components/Radio/Radio.tsx
+++ b/components/Radio/Radio.tsx
@@ -7,7 +7,15 @@ import { FieldError } from '../FieldError/FieldError';
import { RadioIndicator } from '../RadioIndicator/RadioIndicator';
import type { RadioProps } from './types';
-export const Radio = ({ text, testId, active, disabled, error, onClick, badgeProps }: RadioProps) => {
+export const Radio = ({
+ text,
+ testId,
+ active,
+ disabled,
+ error,
+ onClick,
+ badgeProps,
+}: RadioProps) => {
const [ref, hover] = useHover();
return (
From 0c24df975e6389ca6f24b328c90acae27c45f37f Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Thu, 26 Feb 2026 12:59:14 +0100
Subject: [PATCH 3/7] add white-space pre line
---
components/Tooltip/style.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/components/Tooltip/style.scss b/components/Tooltip/style.scss
index 9dc7c2c..7b59732 100644
--- a/components/Tooltip/style.scss
+++ b/components/Tooltip/style.scss
@@ -10,5 +10,6 @@
a {
font: var(--t-tooltip);
color: var(--fg-white);
+ white-space: pre-line;
}
}
From cbad3d7ae3c7b01e32c969b5f2dba49fa23019b3 Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:07:38 +0100
Subject: [PATCH 4/7] flex -> grid
---
components/Radio/style.scss | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/components/Radio/style.scss b/components/Radio/style.scss
index 0361db1..ca68ddb 100644
--- a/components/Radio/style.scss
+++ b/components/Radio/style.scss
@@ -19,14 +19,18 @@
}
&.text {
- display: flex;
- grid-template-columns: 24px auto;
+ display: grid;
+ grid-template-columns: 24px max-content;
grid-template-rows: 1fr;
column-gap: var(--spacing-sm);
& > span {
font: var(--t-body-sm-400);
}
+
+ & > .badge {
+ grid-column: 3;
+ }
}
&.disabled,
From 49bed0dedd8e3bb83837c5832b338c731e19976d Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:58:16 +0100
Subject: [PATCH 5/7] remove changes to radio
---
components/Radio/Radio.tsx | 12 +-----------
components/Radio/style.scss | 2 +-
components/Radio/types.ts | 3 ---
3 files changed, 2 insertions(+), 15 deletions(-)
diff --git a/components/Radio/Radio.tsx b/components/Radio/Radio.tsx
index 433bd0f..cb0f1cd 100644
--- a/components/Radio/Radio.tsx
+++ b/components/Radio/Radio.tsx
@@ -2,20 +2,11 @@ import './style.scss';
import { useHover } from '@uidotdev/usehooks';
import clsx from 'clsx';
import { isPresent } from '../../utils/isPresent';
-import { Badge } from '../Badge/Badge';
import { FieldError } from '../FieldError/FieldError';
import { RadioIndicator } from '../RadioIndicator/RadioIndicator';
import type { RadioProps } from './types';
-export const Radio = ({
- text,
- testId,
- active,
- disabled,
- error,
- onClick,
- badgeProps,
-}: RadioProps) => {
+export const Radio = ({ text, testId, active, disabled, error, onClick }: RadioProps) => {
const [ref, hover] = useHover();
return (
@@ -44,7 +35,6 @@ export const Radio = ({
>
{isPresent(text) && {text}}
- {isPresent(badgeProps) && }
diff --git a/components/Radio/style.scss b/components/Radio/style.scss
index ca68ddb..2c7de2a 100644
--- a/components/Radio/style.scss
+++ b/components/Radio/style.scss
@@ -20,7 +20,7 @@
&.text {
display: grid;
- grid-template-columns: 24px max-content;
+ grid-template-columns: 24px auto;
grid-template-rows: 1fr;
column-gap: var(--spacing-sm);
diff --git a/components/Radio/types.ts b/components/Radio/types.ts
index 4131b19..0db46ae 100644
--- a/components/Radio/types.ts
+++ b/components/Radio/types.ts
@@ -1,5 +1,3 @@
-import type { BadgeProps } from '../Badge/types';
-
export interface RadioProps {
text?: string;
testId?: string;
@@ -7,5 +5,4 @@ export interface RadioProps {
disabled?: boolean;
error?: string;
onClick?: () => void;
- badgeProps?: BadgeProps;
}
From 99e9f58f16b89c235371b1890382123b482dfef2 Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:58:46 +0100
Subject: [PATCH 6/7] rest of changes
---
components/Radio/style.scss | 8 --------
1 file changed, 8 deletions(-)
diff --git a/components/Radio/style.scss b/components/Radio/style.scss
index 2c7de2a..3635e06 100644
--- a/components/Radio/style.scss
+++ b/components/Radio/style.scss
@@ -27,19 +27,11 @@
& > span {
font: var(--t-body-sm-400);
}
-
- & > .badge {
- grid-column: 3;
- }
}
&.disabled,
&[aria-disabled='true'] {
cursor: not-allowed;
-
- & > span {
- color: var(--fg-disabled);
- }
}
}
}
From 8146505ffebb737351943f2bcfc017958d7eeadf Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:30:24 +0100
Subject: [PATCH 7/7] add badgeprops instead of badgevariantvalue
---
components/InteractiveBlock/types.ts | 7 ++-----
1 file changed, 2 insertions(+), 5 deletions(-)
diff --git a/components/InteractiveBlock/types.ts b/components/InteractiveBlock/types.ts
index 8d4dbd6..36cae46 100644
--- a/components/InteractiveBlock/types.ts
+++ b/components/InteractiveBlock/types.ts
@@ -1,5 +1,5 @@
import type { HTMLProps } from 'react';
-import type { BadgeVariantValue } from '../Badge/types';
+import type { BadgeProps } from '../Badge/types';
type VariantOption = 'radio' | 'checkbox' | 'toggle';
@@ -9,8 +9,5 @@ export interface InteractiveBlockProps extends Omit, '
content?: string;
variant?: VariantOption;
disabled?: boolean;
- badge?: {
- text: string;
- variant: BadgeVariantValue;
- };
+ badge?: BadgeProps;
}