From 927e44a79c55a11f83e90a50512a6f5f903db823 Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Wed, 1 May 2024 16:02:22 -0400
Subject: [PATCH 01/12] First pass at RadioTileGroup

---
 src/ui/RadioTileGroup/RadioTileGroup.spec.tsx | 34 +++++++
 .../RadioTileGroup/RadioTileGroup.stories.tsx | 58 +++++++++++
 src/ui/RadioTileGroup/RadioTileGroup.tsx      | 96 +++++++++++++++++++
 src/ui/RadioTileGroup/index.ts                |  1 +
 4 files changed, 189 insertions(+)
 create mode 100644 src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
 create mode 100644 src/ui/RadioTileGroup/RadioTileGroup.stories.tsx
 create mode 100644 src/ui/RadioTileGroup/RadioTileGroup.tsx
 create mode 100644 src/ui/RadioTileGroup/index.ts

diff --git a/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
new file mode 100644
index 0000000000..d2de315bd6
--- /dev/null
+++ b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react'
+
+import { RadioTileGroup } from './RadioTileGroup'
+
+describe('Card', () => {
+  it('renders', async () => {
+    render(
+      <RadioTileGroup>
+        <RadioTileGroup.Item value="asdf" label="Asdf" />
+        <RadioTileGroup.Item value="jkl;" label="Jkl;" />
+      </RadioTileGroup>
+    )
+    const item1 = await screen.findByText('Asdf')
+    expect(item1).toBeInTheDocument()
+    const item2 = await screen.findByText('Jkl;')
+    expect(item2).toBeInTheDocument()
+  })
+
+  describe('Item description', () => {
+    it('renders', async () => {
+      render(
+        <RadioTileGroup>
+          <RadioTileGroup.Item
+            value="asdf"
+            label="Asdf"
+            description="This is a description."
+          />
+        </RadioTileGroup>
+      )
+      const description = await screen.findByText('This is a description.')
+      expect(description).toBeInTheDocument()
+    })
+  })
+})
diff --git a/src/ui/RadioTileGroup/RadioTileGroup.stories.tsx b/src/ui/RadioTileGroup/RadioTileGroup.stories.tsx
new file mode 100644
index 0000000000..97e66f00f2
--- /dev/null
+++ b/src/ui/RadioTileGroup/RadioTileGroup.stories.tsx
@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { RadioTileGroup } from './RadioTileGroup'
+
+type RadioTileGroupStory = React.ComponentProps<typeof RadioTileGroup> & {
+  flex: 1 | 'none'
+}
+
+const meta: Meta<RadioTileGroupStory> = {
+  title: 'Components/RadioTileGroup',
+  component: RadioTileGroup,
+  argTypes: {
+    direction: {
+      description: 'Controls the flex direction of the RadioTileGroup',
+      control: 'radio',
+      options: ['row', 'col'],
+    },
+    flex: {
+      description: 'Toggles between the item flexing and not',
+      control: 'radio',
+      options: [1, 'none'],
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<RadioTileGroupStory>
+
+export const Default: Story = {
+  args: {
+    direction: 'row',
+    flex: 1,
+  },
+  render: (args) => (
+    <RadioTileGroup className="w-full" direction={args.direction}>
+      <RadioTileGroup.Item value="radio" label="Radio" flex={args.flex} />
+      <RadioTileGroup.Item value="tile" label="Tile" flex={args.flex} />
+      <RadioTileGroup.Item value="group" label="Group" flex={args.flex} />
+    </RadioTileGroup>
+  ),
+}
+
+export const WithDescription: Story = {
+  args: {
+    direction: 'row',
+    flex: 1,
+  },
+  render: (args) => (
+    <RadioTileGroup className="w-full" direction={args.direction}>
+      <RadioTileGroup.Item
+        value="description"
+        label="Description"
+        description="A RadioTileGroup Item can optionally have a description"
+      />
+      <RadioTileGroup.Item value="noDescription" label="No Description" />
+    </RadioTileGroup>
+  ),
+}
diff --git a/src/ui/RadioTileGroup/RadioTileGroup.tsx b/src/ui/RadioTileGroup/RadioTileGroup.tsx
new file mode 100644
index 0000000000..7717749a92
--- /dev/null
+++ b/src/ui/RadioTileGroup/RadioTileGroup.tsx
@@ -0,0 +1,96 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { cva, VariantProps } from 'cva'
+import React from 'react'
+
+const group = cva(['flex', 'gap-4'], {
+  variants: {
+    direction: {
+      row: 'flex-row',
+      col: 'flex-col',
+    },
+  },
+  defaultVariants: {
+    direction: 'row',
+  },
+})
+interface GroupProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
+    VariantProps<typeof group> {}
+
+const Group = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  GroupProps
+>(({ className, direction, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={group({ className, direction })}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+Group.displayName = RadioGroupPrimitive.Root.displayName
+
+const item = cva(['relative'], {
+  variants: {
+    flex: {
+      1: 'flex-1',
+      none: 'flex-none',
+    },
+  },
+  defaultVariants: {
+    flex: 1,
+  },
+})
+interface ItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+    VariantProps<typeof item> {
+  label: string
+  description?: string
+}
+
+const Item = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  ItemProps
+>(({ className, label, description, flex, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={item({ className, flex })}
+      {...props}
+    >
+      <div className="flex h-full flex-col gap-2 rounded-md border border-ds-gray-quaternary p-4">
+        <div className="flex items-center justify-between gap-4">
+          <p className="font-medium">{label}</p>
+          <RadioButtonCircle />
+        </div>
+        {description ? (
+          <p className="text-left text-ds-gray-quinary">{description}</p>
+        ) : null}
+      </div>
+      <RadioGroupPrimitive.Indicator className="absolute right-0 top-0 flex h-full w-full justify-end">
+        <div className="absolute h-full w-full rounded-md border-2 border-ds-blue" />
+        <div className="h-full w-full rounded-md border border-ds-blue p-4">
+          <div className="flex h-5 w-full items-center justify-end">
+            <RadioButtonCircle selected />
+          </div>
+        </div>
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+Item.displayName = RadioGroupPrimitive.Item.displayName
+
+export const RadioTileGroup = Object.assign(Group, {
+  Item,
+})
+
+function RadioButtonCircle({ selected = false }: { selected?: boolean }) {
+  return selected ? (
+    <div className="flex h-4 w-4 items-center justify-center rounded-full bg-ds-blue">
+      <div className="h-1 w-1 rounded-full bg-white " />
+    </div>
+  ) : (
+    <div className="h-4 w-4 rounded-full border border-ds-gray-quaternary" />
+  )
+}
diff --git a/src/ui/RadioTileGroup/index.ts b/src/ui/RadioTileGroup/index.ts
new file mode 100644
index 0000000000..b7ba3c5dbe
--- /dev/null
+++ b/src/ui/RadioTileGroup/index.ts
@@ -0,0 +1 @@
+export { RadioTileGroup } from './RadioTileGroup'

From 2e9226f2d4566d0d48f0185c071855f481eef99c Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Wed, 1 May 2024 17:04:52 -0400
Subject: [PATCH 02/12] Add test for selection behaviour

---
 src/ui/RadioTileGroup/RadioTileGroup.spec.tsx | 43 ++++++++++++++++++-
 src/ui/RadioTileGroup/RadioTileGroup.tsx      | 10 ++++-
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
index d2de315bd6..32e14cee14 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
@@ -1,8 +1,19 @@
-import { render, screen } from '@testing-library/react'
+import {
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 
 import { RadioTileGroup } from './RadioTileGroup'
 
 describe('Card', () => {
+  function setup() {
+    return {
+      user: userEvent.setup(),
+    }
+  }
+
   it('renders', async () => {
     render(
       <RadioTileGroup>
@@ -31,4 +42,34 @@ describe('Card', () => {
       expect(description).toBeInTheDocument()
     })
   })
+
+  describe('when an item is clicked', () => {
+    it('toggles selected circle', async () => {
+      const { user } = setup()
+      render(
+        <RadioTileGroup>
+          <RadioTileGroup.Item value="asdf" label="Asdf" />
+          <RadioTileGroup.Item value="jkl;" label="Jkl;" />
+        </RadioTileGroup>
+      )
+      const tile = await screen.findByText('Asdf')
+      const tile2 = await screen.findByText('Jkl;')
+
+      user.click(tile)
+
+      const selected = await screen.findByTestId('radio-button-circle-selected')
+      expect(selected).toBeInTheDocument()
+
+      user.click(tile2)
+
+      await waitForElementToBeRemoved(selected)
+
+      expect(selected).not.toBeInTheDocument()
+
+      const otherSelected = await screen.findByTestId(
+        'radio-button-circle-selected'
+      )
+      expect(otherSelected).toBeInTheDocument()
+    })
+  })
 })
diff --git a/src/ui/RadioTileGroup/RadioTileGroup.tsx b/src/ui/RadioTileGroup/RadioTileGroup.tsx
index 7717749a92..8086f6ec2b 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.tsx
@@ -88,9 +88,15 @@ export const RadioTileGroup = Object.assign(Group, {
 function RadioButtonCircle({ selected = false }: { selected?: boolean }) {
   return selected ? (
     <div className="flex h-4 w-4 items-center justify-center rounded-full bg-ds-blue">
-      <div className="h-1 w-1 rounded-full bg-white " />
+      <div
+        className="h-1 w-1 rounded-full bg-white "
+        data-testid="radio-button-circle-selected"
+      />
     </div>
   ) : (
-    <div className="h-4 w-4 rounded-full border border-ds-gray-quaternary" />
+    <div
+      className="h-4 w-4 rounded-full border border-ds-gray-quaternary"
+      data-testid="radio-button-circle-unselected"
+    />
   )
 }

From 24496b9891dc886fa3c5d306de63e4bbb3ce29f1 Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Wed, 1 May 2024 17:37:51 -0400
Subject: [PATCH 03/12] Use correct blue color

---
 src/ui/RadioTileGroup/RadioTileGroup.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ui/RadioTileGroup/RadioTileGroup.tsx b/src/ui/RadioTileGroup/RadioTileGroup.tsx
index 8086f6ec2b..731abbbb4f 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.tsx
@@ -69,8 +69,8 @@ const Item = React.forwardRef<
         ) : null}
       </div>
       <RadioGroupPrimitive.Indicator className="absolute right-0 top-0 flex h-full w-full justify-end">
-        <div className="absolute h-full w-full rounded-md border-2 border-ds-blue" />
-        <div className="h-full w-full rounded-md border border-ds-blue p-4">
+        <div className="absolute h-full w-full rounded-md border-2 border-ds-blue-darker" />
+        <div className="h-full w-full rounded-md border border-ds-blue-darker p-4">
           <div className="flex h-5 w-full items-center justify-end">
             <RadioButtonCircle selected />
           </div>
@@ -87,7 +87,7 @@ export const RadioTileGroup = Object.assign(Group, {
 
 function RadioButtonCircle({ selected = false }: { selected?: boolean }) {
   return selected ? (
-    <div className="flex h-4 w-4 items-center justify-center rounded-full bg-ds-blue">
+    <div className="flex h-4 w-4 items-center justify-center rounded-full bg-ds-blue-darker">
       <div
         className="h-1 w-1 rounded-full bg-white "
         data-testid="radio-button-circle-selected"

From 838698bc19c81c96060df2d1866ed6be4506a543 Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Wed, 1 May 2024 17:49:16 -0400
Subject: [PATCH 04/12] Remove unnecessary styles

---
 src/ui/RadioTileGroup/RadioTileGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/RadioTileGroup/RadioTileGroup.tsx b/src/ui/RadioTileGroup/RadioTileGroup.tsx
index 731abbbb4f..da8567f617 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.tsx
@@ -68,7 +68,7 @@ const Item = React.forwardRef<
           <p className="text-left text-ds-gray-quinary">{description}</p>
         ) : null}
       </div>
-      <RadioGroupPrimitive.Indicator className="absolute right-0 top-0 flex h-full w-full justify-end">
+      <RadioGroupPrimitive.Indicator className="absolute right-0 top-0 h-full w-full">
         <div className="absolute h-full w-full rounded-md border-2 border-ds-blue-darker" />
         <div className="h-full w-full rounded-md border border-ds-blue-darker p-4">
           <div className="flex h-5 w-full items-center justify-end">

From bc22a9e4644db4dd8e239c72a783c40de6f4b7a9 Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Wed, 1 May 2024 17:50:07 -0400
Subject: [PATCH 05/12] Remove space

---
 src/ui/RadioTileGroup/RadioTileGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/RadioTileGroup/RadioTileGroup.tsx b/src/ui/RadioTileGroup/RadioTileGroup.tsx
index da8567f617..84cb245706 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.tsx
@@ -89,7 +89,7 @@ function RadioButtonCircle({ selected = false }: { selected?: boolean }) {
   return selected ? (
     <div className="flex h-4 w-4 items-center justify-center rounded-full bg-ds-blue-darker">
       <div
-        className="h-1 w-1 rounded-full bg-white "
+        className="h-1 w-1 rounded-full bg-white"
         data-testid="radio-button-circle-selected"
       />
     </div>

From e9737c7d35c61607dc3afe9ea312e309cc41a923 Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Thu, 2 May 2024 09:28:10 -0400
Subject: [PATCH 06/12] Add Title and Description subcomponents

---
 .../RadioTileGroup/RadioTileGroup.stories.tsx | 27 +++++---
 src/ui/RadioTileGroup/RadioTileGroup.tsx      | 64 +++++++++++++------
 2 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/src/ui/RadioTileGroup/RadioTileGroup.stories.tsx b/src/ui/RadioTileGroup/RadioTileGroup.stories.tsx
index 97e66f00f2..c49969b22d 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.stories.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.stories.tsx
@@ -33,9 +33,15 @@ export const Default: Story = {
   },
   render: (args) => (
     <RadioTileGroup className="w-full" direction={args.direction}>
-      <RadioTileGroup.Item value="radio" label="Radio" flex={args.flex} />
-      <RadioTileGroup.Item value="tile" label="Tile" flex={args.flex} />
-      <RadioTileGroup.Item value="group" label="Group" flex={args.flex} />
+      <RadioTileGroup.Item value="radio" flex={args.flex}>
+        <RadioTileGroup.Label>Radio</RadioTileGroup.Label>
+      </RadioTileGroup.Item>
+      <RadioTileGroup.Item value="tile" flex={args.flex}>
+        <RadioTileGroup.Label>Tile</RadioTileGroup.Label>
+      </RadioTileGroup.Item>
+      <RadioTileGroup.Item value="group" flex={args.flex}>
+        <RadioTileGroup.Label>Group</RadioTileGroup.Label>
+      </RadioTileGroup.Item>
     </RadioTileGroup>
   ),
 }
@@ -47,12 +53,15 @@ export const WithDescription: Story = {
   },
   render: (args) => (
     <RadioTileGroup className="w-full" direction={args.direction}>
-      <RadioTileGroup.Item
-        value="description"
-        label="Description"
-        description="A RadioTileGroup Item can optionally have a description"
-      />
-      <RadioTileGroup.Item value="noDescription" label="No Description" />
+      <RadioTileGroup.Item value="description" flex={args.flex}>
+        <RadioTileGroup.Label>Description</RadioTileGroup.Label>
+        <RadioTileGroup.Description>
+          A RadioTileGroup Item can optionally have a description
+        </RadioTileGroup.Description>
+      </RadioTileGroup.Item>
+      <RadioTileGroup.Item value="noDescription" flex={args.flex}>
+        <RadioTileGroup.Label>No Description</RadioTileGroup.Label>
+      </RadioTileGroup.Item>
     </RadioTileGroup>
   ),
 }
diff --git a/src/ui/RadioTileGroup/RadioTileGroup.tsx b/src/ui/RadioTileGroup/RadioTileGroup.tsx
index 84cb245706..992d60acd9 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.tsx
@@ -29,7 +29,42 @@ const Group = React.forwardRef<
     />
   )
 })
-Group.displayName = RadioGroupPrimitive.Root.displayName
+Group.displayName = 'RadioTileGroup'
+
+const label = cva(['font-medium'])
+interface LabelProps
+  extends React.HTMLAttributes<HTMLParagraphElement>,
+    VariantProps<typeof label> {}
+
+const Label = React.forwardRef<HTMLParagraphElement, LabelProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <div className="flex items-center justify-between gap-4">
+        <p ref={ref} className={label({ className })} {...props}>
+          {children}
+        </p>
+        <RadioButtonCircle />
+      </div>
+    )
+  }
+)
+Label.displayName = 'RadioTileGroup.Label'
+
+const description = cva(['text-left text-ds-gray-quinary'])
+interface DescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement>,
+    VariantProps<typeof description> {}
+
+const Description = React.forwardRef<HTMLParagraphElement, DescriptionProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <p ref={ref} className={description({ className })} {...props}>
+        {children}
+      </p>
+    )
+  }
+)
+Description.displayName = 'RadioTileGroup.Description'
 
 const item = cva(['relative'], {
   variants: {
@@ -44,15 +79,12 @@ const item = cva(['relative'], {
 })
 interface ItemProps
   extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
-    VariantProps<typeof item> {
-  label: string
-  description?: string
-}
+    VariantProps<typeof item> {}
 
 const Item = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
   ItemProps
->(({ className, label, description, flex, ...props }, ref) => {
+>(({ children, className, flex, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
@@ -60,13 +92,7 @@ const Item = React.forwardRef<
       {...props}
     >
       <div className="flex h-full flex-col gap-2 rounded-md border border-ds-gray-quaternary p-4">
-        <div className="flex items-center justify-between gap-4">
-          <p className="font-medium">{label}</p>
-          <RadioButtonCircle />
-        </div>
-        {description ? (
-          <p className="text-left text-ds-gray-quinary">{description}</p>
-        ) : null}
+        {children}
       </div>
       <RadioGroupPrimitive.Indicator className="absolute right-0 top-0 h-full w-full">
         <div className="absolute h-full w-full rounded-md border-2 border-ds-blue-darker" />
@@ -79,11 +105,7 @@ const Item = React.forwardRef<
     </RadioGroupPrimitive.Item>
   )
 })
-Item.displayName = RadioGroupPrimitive.Item.displayName
-
-export const RadioTileGroup = Object.assign(Group, {
-  Item,
-})
+Item.displayName = 'RadioTileGroup.Item'
 
 function RadioButtonCircle({ selected = false }: { selected?: boolean }) {
   return selected ? (
@@ -100,3 +122,9 @@ function RadioButtonCircle({ selected = false }: { selected?: boolean }) {
     />
   )
 }
+
+export const RadioTileGroup = Object.assign(Group, {
+  Item,
+  Label,
+  Description,
+})

From 7cd90ab2f9ab7550555ea0f5cf681995ce2dae06 Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Thu, 2 May 2024 09:36:25 -0400
Subject: [PATCH 07/12] Fix tests

---
 src/ui/RadioTileGroup/RadioTileGroup.spec.tsx | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
index 32e14cee14..9a3a9b5952 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
@@ -7,7 +7,7 @@ import { userEvent } from '@testing-library/user-event'
 
 import { RadioTileGroup } from './RadioTileGroup'
 
-describe('Card', () => {
+describe('RadioTileGroup', () => {
   function setup() {
     return {
       user: userEvent.setup(),
@@ -17,8 +17,12 @@ describe('Card', () => {
   it('renders', async () => {
     render(
       <RadioTileGroup>
-        <RadioTileGroup.Item value="asdf" label="Asdf" />
-        <RadioTileGroup.Item value="jkl;" label="Jkl;" />
+        <RadioTileGroup.Item value="asdf">
+          <RadioTileGroup.Label>Asdf</RadioTileGroup.Label>
+        </RadioTileGroup.Item>
+        <RadioTileGroup.Item value="jkl;">
+          <RadioTileGroup.Label>Jkl;</RadioTileGroup.Label>
+        </RadioTileGroup.Item>
       </RadioTileGroup>
     )
     const item1 = await screen.findByText('Asdf')
@@ -27,15 +31,16 @@ describe('Card', () => {
     expect(item2).toBeInTheDocument()
   })
 
-  describe('Item description', () => {
+  describe('with item description', () => {
     it('renders', async () => {
       render(
         <RadioTileGroup>
-          <RadioTileGroup.Item
-            value="asdf"
-            label="Asdf"
-            description="This is a description."
-          />
+          <RadioTileGroup.Item value="asdf">
+            <RadioTileGroup.Label>Asdf</RadioTileGroup.Label>
+            <RadioTileGroup.Description>
+              This is a description.
+            </RadioTileGroup.Description>
+          </RadioTileGroup.Item>
         </RadioTileGroup>
       )
       const description = await screen.findByText('This is a description.')
@@ -48,8 +53,12 @@ describe('Card', () => {
       const { user } = setup()
       render(
         <RadioTileGroup>
-          <RadioTileGroup.Item value="asdf" label="Asdf" />
-          <RadioTileGroup.Item value="jkl;" label="Jkl;" />
+          <RadioTileGroup.Item value="asdf">
+            <RadioTileGroup.Label>Asdf</RadioTileGroup.Label>
+          </RadioTileGroup.Item>
+          <RadioTileGroup.Item value="jkl;">
+            <RadioTileGroup.Label>Jkl;</RadioTileGroup.Label>
+          </RadioTileGroup.Item>
         </RadioTileGroup>
       )
       const tile = await screen.findByText('Asdf')

From 227d13c5fa01bfbf574117a10d656bf10a7c3125 Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Thu, 2 May 2024 09:38:14 -0400
Subject: [PATCH 08/12] Await user interactions in tests

---
 src/ui/RadioTileGroup/RadioTileGroup.spec.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
index 9a3a9b5952..00fec46a7f 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
@@ -64,12 +64,12 @@ describe('RadioTileGroup', () => {
       const tile = await screen.findByText('Asdf')
       const tile2 = await screen.findByText('Jkl;')
 
-      user.click(tile)
+      await user.click(tile)
 
       const selected = await screen.findByTestId('radio-button-circle-selected')
       expect(selected).toBeInTheDocument()
 
-      user.click(tile2)
+      await user.click(tile2)
 
       await waitForElementToBeRemoved(selected)
 

From 4200b6661a4b92db16841a2dbf7fba2fe8c2b99c Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Thu, 2 May 2024 09:44:00 -0400
Subject: [PATCH 09/12] Add controlled input story

---
 .../RadioTileGroup/RadioTileGroup.stories.tsx | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/ui/RadioTileGroup/RadioTileGroup.stories.tsx b/src/ui/RadioTileGroup/RadioTileGroup.stories.tsx
index c49969b22d..44015f3a70 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.stories.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
 
 import { RadioTileGroup } from './RadioTileGroup'
 
@@ -65,3 +66,36 @@ export const WithDescription: Story = {
     </RadioTileGroup>
   ),
 }
+
+export const WithControlledInput: Story = {
+  args: {
+    direction: 'row',
+    flex: 1,
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = useState<string | undefined>(undefined)
+
+    return (
+      <RadioTileGroup
+        className="w-full"
+        direction={args.direction}
+        value={value}
+        onValueChange={(value) => {
+          setValue(value)
+          // controlled input state isn't always required, you can also do things here ... like navigation etc.
+        }}
+      >
+        <RadioTileGroup.Item value="radio" flex={args.flex}>
+          <RadioTileGroup.Label>Radio</RadioTileGroup.Label>
+        </RadioTileGroup.Item>
+        <RadioTileGroup.Item value="tile" flex={args.flex}>
+          <RadioTileGroup.Label>Tile</RadioTileGroup.Label>
+        </RadioTileGroup.Item>
+        <RadioTileGroup.Item value="group" flex={args.flex}>
+          <RadioTileGroup.Label>Group</RadioTileGroup.Label>
+        </RadioTileGroup.Item>
+      </RadioTileGroup>
+    )
+  },
+}

From b27e6ce6904f91874a2cb206b39d68d3b06bb61e Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Thu, 2 May 2024 09:47:10 -0400
Subject: [PATCH 10/12] Fix test

---
 src/ui/RadioTileGroup/RadioTileGroup.spec.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
index 00fec46a7f..d5d454d461 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
@@ -1,8 +1,4 @@
-import {
-  render,
-  screen,
-  waitForElementToBeRemoved,
-} from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 
 import { RadioTileGroup } from './RadioTileGroup'
@@ -69,9 +65,7 @@ describe('RadioTileGroup', () => {
       const selected = await screen.findByTestId('radio-button-circle-selected')
       expect(selected).toBeInTheDocument()
 
-      await user.click(tile2)
-
-      await waitForElementToBeRemoved(selected)
+      await user.click(tile2) //asdf
 
       expect(selected).not.toBeInTheDocument()
 

From 3b0fe4a549129fd6338a5cf5497a4064b0c06ef5 Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Thu, 2 May 2024 11:42:16 -0400
Subject: [PATCH 11/12] Make item label a proper input label

---
 src/ui/RadioTileGroup/RadioTileGroup.spec.tsx |  26 ++++-
 src/ui/RadioTileGroup/RadioTileGroup.tsx      | 103 ++++++++++--------
 2 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
index d5d454d461..3ca9e473e5 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.spec.tsx
@@ -27,7 +27,29 @@ describe('RadioTileGroup', () => {
     expect(item2).toBeInTheDocument()
   })
 
-  describe('with item description', () => {
+  describe('item title', () => {
+    it('has htmlFor attribute when used inside Item', async () => {
+      render(
+        <RadioTileGroup>
+          <RadioTileGroup.Item value="test">
+            <RadioTileGroup.Label>Label</RadioTileGroup.Label>
+          </RadioTileGroup.Item>
+        </RadioTileGroup>
+      )
+      const label = await screen.findByText('Label')
+      expect(label).toBeInTheDocument()
+      expect(label.hasAttribute('for')).toBeTruthy()
+    })
+
+    it('does not have htmlFor attribute when used outside of Item', async () => {
+      render(<RadioTileGroup.Label>Label</RadioTileGroup.Label>)
+      const label = await screen.findByText('Label')
+      expect(label).toBeInTheDocument()
+      expect(label.hasAttribute('for')).toBeFalsy()
+    })
+  })
+
+  describe('item description', () => {
     it('renders', async () => {
       render(
         <RadioTileGroup>
@@ -65,7 +87,7 @@ describe('RadioTileGroup', () => {
       const selected = await screen.findByTestId('radio-button-circle-selected')
       expect(selected).toBeInTheDocument()
 
-      await user.click(tile2) //asdf
+      await user.click(tile2)
 
       expect(selected).not.toBeInTheDocument()
 
diff --git a/src/ui/RadioTileGroup/RadioTileGroup.tsx b/src/ui/RadioTileGroup/RadioTileGroup.tsx
index 992d60acd9..d12b62b2cd 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.tsx
@@ -1,6 +1,7 @@
+import * as LabelPrimitive from '@radix-ui/react-label'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { cva, VariantProps } from 'cva'
-import React from 'react'
+import React, { createContext, useContext, useId } from 'react'
 
 const group = cva(['flex', 'gap-4'], {
   variants: {
@@ -31,41 +32,6 @@ const Group = React.forwardRef<
 })
 Group.displayName = 'RadioTileGroup'
 
-const label = cva(['font-medium'])
-interface LabelProps
-  extends React.HTMLAttributes<HTMLParagraphElement>,
-    VariantProps<typeof label> {}
-
-const Label = React.forwardRef<HTMLParagraphElement, LabelProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <div className="flex items-center justify-between gap-4">
-        <p ref={ref} className={label({ className })} {...props}>
-          {children}
-        </p>
-        <RadioButtonCircle />
-      </div>
-    )
-  }
-)
-Label.displayName = 'RadioTileGroup.Label'
-
-const description = cva(['text-left text-ds-gray-quinary'])
-interface DescriptionProps
-  extends React.HTMLAttributes<HTMLParagraphElement>,
-    VariantProps<typeof description> {}
-
-const Description = React.forwardRef<HTMLParagraphElement, DescriptionProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <p ref={ref} className={description({ className })} {...props}>
-        {children}
-      </p>
-    )
-  }
-)
-Description.displayName = 'RadioTileGroup.Description'
-
 const item = cva(['relative'], {
   variants: {
     flex: {
@@ -80,33 +46,78 @@ const item = cva(['relative'], {
 interface ItemProps
   extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
     VariantProps<typeof item> {}
+const ItemContext = createContext<string | null>(null)
 
 const Item = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
   ItemProps
 >(({ children, className, flex, ...props }, ref) => {
+  const itemId = useId()
   return (
     <RadioGroupPrimitive.Item
+      id={itemId}
       ref={ref}
       className={item({ className, flex })}
       {...props}
     >
-      <div className="flex h-full flex-col gap-2 rounded-md border border-ds-gray-quaternary p-4">
-        {children}
-      </div>
-      <RadioGroupPrimitive.Indicator className="absolute right-0 top-0 h-full w-full">
-        <div className="absolute h-full w-full rounded-md border-2 border-ds-blue-darker" />
-        <div className="h-full w-full rounded-md border border-ds-blue-darker p-4">
-          <div className="flex h-5 w-full items-center justify-end">
-            <RadioButtonCircle selected />
-          </div>
+      <ItemContext.Provider value={itemId}>
+        <div className="flex h-full flex-col gap-2 rounded-md border border-ds-gray-quaternary p-4">
+          {children}
         </div>
-      </RadioGroupPrimitive.Indicator>
+        <RadioGroupPrimitive.Indicator className="absolute right-0 top-0 h-full w-full">
+          <div className="absolute h-full w-full rounded-md border-2 border-ds-blue-darker" />
+          <div className="h-full w-full rounded-md border border-ds-blue-darker p-4">
+            <div className="flex h-5 w-full items-center justify-end">
+              <RadioButtonCircle selected />
+            </div>
+          </div>
+        </RadioGroupPrimitive.Indicator>
+      </ItemContext.Provider>
     </RadioGroupPrimitive.Item>
   )
 })
 Item.displayName = 'RadioTileGroup.Item'
 
+const label = cva(['font-medium'])
+interface LabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,
+    VariantProps<typeof label> {}
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  LabelProps
+>(({ className, ...props }, ref) => {
+  const itemId = useContext(ItemContext)
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <LabelPrimitive.Root
+        {...{ htmlFor: itemId ?? undefined }}
+        ref={ref}
+        className={label({ className })}
+        {...props}
+      />
+      <RadioButtonCircle />
+    </div>
+  )
+})
+Label.displayName = 'RadioTileGroup.Label'
+
+const description = cva(['text-left text-ds-gray-quinary'])
+interface DescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement>,
+    VariantProps<typeof description> {}
+
+const Description = React.forwardRef<HTMLParagraphElement, DescriptionProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <p ref={ref} className={description({ className })} {...props}>
+        {children}
+      </p>
+    )
+  }
+)
+Description.displayName = 'RadioTileGroup.Description'
+
 function RadioButtonCircle({ selected = false }: { selected?: boolean }) {
   return selected ? (
     <div className="flex h-4 w-4 items-center justify-center rounded-full bg-ds-blue-darker">

From 63fda5527feccfd840d63cbc782dfa5a49f54fd4 Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Thu, 2 May 2024 16:35:43 -0400
Subject: [PATCH 12/12] Use cn util for styles

---
 src/ui/Card/Card.tsx                     | 14 ++++++++------
 src/ui/RadioTileGroup/RadioTileGroup.tsx | 10 ++++++----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/ui/Card/Card.tsx b/src/ui/Card/Card.tsx
index 80746718f9..a50719597f 100644
--- a/src/ui/Card/Card.tsx
+++ b/src/ui/Card/Card.tsx
@@ -1,6 +1,8 @@
 import { cva, VariantProps } from 'cva'
 import React from 'react'
 
+import { cn } from 'shared/utils/cn'
+
 const card = cva(['border border-ds-gray-secondary'])
 interface CardProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -8,7 +10,7 @@ interface CardProps
 
 const CardRoot = React.forwardRef<HTMLDivElement, CardProps>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={card({ className })} {...props} />
+    <div ref={ref} className={cn(card({ className }))} {...props} />
   )
 )
 CardRoot.displayName = 'Card'
@@ -20,7 +22,7 @@ interface HeaderProps
 
 const Header = React.forwardRef<HTMLDivElement, HeaderProps>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={header({ className })} {...props} />
+    <div ref={ref} className={cn(header({ className }))} {...props} />
   )
 )
 Header.displayName = 'Card.Header'
@@ -42,7 +44,7 @@ interface TitleProps
 
 const Title = React.forwardRef<HTMLParagraphElement, TitleProps>(
   ({ className, size, children, ...props }, ref) => (
-    <h3 ref={ref} className={title({ className, size })} {...props}>
+    <h3 ref={ref} className={cn(title({ className, size }))} {...props}>
       {children}
     </h3>
   )
@@ -56,7 +58,7 @@ interface DescriptionProps
 
 const Description = React.forwardRef<HTMLParagraphElement, DescriptionProps>(
   ({ className, ...props }, ref) => (
-    <p ref={ref} className={description({ className })} {...props} />
+    <p ref={ref} className={cn(description({ className }))} {...props} />
   )
 )
 Description.displayName = 'Card.Description'
@@ -68,7 +70,7 @@ interface ContentProps
 
 const Content = React.forwardRef<HTMLDivElement, ContentProps>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={content({ className })} {...props} />
+    <div ref={ref} className={cn(content({ className }))} {...props} />
   )
 )
 Content.displayName = 'Card.Content'
@@ -80,7 +82,7 @@ interface FooterProps
 
 const Footer = React.forwardRef<HTMLDivElement, FooterProps>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={footer({ className })} {...props} />
+    <div ref={ref} className={cn(footer({ className }))} {...props} />
   )
 )
 Footer.displayName = 'Card.Footer'
diff --git a/src/ui/RadioTileGroup/RadioTileGroup.tsx b/src/ui/RadioTileGroup/RadioTileGroup.tsx
index d12b62b2cd..d710301a4f 100644
--- a/src/ui/RadioTileGroup/RadioTileGroup.tsx
+++ b/src/ui/RadioTileGroup/RadioTileGroup.tsx
@@ -3,6 +3,8 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { cva, VariantProps } from 'cva'
 import React, { createContext, useContext, useId } from 'react'
 
+import { cn } from 'shared/utils/cn'
+
 const group = cva(['flex', 'gap-4'], {
   variants: {
     direction: {
@@ -24,7 +26,7 @@ const Group = React.forwardRef<
 >(({ className, direction, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
-      className={group({ className, direction })}
+      className={cn(group({ className, direction }))}
       {...props}
       ref={ref}
     />
@@ -57,7 +59,7 @@ const Item = React.forwardRef<
     <RadioGroupPrimitive.Item
       id={itemId}
       ref={ref}
-      className={item({ className, flex })}
+      className={cn(item({ className, flex }))}
       {...props}
     >
       <ItemContext.Provider value={itemId}>
@@ -93,7 +95,7 @@ const Label = React.forwardRef<
       <LabelPrimitive.Root
         {...{ htmlFor: itemId ?? undefined }}
         ref={ref}
-        className={label({ className })}
+        className={cn(label({ className }))}
         {...props}
       />
       <RadioButtonCircle />
@@ -110,7 +112,7 @@ interface DescriptionProps
 const Description = React.forwardRef<HTMLParagraphElement, DescriptionProps>(
   ({ children, className, ...props }, ref) => {
     return (
-      <p ref={ref} className={description({ className })} {...props}>
+      <p ref={ref} className={cn(description({ className }))} {...props}>
         {children}
       </p>
     )