From 1ec20fc148e82f0fb0755c7907097edea5853553 Mon Sep 17 00:00:00 2001 From: Victor Trinh Date: Mon, 7 Oct 2024 16:05:39 -0400 Subject: [PATCH 1/2] [DS-352] Map Lozenge orbiter variants to Badge --- .changeset/sixty-spies-drive.md | 5 +++++ packages/components/src/Badge/src/Badge.tsx | 3 ++- .../components/src/Badge/utils/Badge.utils.ts | 16 ++++++++++++++++ .../src/buttons/src/EmbeddedButton.tsx | 16 +--------------- packages/components/src/tag/src/Tag.tsx | 3 ++- packages/components/src/tag/utils/Tag.utils.ts | 16 ++++++++++++++++ 6 files changed, 42 insertions(+), 17 deletions(-) create mode 100644 .changeset/sixty-spies-drive.md create mode 100644 packages/components/src/Badge/utils/Badge.utils.ts create mode 100644 packages/components/src/tag/utils/Tag.utils.ts diff --git a/.changeset/sixty-spies-drive.md b/.changeset/sixty-spies-drive.md new file mode 100644 index 000000000..4021c55a5 --- /dev/null +++ b/.changeset/sixty-spies-drive.md @@ -0,0 +1,5 @@ +--- +"@hopper-ui/components": patch +--- + +Map Lozenge Orbiter variants to Badge diff --git a/packages/components/src/Badge/src/Badge.tsx b/packages/components/src/Badge/src/Badge.tsx index 3175d7919..d6a8bc270 100644 --- a/packages/components/src/Badge/src/Badge.tsx +++ b/packages/components/src/Badge/src/Badge.tsx @@ -6,6 +6,7 @@ import { composeRenderProps, useContextProps } from "react-aria-components"; import { OverlineText } from "../../typography/OverlineText/index.ts"; import { ClearContainerSlots, composeClassnameRenderProps, cssModule, useRenderProps, type AccessibleSlotProps, type RenderProps } from "../../utils/index.ts"; +import { mapOrbiterToHopperVariants } from "../utils/Badge.utils.ts"; import { BadgeContext, type BadgeContextValue } from "./BadgeContext.ts"; @@ -114,7 +115,7 @@ function Badge(props: BadgeProps, ref: ForwardedRef) { data-hovered={isHovered || undefined} data-pressed={isPressed || undefined} data-selected={isSelected || undefined} - data-variant={variant} + data-variant={mapOrbiterToHopperVariants(variant)} > {!isDot && renderProps.children} diff --git a/packages/components/src/Badge/utils/Badge.utils.ts b/packages/components/src/Badge/utils/Badge.utils.ts new file mode 100644 index 000000000..aa27300c7 --- /dev/null +++ b/packages/components/src/Badge/utils/Badge.utils.ts @@ -0,0 +1,16 @@ +import type { BadgeVariant } from "../src/Badge.tsx"; + +// TODO: Remove this when Orbiter is not used anymore +type OrbiterVariant = "informative" | "warning" | "positive" | "negative"; + +function isOrbiterVariant(variant: BadgeVariant | OrbiterVariant): variant is OrbiterVariant { + return ["informative", "warning", "positive", "negative"].includes(variant); +} + +export function mapOrbiterToHopperVariants(variant: BadgeVariant | OrbiterVariant): BadgeVariant { + if (isOrbiterVariant(variant)) { + return "primary"; + } + + return variant; +} diff --git a/packages/components/src/buttons/src/EmbeddedButton.tsx b/packages/components/src/buttons/src/EmbeddedButton.tsx index 74c4b4190..6136d4710 100644 --- a/packages/components/src/buttons/src/EmbeddedButton.tsx +++ b/packages/components/src/buttons/src/EmbeddedButton.tsx @@ -15,6 +15,7 @@ import { } from "react-aria-components"; import type { TagVariant } from "../../tag/index.ts"; +import { mapOrbiterToHopperVariants } from "../../tag/utils/Tag.utils.ts"; import { SlotProvider, composeClassnameRenderProps, @@ -30,21 +31,6 @@ export const GlobalEmbeddedButtonCssSelector = "hop-EmbeddedButton"; export type EmbeddedButtonSize = "md" | "lg"; export type EmbeddedButtonVariant = TagVariant; -// TODO: Remove this when Orbiter is not used anymore -type OrbiterVariants = "informative" | "warning"; - -export function mapOrbiterToHopperVariants(variant: TagVariant | OrbiterVariants): TagVariant { - if (variant === "informative") { - return "option1"; - } - - if (variant === "warning") { - return "option6"; - } - - return variant; -} - export interface EmbeddedButtonProps extends StyledComponentProps { /** * Whether the EmbeddedButton should show a selected state. diff --git a/packages/components/src/tag/src/Tag.tsx b/packages/components/src/tag/src/Tag.tsx index 8649a333a..bb377fd95 100644 --- a/packages/components/src/tag/src/Tag.tsx +++ b/packages/components/src/tag/src/Tag.tsx @@ -12,7 +12,7 @@ import { Tag as RACTag, type TagProps as RACTagProps, composeRenderProps, useCon import { AvatarContext, type AvatarProps } from "../../Avatar/index.ts"; import { BadgeContext } from "../../Badge/index.ts"; -import { ClearButton, type ClearButtonProps, mapOrbiterToHopperVariants } from "../../buttons/index.ts"; +import { ClearButton, type ClearButtonProps } from "../../buttons/index.ts"; import { useLocalizedString } from "../../i18n/index.ts"; import { IconListContext } from "../../IconList/index.ts"; import { Spinner, type SpinnerProps } from "../../Spinner/index.ts"; @@ -25,6 +25,7 @@ import { composeClassnameRenderProps, cssModule } from "../../utils/index.ts"; +import { mapOrbiterToHopperVariants } from "../utils/Tag.utils.ts"; import { TagContext } from "./TagContext.ts"; diff --git a/packages/components/src/tag/utils/Tag.utils.ts b/packages/components/src/tag/utils/Tag.utils.ts new file mode 100644 index 000000000..769c2d1e5 --- /dev/null +++ b/packages/components/src/tag/utils/Tag.utils.ts @@ -0,0 +1,16 @@ +import type { TagVariant } from "../src/Tag.tsx"; + +// TODO: Remove this when Orbiter is not used anymore +type OrbiterVariant = "informative" | "warning"; + +export function mapOrbiterToHopperVariants(variant: TagVariant | OrbiterVariant): TagVariant { + if (variant === "informative") { + return "option1"; + } + + if (variant === "warning") { + return "option6"; + } + + return variant; +} From 265e9972d1f26a1cc40720b0e8b64111a0439c92 Mon Sep 17 00:00:00 2001 From: Victor Trinh Date: Tue, 8 Oct 2024 09:21:55 -0400 Subject: [PATCH 2/2] Make changeset more readable for users --- .changeset/sixty-spies-drive.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/sixty-spies-drive.md b/.changeset/sixty-spies-drive.md index 4021c55a5..498c8fcd9 100644 --- a/.changeset/sixty-spies-drive.md +++ b/.changeset/sixty-spies-drive.md @@ -2,4 +2,5 @@ "@hopper-ui/components": patch --- -Map Lozenge Orbiter variants to Badge +- To ease the transition from Orbiter to Hopper, we want to be able to replace the Lozenge component from Orbiter with the one from Hopper. We have mapped Lozenge variants to their corresponding Badge variants for temporary compatibility. +- Also moved the temporary mapping functions to utils files for maintainability and readability.