asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(ui): Add checked style to RadioGroup.ChoiceBox (#7479)

Browse Source 
<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
This commit is contained in:
Kasper Fabricius Kristensen
2024-05-27 23:00:24 +02:00
committed by GitHub
parent 729c34b016
commit 2f20dbd50d
3 changed files with 10 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/admin-next/dashboard/src/routes/promotions/promotion-add-campaign/components/add-campaign-promotion-form/add-campaign-promotion-form.tsx
View File

@@ -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>

44
packages/admin-next/dashboard/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx
View File

@@ -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>

2
packages/design-system/ui/src/components/radio-group/radio-group.tsx
View File

@@ -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}