diff --git a/.changeset/sixty-spies-drive.md b/.changeset/sixty-spies-drive.md new file mode 100644 index 000000000..498c8fcd9 --- /dev/null +++ b/.changeset/sixty-spies-drive.md @@ -0,0 +1,6 @@ +--- +"@hopper-ui/components": patch +--- + +- 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. 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; +}