From 2f20dbd50d1a6a2a41d0211663444c1e00e6ca14 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 27 May 2024 23:00:24 +0200
Subject: [PATCH] fix(ui): Add checked style to RadioGroup.ChoiceBox (#7479)

<img width="362" alt="image" src="https://github.com/medusajs/medusa/assets/45367945/441ffdb3-557e-4eea-9fc0-b09a7a9e9d4a">

**What**
- Adds checked active shadow to component
- Cleans up usage of component in promotion domain

CLOSES CORE-2101, CORE-2075
---
 .../add-campaign-promotion-form.tsx           | 14 +-----
 .../create-promotion-form.tsx                 | 44 ++++---------------
 .../components/radio-group/radio-group.tsx    |  2 +-
 3 files changed, 10 insertions(+), 50 deletions(-)

diff --git a/packages/admin-next/dashboard/src/routes/promotions/promotion-add-campaign/components/add-campaign-promotion-form/add-campaign-promotion-form.tsx b/packages/admin-next/dashboard/src/routes/promotions/promotion-add-campaign/components/add-campaign-promotion-form/add-campaign-promotion-form.tsx
index e55390cd95..4e34106c89 100644
--- a/packages/admin-next/dashboard/src/routes/promotions/promotion-add-campaign/components/add-campaign-promotion-form/add-campaign-promotion-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/promotions/promotion-add-campaign/components/add-campaign-promotion-form/add-campaign-promotion-form.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { CampaignResponse, PromotionDTO } from "@medusajs/types"
-import { Button, clx, RadioGroup, Select, Text } from "@medusajs/ui"
+import { Button, RadioGroup, Select, Text } from "@medusajs/ui"
 import { useEffect } from "react"
 import { useForm, useWatch } from "react-hook-form"
 import { Trans, useTranslation } from "react-i18next"
@@ -67,10 +67,6 @@ export const AddCampaignPromotionFields = ({
                     value={"none"}
                     label={t("promotions.form.campaign.none.title")}
                     description={t("promotions.form.campaign.none.description")}
-                    className={clx("border", {
-                      "border border-ui-border-interactive":
-                        "none" === field.value,
-                    })}
                   />
 
                   <RadioGroup.ChoiceBox
@@ -79,10 +75,6 @@ export const AddCampaignPromotionFields = ({
                     description={t(
                       "promotions.form.campaign.existing.description"
                     )}
-                    className={clx("border", {
-                      "border border-ui-border-interactive":
-                        "existing" === field.value,
-                    })}
                   />
 
                   {withNewCampaign && (
@@ -92,10 +84,6 @@ export const AddCampaignPromotionFields = ({
                       description={t(
                         "promotions.form.campaign.new.description"
                       )}
-                      className={clx("border", {
-                        "border border-ui-border-interactive":
-                          "new" === field.value,
-                      })}
                     />
                   )}
                 </RadioGroup>
diff --git a/packages/admin-next/dashboard/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx b/packages/admin-next/dashboard/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx
index 324c6460f2..50f9cb23a1 100644
--- a/packages/admin-next/dashboard/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx
@@ -452,10 +452,6 @@ export const CreatePromotionForm = ({
                                 value={template.id}
                                 label={template.title}
                                 description={template.description}
-                                className={clx("border", {
-                                  "border border-ui-border-interactive":
-                                    template.id === field.value,
-                                })}
                               />
                             )
                           })}
@@ -505,10 +501,7 @@ export const CreatePromotionForm = ({
                             description={t(
                               "promotions.form.method.code.description"
                             )}
-                            className={clx("basis-1/2 border", {
-                              "border border-ui-border-interactive":
-                                "false" === field.value,
-                            })}
+                            className={clx("basis-1/2")}
                           />
 
                           <RadioGroup.ChoiceBox
@@ -517,10 +510,7 @@ export const CreatePromotionForm = ({
                             description={t(
                               "promotions.form.method.automatic.description"
                             )}
-                            className={clx("basis-1/2 border", {
-                              "border border-ui-border-interactive":
-                                "true" === field.value,
-                            })}
+                            className={clx("basis-1/2")}
                           />
                         </RadioGroup>
                       </Form.Control>
@@ -581,10 +571,7 @@ export const CreatePromotionForm = ({
                             description={t(
                               "promotions.form.type.standard.description"
                             )}
-                            className={clx("basis-1/2 border", {
-                              "border border-ui-border-interactive":
-                                "standard" === field.value,
-                            })}
+                            className={clx("basis-1/2")}
                           />
 
                           <RadioGroup.ChoiceBox
@@ -593,10 +580,7 @@ export const CreatePromotionForm = ({
                             description={t(
                               "promotions.form.type.buyget.description"
                             )}
-                            className={clx("basis-1/2 border", {
-                              "border border-ui-border-interactive":
-                                "buyget" === field.value,
-                            })}
+                            className={clx("basis-1/2")}
                           />
                         </RadioGroup>
                       </Form.Control>
@@ -642,10 +626,7 @@ export const CreatePromotionForm = ({
                             description={t(
                               "promotions.form.value_type.fixed.description"
                             )}
-                            className={clx("basis-1/2 border", {
-                              "border border-ui-border-interactive":
-                                "fixed" === field.value,
-                            })}
+                            className={clx("basis-1/2")}
                           />
 
                           <RadioGroup.ChoiceBox
@@ -656,10 +637,7 @@ export const CreatePromotionForm = ({
                             description={t(
                               "promotions.form.value_type.percentage.description"
                             )}
-                            className={clx("basis-1/2 border", {
-                              "border border-ui-border-interactive":
-                                "percentage" === field.value,
-                            })}
+                            className={clx("basis-1/2")}
                           />
                         </RadioGroup>
                       </Form.Control>
@@ -756,10 +734,7 @@ export const CreatePromotionForm = ({
                               description={t(
                                 "promotions.form.allocation.each.description"
                               )}
-                              className={clx("basis-1/2 border", {
-                                "border border-ui-border-interactive":
-                                  "each" === field.value,
-                              })}
+                              className={clx("basis-1/2")}
                             />
 
                             <RadioGroup.ChoiceBox
@@ -770,10 +745,7 @@ export const CreatePromotionForm = ({
                               description={t(
                                 "promotions.form.allocation.across.description"
                               )}
-                              className={clx("basis-1/2 border", {
-                                "border border-ui-border-interactive":
-                                  "across" === field.value,
-                              })}
+                              className={clx("basis-1/2")}
                             />
                           </RadioGroup>
                         </Form.Control>
diff --git a/packages/design-system/ui/src/components/radio-group/radio-group.tsx b/packages/design-system/ui/src/components/radio-group/radio-group.tsx
index 26b12362ea..1133e9b11f 100644
--- a/packages/design-system/ui/src/components/radio-group/radio-group.tsx
+++ b/packages/design-system/ui/src/components/radio-group/radio-group.tsx
@@ -95,7 +95,7 @@ const ChoiceBox = React.forwardRef<
     <Primitives.Item
       ref={ref}
       className={clx(
-        "shadow-borders-base bg-ui-bg-base focus-visible:shadow-borders-interactive-with-focus transition-fg disabled:bg-ui-bg-disabled group flex items-start gap-x-2 rounded-lg p-3 disabled:cursor-not-allowed",
+        "shadow-borders-base bg-ui-bg-base focus-visible:shadow-borders-interactive-with-focus outline-none transition-fg disabled:bg-ui-bg-disabled group flex items-start gap-x-2 rounded-lg p-3 disabled:cursor-not-allowed data-[state=checked]:shadow-borders-interactive-with-shadow",
         className
       )}
       {...props}