From 2f37530c58e4ecdbaa86c2b6a0ab413036e21f4b Mon Sep 17 00:00:00 2001 From: Olaf Kappes Date: Thu, 13 Nov 2025 19:34:36 +0100 Subject: [PATCH 01/10] feat: badge component Signed-off-by: Olaf Kappes --- .../common/qds-core/src/badge/badge.api.ts | 77 ++++ .../qds-core/src/badge/badge.classes.ts | 7 + .../common/qds-core/src/badge/badge.types.ts | 203 +++++++++++ packages/common/qds-core/src/badge/index.ts | 3 + .../common/qds-core/src/badge/qds-badge.css | 341 ++++++++++++++++++ .../src/routes/components+/badge+/_badge.mdx | 130 +++++++ .../badge+/demos/badge-count-demo.ts | 18 + .../badge+/demos/badge-count-max-demo.ts | 19 + .../badge+/demos/badge-count-sizes-demo.ts | 18 + .../badge+/demos/badge-count-variants-demo.ts | 25 ++ .../badge+/demos/badge-disabled-demo.ts | 17 + .../badge+/demos/badge-icon-demo.ts | 24 ++ .../badge+/demos/badge-icon-emphasis-demo.ts | 24 ++ .../badge+/demos/badge-icon-sizes-demo.ts | 24 ++ .../badge+/demos/badge-icon-variants-demo.ts | 60 +++ .../demos/badge-status-emphasis-demo.ts | 21 ++ .../badge+/demos/badge-status-sizes-demo.ts | 20 + .../demos/badge-status-variants-demo.ts | 21 ++ .../badge+/demos/badge-text-demo.ts | 18 + .../badge+/demos/badge-text-emphasis-demo.ts | 33 ++ .../badge+/demos/badge-text-sizes-demo.ts | 18 + .../badge+/demos/badge-text-variants-demo.ts | 33 ++ .../src/components/demo/lazy-demo-loader.ts | 2 + .../src/routes/components+/badge+/_badge.mdx | 149 ++++++++ .../badge+/demos/badge-count-demo.tsx | 15 + .../badge+/demos/badge-count-max-demo.tsx | 16 + .../badge+/demos/badge-count-sizes-demo.tsx | 15 + .../demos/badge-count-variants-demo.tsx | 22 ++ .../badge+/demos/badge-disabled-demo.tsx | 16 + .../badge+/demos/badge-icon-demo.tsx | 20 + .../badge+/demos/badge-icon-emphasis-demo.tsx | 20 + .../badge+/demos/badge-icon-sizes-demo.tsx | 20 + .../badge+/demos/badge-icon-variants-demo.tsx | 20 + .../demos/badge-status-emphasis-demo.tsx | 18 + .../badge+/demos/badge-status-sizes-demo.tsx | 17 + .../demos/badge-status-variants-demo.tsx | 18 + .../badge+/demos/badge-text-demo.tsx | 15 + .../badge+/demos/badge-text-emphasis-demo.tsx | 30 ++ .../badge+/demos/badge-text-sizes-demo.tsx | 15 + .../badge+/demos/badge-text-variants-demo.tsx | 62 ++++ .../angular/src/badge/badge.directive.ts | 195 ++++++++++ .../frameworks/angular/src/badge/index.ts | 7 + .../src/badge/qds-badge-context.service.ts | 23 ++ packages/frameworks/react/src/badge/badge.tsx | 152 ++++++++ packages/frameworks/react/src/badge/index.ts | 1 + 45 files changed, 2022 insertions(+) create mode 100644 packages/common/qds-core/src/badge/badge.api.ts create mode 100644 packages/common/qds-core/src/badge/badge.classes.ts create mode 100644 packages/common/qds-core/src/badge/badge.types.ts create mode 100644 packages/common/qds-core/src/badge/index.ts create mode 100644 packages/common/qds-core/src/badge/qds-badge.css create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-max-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-disabled-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.ts create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/_badge.mdx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-max-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-disabled-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.tsx create mode 100644 packages/frameworks/angular/src/badge/badge.directive.ts create mode 100644 packages/frameworks/angular/src/badge/index.ts create mode 100644 packages/frameworks/angular/src/badge/qds-badge-context.service.ts create mode 100644 packages/frameworks/react/src/badge/badge.tsx create mode 100644 packages/frameworks/react/src/badge/index.ts diff --git a/packages/common/qds-core/src/badge/badge.api.ts b/packages/common/qds-core/src/badge/badge.api.ts new file mode 100644 index 000000000..bd6d7f5a4 --- /dev/null +++ b/packages/common/qds-core/src/badge/badge.api.ts @@ -0,0 +1,77 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import {booleanDataAttr} from "@qualcomm-ui/utils/attributes" +import type {PropNormalizer} from "@qualcomm-ui/utils/machine" + +import {badgeClasses} from "./badge.classes" +import type { + QdsBadgeApi, + QdsBadgeApiProps, + QdsBadgeCountProps, + QdsBadgeIconBindings, + QdsBadgeIconProps, + QdsBadgeRootBindings, + QdsBadgeStatusProps, + QdsBadgeTextProps, +} from "./badge.types" + +export function createQdsBadgeApi( + props: QdsBadgeApiProps, + normalize: PropNormalizer, +): QdsBadgeApi { + const type = props.type || "text" + const size = props.size || "md" + + let emphasis: string | undefined + let variant: string | undefined + let overflow = false + let displayCount: number | string | null = null + + if (type === "count") { + const countProps = props as QdsBadgeCountProps + variant = countProps.variant || "neutral" + if (countProps.count != null) { + const max = countProps.max ?? 99 + overflow = countProps.count > max + displayCount = overflow ? `${max}+` : countProps.count + } + } else if (type === "status") { + emphasis = (props as QdsBadgeStatusProps).emphasis || "neutral" + variant = (props as QdsBadgeStatusProps).variant || "filled" + } else if (type === "icon") { + emphasis = (props as QdsBadgeIconProps).emphasis || "neutral" + variant = (props as QdsBadgeIconProps).variant || "default" + } else { + emphasis = (props as QdsBadgeTextProps).emphasis || "neutral" + variant = (props as QdsBadgeTextProps).variant || "default" + } + + return { + getDisplayCount(): number | string | null { + return displayCount + }, + getIconBindings(): QdsBadgeIconBindings { + return normalize.element({ + className: badgeClasses.icon, + "data-part": "icon", + "data-scope": "badge", + "data-size": size, + }) + }, + getRootBindings(): QdsBadgeRootBindings { + return normalize.element({ + className: badgeClasses.root, + "data-disabled": booleanDataAttr(props.disabled), + "data-emphasis": emphasis, + "data-overflow": booleanDataAttr(overflow), + "data-part": "root", + "data-scope": "badge", + "data-size": size, + "data-type": type, + "data-variant": variant, + }) + }, + type, + } +} diff --git a/packages/common/qds-core/src/badge/badge.classes.ts b/packages/common/qds-core/src/badge/badge.classes.ts new file mode 100644 index 000000000..5b94bf2f2 --- /dev/null +++ b/packages/common/qds-core/src/badge/badge.classes.ts @@ -0,0 +1,7 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +export const badgeClasses = { + icon: "qui-badge__icon", + root: "qui-badge__root", +} as const diff --git a/packages/common/qds-core/src/badge/badge.types.ts b/packages/common/qds-core/src/badge/badge.types.ts new file mode 100644 index 000000000..6a3a11f9b --- /dev/null +++ b/packages/common/qds-core/src/badge/badge.types.ts @@ -0,0 +1,203 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes" + +import type {badgeClasses} from "./badge.classes" + +export type QdsBadgeType = "count" | "icon" | "text" | "status" + +export type QdsBadgeBasicSize = "sm" | "md" | "lg" +export type QdsBadgeExtendedSize = "xs" | QdsBadgeBasicSize | "xl" +export type QdsBadgeIconSize = "xxs" | QdsBadgeExtendedSize + +export type QdsBadgeSize = + | QdsBadgeBasicSize + | QdsBadgeExtendedSize + | QdsBadgeIconSize + +export type QdsBadgeSemanticEmphasis = + | "neutral" + | "brand" + | "info" + | "success" + | "warning" + | "danger" + +export type QdsBadgeCategoryEmphasis = + | "cat-1" + | "cat-2" + | "cat-3" + | "cat-4" + | "cat-5" + | "cat-6" + | "cat-7" + | "cat-8" + | "cat-9" + | "cat-10" + +export type QdsBadgeCountVariant = + | "neutral" + | "neutral-outline" + | "brand" + | "brand-outline" + | "info" + | "success" + | "warning" + | "danger" + | "persistent-black" + | "persistent-white" + +export type QdsBadgeStatusEmphasis = QdsBadgeSemanticEmphasis +export type QdsBadgeStatusVariant = "filled" | "outlined" + +export type QdsBadgeIconTextEmphasis = + | QdsBadgeSemanticEmphasis + | QdsBadgeCategoryEmphasis +export type QdsBadgeIconTextVariant = "default" | "subtle" + +interface QdsBadgeBaseProps { + /** + * The badge disabled state. + */ + disabled?: boolean +} + +export interface QdsBadgeCountProps extends QdsBadgeBaseProps { + /** + * The numeric count to display. + */ + count?: number + + /** + * Maximum count to display. + * @default 99 + */ + max?: number + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeBasicSize + + /** + * The badge type. + */ + type: "count" + + /** + * Governs the color and style of the count badge. + * @default 'neutral' + */ + variant?: QdsBadgeCountVariant +} + +export interface QdsBadgeStatusProps extends QdsBadgeBaseProps { + /** + * Governs the color of the status badge. + * @default 'neutral' + */ + emphasis?: QdsBadgeStatusEmphasis + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeExtendedSize + + /** + * The badge type. + */ + type: "status" + + /** + * Governs the style of the status badge. + * @default 'filled' + */ + variant?: QdsBadgeStatusVariant +} + +export interface QdsBadgeIconProps extends QdsBadgeBaseProps { + /** + * Governs the color of the icon badge. + * @default 'neutral' + */ + emphasis?: QdsBadgeIconTextEmphasis + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeIconSize + + /** + * The badge type. + */ + type: "icon" + + /** + * Governs the style of the icon badge. + * @default 'default' + */ + variant?: QdsBadgeIconTextVariant +} + +export interface QdsBadgeTextProps extends QdsBadgeBaseProps { + /** + * Governs the color of the text badge. + * @default 'neutral' + */ + emphasis?: QdsBadgeIconTextEmphasis + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeBasicSize + + /** + * The badge type. + */ + type?: "text" + + /** + * Governs the style of the text badge. + * @default 'default' + */ + variant?: QdsBadgeIconTextVariant +} + +export type QdsBadgeApiProps = + | QdsBadgeCountProps + | QdsBadgeStatusProps + | QdsBadgeIconProps + | QdsBadgeTextProps + +type BadgeClasses = typeof badgeClasses + +export interface QdsBadgeRootBindings { + className: BadgeClasses["root"] + "data-disabled": BooleanDataAttr + "data-emphasis"?: string + "data-overflow": BooleanDataAttr + "data-part": "root" + "data-scope": "badge" + "data-size": QdsBadgeSize + "data-type": QdsBadgeType + "data-variant"?: string +} + +export interface QdsBadgeIconBindings { + className: BadgeClasses["icon"] + "data-part": "icon" + "data-scope": "badge" + "data-size": QdsBadgeSize +} + +export interface QdsBadgeApi { + getDisplayCount(): number | string | null + getIconBindings(): QdsBadgeIconBindings + getRootBindings(): QdsBadgeRootBindings + type: QdsBadgeType +} diff --git a/packages/common/qds-core/src/badge/index.ts b/packages/common/qds-core/src/badge/index.ts new file mode 100644 index 000000000..3fb2cb867 --- /dev/null +++ b/packages/common/qds-core/src/badge/index.ts @@ -0,0 +1,3 @@ +export * from "./badge.api" +export * from "./badge.classes" +export type * from "./badge.types" diff --git a/packages/common/qds-core/src/badge/qds-badge.css b/packages/common/qds-core/src/badge/qds-badge.css new file mode 100644 index 000000000..6fb79221a --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-badge.css @@ -0,0 +1,341 @@ +/* common stuff and sizes */ + +.qui-badge__root { + align-items: center; + display: inline-flex; + justify-content: center; + line-height: 1; + cursor: default; + + &[data-size="xxs"] { + --status-size: var(--sizing-40); + --icon-radius: var(--border-radius-xs); + --icon-size: var(--sizing-60); + } + + &[data-size="xs"] { + --status-size: var(--sizing-40); + --icon-radius: var(--border-radius-xs); + --icon-size: var(--sizing-70); + } + + &[data-size="sm"] { + border-radius: var(--border-radius-xs); + font: var(--font-static-body-xs-default); + padding: var(--spacing-10) var(--spacing-40); + --count-size: var(--sizing-80); + --status-size: var(--sizing-50); + --icon-radius: var(--border-radius-sm); + --icon-size: var(--sizing-80); + } + + &[data-size="md"] { + border-radius: var(--border-radius-sm); + font: var(--font-static-body-sm-default); + padding: var(--spacing-20) var(--spacing-50); + --count-size: var(--sizing-90); + --status-size: var(--sizing-60); + --icon-radius: var(--border-radius-sm); + --icon-size: var(--sizing-90); + } + + &[data-size="lg"] { + border-radius: var(--border-radius-sm); + font: var(--font-static-body-md-default); + padding: var(--spacing-40) var(--spacing-70); + --count-size: var(--sizing-120); + --status-size: var(--sizing-70); + --icon-radius: var(--border-radius-md); + --icon-size: var(--sizing-120); + } + + &[data-size="xl"] { + --status-size: var(--sizing-80); + --icon-radius: var(--border-radius-lg); + --icon-size: var(--sizing-140); + } + + &[data-type="count"] { + border-radius: var(--border-radius-rounded); + block-size: var(--count-size); + min-inline-size: var(--count-size); + padding: 0; + &[data-overflow] { + padding: 0 var(--spacing-50); + } + } + + &[data-type="status"] { + border-radius: var(--border-radius-rounded); + height: var(--status-size); + min-width: var(--status-size); + padding: 0; + width: var(--status-size); + } + + &[data-type="icon"] { + border-radius: var(--icon-radius); + &[data-size="xxs"], + &[data-size="xs"], + &[data-size="sm"] { + padding: var(--spacing-20); + } + &[data-size="md"] { + padding: var(--spacing-40); + } + &[data-size="lg"] { + padding: var(--spacing-50); + } + &[data-size="xl"] { + padding: var(--spacing-60); + } + } + + /* MOAR SPECIFICITY */ + &[data-disabled][data-disabled][data-disabled] { + background: var(--color-utility-disabled-background); + border-color: var(--color-utility-disabled-border); + color: var(--color-utility-disabled-text); + --icon-color: var(--color-utility-disabled-icon); + } +} + +/* text/icon common stuff */ +.qui-badge__root[data-variant="default"], +.qui-badge__root[data-variant="subtle"] { + color: var(--badge-text); + background: var(--badge-background); + border: solid var(--border-size, 0) var(--badge-border); +} + +/* text/icon default variant */ +.qui-badge__root[data-variant="default"] { + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-neutral-10); + --badge-text: var(--color-text-neutral-inverse); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning); + --badge-text: var(--color-utility-persistent-black); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-1"] { + --badge-background: var(--color-category-1-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-2"] { + --badge-background: var(--color-category-2-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-3"] { + --badge-background: var(--color-category-3-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-4"] { + --badge-background: var(--color-category-4-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-5"] { + --badge-background: var(--color-category-5-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-6"] { + --badge-background: var(--color-category-6-strong); + --badge-text: var(--color-utility-persistent-black); + } + &[data-emphasis="cat-7"] { + --badge-background: var(--color-category-7-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-8"] { + --badge-background: var(--color-category-8-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-9"] { + --badge-background: var(--color-category-9-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-10"] { + --badge-background: var(--color-category-10-strong); + --badge-text: var(--color-utility-persistent-white); + } +} + +/* text/icon subtle variant */ +.qui-badge__root[data-variant="subtle"] { + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-support-neutral); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-1"] { + --badge-background: var(--color-category-1-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-2"] { + --badge-background: var(--color-category-2-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-3"] { + --badge-background: var(--color-category-3-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-4"] { + --badge-background: var(--color-category-4-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-5"] { + --badge-background: var(--color-category-5-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-6"] { + --badge-background: var(--color-category-6-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-7"] { + --badge-background: var(--color-category-7-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-8"] { + --badge-background: var(--color-category-8-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-9"] { + --badge-background: var(--color-category-9-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-10"] { + --badge-background: var(--color-category-10-subtle); + --badge-text: var(--color-text-neutral-primary); + } +} + +/* count variants */ +.qui-badge__root[data-type="count"] { + color: var(--badge-text); + background: var(--badge-background); + border: solid var(--border-size, 0) var(--badge-border); + + &[data-variant="neutral"] { + --badge-background: var(--color-background-support-neutral); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="neutral-outline"] { + --badge-background: transparent; + --badge-border: var(--color-border-support-neutral); + --badge-text: var(--color-text-neutral-primary); + --border-size: 1px; + } + &[data-variant="brand"] { + --badge-background: var(--color-background-brand-primary); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="brand-outline"] { + --badge-background: transparent; + --badge-border: var(--color-border-support-neutral); + --badge-text: var(--color-text-brand-primary); + --border-size: 1px; + } + &[data-variant="info"] { + --badge-background: var(--color-background-support-info); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="success"] { + --badge-background: var(--color-background-support-success); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="warning"] { + --badge-background: var(--color-background-support-warning); + --badge-text: var(--color-utility-persistent-black); + } + &[data-variant="danger"] { + --badge-background: var(--color-background-support-danger); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="persistent-black"] { + --badge-background: var(--color-utility-persistent-black); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="persistent-white"] { + --badge-background: var(--color-utility-persistent-white); + --badge-text: var(--color-utility-persistent-black); + } +} + +/* status emphasis (filled/outlined) */ +.qui-badge__root[data-type="status"] { + color: var(--badge-text); + background: var(--badge-background); + border: solid var(--border-size, 0) var(--badge-background); + + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-support-neutral); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger); + } +} + +/* status outlined variant */ +.qui-badge__root[data-type="status"][data-variant="outlined"] { + background: transparent; + border-width: 1px; +} + +/* icon overrides - higher specificity than .qui-icon__root[data-size] rules */ +.qui-badge__icon[data-scope="badge"] { + color: var(--icon-color, inherit); + --icon-size: inherit; +} + +/* style custom SVG children in icon badges */ +.qui-badge__icon[data-scope="badge"] > svg { + inline-size: var(--icon-size); + block-size: var(--icon-size); +} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx b/packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx new file mode 100644 index 000000000..12a05978b --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx @@ -0,0 +1,130 @@ +--- +title: Badge +group: Data Display +--- + +import {QdsDemo} from "~components/demo" +import { + TypeDocProps, + TypeDocAngularAttributes, +} from "@qualcomm-ui/react-mdx/typedoc" + +# {frontmatter.title} + +Badges provide immediate visual context through color-coded indicators that help users quickly identify status, priority levels, or content categories. They're designed to be concise, accessible, and consistent across desktop and mobile experiences. Use badges to draw attention to important information without overwhelming the interface. + +```typescript +import {BadgeDirective} from "@qualcomm-ui/angular/badge" +``` + +Badge supports four distinct types via the `type` input: `text`, `count`, `icon`, and `status`. + +## Text Badges + +Text badges display text labels and are the default badge type. + + + +### Emphasis + +Text badges support semantic and category emphasis via the [textEmphasis](./#textEmphasis) input. Semantic emphasis options include `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. + + + +### Variant + +Control the visual weight with the [textVariant](./#textVariant) input. Text badges support `default` (bolder appearance) and `subtle` (lighter appearance) variants. + + + +### Sizes + +Change the text badge dimensions using the [size](./#size) input. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +## Count Badges + +Count badges display numeric values. Use the [count](./#count) input for auto formatting, or use content projection for manual content. + + + +### Auto Formatting + +When using the [count](./#count) input with [max](./#max), the badge automatically formats overflow values. If count exceeds max, the badge displays "max+" and applies special styling. The default max is 99. + + + +### Variants + +Count badges support multiple variants via the [countVariant](./#countVariant) input: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. + + + +### Sizes + +Change the count badge dimensions using the [size](./#size) input. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +## Icon Badges + +Icon badges display icons. Use the [icon](./#icon) input to provide a Lucide icon name, or use content projection for custom SVG content. + + + +### Emphasis + +Icon badges support the same semantic and category emphasis options as text badges via the [iconEmphasis](./#iconEmphasis) input. + + + +### Variant + +Icon badges support `default` and `subtle` variants via the [iconVariant](./#iconVariant) input. + + + +### Sizes + +Change the icon badge dimensions using the [size](./#size) input. Six sizes are available: `xxs`, `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +## Status Badges + +Status badges display a colored dot indicator with no content. They're useful for showing online/offline status or availability states. + +### Emphasis + +Status badges support semantic emphasis via the [statusEmphasis](./#statusEmphasis) input: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. + + + +### Variant + +Control the style with the [statusVariant](./#statusVariant) input. Status badges support `filled` (default) and `outlined` variants. + + + +### Sizes + +Change the status badge dimensions using the [size](./#size) input. Five sizes are available: `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +## Common Properties + +### Disabled + +All badge types have a disabled state that can be set by the `disabled` input. + + + +## API + +### q-badge + + + + diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-demo.ts new file mode 100644 index 000000000..b6ef595b4 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-demo.ts @@ -0,0 +1,18 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-count-demo", + template: ` +
+ + 42 + + + +
+ `, +}) +export class BadgeCountDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-max-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-max-demo.ts new file mode 100644 index 000000000..2809e9c39 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-max-demo.ts @@ -0,0 +1,19 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-count-max-demo", + template: ` +
+ + + + + + +
+ `, +}) +export class BadgeCountMaxDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.ts new file mode 100644 index 000000000..1f7d354e8 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.ts @@ -0,0 +1,18 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-count-sizes-demo", + template: ` +
+ + + + + +
+ `, +}) +export class BadgeCountSizesDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.ts new file mode 100644 index 000000000..91085bd9e --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.ts @@ -0,0 +1,25 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-count-variants-demo", + template: ` +
+ + + + + + + + + + + + +
+ `, +}) +export class BadgeCountVariantsDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-disabled-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-disabled-demo.ts new file mode 100644 index 000000000..f64b6fc6b --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-disabled-demo.ts @@ -0,0 +1,17 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-disabled-demo", + template: ` +
+ + Enabled + Disabled + +
+ `, +}) +export class BadgeDisabledDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-demo.ts new file mode 100644 index 000000000..864ff1443 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-demo.ts @@ -0,0 +1,24 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [BadgeDirective], + providers: [provideIcons({Star})], + selector: "badge-icon-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class BadgeIconDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.ts new file mode 100644 index 000000000..45d9ef383 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.ts @@ -0,0 +1,24 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [BadgeDirective], + providers: [provideIcons({Star})], + selector: "badge-icon-emphasis-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class BadgeIconEmphasisDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.ts new file mode 100644 index 000000000..4c43ff229 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.ts @@ -0,0 +1,24 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [BadgeDirective], + providers: [provideIcons({Star})], + selector: "badge-icon-sizes-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class BadgeIconSizesDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.ts new file mode 100644 index 000000000..389060716 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.ts @@ -0,0 +1,60 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [BadgeDirective], + providers: [provideIcons({Star})], + selector: "badge-icon-variants-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class BadgeIconVariantsDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.ts new file mode 100644 index 000000000..15c09e635 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.ts @@ -0,0 +1,21 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-status-emphasis-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class BadgeStatusEmphasisDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.ts new file mode 100644 index 000000000..47c5914cc --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.ts @@ -0,0 +1,20 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-status-sizes-demo", + template: ` +
+ + + + + + + +
+ `, +}) +export class BadgeStatusSizesDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.ts new file mode 100644 index 000000000..44a3a8cb0 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.ts @@ -0,0 +1,21 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-status-variants-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class BadgeStatusVariantsDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-demo.ts new file mode 100644 index 000000000..e5f9f41c8 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-demo.ts @@ -0,0 +1,18 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-text-demo", + template: ` +
+ + New + Pro + Beta + +
+ `, +}) +export class BadgeTextDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.ts new file mode 100644 index 000000000..72014a625 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.ts @@ -0,0 +1,33 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-text-emphasis-demo", + template: ` +
+
+ Neutral + Brand + Info + Success + Warning + Danger +
+
+ Cat 1 + Cat 2 + Cat 3 + Cat 4 + Cat 5 + Cat 6 + Cat 7 + Cat 8 + Cat 9 + Cat 10 +
+
+ `, +}) +export class BadgeTextEmphasisDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.ts new file mode 100644 index 000000000..4d58eae19 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.ts @@ -0,0 +1,18 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-text-sizes-demo", + template: ` +
+ + Small + Medium + Large + +
+ `, +}) +export class BadgeTextSizesDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.ts new file mode 100644 index 000000000..1e6c357a1 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.ts @@ -0,0 +1,33 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "badge-text-variants-demo", + template: ` +
+
+ Neutral + Brand + Info + Success + Warning + Danger +
+
+ Cat 1 + Cat 2 + Cat 3 + Cat 4 + Cat 5 + Cat 6 + Cat 7 + Cat 8 + Cat 9 + Cat 10 +
+
+ `, +}) +export class BadgeTextVariantsDemo {} diff --git a/packages/docs/react-docs/src/components/demo/lazy-demo-loader.ts b/packages/docs/react-docs/src/components/demo/lazy-demo-loader.ts index 748ae8429..f232bedde 100644 --- a/packages/docs/react-docs/src/components/demo/lazy-demo-loader.ts +++ b/packages/docs/react-docs/src/components/demo/lazy-demo-loader.ts @@ -12,6 +12,8 @@ export const lazyDemos: Record< import("virtual:qui-demo-scope/page:components+/accordion+"), "/components/avatar": () => import("virtual:qui-demo-scope/page:components+/avatar+"), + "/components/badge": () => + import("virtual:qui-demo-scope/page:components+/badge+"), "/components/breadcrumbs": () => import("virtual:qui-demo-scope/page:components+/breadcrumbs+"), "/components/button": () => diff --git a/packages/docs/react-docs/src/routes/components+/badge+/_badge.mdx b/packages/docs/react-docs/src/routes/components+/badge+/_badge.mdx new file mode 100644 index 000000000..abfc7e0f2 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/_badge.mdx @@ -0,0 +1,149 @@ +--- +title: Badge +group: Data Display +--- + +import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" +import {QdsDemo} from "~components/demo" + +# {frontmatter.title} + +Badges provide immediate visual context through color-coded indicators that help users quickly identify status, priority levels, or content categories. They're designed to be concise, accessible, and consistent across desktop and mobile experiences. Use badges to draw attention to important information without overwhelming the interface. + +```typescript +import {Badge} from "@qualcomm-ui/react/badge" +``` + +Badge supports four distinct types via the `type` prop: `text`, `count`, `icon`, and `status`. + +## Text Badges + +Text badges display text labels and are the default badge type. + + + +### Emphasis + +Text badges support semantic and category emphasis via the [emphasis](./#emphasis-3) prop. Semantic emphasis options include `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. + + + +### Variant + +Control the visual weight with the [variant](./#variant-3) prop. Text badges support `default` (bolder appearance) and `subtle` (lighter appearance) variants. + + + +### Sizes + +Change the text badge dimensions using the [size](./#size) prop. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +## Count Badges + +Count badges display numeric values. Use the [count](./#count) prop for auto formatting, or use [children](./#children-1) for manual content. + + + +### Auto Formatting + +When using the [count](./#count) prop with [max](./#max), the badge automatically formats overflow values. If count exceeds max, the badge displays "max+" and applies special styling. The default max is 99. + + + +### Variants + +Count badges support multiple variants via the [variant](./#variant-4) prop: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. + + + +### Sizes + +Change the count badge dimensions using the [size](./#size-1) prop. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +## Icon Badges + +Icon badges display icons. Use the [icon](./#icon) prop to provide a Lucide icon, or use [children](./#children-2) for custom SVG content. + + + +### Emphasis + +Icon badges support the same semantic and category emphasis options as text badges via the [emphasis](./#emphasis-4) prop. + + + +### Variant + +Icon badges support `default` and `subtle` variants via the [variant](./#variant-5) prop. + + + +### Sizes + +Change the icon badge dimensions using the [size](./#size-2) prop. Six sizes are available: `xxs`, `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +## Status Badges + +Status badges display a colored dot indicator with no content. They're useful for showing online/offline status or availability states. + +### Emphasis + +Status badges support semantic emphasis via the [emphasis](./#emphasis-5) prop: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. + + + +### Variant + +Control the style with the [variant](./#variant-6) prop. Status badges support `filled` (default) and `outlined` variants. + + + +### Sizes + +Change the status badge dimensions using the [size](./#size-3) prop. Five sizes are available: `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +## Common Properties + +### Disabled + +All badge types have a disabled state that can be set by the `disabled` prop. + + + +## API + +### \ + + + +### \ + + + + + +### \ + + + + + +### \ + + + + + +### \ + + + + diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-demo.tsx new file mode 100644 index 000000000..2b648c4ad --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-demo.tsx @@ -0,0 +1,15 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeCountDemo(): ReactElement { + return ( +
+ {/* preview */} + 42 + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-max-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-max-demo.tsx new file mode 100644 index 000000000..988f3205c --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-max-demo.tsx @@ -0,0 +1,16 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeCountMaxDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.tsx new file mode 100644 index 000000000..27743187c --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.tsx @@ -0,0 +1,15 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeCountSizesDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.tsx new file mode 100644 index 000000000..77582f829 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.tsx @@ -0,0 +1,22 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeCountVariantsDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-disabled-demo.tsx new file mode 100644 index 000000000..385512c6e --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-disabled-demo.tsx @@ -0,0 +1,16 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeDisabledDemo(): ReactElement { + return ( +
+ {/* preview */} + Enabled + + Disabled + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-demo.tsx new file mode 100644 index 000000000..d567cc64b --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-demo.tsx @@ -0,0 +1,20 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeIconDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.tsx new file mode 100644 index 000000000..caf5ba40c --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.tsx @@ -0,0 +1,20 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeIconEmphasisDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.tsx new file mode 100644 index 000000000..62994a2cb --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.tsx @@ -0,0 +1,20 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeIconSizesDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.tsx new file mode 100644 index 000000000..b9b7b4b0e --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.tsx @@ -0,0 +1,20 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeIconVariantsDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.tsx new file mode 100644 index 000000000..690a16d1e --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.tsx @@ -0,0 +1,18 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeStatusEmphasisDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.tsx new file mode 100644 index 000000000..42dfeddb7 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.tsx @@ -0,0 +1,17 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeStatusSizesDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.tsx new file mode 100644 index 000000000..c56bd3a34 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.tsx @@ -0,0 +1,18 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeStatusVariantsDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-demo.tsx new file mode 100644 index 000000000..7d10427cf --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-demo.tsx @@ -0,0 +1,15 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeTextDemo(): ReactElement { + return ( +
+ {/* preview */} + New + Pro + Beta + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.tsx new file mode 100644 index 000000000..698a34795 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.tsx @@ -0,0 +1,30 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeTextEmphasisDemo(): ReactElement { + return ( +
+
+ Neutral + Brand + Info + Success + Warning + Danger +
+
+ Cat 1 + Cat 2 + Cat 3 + Cat 4 + Cat 5 + Cat 6 + Cat 7 + Cat 8 + Cat 9 + Cat 10 +
+
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.tsx new file mode 100644 index 000000000..b953d03f5 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.tsx @@ -0,0 +1,15 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeTextSizesDemo(): ReactElement { + return ( +
+ {/* preview */} + Small + Medium + Large + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.tsx new file mode 100644 index 000000000..8ac9450a1 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.tsx @@ -0,0 +1,62 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export default function BadgeTextVariantsDemo(): ReactElement { + return ( +
+
+ + Neutral + + + Brand + + + Info + + + Success + + + Warning + + + Danger + +
+
+ + Cat 1 + + + Cat 2 + + + Cat 3 + + + Cat 4 + + + Cat 5 + + + Cat 6 + + + Cat 7 + + + Cat 8 + + + Cat 9 + + + Cat 10 + +
+
+ ) +} diff --git a/packages/frameworks/angular/src/badge/badge.directive.ts b/packages/frameworks/angular/src/badge/badge.directive.ts new file mode 100644 index 000000000..2a0b8e1c7 --- /dev/null +++ b/packages/frameworks/angular/src/badge/badge.directive.ts @@ -0,0 +1,195 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import {NgTemplateOutlet} from "@angular/common" +import { + booleanAttribute, + Component, + computed, + inject, + input, + numberAttribute, + type OnInit, +} from "@angular/core" + +import {IconDirective} from "@qualcomm-ui/angular/icon" +import { + type LucideIconOrString, + provideIcons, +} from "@qualcomm-ui/angular-core/lucide" +import { + normalizeProps, + QBindDirective, + useTrackBindings, +} from "@qualcomm-ui/angular-core/machine" +import { + createQdsBadgeApi, + type QdsBadgeApiProps, + type QdsBadgeBasicSize, + type QdsBadgeCountVariant, + type QdsBadgeExtendedSize, + type QdsBadgeIconSize, + type QdsBadgeIconTextEmphasis, + type QdsBadgeIconTextVariant, + type QdsBadgeSize, + type QdsBadgeStatusEmphasis, + type QdsBadgeStatusVariant, + type QdsBadgeType, +} from "@qualcomm-ui/qds-core/badge" +import type {Booleanish} from "@qualcomm-ui/utils/coercion" +import type {Explicit} from "@qualcomm-ui/utils/guard" + +import {QdsBadgeContextService} from "./qds-badge-context.service" + +@Component({ + imports: [IconDirective, QBindDirective, NgTemplateOutlet], + providers: [QdsBadgeContextService, provideIcons({})], + selector: "[q-badge]", + template: ` + + + @if (type() === "count") { + {{ displayCount() }} + } + @if (type() === "icon" && icon()) { + + } + + + + @switch (type()) { + @case ("status") { + + } + @case ("icon") { + + + + } + @default { + + } + } + `, +}) +export class BadgeDirective implements OnInit { + /** + * The badge type. + * @default 'text' + */ + readonly type = input() + + /** + * Governs the size of the badge. + * - count: sm / md / lg + * - status: xs / sm / md / lg / xl + * - icon: xxs / xs / sm / md / lg / xl + * - text: sm / md / lg + * @default 'md' + */ + readonly size = input() + + /** + * The badge disabled state. + */ + readonly disabled = input(undefined, { + transform: booleanAttribute, + }) + + /** + * Governs the color of the text, icon and status badges. + */ + readonly emphasis = input() + + /** + * Governs the style of the badge. + */ + readonly variant = input< + QdsBadgeCountVariant | QdsBadgeStatusVariant | QdsBadgeIconTextVariant + >() + + /** + * The numeric count to display for the count badge. + */ + readonly count = input(undefined, { + transform: numberAttribute, + }) + + /** + * Maximum count to display for the count badge. + * @default 99 + */ + readonly max = input(undefined, { + transform: numberAttribute, + }) + + /** + * {@link https://lucide.dev/icons lucide-angular} icon to display in the icon badge. + */ + readonly icon = input() + + protected readonly displayCount = computed(() => + this.qdsBadgeApi.context().getDisplayCount(), + ) + + protected readonly trackBindings = useTrackBindings(() => + this.qdsBadgeApi.context().getRootBindings(), + ) + + protected readonly qdsBadgeApi = inject(QdsBadgeContextService) + + ngOnInit() { + this.qdsBadgeApi.init( + computed(() => { + const type = this.type() || "text" + + let apiProps: QdsBadgeApiProps + + if (type === "count") { + apiProps = { + count: this.count(), + disabled: this.disabled(), + max: this.max(), + size: this.size() as QdsBadgeBasicSize | undefined, + type: "count", + variant: this.variant() as QdsBadgeCountVariant | undefined, + } + } else if (type === "status") { + apiProps = { + disabled: this.disabled(), + emphasis: this.emphasis() as QdsBadgeStatusEmphasis | undefined, + size: this.size() as QdsBadgeExtendedSize | undefined, + type: "status", + variant: this.variant() as QdsBadgeStatusVariant | undefined, + } + } else if (type === "icon") { + apiProps = { + disabled: this.disabled(), + emphasis: this.emphasis() as QdsBadgeIconTextEmphasis | undefined, + size: this.size() as QdsBadgeIconSize | undefined, + type: "icon", + variant: this.variant() as QdsBadgeIconTextVariant | undefined, + } + } else { + apiProps = { + disabled: this.disabled(), + emphasis: this.emphasis() as QdsBadgeIconTextEmphasis | undefined, + size: this.size() as QdsBadgeBasicSize | undefined, + type: "text", + variant: this.variant() as QdsBadgeIconTextVariant | undefined, + } + } + + return createQdsBadgeApi( + apiProps as Explicit, + normalizeProps, + ) + }), + ) + + this.trackBindings() + } +} diff --git a/packages/frameworks/angular/src/badge/index.ts b/packages/frameworks/angular/src/badge/index.ts new file mode 100644 index 000000000..5eda00cfd --- /dev/null +++ b/packages/frameworks/angular/src/badge/index.ts @@ -0,0 +1,7 @@ +export {BadgeDirective} from "./badge.directive" +export { + provideQdsBadgeContext, + QdsBadgeContextService, + QDS_BADGE_CONTEXT, + useQdsBadgeContext, +} from "./qds-badge-context.service" diff --git a/packages/frameworks/angular/src/badge/qds-badge-context.service.ts b/packages/frameworks/angular/src/badge/qds-badge-context.service.ts new file mode 100644 index 000000000..65620cd13 --- /dev/null +++ b/packages/frameworks/angular/src/badge/qds-badge-context.service.ts @@ -0,0 +1,23 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import {Injectable} from "@angular/core" + +import { + type ApiContext, + BaseApiContextService, + createApiContext, +} from "@qualcomm-ui/angular-core/machine" +import type {QdsBadgeApi} from "@qualcomm-ui/qds-core/badge" + +@Injectable() +export class QdsBadgeContextService extends BaseApiContextService {} + +export const [ + QDS_BADGE_CONTEXT, + useQdsBadgeContext, + provideQdsBadgeContext, +]: ApiContext = createApiContext( + "QdsBadgeContext", + QdsBadgeContextService, +) diff --git a/packages/frameworks/react/src/badge/badge.tsx b/packages/frameworks/react/src/badge/badge.tsx new file mode 100644 index 000000000..94e568600 --- /dev/null +++ b/packages/frameworks/react/src/badge/badge.tsx @@ -0,0 +1,152 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {ReactElement, ReactNode} from "react" + +import { + createQdsBadgeApi, + type QdsBadgeApiProps, + type QdsBadgeBasicSize, + type QdsBadgeCountProps, + type QdsBadgeExtendedSize, + type QdsBadgeIconProps, + type QdsBadgeIconSize, + type QdsBadgeStatusProps, + type QdsBadgeTextProps, +} from "@qualcomm-ui/qds-core/badge" +import {IconOrNode} from "@qualcomm-ui/react/icon" +import type {LucideIconOrElement} from "@qualcomm-ui/react-core/lucide" +import {normalizeProps} from "@qualcomm-ui/react-core/machine" +import { + type ElementRenderProp, + PolymorphicElement, +} from "@qualcomm-ui/react-core/system" +import {mergeProps} from "@qualcomm-ui/utils/merge-props" + +export interface BadgeCountProps extends Omit { + /** + * React {@link https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children children} prop. + * When provided, overrides type-specific content. + */ + children?: ReactNode + + type: "count" +} + +export interface BadgeStatusProps extends Omit { + type: "status" +} + +export interface BadgeIconProps extends Omit { + /** + * React {@link https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children children} prop. + * When provided, overrides the icon prop. + */ + children?: ReactNode + + /** + * {@link https://lucide.dev lucide-react} icon to display in the badge. + */ + icon?: LucideIconOrElement + + type: "icon" +} + +export interface BadgeTextProps extends Omit { + /** + * React {@link https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children children} prop. + */ + children?: ReactNode + + type?: "text" +} + +export type BadgeProps = ElementRenderProp<"span"> & + (BadgeCountProps | BadgeStatusProps | BadgeIconProps | BadgeTextProps) + +export function Badge(props: BadgeProps): ReactElement { + const {children, disabled, size, type, ...restProps} = props + + let qdsApiProps: QdsBadgeApiProps + + switch (type) { + case "count": + qdsApiProps = { + count: (props as BadgeCountProps).count, + disabled, + max: (props as BadgeCountProps).max, + size: size as QdsBadgeBasicSize, + type: "count", + variant: (props as BadgeCountProps).variant, + } + break + case "status": + qdsApiProps = { + disabled, + emphasis: (props as BadgeStatusProps).emphasis, + size: size as QdsBadgeExtendedSize, + type: "status", + variant: (props as BadgeStatusProps).variant, + } + break + case "icon": + qdsApiProps = { + disabled, + emphasis: (props as BadgeIconProps).emphasis, + size: size as QdsBadgeIconSize, + type: "icon", + variant: (props as BadgeIconProps).variant, + } + break + default: + qdsApiProps = { + disabled, + emphasis: (props as BadgeTextProps).emphasis, + size: size as QdsBadgeBasicSize, + type: "text", + variant: (props as BadgeTextProps).variant, + } + break + } + + const qdsApi = createQdsBadgeApi(qdsApiProps, normalizeProps) + + const rootProps = mergeProps(qdsApi.getRootBindings(), restProps) + + const renderContent = (): ReactNode => { + switch (qdsApi.type) { + case "count": { + // children override prop + if (children) { + return children + } + const displayCount = qdsApi.getDisplayCount() + return displayCount ?? null + } + + case "icon": { + // children override prop + if (children) { + return {children} + } + const icon = (props as BadgeIconProps).icon + return icon ? ( + + ) : null + } + + case "text": + return children ?? null + + case "status": + default: + return null + } + } + + return ( + + {renderContent()} + + ) +} diff --git a/packages/frameworks/react/src/badge/index.ts b/packages/frameworks/react/src/badge/index.ts new file mode 100644 index 000000000..c132c99a8 --- /dev/null +++ b/packages/frameworks/react/src/badge/index.ts @@ -0,0 +1 @@ +export {Badge, type BadgeProps} from "./badge" From c43fe75c8569481f117b9e9862285e3d19a1f662 Mon Sep 17 00:00:00 2001 From: Olaf Kappes Date: Fri, 14 Nov 2025 16:49:23 +0100 Subject: [PATCH 02/10] fix: remove useless context, fix doc Signed-off-by: Olaf Kappes --- .../src/routes/components+/badge+/_badge.mdx | 14 +-- .../angular/src/badge/badge.directive.ts | 114 ++++++++---------- .../frameworks/angular/src/badge/index.ts | 6 - .../src/badge/qds-badge-context.service.ts | 23 ---- 4 files changed, 58 insertions(+), 99 deletions(-) delete mode 100644 packages/frameworks/angular/src/badge/qds-badge-context.service.ts diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx b/packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx index 12a05978b..70cd04b03 100644 --- a/packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx +++ b/packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx @@ -27,13 +27,13 @@ Text badges display text labels and are the default badge type. ### Emphasis -Text badges support semantic and category emphasis via the [textEmphasis](./#textEmphasis) input. Semantic emphasis options include `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. +Text badges support semantic and category emphasis via the [emphasis](./#emphasis-3) input. Semantic emphasis options include `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. ### Variant -Control the visual weight with the [textVariant](./#textVariant) input. Text badges support `default` (bolder appearance) and `subtle` (lighter appearance) variants. +Control the visual weight with the [variant](./#variant-3) input. Text badges support `default` (bolder appearance) and `subtle` (lighter appearance) variants. @@ -57,7 +57,7 @@ When using the [count](./#count) input with [max](./#max), the badge automatical ### Variants -Count badges support multiple variants via the [countVariant](./#countVariant) input: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. +Count badges support multiple variants via the [variant](./#variant-3) input: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. @@ -75,13 +75,13 @@ Icon badges display icons. Use the [icon](./#icon) input to provide a Lucide ico ### Emphasis -Icon badges support the same semantic and category emphasis options as text badges via the [iconEmphasis](./#iconEmphasis) input. +Icon badges support the same semantic and category emphasis options as text badges via the [emphasis](./#emphasis-3) input. ### Variant -Icon badges support `default` and `subtle` variants via the [iconVariant](./#iconVariant) input. +Icon badges support `default` and `subtle` variants via the [variant](./#variant-3) input. @@ -97,13 +97,13 @@ Status badges display a colored dot indicator with no content. They're useful fo ### Emphasis -Status badges support semantic emphasis via the [statusEmphasis](./#statusEmphasis) input: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. +Status badges support semantic emphasis via the [emphasis](./#emphasis-3) input: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. ### Variant -Control the style with the [statusVariant](./#statusVariant) input. Status badges support `filled` (default) and `outlined` variants. +Control the style with the [variant](./#variant-3) input. Status badges support `filled` (default) and `outlined` variants. diff --git a/packages/frameworks/angular/src/badge/badge.directive.ts b/packages/frameworks/angular/src/badge/badge.directive.ts index 2a0b8e1c7..778c5ba88 100644 --- a/packages/frameworks/angular/src/badge/badge.directive.ts +++ b/packages/frameworks/angular/src/badge/badge.directive.ts @@ -6,7 +6,6 @@ import { booleanAttribute, Component, computed, - inject, input, numberAttribute, type OnInit, @@ -39,11 +38,9 @@ import { import type {Booleanish} from "@qualcomm-ui/utils/coercion" import type {Explicit} from "@qualcomm-ui/utils/guard" -import {QdsBadgeContextService} from "./qds-badge-context.service" - @Component({ imports: [IconDirective, QBindDirective, NgTemplateOutlet], - providers: [QdsBadgeContextService, provideIcons({})], + providers: [provideIcons({})], selector: "[q-badge]", template: ` @@ -52,10 +49,7 @@ import {QdsBadgeContextService} from "./qds-badge-context.service" {{ displayCount() }} } @if (type() === "icon" && icon()) { - + } @@ -65,7 +59,7 @@ import {QdsBadgeContextService} from "./qds-badge-context.service" } @case ("icon") { - + } @@ -131,65 +125,59 @@ export class BadgeDirective implements OnInit { */ readonly icon = input() - protected readonly displayCount = computed(() => - this.qdsBadgeApi.context().getDisplayCount(), - ) - - protected readonly trackBindings = useTrackBindings(() => - this.qdsBadgeApi.context().getRootBindings(), - ) + protected readonly api = computed(() => { + const type = this.type() || "text" - protected readonly qdsBadgeApi = inject(QdsBadgeContextService) + let apiProps: QdsBadgeApiProps - ngOnInit() { - this.qdsBadgeApi.init( - computed(() => { - const type = this.type() || "text" - - let apiProps: QdsBadgeApiProps - - if (type === "count") { - apiProps = { - count: this.count(), - disabled: this.disabled(), - max: this.max(), - size: this.size() as QdsBadgeBasicSize | undefined, - type: "count", - variant: this.variant() as QdsBadgeCountVariant | undefined, - } - } else if (type === "status") { - apiProps = { - disabled: this.disabled(), - emphasis: this.emphasis() as QdsBadgeStatusEmphasis | undefined, - size: this.size() as QdsBadgeExtendedSize | undefined, - type: "status", - variant: this.variant() as QdsBadgeStatusVariant | undefined, - } - } else if (type === "icon") { - apiProps = { - disabled: this.disabled(), - emphasis: this.emphasis() as QdsBadgeIconTextEmphasis | undefined, - size: this.size() as QdsBadgeIconSize | undefined, - type: "icon", - variant: this.variant() as QdsBadgeIconTextVariant | undefined, - } - } else { - apiProps = { - disabled: this.disabled(), - emphasis: this.emphasis() as QdsBadgeIconTextEmphasis | undefined, - size: this.size() as QdsBadgeBasicSize | undefined, - type: "text", - variant: this.variant() as QdsBadgeIconTextVariant | undefined, - } - } + if (type === "count") { + apiProps = { + count: this.count(), + disabled: this.disabled(), + max: this.max(), + size: this.size() as QdsBadgeBasicSize | undefined, + type: "count", + variant: this.variant() as QdsBadgeCountVariant | undefined, + } + } else if (type === "status") { + apiProps = { + disabled: this.disabled(), + emphasis: this.emphasis() as QdsBadgeStatusEmphasis | undefined, + size: this.size() as QdsBadgeExtendedSize | undefined, + type: "status", + variant: this.variant() as QdsBadgeStatusVariant | undefined, + } + } else if (type === "icon") { + apiProps = { + disabled: this.disabled(), + emphasis: this.emphasis() as QdsBadgeIconTextEmphasis | undefined, + size: this.size() as QdsBadgeIconSize | undefined, + type: "icon", + variant: this.variant() as QdsBadgeIconTextVariant | undefined, + } + } else { + apiProps = { + disabled: this.disabled(), + emphasis: this.emphasis() as QdsBadgeIconTextEmphasis | undefined, + size: this.size() as QdsBadgeBasicSize | undefined, + type: "text", + variant: this.variant() as QdsBadgeIconTextVariant | undefined, + } + } - return createQdsBadgeApi( - apiProps as Explicit, - normalizeProps, - ) - }), + return createQdsBadgeApi( + apiProps as Explicit, + normalizeProps, ) + }) + + protected readonly displayCount = computed(() => this.api().getDisplayCount()) + protected readonly trackBindings = useTrackBindings(() => + this.api().getRootBindings(), + ) + + ngOnInit() { this.trackBindings() } } diff --git a/packages/frameworks/angular/src/badge/index.ts b/packages/frameworks/angular/src/badge/index.ts index 5eda00cfd..15416c60b 100644 --- a/packages/frameworks/angular/src/badge/index.ts +++ b/packages/frameworks/angular/src/badge/index.ts @@ -1,7 +1 @@ export {BadgeDirective} from "./badge.directive" -export { - provideQdsBadgeContext, - QdsBadgeContextService, - QDS_BADGE_CONTEXT, - useQdsBadgeContext, -} from "./qds-badge-context.service" diff --git a/packages/frameworks/angular/src/badge/qds-badge-context.service.ts b/packages/frameworks/angular/src/badge/qds-badge-context.service.ts deleted file mode 100644 index 65620cd13..000000000 --- a/packages/frameworks/angular/src/badge/qds-badge-context.service.ts +++ /dev/null @@ -1,23 +0,0 @@ -// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. -// SPDX-License-Identifier: BSD-3-Clause-Clear - -import {Injectable} from "@angular/core" - -import { - type ApiContext, - BaseApiContextService, - createApiContext, -} from "@qualcomm-ui/angular-core/machine" -import type {QdsBadgeApi} from "@qualcomm-ui/qds-core/badge" - -@Injectable() -export class QdsBadgeContextService extends BaseApiContextService {} - -export const [ - QDS_BADGE_CONTEXT, - useQdsBadgeContext, - provideQdsBadgeContext, -]: ApiContext = createApiContext( - "QdsBadgeContext", - QdsBadgeContextService, -) From 3abd90821c2e0546d62c6129c3c0b7ca72f3a73d Mon Sep 17 00:00:00 2001 From: Olaf Kappes Date: Mon, 17 Nov 2025 18:19:02 +0100 Subject: [PATCH 03/10] feat: split badge into 4 distinct components Signed-off-by: Olaf Kappes --- .../common/qds-core/src/badge/badge.api.ts | 77 ----- .../common/qds-core/src/badge/badge.types.ts | 174 +---------- .../qds-core/src/badge/icon-badge.api.ts | 42 +++ .../qds-core/src/badge/icon-badge.types.ts | 56 ++++ packages/common/qds-core/src/badge/index.ts | 11 +- .../qds-core/src/badge/number-badge.api.ts | 41 +++ .../qds-core/src/badge/number-badge.types.ts | 62 ++++ .../common/qds-core/src/badge/qds-badge.css | 279 +----------------- .../qds-core/src/badge/qds-icon-badge.css | 178 +++++++++++ .../qds-core/src/badge/qds-number-badge.css | 64 ++++ .../qds-core/src/badge/qds-status-badge.css | 43 +++ .../qds-core/src/badge/qds-text-badge.css | 141 +++++++++ .../qds-core/src/badge/status-badge.api.ts | 32 ++ .../qds-core/src/badge/status-badge.types.ts | 47 +++ .../qds-core/src/badge/text-badge.api.ts | 31 ++ .../qds-core/src/badge/text-badge.types.ts | 48 +++ packages/docs/angular-docs/qui-docs.config.ts | 7 + .../src/routes/components+/badge+/_badge.mdx | 130 -------- .../badge+/demos/badge-count-demo.ts | 18 -- .../badge+/demos/badge-count-max-demo.ts | 19 -- .../badge+/demos/badge-count-sizes-demo.ts | 18 -- .../badge+/demos/badge-count-variants-demo.ts | 25 -- .../badge+/demos/badge-icon-emphasis-demo.ts | 24 -- .../badge+/demos/badge-icon-sizes-demo.ts | 24 -- .../badge+/demos/badge-icon-variants-demo.ts | 60 ---- .../demos/badge-status-emphasis-demo.ts | 21 -- .../badge+/demos/badge-status-sizes-demo.ts | 20 -- .../demos/badge-status-variants-demo.ts | 21 -- .../badge+/demos/badge-text-demo.ts | 18 -- .../badges+/icon-badge+/_icon-badge.mdx | 57 ++++ .../demos/icon-badge-disabled-demo.ts | 20 ++ .../demos/icon-badge-emphasis-demo.ts | 36 +++ .../demos/icon-badge-icon-demo.ts} | 12 +- .../icon-badge+/demos/icon-badge-size-demo.ts | 24 ++ .../demos/icon-badge-variant-demo.ts | 61 ++++ .../badges+/number-badge+/_number-badge.mdx | 57 ++++ .../demos/number-badge-disabled-demo.ts | 17 ++ .../demos/number-badge-max-demo.ts | 19 ++ .../demos/number-badge-size-demo.ts | 18 ++ .../demos/number-badge-value-demo.ts | 18 ++ .../demos/number-badge-variant-demo.ts | 25 ++ .../badges+/status-badge+/_status-badge.mdx | 51 ++++ .../demos/status-badge-disabled-demo.ts | 17 ++ .../demos/status-badge-emphasis-demo.ts | 21 ++ .../demos/status-badge-size-demo.ts | 20 ++ .../demos/status-badge-variant-demo.ts | 21 ++ .../badges+/text-badge+/_text-badge.mdx | 51 ++++ .../demos/text-badge-disabled-demo.ts} | 8 +- .../demos/text-badge-emphasis-demo.ts} | 4 +- .../demos/text-badge-size-demo.ts} | 4 +- .../demos/text-badge-variant-demo.ts} | 4 +- packages/docs/react-docs/qui-docs.config.ts | 5 + .../src/components/demo/lazy-demo-loader.ts | 12 +- .../src/routes/components+/badge+/_badge.mdx | 149 ---------- .../badge+/demos/badge-count-demo.tsx | 15 - .../badge+/demos/badge-count-max-demo.tsx | 16 - .../badge+/demos/badge-count-sizes-demo.tsx | 15 - .../demos/badge-count-variants-demo.tsx | 22 -- .../badge+/demos/badge-icon-emphasis-demo.tsx | 20 -- .../badge+/demos/badge-icon-sizes-demo.tsx | 20 -- .../badge+/demos/badge-icon-variants-demo.tsx | 20 -- .../demos/badge-status-emphasis-demo.tsx | 18 -- .../badge+/demos/badge-status-sizes-demo.tsx | 17 -- .../demos/badge-status-variants-demo.tsx | 18 -- .../badge+/demos/badge-text-demo.tsx | 15 - .../badges+/icon-badge+/_icon-badge.mdx | 54 ++++ .../demos/icon-badge-disabled-demo.tsx | 16 + .../demos/icon-badge-emphasis-demo.tsx | 32 ++ .../demos/icon-badge-icon-demo.tsx} | 10 +- .../demos/icon-badge-size-demo.tsx | 20 ++ .../demos/icon-badge-variant-demo.tsx | 32 ++ .../badges+/number-badge+/_number-badge.mdx | 54 ++++ .../demos/number-badge-disabled-demo.tsx | 14 + .../demos/number-badge-max-demo.tsx | 16 + .../demos/number-badge-size-demo.tsx | 15 + .../demos/number-badge-value-demo.tsx | 15 + .../demos/number-badge-variant-demo.tsx | 22 ++ .../badges+/status-badge+/_status-badge.mdx | 48 +++ .../demos/status-badge-disabled-demo.tsx | 14 + .../demos/status-badge-emphasis-demo.tsx | 18 ++ .../demos/status-badge-size-demo.tsx | 17 ++ .../demos/status-badge-variant-demo.tsx | 18 ++ .../badges+/text-badge+/_text-badge.mdx | 48 +++ .../demos/text-badge-disabled-demo.tsx} | 2 +- .../demos/text-badge-emphasis-demo.tsx} | 2 +- .../demos/text-badge-size-demo.tsx} | 2 +- .../demos/text-badge-variant-demo.tsx} | 2 +- .../angular/src/badge/badge.directive.ts | 149 ++-------- .../angular/src/badge/icon-badge.directive.ts | 99 +++++++ .../frameworks/angular/src/badge/index.ts | 5 +- .../angular/src/badge/ng-package.json | 6 + .../src/badge/number-badge.directive.ts | 91 ++++++ .../src/badge/status-badge.directive.ts | 76 +++++ packages/frameworks/react/src/badge/badge.tsx | 151 ++-------- .../frameworks/react/src/badge/icon-badge.tsx | 63 ++++ packages/frameworks/react/src/badge/index.ts | 3 + .../react/src/badge/number-badge.tsx | 54 ++++ .../react/src/badge/status-badge.tsx | 41 +++ 98 files changed, 2319 insertions(+), 1548 deletions(-) delete mode 100644 packages/common/qds-core/src/badge/badge.api.ts create mode 100644 packages/common/qds-core/src/badge/icon-badge.api.ts create mode 100644 packages/common/qds-core/src/badge/icon-badge.types.ts create mode 100644 packages/common/qds-core/src/badge/number-badge.api.ts create mode 100644 packages/common/qds-core/src/badge/number-badge.types.ts create mode 100644 packages/common/qds-core/src/badge/qds-icon-badge.css create mode 100644 packages/common/qds-core/src/badge/qds-number-badge.css create mode 100644 packages/common/qds-core/src/badge/qds-status-badge.css create mode 100644 packages/common/qds-core/src/badge/qds-text-badge.css create mode 100644 packages/common/qds-core/src/badge/status-badge.api.ts create mode 100644 packages/common/qds-core/src/badge/status-badge.types.ts create mode 100644 packages/common/qds-core/src/badge/text-badge.api.ts create mode 100644 packages/common/qds-core/src/badge/text-badge.types.ts delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-demo.ts delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-max-demo.ts delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.ts delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.ts delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.ts delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.ts delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.ts delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.ts delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.ts delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.ts delete mode 100644 packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.ts rename packages/docs/angular-docs/src/routes/components+/{badge+/demos/badge-icon-demo.ts => badges+/icon-badge+/demos/icon-badge-icon-demo.ts} (67%) create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.ts create mode 100644 packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx rename packages/docs/angular-docs/src/routes/components+/{badge+/demos/badge-disabled-demo.ts => badges+/text-badge+/demos/text-badge-disabled-demo.ts} (57%) rename packages/docs/angular-docs/src/routes/components+/{badge+/demos/badge-text-emphasis-demo.ts => badges+/text-badge+/demos/text-badge-emphasis-demo.ts} (93%) rename packages/docs/angular-docs/src/routes/components+/{badge+/demos/badge-text-sizes-demo.ts => badges+/text-badge+/demos/text-badge-size-demo.ts} (84%) rename packages/docs/angular-docs/src/routes/components+/{badge+/demos/badge-text-variants-demo.ts => badges+/text-badge+/demos/text-badge-variant-demo.ts} (94%) delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/_badge.mdx delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-demo.tsx delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-max-demo.tsx delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.tsx delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.tsx delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.tsx delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.tsx delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.tsx delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.tsx delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.tsx delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.tsx delete mode 100644 packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx rename packages/docs/react-docs/src/routes/components+/{badge+/demos/badge-icon-demo.tsx => badges+/icon-badge+/demos/icon-badge-icon-demo.tsx} (66%) create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.tsx create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx rename packages/docs/react-docs/src/routes/components+/{badge+/demos/badge-disabled-demo.tsx => badges+/text-badge+/demos/text-badge-disabled-demo.tsx} (83%) rename packages/docs/react-docs/src/routes/components+/{badge+/demos/badge-text-emphasis-demo.tsx => badges+/text-badge+/demos/text-badge-emphasis-demo.tsx} (94%) rename packages/docs/react-docs/src/routes/components+/{badge+/demos/badge-text-sizes-demo.tsx => badges+/text-badge+/demos/text-badge-size-demo.tsx} (84%) rename packages/docs/react-docs/src/routes/components+/{badge+/demos/badge-text-variants-demo.tsx => badges+/text-badge+/demos/text-badge-variant-demo.tsx} (96%) create mode 100644 packages/frameworks/angular/src/badge/icon-badge.directive.ts create mode 100644 packages/frameworks/angular/src/badge/ng-package.json create mode 100644 packages/frameworks/angular/src/badge/number-badge.directive.ts create mode 100644 packages/frameworks/angular/src/badge/status-badge.directive.ts create mode 100644 packages/frameworks/react/src/badge/icon-badge.tsx create mode 100644 packages/frameworks/react/src/badge/number-badge.tsx create mode 100644 packages/frameworks/react/src/badge/status-badge.tsx diff --git a/packages/common/qds-core/src/badge/badge.api.ts b/packages/common/qds-core/src/badge/badge.api.ts deleted file mode 100644 index bd6d7f5a4..000000000 --- a/packages/common/qds-core/src/badge/badge.api.ts +++ /dev/null @@ -1,77 +0,0 @@ -// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. -// SPDX-License-Identifier: BSD-3-Clause-Clear - -import {booleanDataAttr} from "@qualcomm-ui/utils/attributes" -import type {PropNormalizer} from "@qualcomm-ui/utils/machine" - -import {badgeClasses} from "./badge.classes" -import type { - QdsBadgeApi, - QdsBadgeApiProps, - QdsBadgeCountProps, - QdsBadgeIconBindings, - QdsBadgeIconProps, - QdsBadgeRootBindings, - QdsBadgeStatusProps, - QdsBadgeTextProps, -} from "./badge.types" - -export function createQdsBadgeApi( - props: QdsBadgeApiProps, - normalize: PropNormalizer, -): QdsBadgeApi { - const type = props.type || "text" - const size = props.size || "md" - - let emphasis: string | undefined - let variant: string | undefined - let overflow = false - let displayCount: number | string | null = null - - if (type === "count") { - const countProps = props as QdsBadgeCountProps - variant = countProps.variant || "neutral" - if (countProps.count != null) { - const max = countProps.max ?? 99 - overflow = countProps.count > max - displayCount = overflow ? `${max}+` : countProps.count - } - } else if (type === "status") { - emphasis = (props as QdsBadgeStatusProps).emphasis || "neutral" - variant = (props as QdsBadgeStatusProps).variant || "filled" - } else if (type === "icon") { - emphasis = (props as QdsBadgeIconProps).emphasis || "neutral" - variant = (props as QdsBadgeIconProps).variant || "default" - } else { - emphasis = (props as QdsBadgeTextProps).emphasis || "neutral" - variant = (props as QdsBadgeTextProps).variant || "default" - } - - return { - getDisplayCount(): number | string | null { - return displayCount - }, - getIconBindings(): QdsBadgeIconBindings { - return normalize.element({ - className: badgeClasses.icon, - "data-part": "icon", - "data-scope": "badge", - "data-size": size, - }) - }, - getRootBindings(): QdsBadgeRootBindings { - return normalize.element({ - className: badgeClasses.root, - "data-disabled": booleanDataAttr(props.disabled), - "data-emphasis": emphasis, - "data-overflow": booleanDataAttr(overflow), - "data-part": "root", - "data-scope": "badge", - "data-size": size, - "data-type": type, - "data-variant": variant, - }) - }, - type, - } -} diff --git a/packages/common/qds-core/src/badge/badge.types.ts b/packages/common/qds-core/src/badge/badge.types.ts index 6a3a11f9b..d0ced89e3 100644 --- a/packages/common/qds-core/src/badge/badge.types.ts +++ b/packages/common/qds-core/src/badge/badge.types.ts @@ -1,20 +1,13 @@ // Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. // SPDX-License-Identifier: BSD-3-Clause-Clear -import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes" - import type {badgeClasses} from "./badge.classes" -export type QdsBadgeType = "count" | "icon" | "text" | "status" +export type BadgeClasses = typeof badgeClasses export type QdsBadgeBasicSize = "sm" | "md" | "lg" -export type QdsBadgeExtendedSize = "xs" | QdsBadgeBasicSize | "xl" -export type QdsBadgeIconSize = "xxs" | QdsBadgeExtendedSize - -export type QdsBadgeSize = - | QdsBadgeBasicSize - | QdsBadgeExtendedSize - | QdsBadgeIconSize +export type QdsBadgeExtraSize = "xs" | QdsBadgeBasicSize | "xl" +export type QdsBadgeExtendedSize = "xxs" | QdsBadgeExtraSize export type QdsBadgeSemanticEmphasis = | "neutral" @@ -36,168 +29,9 @@ export type QdsBadgeCategoryEmphasis = | "cat-9" | "cat-10" -export type QdsBadgeCountVariant = - | "neutral" - | "neutral-outline" - | "brand" - | "brand-outline" - | "info" - | "success" - | "warning" - | "danger" - | "persistent-black" - | "persistent-white" - -export type QdsBadgeStatusEmphasis = QdsBadgeSemanticEmphasis -export type QdsBadgeStatusVariant = "filled" | "outlined" - -export type QdsBadgeIconTextEmphasis = - | QdsBadgeSemanticEmphasis - | QdsBadgeCategoryEmphasis -export type QdsBadgeIconTextVariant = "default" | "subtle" - -interface QdsBadgeBaseProps { +export interface QdsBaseBadgeProps { /** * The badge disabled state. */ disabled?: boolean } - -export interface QdsBadgeCountProps extends QdsBadgeBaseProps { - /** - * The numeric count to display. - */ - count?: number - - /** - * Maximum count to display. - * @default 99 - */ - max?: number - - /** - * Governs the size of the badge. - * @default 'md' - */ - size?: QdsBadgeBasicSize - - /** - * The badge type. - */ - type: "count" - - /** - * Governs the color and style of the count badge. - * @default 'neutral' - */ - variant?: QdsBadgeCountVariant -} - -export interface QdsBadgeStatusProps extends QdsBadgeBaseProps { - /** - * Governs the color of the status badge. - * @default 'neutral' - */ - emphasis?: QdsBadgeStatusEmphasis - - /** - * Governs the size of the badge. - * @default 'md' - */ - size?: QdsBadgeExtendedSize - - /** - * The badge type. - */ - type: "status" - - /** - * Governs the style of the status badge. - * @default 'filled' - */ - variant?: QdsBadgeStatusVariant -} - -export interface QdsBadgeIconProps extends QdsBadgeBaseProps { - /** - * Governs the color of the icon badge. - * @default 'neutral' - */ - emphasis?: QdsBadgeIconTextEmphasis - - /** - * Governs the size of the badge. - * @default 'md' - */ - size?: QdsBadgeIconSize - - /** - * The badge type. - */ - type: "icon" - - /** - * Governs the style of the icon badge. - * @default 'default' - */ - variant?: QdsBadgeIconTextVariant -} - -export interface QdsBadgeTextProps extends QdsBadgeBaseProps { - /** - * Governs the color of the text badge. - * @default 'neutral' - */ - emphasis?: QdsBadgeIconTextEmphasis - - /** - * Governs the size of the badge. - * @default 'md' - */ - size?: QdsBadgeBasicSize - - /** - * The badge type. - */ - type?: "text" - - /** - * Governs the style of the text badge. - * @default 'default' - */ - variant?: QdsBadgeIconTextVariant -} - -export type QdsBadgeApiProps = - | QdsBadgeCountProps - | QdsBadgeStatusProps - | QdsBadgeIconProps - | QdsBadgeTextProps - -type BadgeClasses = typeof badgeClasses - -export interface QdsBadgeRootBindings { - className: BadgeClasses["root"] - "data-disabled": BooleanDataAttr - "data-emphasis"?: string - "data-overflow": BooleanDataAttr - "data-part": "root" - "data-scope": "badge" - "data-size": QdsBadgeSize - "data-type": QdsBadgeType - "data-variant"?: string -} - -export interface QdsBadgeIconBindings { - className: BadgeClasses["icon"] - "data-part": "icon" - "data-scope": "badge" - "data-size": QdsBadgeSize -} - -export interface QdsBadgeApi { - getDisplayCount(): number | string | null - getIconBindings(): QdsBadgeIconBindings - getRootBindings(): QdsBadgeRootBindings - type: QdsBadgeType -} diff --git a/packages/common/qds-core/src/badge/icon-badge.api.ts b/packages/common/qds-core/src/badge/icon-badge.api.ts new file mode 100644 index 000000000..3077995f4 --- /dev/null +++ b/packages/common/qds-core/src/badge/icon-badge.api.ts @@ -0,0 +1,42 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import {booleanDataAttr} from "@qualcomm-ui/utils/attributes" +import type {PropNormalizer} from "@qualcomm-ui/utils/machine" + +import {badgeClasses} from "./badge.classes" +import type { + QdsIconBadgeApi, + QdsIconBadgeIconBindings, + QdsIconBadgeProps, + QdsIconBadgeRootBindings, +} from "./icon-badge.types" + +export function createQdsIconBadgeApi( + props: QdsIconBadgeProps, + normalize: PropNormalizer, +): QdsIconBadgeApi { + const size = props.size || "md" + return { + getIconBindings(): QdsIconBadgeIconBindings { + return normalize.element({ + className: badgeClasses.icon, + "data-part": "icon", + "data-scope": "icon-badge", + "data-size": size, + }) + }, + getRootBindings(): QdsIconBadgeRootBindings { + return normalize.element({ + className: badgeClasses.root, + "data-disabled": booleanDataAttr(props.disabled), + "data-emphasis": props.emphasis || "neutral", + "data-overflow": booleanDataAttr(false), + "data-part": "root", + "data-scope": "icon-badge", + "data-size": size, + "data-variant": props.variant || "default", + }) + }, + } +} diff --git a/packages/common/qds-core/src/badge/icon-badge.types.ts b/packages/common/qds-core/src/badge/icon-badge.types.ts new file mode 100644 index 000000000..dbd84b52f --- /dev/null +++ b/packages/common/qds-core/src/badge/icon-badge.types.ts @@ -0,0 +1,56 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes" + +import type { + BadgeClasses, + QdsBadgeCategoryEmphasis, + QdsBadgeExtendedSize, + QdsBadgeSemanticEmphasis, + QdsBaseBadgeProps, +} from "./badge.types" + +export type QdsIconBadgeVariant = "default" | "subtle" + +export interface QdsIconBadgeProps extends QdsBaseBadgeProps { + /** + * Governs the color of the icon badge. + * @default 'neutral' + */ + emphasis?: QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeExtendedSize + + /** + * Governs the style of the icon badge. + * @default 'default' + */ + variant?: QdsIconBadgeVariant +} + +export interface QdsIconBadgeRootBindings { + className: BadgeClasses["root"] + "data-disabled": BooleanDataAttr + "data-emphasis": QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis + "data-part": "root" + "data-scope": "icon-badge" + "data-size": QdsBadgeExtendedSize + "data-variant": QdsIconBadgeVariant +} + +export interface QdsIconBadgeIconBindings { + className: BadgeClasses["icon"] + "data-part": "icon" + "data-scope": "icon-badge" + "data-size": QdsBadgeExtendedSize +} + +export interface QdsIconBadgeApi { + getIconBindings(): QdsIconBadgeIconBindings + getRootBindings(): QdsIconBadgeRootBindings +} diff --git a/packages/common/qds-core/src/badge/index.ts b/packages/common/qds-core/src/badge/index.ts index 3fb2cb867..67aefe56e 100644 --- a/packages/common/qds-core/src/badge/index.ts +++ b/packages/common/qds-core/src/badge/index.ts @@ -1,3 +1,10 @@ -export * from "./badge.api" -export * from "./badge.classes" export type * from "./badge.types" +export * from "./text-badge.api" +export type * from "./text-badge.types" +export * from "./number-badge.api" +export type * from "./number-badge.types" +export * from "./icon-badge.api" +export type * from "./icon-badge.types" +export * from "./status-badge.api" +export type * from "./status-badge.types" +export * from "./badge.classes" diff --git a/packages/common/qds-core/src/badge/number-badge.api.ts b/packages/common/qds-core/src/badge/number-badge.api.ts new file mode 100644 index 000000000..311d050fb --- /dev/null +++ b/packages/common/qds-core/src/badge/number-badge.api.ts @@ -0,0 +1,41 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import {booleanDataAttr} from "@qualcomm-ui/utils/attributes" +import type {PropNormalizer} from "@qualcomm-ui/utils/machine" + +import {badgeClasses} from "./badge.classes" +import type { + QdsNumberBadgeApi, + QdsNumberBadgeProps, + QdsNumberBadgeRootBindings, +} from "./number-badge.types" + +export function createQdsNumberBadgeApi( + props: QdsNumberBadgeProps, + normalize: PropNormalizer, +): QdsNumberBadgeApi { + let overflow = false + let displayValue: number | string | null = null + + if (props.value != null) { + const max = props.max ?? 99 + overflow = props.value > max + displayValue = overflow ? `${max}+` : props.value + } + + return { + displayValue, + getRootBindings(): QdsNumberBadgeRootBindings { + return normalize.element({ + className: badgeClasses.root, + "data-disabled": booleanDataAttr(props.disabled), + "data-overflow": booleanDataAttr(overflow), + "data-part": "root", + "data-scope": "number-badge", + "data-size": props.size || "md", + "data-variant": props.variant || "neutral", + }) + }, + } +} diff --git a/packages/common/qds-core/src/badge/number-badge.types.ts b/packages/common/qds-core/src/badge/number-badge.types.ts new file mode 100644 index 000000000..f011f81e2 --- /dev/null +++ b/packages/common/qds-core/src/badge/number-badge.types.ts @@ -0,0 +1,62 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes" + +import type { + BadgeClasses, + QdsBadgeBasicSize, + QdsBaseBadgeProps, +} from "./badge.types" + +export type QdsNumberBadgeVariant = + | "neutral" + | "neutral-outline" + | "brand" + | "brand-outline" + | "info" + | "success" + | "warning" + | "danger" + | "persistent-black" + | "persistent-white" + +export interface QdsNumberBadgeProps extends QdsBaseBadgeProps { + /** + * Maximum value to display. + * @default 99 + */ + max?: number + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeBasicSize + + /** + * The numeric value to display. + */ + value?: number + + /** + * Governs the color and style of the number badge. + * @default 'neutral' + */ + variant?: QdsNumberBadgeVariant +} + +export interface QdsNumberBadgeRootBindings { + className: BadgeClasses["root"] + "data-disabled": BooleanDataAttr + "data-overflow": BooleanDataAttr + "data-part": "root" + "data-scope": "number-badge" + "data-size": QdsBadgeBasicSize + "data-variant": QdsNumberBadgeVariant +} + +export interface QdsNumberBadgeApi { + displayValue: number | string | null + getRootBindings(): QdsNumberBadgeRootBindings +} diff --git a/packages/common/qds-core/src/badge/qds-badge.css b/packages/common/qds-core/src/badge/qds-badge.css index 6fb79221a..219cb0afd 100644 --- a/packages/common/qds-core/src/badge/qds-badge.css +++ b/packages/common/qds-core/src/badge/qds-badge.css @@ -1,4 +1,4 @@ -/* common stuff and sizes */ +/* shared styles */ .qui-badge__root { align-items: center; @@ -6,6 +6,7 @@ justify-content: center; line-height: 1; cursor: default; + box-sizing: border-box; &[data-size="xxs"] { --status-size: var(--sizing-40); @@ -55,42 +56,6 @@ --icon-size: var(--sizing-140); } - &[data-type="count"] { - border-radius: var(--border-radius-rounded); - block-size: var(--count-size); - min-inline-size: var(--count-size); - padding: 0; - &[data-overflow] { - padding: 0 var(--spacing-50); - } - } - - &[data-type="status"] { - border-radius: var(--border-radius-rounded); - height: var(--status-size); - min-width: var(--status-size); - padding: 0; - width: var(--status-size); - } - - &[data-type="icon"] { - border-radius: var(--icon-radius); - &[data-size="xxs"], - &[data-size="xs"], - &[data-size="sm"] { - padding: var(--spacing-20); - } - &[data-size="md"] { - padding: var(--spacing-40); - } - &[data-size="lg"] { - padding: var(--spacing-50); - } - &[data-size="xl"] { - padding: var(--spacing-60); - } - } - /* MOAR SPECIFICITY */ &[data-disabled][data-disabled][data-disabled] { background: var(--color-utility-disabled-background); @@ -99,243 +64,3 @@ --icon-color: var(--color-utility-disabled-icon); } } - -/* text/icon common stuff */ -.qui-badge__root[data-variant="default"], -.qui-badge__root[data-variant="subtle"] { - color: var(--badge-text); - background: var(--badge-background); - border: solid var(--border-size, 0) var(--badge-border); -} - -/* text/icon default variant */ -.qui-badge__root[data-variant="default"] { - &[data-emphasis="neutral"] { - --badge-background: var(--color-background-neutral-10); - --badge-text: var(--color-text-neutral-inverse); - } - &[data-emphasis="brand"] { - --badge-background: var(--color-background-brand-primary); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="info"] { - --badge-background: var(--color-background-support-info); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="success"] { - --badge-background: var(--color-background-support-success); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="warning"] { - --badge-background: var(--color-background-support-warning); - --badge-text: var(--color-utility-persistent-black); - } - &[data-emphasis="danger"] { - --badge-background: var(--color-background-support-danger); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="cat-1"] { - --badge-background: var(--color-category-1-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="cat-2"] { - --badge-background: var(--color-category-2-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="cat-3"] { - --badge-background: var(--color-category-3-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="cat-4"] { - --badge-background: var(--color-category-4-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="cat-5"] { - --badge-background: var(--color-category-5-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="cat-6"] { - --badge-background: var(--color-category-6-strong); - --badge-text: var(--color-utility-persistent-black); - } - &[data-emphasis="cat-7"] { - --badge-background: var(--color-category-7-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="cat-8"] { - --badge-background: var(--color-category-8-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="cat-9"] { - --badge-background: var(--color-category-9-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="cat-10"] { - --badge-background: var(--color-category-10-strong); - --badge-text: var(--color-utility-persistent-white); - } -} - -/* text/icon subtle variant */ -.qui-badge__root[data-variant="subtle"] { - &[data-emphasis="neutral"] { - --badge-background: var(--color-background-support-neutral); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="brand"] { - --badge-background: var(--color-background-brand-primary-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="info"] { - --badge-background: var(--color-background-support-info-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="success"] { - --badge-background: var(--color-background-support-success-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="warning"] { - --badge-background: var(--color-background-support-warning-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="danger"] { - --badge-background: var(--color-background-support-danger-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cat-1"] { - --badge-background: var(--color-category-1-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cat-2"] { - --badge-background: var(--color-category-2-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cat-3"] { - --badge-background: var(--color-category-3-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cat-4"] { - --badge-background: var(--color-category-4-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cat-5"] { - --badge-background: var(--color-category-5-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cat-6"] { - --badge-background: var(--color-category-6-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cat-7"] { - --badge-background: var(--color-category-7-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cat-8"] { - --badge-background: var(--color-category-8-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cat-9"] { - --badge-background: var(--color-category-9-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cat-10"] { - --badge-background: var(--color-category-10-subtle); - --badge-text: var(--color-text-neutral-primary); - } -} - -/* count variants */ -.qui-badge__root[data-type="count"] { - color: var(--badge-text); - background: var(--badge-background); - border: solid var(--border-size, 0) var(--badge-border); - - &[data-variant="neutral"] { - --badge-background: var(--color-background-support-neutral); - --badge-text: var(--color-utility-persistent-white); - } - &[data-variant="neutral-outline"] { - --badge-background: transparent; - --badge-border: var(--color-border-support-neutral); - --badge-text: var(--color-text-neutral-primary); - --border-size: 1px; - } - &[data-variant="brand"] { - --badge-background: var(--color-background-brand-primary); - --badge-text: var(--color-utility-persistent-white); - } - &[data-variant="brand-outline"] { - --badge-background: transparent; - --badge-border: var(--color-border-support-neutral); - --badge-text: var(--color-text-brand-primary); - --border-size: 1px; - } - &[data-variant="info"] { - --badge-background: var(--color-background-support-info); - --badge-text: var(--color-utility-persistent-white); - } - &[data-variant="success"] { - --badge-background: var(--color-background-support-success); - --badge-text: var(--color-utility-persistent-white); - } - &[data-variant="warning"] { - --badge-background: var(--color-background-support-warning); - --badge-text: var(--color-utility-persistent-black); - } - &[data-variant="danger"] { - --badge-background: var(--color-background-support-danger); - --badge-text: var(--color-utility-persistent-white); - } - &[data-variant="persistent-black"] { - --badge-background: var(--color-utility-persistent-black); - --badge-text: var(--color-utility-persistent-white); - } - &[data-variant="persistent-white"] { - --badge-background: var(--color-utility-persistent-white); - --badge-text: var(--color-utility-persistent-black); - } -} - -/* status emphasis (filled/outlined) */ -.qui-badge__root[data-type="status"] { - color: var(--badge-text); - background: var(--badge-background); - border: solid var(--border-size, 0) var(--badge-background); - - &[data-emphasis="neutral"] { - --badge-background: var(--color-background-support-neutral); - } - &[data-emphasis="brand"] { - --badge-background: var(--color-background-brand-primary); - } - &[data-emphasis="info"] { - --badge-background: var(--color-background-support-info); - } - &[data-emphasis="success"] { - --badge-background: var(--color-background-support-success); - } - &[data-emphasis="warning"] { - --badge-background: var(--color-background-support-warning); - } - &[data-emphasis="danger"] { - --badge-background: var(--color-background-support-danger); - } -} - -/* status outlined variant */ -.qui-badge__root[data-type="status"][data-variant="outlined"] { - background: transparent; - border-width: 1px; -} - -/* icon overrides - higher specificity than .qui-icon__root[data-size] rules */ -.qui-badge__icon[data-scope="badge"] { - color: var(--icon-color, inherit); - --icon-size: inherit; -} - -/* style custom SVG children in icon badges */ -.qui-badge__icon[data-scope="badge"] > svg { - inline-size: var(--icon-size); - block-size: var(--icon-size); -} diff --git a/packages/common/qds-core/src/badge/qds-icon-badge.css b/packages/common/qds-core/src/badge/qds-icon-badge.css new file mode 100644 index 000000000..6f4a073c5 --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-icon-badge.css @@ -0,0 +1,178 @@ +.qui-badge__root[data-scope="icon-badge"] { + color: var(--badge-text); + background: var(--badge-background); + border: solid var(--border-size, 0) var(--badge-border); + + /* Override size-specific styles with higher specificity */ + &[data-size="xxs"], + &[data-size="xs"], + &[data-size="sm"], + &[data-size="md"], + &[data-size="lg"], + &[data-size="xl"] { + border-radius: var(--icon-radius); + } + + &[data-size="xxs"], + &[data-size="xs"], + &[data-size="sm"] { + padding: var(--spacing-20); + } + &[data-size="md"] { + padding: var(--spacing-40); + } + &[data-size="lg"] { + padding: var(--spacing-50); + } + &[data-size="xl"] { + padding: var(--spacing-60); + } +} + +/* default variant */ +.qui-badge__root[data-scope="icon-badge"][data-variant="default"] { + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-neutral-10); + --badge-text: var(--color-text-neutral-inverse); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning); + --badge-text: var(--color-utility-persistent-black); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-1"] { + --badge-background: var(--color-category-1-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-2"] { + --badge-background: var(--color-category-2-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-3"] { + --badge-background: var(--color-category-3-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-4"] { + --badge-background: var(--color-category-4-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-5"] { + --badge-background: var(--color-category-5-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-6"] { + --badge-background: var(--color-category-6-strong); + --badge-text: var(--color-utility-persistent-black); + } + &[data-emphasis="cat-7"] { + --badge-background: var(--color-category-7-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-8"] { + --badge-background: var(--color-category-8-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-9"] { + --badge-background: var(--color-category-9-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-10"] { + --badge-background: var(--color-category-10-strong); + --badge-text: var(--color-utility-persistent-white); + } +} + +/* subtle variant */ +.qui-badge__root[data-scope="icon-badge"][data-variant="subtle"] { + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-support-neutral); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-1"] { + --badge-background: var(--color-category-1-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-2"] { + --badge-background: var(--color-category-2-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-3"] { + --badge-background: var(--color-category-3-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-4"] { + --badge-background: var(--color-category-4-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-5"] { + --badge-background: var(--color-category-5-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-6"] { + --badge-background: var(--color-category-6-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-7"] { + --badge-background: var(--color-category-7-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-8"] { + --badge-background: var(--color-category-8-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-9"] { + --badge-background: var(--color-category-9-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-10"] { + --badge-background: var(--color-category-10-subtle); + --badge-text: var(--color-text-neutral-primary); + } +} + +/* icon overrides - higher specificity than .qui-icon__root[data-size] rules */ +.qui-badge__icon[data-scope="icon-badge"] { + color: var(--icon-color, inherit); + --icon-size: inherit; +} + +/* style custom SVG children in icon badges (used with children prop) */ +.qui-badge__root[data-scope="icon-badge"] > svg { + inline-size: var(--icon-size); + block-size: var(--icon-size); +} diff --git a/packages/common/qds-core/src/badge/qds-number-badge.css b/packages/common/qds-core/src/badge/qds-number-badge.css new file mode 100644 index 000000000..940aff944 --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-number-badge.css @@ -0,0 +1,64 @@ +.qui-badge__root[data-scope="number-badge"] { + block-size: var(--count-size); + min-inline-size: var(--count-size); + color: var(--badge-text); + background: var(--badge-background); + border: solid var(--border-size, 0) var(--badge-border); + + /* override defaults */ + &[data-size="sm"], + &[data-size="md"], + &[data-size="lg"] { + border-radius: var(--border-radius-rounded); + padding: 0; + } + + &[data-overflow] { + padding: 0 var(--spacing-50); + } + + &[data-variant="neutral"] { + --badge-background: var(--color-background-support-neutral); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="neutral-outline"] { + --badge-background: transparent; + --badge-border: var(--color-border-support-neutral); + --badge-text: var(--color-text-neutral-primary); + --border-size: 1px; + } + &[data-variant="brand"] { + --badge-background: var(--color-background-brand-primary); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="brand-outline"] { + --badge-background: transparent; + --badge-border: var(--color-border-support-neutral); + --badge-text: var(--color-text-brand-primary); + --border-size: 1px; + } + &[data-variant="info"] { + --badge-background: var(--color-background-support-info); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="success"] { + --badge-background: var(--color-background-support-success); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="warning"] { + --badge-background: var(--color-background-support-warning); + --badge-text: var(--color-utility-persistent-black); + } + &[data-variant="danger"] { + --badge-background: var(--color-background-support-danger); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="persistent-black"] { + --badge-background: var(--color-utility-persistent-black); + --badge-text: var(--color-utility-persistent-white); + } + &[data-variant="persistent-white"] { + --badge-background: var(--color-utility-persistent-white); + --badge-text: var(--color-utility-persistent-black); + } +} diff --git a/packages/common/qds-core/src/badge/qds-status-badge.css b/packages/common/qds-core/src/badge/qds-status-badge.css new file mode 100644 index 000000000..e7af7ae08 --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-status-badge.css @@ -0,0 +1,43 @@ +.qui-badge__root[data-scope="status-badge"] { + height: var(--status-size); + min-width: var(--status-size); + width: var(--status-size); + color: var(--badge-text); + background: var(--badge-background); + border: solid var(--border-size, 0) var(--badge-background); + + /* Override size-specific styles with higher specificity */ + &[data-size="xs"], + &[data-size="sm"], + &[data-size="md"], + &[data-size="lg"], + &[data-size="xl"] { + border-radius: var(--border-radius-rounded); + padding: 0; + } + + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-support-neutral); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger); + } +} + +/* outlined variant */ +.qui-badge__root[data-scope="status-badge"][data-variant="outlined"] { + background: transparent; + border-width: 1px; +} diff --git a/packages/common/qds-core/src/badge/qds-text-badge.css b/packages/common/qds-core/src/badge/qds-text-badge.css new file mode 100644 index 000000000..b1396a521 --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-text-badge.css @@ -0,0 +1,141 @@ +.qui-badge__root[data-scope="text-badge"] { + color: var(--badge-text); + background: var(--badge-background); + border: solid var(--border-size, 0) var(--badge-border); +} + +/* default variant */ +.qui-badge__root[data-scope="text-badge"][data-variant="default"] { + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-neutral-10); + --badge-text: var(--color-text-neutral-inverse); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning); + --badge-text: var(--color-utility-persistent-black); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-1"] { + --badge-background: var(--color-category-1-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-2"] { + --badge-background: var(--color-category-2-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-3"] { + --badge-background: var(--color-category-3-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-4"] { + --badge-background: var(--color-category-4-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-5"] { + --badge-background: var(--color-category-5-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-6"] { + --badge-background: var(--color-category-6-strong); + --badge-text: var(--color-utility-persistent-black); + } + &[data-emphasis="cat-7"] { + --badge-background: var(--color-category-7-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-8"] { + --badge-background: var(--color-category-8-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-9"] { + --badge-background: var(--color-category-9-strong); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="cat-10"] { + --badge-background: var(--color-category-10-strong); + --badge-text: var(--color-utility-persistent-white); + } +} + +/* subtle variant */ +.qui-badge__root[data-scope="text-badge"][data-variant="subtle"] { + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-support-neutral); + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger-medium); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-1"] { + --badge-background: var(--color-category-1-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-2"] { + --badge-background: var(--color-category-2-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-3"] { + --badge-background: var(--color-category-3-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-4"] { + --badge-background: var(--color-category-4-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-5"] { + --badge-background: var(--color-category-5-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-6"] { + --badge-background: var(--color-category-6-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-7"] { + --badge-background: var(--color-category-7-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-8"] { + --badge-background: var(--color-category-8-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-9"] { + --badge-background: var(--color-category-9-subtle); + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="cat-10"] { + --badge-background: var(--color-category-10-subtle); + --badge-text: var(--color-text-neutral-primary); + } +} diff --git a/packages/common/qds-core/src/badge/status-badge.api.ts b/packages/common/qds-core/src/badge/status-badge.api.ts new file mode 100644 index 000000000..90272ba6f --- /dev/null +++ b/packages/common/qds-core/src/badge/status-badge.api.ts @@ -0,0 +1,32 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import {booleanDataAttr} from "@qualcomm-ui/utils/attributes" +import type {PropNormalizer} from "@qualcomm-ui/utils/machine" + +import {badgeClasses} from "./badge.classes" +import type { + QdsStatusBadgeApi, + QdsStatusBadgeProps, + QdsStatusBadgeRootBindings, +} from "./status-badge.types" + +export function createQdsStatusBadgeApi( + props: QdsStatusBadgeProps, + normalize: PropNormalizer, +): QdsStatusBadgeApi { + return { + getRootBindings(): QdsStatusBadgeRootBindings { + return normalize.element({ + className: badgeClasses.root, + "data-disabled": booleanDataAttr(props.disabled), + "data-emphasis": props.emphasis || "neutral", + "data-overflow": booleanDataAttr(false), + "data-part": "root", + "data-scope": "status-badge", + "data-size": props.size || "md", + "data-variant": props.variant || "filled", + }) + }, + } +} diff --git a/packages/common/qds-core/src/badge/status-badge.types.ts b/packages/common/qds-core/src/badge/status-badge.types.ts new file mode 100644 index 000000000..7430cceb6 --- /dev/null +++ b/packages/common/qds-core/src/badge/status-badge.types.ts @@ -0,0 +1,47 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes" + +import type { + BadgeClasses, + QdsBadgeExtraSize, + QdsBadgeSemanticEmphasis, + QdsBaseBadgeProps, +} from "./badge.types" + +export type QdsStatusBadgeVariant = "filled" | "outlined" + +export interface QdsStatusBadgeProps extends QdsBaseBadgeProps { + /** + * Governs the color of the status badge. + * @default 'neutral' + */ + emphasis?: QdsBadgeSemanticEmphasis + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeExtraSize + + /** + * Governs the style of the status badge. + * @default 'filled' + */ + variant?: QdsStatusBadgeVariant +} + +export interface QdsStatusBadgeRootBindings { + className: BadgeClasses["root"] + "data-disabled": BooleanDataAttr + "data-emphasis": QdsBadgeSemanticEmphasis + "data-part": "root" + "data-scope": "status-badge" + "data-size": QdsBadgeExtraSize + "data-variant": QdsStatusBadgeVariant +} + +export interface QdsStatusBadgeApi { + getRootBindings(): QdsStatusBadgeRootBindings +} diff --git a/packages/common/qds-core/src/badge/text-badge.api.ts b/packages/common/qds-core/src/badge/text-badge.api.ts new file mode 100644 index 000000000..1de56f597 --- /dev/null +++ b/packages/common/qds-core/src/badge/text-badge.api.ts @@ -0,0 +1,31 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import {booleanDataAttr} from "@qualcomm-ui/utils/attributes" +import type {PropNormalizer} from "@qualcomm-ui/utils/machine" + +import {badgeClasses} from "./badge.classes" +import type { + QdsTextBadgeApi, + QdsTextBadgeProps, + QdsTextBadgeRootBindings, +} from "./text-badge.types" + +export function createQdsTextBadgeApi( + props: QdsTextBadgeProps, + normalize: PropNormalizer, +): QdsTextBadgeApi { + return { + getRootBindings(): QdsTextBadgeRootBindings { + return normalize.element({ + className: badgeClasses.root, + "data-disabled": booleanDataAttr(props.disabled), + "data-emphasis": props.emphasis || "neutral", + "data-part": "root", + "data-scope": "text-badge", + "data-size": props.size || "md", + "data-variant": props.variant || "default", + }) + }, + } +} diff --git a/packages/common/qds-core/src/badge/text-badge.types.ts b/packages/common/qds-core/src/badge/text-badge.types.ts new file mode 100644 index 000000000..016e66d60 --- /dev/null +++ b/packages/common/qds-core/src/badge/text-badge.types.ts @@ -0,0 +1,48 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes" + +import type { + BadgeClasses, + QdsBadgeBasicSize, + QdsBadgeCategoryEmphasis, + QdsBadgeSemanticEmphasis, + QdsBaseBadgeProps, +} from "./badge.types" + +export type QdsTextBadgeVariant = "default" | "subtle" + +export interface QdsTextBadgeProps extends QdsBaseBadgeProps { + /** + * Governs the color of the text badge. + * @default 'neutral' + */ + emphasis?: QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeBasicSize + + /** + * Governs the style of the text badge. + * @default 'default' + */ + variant?: QdsTextBadgeVariant +} + +export interface QdsTextBadgeRootBindings { + className: BadgeClasses["root"] + "data-disabled": BooleanDataAttr + "data-emphasis": QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis + "data-part": "root" + "data-scope": "text-badge" + "data-size": QdsBadgeBasicSize + "data-variant": QdsTextBadgeVariant +} + +export interface QdsTextBadgeApi { + getRootBindings(): QdsTextBadgeRootBindings +} diff --git a/packages/docs/angular-docs/qui-docs.config.ts b/packages/docs/angular-docs/qui-docs.config.ts index 892d8e62d..25ca81b73 100644 --- a/packages/docs/angular-docs/qui-docs.config.ts +++ b/packages/docs/angular-docs/qui-docs.config.ts @@ -33,6 +33,13 @@ export default { separator: true, }, { + children: [ + { + group: "Data Display", + id: "badges", + ignoreRouteMetaOrder: true, + }, + ], expanded: true, groupOrder: [ "Buttons", diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx b/packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx deleted file mode 100644 index 70cd04b03..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/_badge.mdx +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Badge -group: Data Display ---- - -import {QdsDemo} from "~components/demo" -import { - TypeDocProps, - TypeDocAngularAttributes, -} from "@qualcomm-ui/react-mdx/typedoc" - -# {frontmatter.title} - -Badges provide immediate visual context through color-coded indicators that help users quickly identify status, priority levels, or content categories. They're designed to be concise, accessible, and consistent across desktop and mobile experiences. Use badges to draw attention to important information without overwhelming the interface. - -```typescript -import {BadgeDirective} from "@qualcomm-ui/angular/badge" -``` - -Badge supports four distinct types via the `type` input: `text`, `count`, `icon`, and `status`. - -## Text Badges - -Text badges display text labels and are the default badge type. - - - -### Emphasis - -Text badges support semantic and category emphasis via the [emphasis](./#emphasis-3) input. Semantic emphasis options include `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. - - - -### Variant - -Control the visual weight with the [variant](./#variant-3) input. Text badges support `default` (bolder appearance) and `subtle` (lighter appearance) variants. - - - -### Sizes - -Change the text badge dimensions using the [size](./#size) input. Three sizes are available: `sm`, `md` (default), and `lg`. - - - -## Count Badges - -Count badges display numeric values. Use the [count](./#count) input for auto formatting, or use content projection for manual content. - - - -### Auto Formatting - -When using the [count](./#count) input with [max](./#max), the badge automatically formats overflow values. If count exceeds max, the badge displays "max+" and applies special styling. The default max is 99. - - - -### Variants - -Count badges support multiple variants via the [variant](./#variant-3) input: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. - - - -### Sizes - -Change the count badge dimensions using the [size](./#size) input. Three sizes are available: `sm`, `md` (default), and `lg`. - - - -## Icon Badges - -Icon badges display icons. Use the [icon](./#icon) input to provide a Lucide icon name, or use content projection for custom SVG content. - - - -### Emphasis - -Icon badges support the same semantic and category emphasis options as text badges via the [emphasis](./#emphasis-3) input. - - - -### Variant - -Icon badges support `default` and `subtle` variants via the [variant](./#variant-3) input. - - - -### Sizes - -Change the icon badge dimensions using the [size](./#size) input. Six sizes are available: `xxs`, `xs`, `sm`, `md` (default), `lg`, and `xl`. - - - -## Status Badges - -Status badges display a colored dot indicator with no content. They're useful for showing online/offline status or availability states. - -### Emphasis - -Status badges support semantic emphasis via the [emphasis](./#emphasis-3) input: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. - - - -### Variant - -Control the style with the [variant](./#variant-3) input. Status badges support `filled` (default) and `outlined` variants. - - - -### Sizes - -Change the status badge dimensions using the [size](./#size) input. Five sizes are available: `xs`, `sm`, `md` (default), `lg`, and `xl`. - - - -## Common Properties - -### Disabled - -All badge types have a disabled state that can be set by the `disabled` input. - - - -## API - -### q-badge - - - - diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-demo.ts deleted file mode 100644 index b6ef595b4..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-demo.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {Component} from "@angular/core" - -import {BadgeDirective} from "@qualcomm-ui/angular/badge" - -@Component({ - imports: [BadgeDirective], - selector: "badge-count-demo", - template: ` -
- - 42 - - - -
- `, -}) -export class BadgeCountDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-max-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-max-demo.ts deleted file mode 100644 index 2809e9c39..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-max-demo.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {Component} from "@angular/core" - -import {BadgeDirective} from "@qualcomm-ui/angular/badge" - -@Component({ - imports: [BadgeDirective], - selector: "badge-count-max-demo", - template: ` -
- - - - - - -
- `, -}) -export class BadgeCountMaxDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.ts deleted file mode 100644 index 1f7d354e8..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {Component} from "@angular/core" - -import {BadgeDirective} from "@qualcomm-ui/angular/badge" - -@Component({ - imports: [BadgeDirective], - selector: "badge-count-sizes-demo", - template: ` -
- - - - - -
- `, -}) -export class BadgeCountSizesDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.ts deleted file mode 100644 index 91085bd9e..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {Component} from "@angular/core" - -import {BadgeDirective} from "@qualcomm-ui/angular/badge" - -@Component({ - imports: [BadgeDirective], - selector: "badge-count-variants-demo", - template: ` -
- - - - - - - - - - - - -
- `, -}) -export class BadgeCountVariantsDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.ts deleted file mode 100644 index 45d9ef383..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.ts +++ /dev/null @@ -1,24 +0,0 @@ -import {Component} from "@angular/core" -import {Star} from "lucide-angular" - -import {BadgeDirective} from "@qualcomm-ui/angular/badge" -import {provideIcons} from "@qualcomm-ui/angular-core/lucide" - -@Component({ - imports: [BadgeDirective], - providers: [provideIcons({Star})], - selector: "badge-icon-emphasis-demo", - template: ` -
- - - - - - - - -
- `, -}) -export class BadgeIconEmphasisDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.ts deleted file mode 100644 index 4c43ff229..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.ts +++ /dev/null @@ -1,24 +0,0 @@ -import {Component} from "@angular/core" -import {Star} from "lucide-angular" - -import {BadgeDirective} from "@qualcomm-ui/angular/badge" -import {provideIcons} from "@qualcomm-ui/angular-core/lucide" - -@Component({ - imports: [BadgeDirective], - providers: [provideIcons({Star})], - selector: "badge-icon-sizes-demo", - template: ` -
- - - - - - - - -
- `, -}) -export class BadgeIconSizesDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.ts deleted file mode 100644 index 389060716..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.ts +++ /dev/null @@ -1,60 +0,0 @@ -import {Component} from "@angular/core" -import {Star} from "lucide-angular" - -import {BadgeDirective} from "@qualcomm-ui/angular/badge" -import {provideIcons} from "@qualcomm-ui/angular-core/lucide" - -@Component({ - imports: [BadgeDirective], - providers: [provideIcons({Star})], - selector: "badge-icon-variants-demo", - template: ` -
- - - - - - - - -
- `, -}) -export class BadgeIconVariantsDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.ts deleted file mode 100644 index 15c09e635..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.ts +++ /dev/null @@ -1,21 +0,0 @@ -import {Component} from "@angular/core" - -import {BadgeDirective} from "@qualcomm-ui/angular/badge" - -@Component({ - imports: [BadgeDirective], - selector: "badge-status-emphasis-demo", - template: ` -
- - - - - - - - -
- `, -}) -export class BadgeStatusEmphasisDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.ts deleted file mode 100644 index 47c5914cc..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {Component} from "@angular/core" - -import {BadgeDirective} from "@qualcomm-ui/angular/badge" - -@Component({ - imports: [BadgeDirective], - selector: "badge-status-sizes-demo", - template: ` -
- - - - - - - -
- `, -}) -export class BadgeStatusSizesDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.ts deleted file mode 100644 index 44a3a8cb0..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.ts +++ /dev/null @@ -1,21 +0,0 @@ -import {Component} from "@angular/core" - -import {BadgeDirective} from "@qualcomm-ui/angular/badge" - -@Component({ - imports: [BadgeDirective], - selector: "badge-status-variants-demo", - template: ` -
- - - - - - - - -
- `, -}) -export class BadgeStatusVariantsDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-demo.ts b/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-demo.ts deleted file mode 100644 index e5f9f41c8..000000000 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-demo.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {Component} from "@angular/core" - -import {BadgeDirective} from "@qualcomm-ui/angular/badge" - -@Component({ - imports: [BadgeDirective], - selector: "badge-text-demo", - template: ` -
- - New - Pro - Beta - -
- `, -}) -export class BadgeTextDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx new file mode 100644 index 000000000..f49c99a7b --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx @@ -0,0 +1,57 @@ +--- +title: Icon Badge +--- + +import {QdsDemo} from "~components/demo" +import { + TypeDocProps, + TypeDocAngularAttributes, +} from "@qualcomm-ui/react-mdx/typedoc" + +# {frontmatter.title} + +Display icons within compact, color-coded containers. Use icon badges to represent actions, status, or categories with visual symbols instead of text. + +```typescript +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" +``` + +## Examples + +### Icon + +Use the [icon](./#icon-1) input to provide a Lucide icon name, or use content projection for custom SVG content. + + + +### Emphasis + +Use the [emphasis](./#emphasis-1) input to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. + + + +### Variant + +The [variant](./#variant-1) input controls the aspect of the badge. Two variants are available: `default` (bolder appearance) and `subtle` (muted appearance). + + + +### Size + +Control dimensions using the [size](./#size-1) input. Six sizes are available: `xxs`, `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +### Disabled + +Set the [disabled](./#disabled-1) input to visually indicate that the badge is inactive. + + + +## API + +### q-icon-badge + + + + diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.ts new file mode 100644 index 000000000..56fce5c85 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.ts @@ -0,0 +1,20 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [IconBadgeDirective], + providers: [provideIcons({Star})], + selector: "icon-badge-disabled-demo", + template: ` +
+ + + + +
+ `, +}) +export class IconBadgeDisabledDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.ts new file mode 100644 index 000000000..afe63d06a --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.ts @@ -0,0 +1,36 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [IconBadgeDirective], + providers: [provideIcons({Star})], + selector: "icon-badge-emphasis-demo", + template: ` +
+
+ + + + + + +
+
+ + + + + + + + + + +
+
+ `, +}) +export class IconBadgeEmphasisDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.ts similarity index 67% rename from packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-demo.ts rename to packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.ts index 864ff1443..935257aa0 100644 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-icon-demo.ts +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.ts @@ -1,18 +1,18 @@ import {Component} from "@angular/core" import {Star} from "lucide-angular" -import {BadgeDirective} from "@qualcomm-ui/angular/badge" +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" import {provideIcons} from "@qualcomm-ui/angular-core/lucide" @Component({ - imports: [BadgeDirective], + imports: [IconBadgeDirective], providers: [provideIcons({Star})], - selector: "badge-icon-demo", + selector: "icon-badge-icon-demo", template: `
- - + + @@ -21,4 +21,4 @@ import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
`, }) -export class BadgeIconDemo {} +export class IconBadgeIconDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.ts new file mode 100644 index 000000000..716019778 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.ts @@ -0,0 +1,24 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [IconBadgeDirective], + providers: [provideIcons({Star})], + selector: "icon-badge-size-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class IconBadgeSizeDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.ts new file mode 100644 index 000000000..e264757e4 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.ts @@ -0,0 +1,61 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [IconBadgeDirective], + providers: [provideIcons({Star})], + selector: "icon-badge-variant-demo", + template: ` +
+
+ + + + + + +
+
+ + + + + + + + + + +
+
+ `, +}) +export class IconBadgeVariantDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx new file mode 100644 index 000000000..a0923fe3c --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx @@ -0,0 +1,57 @@ +--- +title: Number Badge +--- + +import {QdsDemo} from "~components/demo" +import { + TypeDocProps, + TypeDocAngularAttributes, +} from "@qualcomm-ui/react-mdx/typedoc" + +# {frontmatter.title} + +Display numeric values in compact, color-coded containers. Use number badges to show counts, notifications, or other numerical indicators. + +```typescript +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" +``` + +## Examples + +### Value + +Use the [value](./#value-1) input for auto formatting, or use content projection for manual content. + + + +### Max (Auto Formatting) + +When using the [value](./#value-1) input with [max](./#max), overflow values are automatically formatted. If value exceeds max, the badge displays "max+" and applies special styling. The default max is 99. + + + +### Variant + +Multiple color and style options are available via the [variant](./#variant-1) input: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. + + + +### Size + +Control dimensions using the [size](./#size-1) input. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +### Disabled + +Set the [disabled](./#disabled-1) input to visually indicate that the badge is inactive. + + + +## API + +### q-number-badge + + + + diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.ts new file mode 100644 index 000000000..e72e3098e --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.ts @@ -0,0 +1,17 @@ +import {Component} from "@angular/core" + +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [NumberBadgeDirective], + selector: "number-badge-disabled-demo", + template: ` +
+ + + + +
+ `, +}) +export class NumberBadgeDisabledDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.ts new file mode 100644 index 000000000..dc9588d19 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.ts @@ -0,0 +1,19 @@ +import {Component} from "@angular/core" + +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [NumberBadgeDirective], + selector: "number-badge-max-demo", + template: ` +
+ + + + + + +
+ `, +}) +export class NumberBadgeMaxDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.ts new file mode 100644 index 000000000..680d410b7 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.ts @@ -0,0 +1,18 @@ +import {Component} from "@angular/core" + +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [NumberBadgeDirective], + selector: "number-badge-size-demo", + template: ` +
+ + + + + +
+ `, +}) +export class NumberBadgeSizeDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.ts new file mode 100644 index 000000000..690f70ab2 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.ts @@ -0,0 +1,18 @@ +import {Component} from "@angular/core" + +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [NumberBadgeDirective], + selector: "number-badge-value-demo", + template: ` +
+ + 42 + + + +
+ `, +}) +export class NumberBadgeValueDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.ts new file mode 100644 index 000000000..7bda87b61 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.ts @@ -0,0 +1,25 @@ +import {Component} from "@angular/core" + +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [NumberBadgeDirective], + selector: "number-badge-variant-demo", + template: ` +
+ + + + + + + + + + + + +
+ `, +}) +export class NumberBadgeVariantDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx new file mode 100644 index 000000000..0ca5e2362 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx @@ -0,0 +1,51 @@ +--- +title: Status Badge +--- + +import {QdsDemo} from "~components/demo" +import { + TypeDocProps, + TypeDocAngularAttributes, +} from "@qualcomm-ui/react-mdx/typedoc" + +# {frontmatter.title} + +Display colored dot indicators to communicate status or availability. Use status badges to show online/offline states, connection status, or other binary conditions. + +```typescript +import {StatusBadgeDirective} from "@qualcomm-ui/angular/badge" +``` + +## Examples + +### Emphasis + +Use the [emphasis](./#emphasis-1) input to convey semantic meaning with colors. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. + + + +### Variant + +The [variant](./#variant-1) input controls the aspect of the badge. Two variants are available: `filled` (default) and `outlined`. + + + +### Size + +Control dimensions using the [size](./#size-1) input. Five sizes are available: `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +### Disabled + +Set the [disabled](./#disabled-1) input to visually indicate that the badge is inactive. + + + +## API + +### q-status-badge + + + + diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.ts new file mode 100644 index 000000000..a9635c7d2 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.ts @@ -0,0 +1,17 @@ +import {Component} from "@angular/core" + +import {StatusBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [StatusBadgeDirective], + selector: "status-badge-disabled-demo", + template: ` +
+ + + + +
+ `, +}) +export class StatusBadgeDisabledDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.ts new file mode 100644 index 000000000..c5d6e04a6 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.ts @@ -0,0 +1,21 @@ +import {Component} from "@angular/core" + +import {StatusBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [StatusBadgeDirective], + selector: "status-badge-emphasis-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class StatusBadgeEmphasisDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.ts new file mode 100644 index 000000000..81ff7a21e --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.ts @@ -0,0 +1,20 @@ +import {Component} from "@angular/core" + +import {StatusBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [StatusBadgeDirective], + selector: "status-badge-size-demo", + template: ` +
+ + + + + + + +
+ `, +}) +export class StatusBadgeSizeDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.ts new file mode 100644 index 000000000..72bc771af --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.ts @@ -0,0 +1,21 @@ +import {Component} from "@angular/core" + +import {StatusBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [StatusBadgeDirective], + selector: "status-badge-variant-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class StatusBadgeVariantDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx new file mode 100644 index 000000000..46f47ca23 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx @@ -0,0 +1,51 @@ +--- +title: Text Badge +--- + +import {QdsDemo} from "~components/demo" +import { + TypeDocProps, + TypeDocAngularAttributes, +} from "@qualcomm-ui/react-mdx/typedoc" + +# {frontmatter.title} + +Display text labels in compact, color-coded containers. Use text badges to categorize content, show status, or highlight information with concise labels. + +```typescript +import {BadgeDirective} from "@qualcomm-ui/angular/badge" +``` + +## Examples + +### Emphasis + +Use the [emphasis](./#emphasis-1) input to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. + + + +### Variant + +The [variant](./#variant-1) input controls the aspect of the badge. Two variants are available: `default` (bolder appearance) and `subtle` (muted appearance). + + + +### Size + +Control dimensions using the [size](./#size-1) input. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +### Disabled + +Set the [disabled](./#disabled-1) input to visually indicate that the badge is inactive. + + + +## API + +### q-badge + + + + diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-disabled-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.ts similarity index 57% rename from packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-disabled-demo.ts rename to packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.ts index f64b6fc6b..1f31fcaae 100644 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-disabled-demo.ts +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.ts @@ -4,14 +4,14 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge" @Component({ imports: [BadgeDirective], - selector: "badge-disabled-demo", + selector: "text-badge-disabled-demo", template: `
- Enabled - Disabled + Enabled + Disabled
`, }) -export class BadgeDisabledDemo {} +export class TextBadgeDisabledDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts similarity index 93% rename from packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.ts rename to packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts index 72014a625..58a95e214 100644 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.ts +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts @@ -4,7 +4,7 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge" @Component({ imports: [BadgeDirective], - selector: "badge-text-emphasis-demo", + selector: "text-badge-emphasis-demo", template: `
@@ -30,4 +30,4 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge"
`, }) -export class BadgeTextEmphasisDemo {} +export class TextBadgeEmphasisDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.ts similarity index 84% rename from packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.ts rename to packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.ts index 4d58eae19..117d79aa3 100644 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.ts +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.ts @@ -4,7 +4,7 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge" @Component({ imports: [BadgeDirective], - selector: "badge-text-sizes-demo", + selector: "text-badge-size-demo", template: `
@@ -15,4 +15,4 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge"
`, }) -export class BadgeTextSizesDemo {} +export class TextBadgeSizeDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts similarity index 94% rename from packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.ts rename to packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts index 1e6c357a1..963dc60b2 100644 --- a/packages/docs/angular-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.ts +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts @@ -4,7 +4,7 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge" @Component({ imports: [BadgeDirective], - selector: "badge-text-variants-demo", + selector: "text-badge-variant-demo", template: `
@@ -30,4 +30,4 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge"
`, }) -export class BadgeTextVariantsDemo {} +export class TextBadgeVariantDemo {} diff --git a/packages/docs/react-docs/qui-docs.config.ts b/packages/docs/react-docs/qui-docs.config.ts index 9bc5b7b33..14e622e7d 100644 --- a/packages/docs/react-docs/qui-docs.config.ts +++ b/packages/docs/react-docs/qui-docs.config.ts @@ -53,6 +53,11 @@ export default { { id: "all-components", }, + { + group: "Data Display", + id: "badges", + ignoreRouteMetaOrder: true, + }, ], expanded: true, groupOrder: [ diff --git a/packages/docs/react-docs/src/components/demo/lazy-demo-loader.ts b/packages/docs/react-docs/src/components/demo/lazy-demo-loader.ts index 81d52ea3b..c7e9ef9eb 100644 --- a/packages/docs/react-docs/src/components/demo/lazy-demo-loader.ts +++ b/packages/docs/react-docs/src/components/demo/lazy-demo-loader.ts @@ -1,3 +1,5 @@ +/* eslint-disable */ + // This file is generated automatically. Don't edit it directly. import type {ReactDemoWithScope} from "@qualcomm-ui/mdx-common" @@ -10,8 +12,14 @@ export const lazyDemos: Record< import("virtual:qui-demo-scope/page:components+/accordion+"), "/components/avatar": () => import("virtual:qui-demo-scope/page:components+/avatar+"), - "/components/badge": () => - import("virtual:qui-demo-scope/page:components+/badge+"), + "/components/badges/icon-badge": () => + import("virtual:qui-demo-scope/page:components+/badges+/icon-badge+"), + "/components/badges/number-badge": () => + import("virtual:qui-demo-scope/page:components+/badges+/number-badge+"), + "/components/badges/status-badge": () => + import("virtual:qui-demo-scope/page:components+/badges+/status-badge+"), + "/components/badges/text-badge": () => + import("virtual:qui-demo-scope/page:components+/badges+/text-badge+"), "/components/breadcrumbs": () => import("virtual:qui-demo-scope/page:components+/breadcrumbs+"), "/components/button": () => diff --git a/packages/docs/react-docs/src/routes/components+/badge+/_badge.mdx b/packages/docs/react-docs/src/routes/components+/badge+/_badge.mdx deleted file mode 100644 index abfc7e0f2..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/_badge.mdx +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Badge -group: Data Display ---- - -import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" -import {QdsDemo} from "~components/demo" - -# {frontmatter.title} - -Badges provide immediate visual context through color-coded indicators that help users quickly identify status, priority levels, or content categories. They're designed to be concise, accessible, and consistent across desktop and mobile experiences. Use badges to draw attention to important information without overwhelming the interface. - -```typescript -import {Badge} from "@qualcomm-ui/react/badge" -``` - -Badge supports four distinct types via the `type` prop: `text`, `count`, `icon`, and `status`. - -## Text Badges - -Text badges display text labels and are the default badge type. - - - -### Emphasis - -Text badges support semantic and category emphasis via the [emphasis](./#emphasis-3) prop. Semantic emphasis options include `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. - - - -### Variant - -Control the visual weight with the [variant](./#variant-3) prop. Text badges support `default` (bolder appearance) and `subtle` (lighter appearance) variants. - - - -### Sizes - -Change the text badge dimensions using the [size](./#size) prop. Three sizes are available: `sm`, `md` (default), and `lg`. - - - -## Count Badges - -Count badges display numeric values. Use the [count](./#count) prop for auto formatting, or use [children](./#children-1) for manual content. - - - -### Auto Formatting - -When using the [count](./#count) prop with [max](./#max), the badge automatically formats overflow values. If count exceeds max, the badge displays "max+" and applies special styling. The default max is 99. - - - -### Variants - -Count badges support multiple variants via the [variant](./#variant-4) prop: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. - - - -### Sizes - -Change the count badge dimensions using the [size](./#size-1) prop. Three sizes are available: `sm`, `md` (default), and `lg`. - - - -## Icon Badges - -Icon badges display icons. Use the [icon](./#icon) prop to provide a Lucide icon, or use [children](./#children-2) for custom SVG content. - - - -### Emphasis - -Icon badges support the same semantic and category emphasis options as text badges via the [emphasis](./#emphasis-4) prop. - - - -### Variant - -Icon badges support `default` and `subtle` variants via the [variant](./#variant-5) prop. - - - -### Sizes - -Change the icon badge dimensions using the [size](./#size-2) prop. Six sizes are available: `xxs`, `xs`, `sm`, `md` (default), `lg`, and `xl`. - - - -## Status Badges - -Status badges display a colored dot indicator with no content. They're useful for showing online/offline status or availability states. - -### Emphasis - -Status badges support semantic emphasis via the [emphasis](./#emphasis-5) prop: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. - - - -### Variant - -Control the style with the [variant](./#variant-6) prop. Status badges support `filled` (default) and `outlined` variants. - - - -### Sizes - -Change the status badge dimensions using the [size](./#size-3) prop. Five sizes are available: `xs`, `sm`, `md` (default), `lg`, and `xl`. - - - -## Common Properties - -### Disabled - -All badge types have a disabled state that can be set by the `disabled` prop. - - - -## API - -### \ - - - -### \ - - - - - -### \ - - - - - -### \ - - - - - -### \ - - - - diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-demo.tsx deleted file mode 100644 index 2b648c4ad..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-demo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReactElement} from "react" - -import {Badge} from "@qualcomm-ui/react/badge" - -export default function BadgeCountDemo(): ReactElement { - return ( -
- {/* preview */} - 42 - - - {/* preview */} -
- ) -} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-max-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-max-demo.tsx deleted file mode 100644 index 988f3205c..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-max-demo.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type {ReactElement} from "react" - -import {Badge} from "@qualcomm-ui/react/badge" - -export default function BadgeCountMaxDemo(): ReactElement { - return ( -
- {/* preview */} - - - - - {/* preview */} -
- ) -} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.tsx deleted file mode 100644 index 27743187c..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-sizes-demo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReactElement} from "react" - -import {Badge} from "@qualcomm-ui/react/badge" - -export default function BadgeCountSizesDemo(): ReactElement { - return ( -
- {/* preview */} - - - - {/* preview */} -
- ) -} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.tsx deleted file mode 100644 index 77582f829..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-count-variants-demo.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type {ReactElement} from "react" - -import {Badge} from "@qualcomm-ui/react/badge" - -export default function BadgeCountVariantsDemo(): ReactElement { - return ( -
- {/* preview */} - - - - - - - - - - - {/* preview */} -
- ) -} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.tsx deleted file mode 100644 index caf5ba40c..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-emphasis-demo.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type {ReactElement} from "react" - -import {Star} from "lucide-react" - -import {Badge} from "@qualcomm-ui/react/badge" - -export default function BadgeIconEmphasisDemo(): ReactElement { - return ( -
- {/* preview */} - - - - - - - {/* preview */} -
- ) -} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.tsx deleted file mode 100644 index 62994a2cb..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-sizes-demo.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type {ReactElement} from "react" - -import {Star} from "lucide-react" - -import {Badge} from "@qualcomm-ui/react/badge" - -export default function BadgeIconSizesDemo(): ReactElement { - return ( -
- {/* preview */} - - - - - - - {/* preview */} -
- ) -} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.tsx deleted file mode 100644 index b9b7b4b0e..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-variants-demo.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type {ReactElement} from "react" - -import {Star} from "lucide-react" - -import {Badge} from "@qualcomm-ui/react/badge" - -export default function BadgeIconVariantsDemo(): ReactElement { - return ( -
- {/* preview */} - - - - - - - {/* preview */} -
- ) -} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.tsx deleted file mode 100644 index 690a16d1e..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-emphasis-demo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type {ReactElement} from "react" - -import {Badge} from "@qualcomm-ui/react/badge" - -export default function BadgeStatusEmphasisDemo(): ReactElement { - return ( -
- {/* preview */} - - - - - - - {/* preview */} -
- ) -} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.tsx deleted file mode 100644 index 42dfeddb7..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-sizes-demo.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type {ReactElement} from "react" - -import {Badge} from "@qualcomm-ui/react/badge" - -export default function BadgeStatusSizesDemo(): ReactElement { - return ( -
- {/* preview */} - - - - - - {/* preview */} -
- ) -} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.tsx deleted file mode 100644 index c56bd3a34..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-status-variants-demo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type {ReactElement} from "react" - -import {Badge} from "@qualcomm-ui/react/badge" - -export default function BadgeStatusVariantsDemo(): ReactElement { - return ( -
- {/* preview */} - - - - - - - {/* preview */} -
- ) -} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-demo.tsx b/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-demo.tsx deleted file mode 100644 index 7d10427cf..000000000 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-demo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReactElement} from "react" - -import {Badge} from "@qualcomm-ui/react/badge" - -export default function BadgeTextDemo(): ReactElement { - return ( -
- {/* preview */} - New - Pro - Beta - {/* preview */} -
- ) -} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx new file mode 100644 index 000000000..b4604d87d --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx @@ -0,0 +1,54 @@ +--- +title: Icon Badge +--- + +import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" +import {QdsDemo} from "~components/demo" + +# {frontmatter.title} + +Display icons within compact, color-coded containers. Use icon badges to represent actions, status, or categories with visual symbols instead of text. + +```typescript +import {IconBadge} from "@qualcomm-ui/react/badge" +``` + +## Examples + +### Icon + +Use the [icon](./#icon-1) prop to provide a Lucide icon, or use [children](./#children) for custom SVG content. + + + +### Emphasis + +Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. + + + +### Variant + +The [variant](./#variant-1) prop controls the aspect of the badge. Two variants are available: `default` (bolder appearance) and `subtle` (muted appearance). + + + +### Size + +Control dimensions using the [size](./#size-1) prop. Six sizes are available: `xxs`, `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +### Disabled + +Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. + + + +## API + +### \ + + + + diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.tsx new file mode 100644 index 000000000..c5577ab01 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.tsx @@ -0,0 +1,16 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {IconBadge} from "@qualcomm-ui/react/badge" + +export default function IconBadgeDisabledDemo(): ReactElement { + return ( +
+ {/* preview */} + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx new file mode 100644 index 000000000..7a8ea3d3c --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx @@ -0,0 +1,32 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {IconBadge} from "@qualcomm-ui/react/badge" + +export default function IconBadgeEmphasisDemo(): ReactElement { + return ( +
+
+ + + + + + +
+
+ + + + + + + + + + +
+
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.tsx similarity index 66% rename from packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-demo.tsx rename to packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.tsx index d567cc64b..20ffdd36a 100644 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-icon-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.tsx @@ -2,18 +2,18 @@ import type {ReactElement} from "react" import {Star} from "lucide-react" -import {Badge} from "@qualcomm-ui/react/badge" +import {IconBadge} from "@qualcomm-ui/react/badge" -export default function BadgeIconDemo(): ReactElement { +export default function IconBadgeIconDemo(): ReactElement { return (
{/* preview */} - - + + - + {/* preview */}
) diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.tsx new file mode 100644 index 000000000..2524b581b --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.tsx @@ -0,0 +1,20 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {IconBadge} from "@qualcomm-ui/react/badge" + +export default function IconBadgeSizeDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx new file mode 100644 index 000000000..cf317b052 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx @@ -0,0 +1,32 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {IconBadge} from "@qualcomm-ui/react/badge" + +export default function IconBadgeVariantDemo(): ReactElement { + return ( +
+
+ + + + + + +
+
+ + + + + + + + + + +
+
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx new file mode 100644 index 000000000..e70bc09fa --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx @@ -0,0 +1,54 @@ +--- +title: Number Badge +--- + +import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" +import {QdsDemo} from "~components/demo" + +# {frontmatter.title} + +Display numeric values in compact, color-coded containers. Use number badges to show counts, notifications, or other numerical indicators. + +```typescript +import {NumberBadge} from "@qualcomm-ui/react/badge" +``` + +## Examples + +### Value + +Use the [value](./#value-1) prop for auto formatting, or use [children](./#children) for manual content. + + + +### Max (Auto Formatting) + +When using the [value](./#value-1) prop with [max](./#max), overflow values are automatically formatted. If value exceeds max, the badge displays "max+" and applies special styling. The default max is 99. + + + +### Variant + +Multiple color and style options are available via the [variant](./#variant-1) prop: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. + + + +### Size + +Control dimensions using the [size](./#size-1) prop. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +### Disabled + +Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. + + + +## API + +### \ + + + + diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx new file mode 100644 index 000000000..8d85363f9 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx @@ -0,0 +1,14 @@ +import type {ReactElement} from "react" + +import {NumberBadge} from "@qualcomm-ui/react/badge" + +export default function NumberBadgeDisabledDemo(): ReactElement { + return ( +
+ {/* preview */} + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.tsx new file mode 100644 index 000000000..7d1b81d96 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.tsx @@ -0,0 +1,16 @@ +import type {ReactElement} from "react" + +import {NumberBadge} from "@qualcomm-ui/react/badge" + +export default function NumberBadgeMaxDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.tsx new file mode 100644 index 000000000..951702859 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.tsx @@ -0,0 +1,15 @@ +import type {ReactElement} from "react" + +import {NumberBadge} from "@qualcomm-ui/react/badge" + +export default function NumberBadgeSizeDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.tsx new file mode 100644 index 000000000..fa88cc0ca --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.tsx @@ -0,0 +1,15 @@ +import type {ReactElement} from "react" + +import {NumberBadge} from "@qualcomm-ui/react/badge" + +export default function NumberBadgeValueDemo(): ReactElement { + return ( +
+ {/* preview */} + 42 + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx new file mode 100644 index 000000000..8f23ff6c0 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx @@ -0,0 +1,22 @@ +import type {ReactElement} from "react" + +import {NumberBadge} from "@qualcomm-ui/react/badge" + +export default function NumberBadgeVariantDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx new file mode 100644 index 000000000..31cb65898 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx @@ -0,0 +1,48 @@ +--- +title: Status Badge +--- + +import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" +import {QdsDemo} from "~components/demo" + +# {frontmatter.title} + +Display colored dot indicators to communicate status or availability. Use status badges to show online/offline states, connection status, or other binary conditions. + +```typescript +import {StatusBadge} from "@qualcomm-ui/react/badge" +``` + +## Examples + +### Emphasis + +Use the [emphasis](./#emphasis-1) prop to convey semantic meaning with colors. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. + + + +### Variant + +The [variant](./#variant-1) prop controls the aspect of the badge. Two variants are available: `filled` (default) and `outlined`. + + + +### Size + +Control dimensions using the [size](./#size-1) prop. Five sizes are available: `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +### Disabled + +Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. + + + +## API + +### \ + + + + diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.tsx new file mode 100644 index 000000000..38894c8c7 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.tsx @@ -0,0 +1,14 @@ +import type {ReactElement} from "react" + +import {StatusBadge} from "@qualcomm-ui/react/badge" + +export default function StatusBadgeDisabledDemo(): ReactElement { + return ( +
+ {/* preview */} + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.tsx new file mode 100644 index 000000000..fa0d72a35 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.tsx @@ -0,0 +1,18 @@ +import type {ReactElement} from "react" + +import {StatusBadge} from "@qualcomm-ui/react/badge" + +export default function StatusBadgeEmphasisDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.tsx new file mode 100644 index 000000000..a9a3d88fc --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.tsx @@ -0,0 +1,17 @@ +import type {ReactElement} from "react" + +import {StatusBadge} from "@qualcomm-ui/react/badge" + +export default function StatusBadgeSizeDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.tsx new file mode 100644 index 000000000..460c75e6e --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.tsx @@ -0,0 +1,18 @@ +import type {ReactElement} from "react" + +import {StatusBadge} from "@qualcomm-ui/react/badge" + +export default function StatusBadgeVariantDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx new file mode 100644 index 000000000..4ece9158f --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx @@ -0,0 +1,48 @@ +--- +title: Text Badge +--- + +import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" +import {QdsDemo} from "~components/demo" + +# {frontmatter.title} + +Display text labels in compact, color-coded containers. Use text badges to categorize content, show status, or highlight information with concise labels. + +```typescript +import {Badge} from "@qualcomm-ui/react/badge" +``` + +## Examples + +### Emphasis + +Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. + + + +### Variant + +The [variant](./#variant-1) prop controls the aspect of the badge. Two variants are available: `default` (bolder appearance) and `subtle` (muted appearance). + + + +### Size + +Control dimensions using the [size](./#size-1) prop. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +### Disabled + +Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. + + + +## API + +### \ + + + + diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.tsx similarity index 83% rename from packages/docs/react-docs/src/routes/components+/badge+/demos/badge-disabled-demo.tsx rename to packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.tsx index 385512c6e..f1a10e1c7 100644 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-disabled-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {Badge} from "@qualcomm-ui/react/badge" -export default function BadgeDisabledDemo(): ReactElement { +export default function TextBadgeDisabledDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx similarity index 94% rename from packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.tsx rename to packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx index 698a34795..6159c4967 100644 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-emphasis-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {Badge} from "@qualcomm-ui/react/badge" -export default function BadgeTextEmphasisDemo(): ReactElement { +export default function TextBadgeEmphasisDemo(): ReactElement { return (
diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.tsx similarity index 84% rename from packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.tsx rename to packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.tsx index b953d03f5..fb1fb89a8 100644 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-sizes-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {Badge} from "@qualcomm-ui/react/badge" -export default function BadgeTextSizesDemo(): ReactElement { +export default function TextBadgeSizeDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx similarity index 96% rename from packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.tsx rename to packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx index 8ac9450a1..e1f51f478 100644 --- a/packages/docs/react-docs/src/routes/components+/badge+/demos/badge-text-variants-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {Badge} from "@qualcomm-ui/react/badge" -export default function BadgeTextVariantsDemo(): ReactElement { +export default function TextBadgeVariantDemo(): ReactElement { return (
diff --git a/packages/frameworks/angular/src/badge/badge.directive.ts b/packages/frameworks/angular/src/badge/badge.directive.ts index 778c5ba88..3fea20373 100644 --- a/packages/frameworks/angular/src/badge/badge.directive.ts +++ b/packages/frameworks/angular/src/badge/badge.directive.ts @@ -1,90 +1,43 @@ // Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. // SPDX-License-Identifier: BSD-3-Clause-Clear -import {NgTemplateOutlet} from "@angular/common" import { booleanAttribute, Component, computed, input, - numberAttribute, type OnInit, } from "@angular/core" -import {IconDirective} from "@qualcomm-ui/angular/icon" -import { - type LucideIconOrString, - provideIcons, -} from "@qualcomm-ui/angular-core/lucide" import { normalizeProps, - QBindDirective, useTrackBindings, } from "@qualcomm-ui/angular-core/machine" +import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals" import { - createQdsBadgeApi, - type QdsBadgeApiProps, + createQdsTextBadgeApi, type QdsBadgeBasicSize, - type QdsBadgeCountVariant, - type QdsBadgeExtendedSize, - type QdsBadgeIconSize, - type QdsBadgeIconTextEmphasis, - type QdsBadgeIconTextVariant, - type QdsBadgeSize, - type QdsBadgeStatusEmphasis, - type QdsBadgeStatusVariant, - type QdsBadgeType, + type QdsBadgeCategoryEmphasis, + type QdsBadgeSemanticEmphasis, + type QdsTextBadgeProps, + type QdsTextBadgeVariant, } from "@qualcomm-ui/qds-core/badge" import type {Booleanish} from "@qualcomm-ui/utils/coercion" -import type {Explicit} from "@qualcomm-ui/utils/guard" @Component({ - imports: [IconDirective, QBindDirective, NgTemplateOutlet], - providers: [provideIcons({})], selector: "[q-badge]", template: ` - - - @if (type() === "count") { - {{ displayCount() }} - } - @if (type() === "icon" && icon()) { - - } - - - - @switch (type()) { - @case ("status") { - - } - @case ("icon") { - - - - } - @default { - - } - } + `, }) -export class BadgeDirective implements OnInit { - /** - * The badge type. - * @default 'text' - */ - readonly type = input() - +export class BadgeDirective + implements OnInit, SignalifyInput +{ /** * Governs the size of the badge. - * - count: sm / md / lg - * - status: xs / sm / md / lg / xl - * - icon: xxs / xs / sm / md / lg / xl - * - text: sm / md / lg * @default 'md' */ - readonly size = input() + readonly size = input() /** * The badge disabled state. @@ -94,85 +47,31 @@ export class BadgeDirective implements OnInit { }) /** - * Governs the color of the text, icon and status badges. + * Governs the color of the text badge. + * @default 'neutral' */ - readonly emphasis = input() - - /** - * Governs the style of the badge. - */ - readonly variant = input< - QdsBadgeCountVariant | QdsBadgeStatusVariant | QdsBadgeIconTextVariant + readonly emphasis = input< + QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis >() /** - * The numeric count to display for the count badge. - */ - readonly count = input(undefined, { - transform: numberAttribute, - }) - - /** - * Maximum count to display for the count badge. - * @default 99 - */ - readonly max = input(undefined, { - transform: numberAttribute, - }) - - /** - * {@link https://lucide.dev/icons lucide-angular} icon to display in the icon badge. + * Governs the style of the badge. + * @default 'default' */ - readonly icon = input() + readonly variant = input() protected readonly api = computed(() => { - const type = this.type() || "text" - - let apiProps: QdsBadgeApiProps - - if (type === "count") { - apiProps = { - count: this.count(), - disabled: this.disabled(), - max: this.max(), - size: this.size() as QdsBadgeBasicSize | undefined, - type: "count", - variant: this.variant() as QdsBadgeCountVariant | undefined, - } - } else if (type === "status") { - apiProps = { - disabled: this.disabled(), - emphasis: this.emphasis() as QdsBadgeStatusEmphasis | undefined, - size: this.size() as QdsBadgeExtendedSize | undefined, - type: "status", - variant: this.variant() as QdsBadgeStatusVariant | undefined, - } - } else if (type === "icon") { - apiProps = { + return createQdsTextBadgeApi( + { disabled: this.disabled(), - emphasis: this.emphasis() as QdsBadgeIconTextEmphasis | undefined, - size: this.size() as QdsBadgeIconSize | undefined, - type: "icon", - variant: this.variant() as QdsBadgeIconTextVariant | undefined, - } - } else { - apiProps = { - disabled: this.disabled(), - emphasis: this.emphasis() as QdsBadgeIconTextEmphasis | undefined, - size: this.size() as QdsBadgeBasicSize | undefined, - type: "text", - variant: this.variant() as QdsBadgeIconTextVariant | undefined, - } - } - - return createQdsBadgeApi( - apiProps as Explicit, + emphasis: this.emphasis(), + size: this.size(), + variant: this.variant(), + }, normalizeProps, ) }) - protected readonly displayCount = computed(() => this.api().getDisplayCount()) - protected readonly trackBindings = useTrackBindings(() => this.api().getRootBindings(), ) diff --git a/packages/frameworks/angular/src/badge/icon-badge.directive.ts b/packages/frameworks/angular/src/badge/icon-badge.directive.ts new file mode 100644 index 000000000..41dbc0d61 --- /dev/null +++ b/packages/frameworks/angular/src/badge/icon-badge.directive.ts @@ -0,0 +1,99 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import { + booleanAttribute, + Component, + computed, + input, + type OnInit, +} from "@angular/core" + +import {IconDirective} from "@qualcomm-ui/angular/icon" +import { + type LucideIconOrString, + provideIcons, +} from "@qualcomm-ui/angular-core/lucide" +import { + normalizeProps, + QBindDirective, + useTrackBindings, +} from "@qualcomm-ui/angular-core/machine" +import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals" +import { + createQdsIconBadgeApi, + type QdsBadgeCategoryEmphasis, + type QdsBadgeExtendedSize, + type QdsBadgeSemanticEmphasis, + type QdsIconBadgeProps, + type QdsIconBadgeVariant, +} from "@qualcomm-ui/qds-core/badge" +import type {Booleanish} from "@qualcomm-ui/utils/coercion" + +@Component({ + imports: [IconDirective, QBindDirective], + providers: [provideIcons({})], + selector: "[q-icon-badge]", + template: ` + + @if (icon()) { + + } + + `, +}) +export class IconBadgeDirective + implements OnInit, SignalifyInput +{ + /** + * Governs the size of the badge. + * @default 'md' + */ + readonly size = input() + + /** + * The badge disabled state. + */ + readonly disabled = input(undefined, { + transform: booleanAttribute, + }) + + /** + * Governs the color of the icon badge. + * @default 'neutral' + */ + readonly emphasis = input< + QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis + >() + + /** + * Governs the style of the icon badge. + * @default 'default' + */ + readonly variant = input() + + /** + * {@link https://lucide.dev/icons lucide-angular} icon to display in the icon badge. + */ + readonly icon = input() + + protected readonly api = computed(() => { + return createQdsIconBadgeApi( + { + disabled: this.disabled(), + emphasis: this.emphasis(), + size: this.size(), + variant: this.variant(), + }, + normalizeProps, + ) + }) + + protected readonly trackBindings = useTrackBindings(() => + this.api().getRootBindings(), + ) + + ngOnInit() { + this.trackBindings() + } +} diff --git a/packages/frameworks/angular/src/badge/index.ts b/packages/frameworks/angular/src/badge/index.ts index 15416c60b..e8907af98 100644 --- a/packages/frameworks/angular/src/badge/index.ts +++ b/packages/frameworks/angular/src/badge/index.ts @@ -1 +1,4 @@ -export {BadgeDirective} from "./badge.directive" +export * from "./badge.directive" +export * from "./number-badge.directive" +export * from "./icon-badge.directive" +export * from "./status-badge.directive" diff --git a/packages/frameworks/angular/src/badge/ng-package.json b/packages/frameworks/angular/src/badge/ng-package.json new file mode 100644 index 000000000..020455f6f --- /dev/null +++ b/packages/frameworks/angular/src/badge/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "./index.ts" + } +} diff --git a/packages/frameworks/angular/src/badge/number-badge.directive.ts b/packages/frameworks/angular/src/badge/number-badge.directive.ts new file mode 100644 index 000000000..b46dbcc53 --- /dev/null +++ b/packages/frameworks/angular/src/badge/number-badge.directive.ts @@ -0,0 +1,91 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import { + booleanAttribute, + Component, + computed, + input, + numberAttribute, + type OnInit, +} from "@angular/core" + +import { + normalizeProps, + useTrackBindings, +} from "@qualcomm-ui/angular-core/machine" +import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals" +import { + createQdsNumberBadgeApi, + type QdsBadgeBasicSize, + type QdsNumberBadgeProps, + type QdsNumberBadgeVariant, +} from "@qualcomm-ui/qds-core/badge" +import type {Booleanish} from "@qualcomm-ui/utils/coercion" + +@Component({ + selector: "[q-number-badge]", + template: ` + {{ displayValue() }} + `, +}) +export class NumberBadgeDirective + implements OnInit, SignalifyInput +{ + /** + * Governs the size of the badge. + * @default 'md' + */ + readonly size = input() + + /** + * The badge disabled state. + */ + readonly disabled = input(undefined, { + transform: booleanAttribute, + }) + + /** + * Governs the style of the badge. + * @default 'neutral' + */ + readonly variant = input() + + /** + * The numeric value to display for the number badge. + */ + readonly value = input(undefined, { + transform: numberAttribute, + }) + + /** + * Maximum value to display for the number badge. + * @default 99 + */ + readonly max = input(undefined, { + transform: numberAttribute, + }) + + protected readonly api = computed(() => { + return createQdsNumberBadgeApi( + { + disabled: this.disabled(), + max: this.max(), + size: this.size(), + value: this.value(), + variant: this.variant(), + }, + normalizeProps, + ) + }) + + protected readonly displayValue = computed(() => this.api().displayValue) + + protected readonly trackBindings = useTrackBindings(() => + this.api().getRootBindings(), + ) + + ngOnInit() { + this.trackBindings() + } +} diff --git a/packages/frameworks/angular/src/badge/status-badge.directive.ts b/packages/frameworks/angular/src/badge/status-badge.directive.ts new file mode 100644 index 000000000..6d6c233df --- /dev/null +++ b/packages/frameworks/angular/src/badge/status-badge.directive.ts @@ -0,0 +1,76 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import { + booleanAttribute, + computed, + Directive, + input, + type OnInit, +} from "@angular/core" + +import { + normalizeProps, + useTrackBindings, +} from "@qualcomm-ui/angular-core/machine" +import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals" +import { + createQdsStatusBadgeApi, + type QdsBadgeExtraSize, + type QdsBadgeSemanticEmphasis, + type QdsStatusBadgeProps, + type QdsStatusBadgeVariant, +} from "@qualcomm-ui/qds-core/badge" +import type {Booleanish} from "@qualcomm-ui/utils/coercion" + +@Directive({ + selector: "[q-status-badge]", +}) +export class StatusBadgeDirective + implements OnInit, SignalifyInput +{ + /** + * Governs the size of the badge. + * @default 'md' + */ + readonly size = input() + + /** + * The badge disabled state. + */ + readonly disabled = input(undefined, { + transform: booleanAttribute, + }) + + /** + * Governs the color of the status badge. + * @default 'neutral' + */ + readonly emphasis = input() + + /** + * Governs the style of the status badge. + * @default 'filled' + */ + readonly variant = input() + + protected readonly api = computed(() => { + return createQdsStatusBadgeApi( + { + disabled: this.disabled(), + emphasis: this.emphasis(), + size: this.size(), + variant: this.variant(), + }, + normalizeProps, + ) + }) + + protected readonly trackBindings = useTrackBindings(() => + this.api().getRootBindings(), + ) + + ngOnInit() { + this.trackBindings() + } +} diff --git a/packages/frameworks/react/src/badge/badge.tsx b/packages/frameworks/react/src/badge/badge.tsx index 94e568600..51bf5ae03 100644 --- a/packages/frameworks/react/src/badge/badge.tsx +++ b/packages/frameworks/react/src/badge/badge.tsx @@ -4,18 +4,9 @@ import type {ReactElement, ReactNode} from "react" import { - createQdsBadgeApi, - type QdsBadgeApiProps, - type QdsBadgeBasicSize, - type QdsBadgeCountProps, - type QdsBadgeExtendedSize, - type QdsBadgeIconProps, - type QdsBadgeIconSize, - type QdsBadgeStatusProps, - type QdsBadgeTextProps, + createQdsTextBadgeApi, + type QdsTextBadgeProps as QdsTextBadgeProps, } from "@qualcomm-ui/qds-core/badge" -import {IconOrNode} from "@qualcomm-ui/react/icon" -import type {LucideIconOrElement} from "@qualcomm-ui/react-core/lucide" import {normalizeProps} from "@qualcomm-ui/react-core/machine" import { type ElementRenderProp, @@ -23,130 +14,38 @@ import { } from "@qualcomm-ui/react-core/system" import {mergeProps} from "@qualcomm-ui/utils/merge-props" -export interface BadgeCountProps extends Omit { +export interface BadgeProps + extends QdsTextBadgeProps, + ElementRenderProp<"span"> { /** * React {@link https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children children} prop. - * When provided, overrides type-specific content. */ children?: ReactNode - - type: "count" -} - -export interface BadgeStatusProps extends Omit { - type: "status" } -export interface BadgeIconProps extends Omit { - /** - * React {@link https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children children} prop. - * When provided, overrides the icon prop. - */ - children?: ReactNode - - /** - * {@link https://lucide.dev lucide-react} icon to display in the badge. - */ - icon?: LucideIconOrElement - - type: "icon" -} - -export interface BadgeTextProps extends Omit { - /** - * React {@link https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children children} prop. - */ - children?: ReactNode - - type?: "text" -} - -export type BadgeProps = ElementRenderProp<"span"> & - (BadgeCountProps | BadgeStatusProps | BadgeIconProps | BadgeTextProps) - -export function Badge(props: BadgeProps): ReactElement { - const {children, disabled, size, type, ...restProps} = props - - let qdsApiProps: QdsBadgeApiProps - - switch (type) { - case "count": - qdsApiProps = { - count: (props as BadgeCountProps).count, - disabled, - max: (props as BadgeCountProps).max, - size: size as QdsBadgeBasicSize, - type: "count", - variant: (props as BadgeCountProps).variant, - } - break - case "status": - qdsApiProps = { - disabled, - emphasis: (props as BadgeStatusProps).emphasis, - size: size as QdsBadgeExtendedSize, - type: "status", - variant: (props as BadgeStatusProps).variant, - } - break - case "icon": - qdsApiProps = { - disabled, - emphasis: (props as BadgeIconProps).emphasis, - size: size as QdsBadgeIconSize, - type: "icon", - variant: (props as BadgeIconProps).variant, - } - break - default: - qdsApiProps = { - disabled, - emphasis: (props as BadgeTextProps).emphasis, - size: size as QdsBadgeBasicSize, - type: "text", - variant: (props as BadgeTextProps).variant, - } - break - } - - const qdsApi = createQdsBadgeApi(qdsApiProps, normalizeProps) - - const rootProps = mergeProps(qdsApi.getRootBindings(), restProps) - - const renderContent = (): ReactNode => { - switch (qdsApi.type) { - case "count": { - // children override prop - if (children) { - return children - } - const displayCount = qdsApi.getDisplayCount() - return displayCount ?? null - } - - case "icon": { - // children override prop - if (children) { - return {children} - } - const icon = (props as BadgeIconProps).icon - return icon ? ( - - ) : null - } - - case "text": - return children ?? null +export function Badge({ + children, + disabled, + emphasis, + size, + variant, + ...restProps +}: BadgeProps): ReactElement { + const qdsApi = createQdsTextBadgeApi( + { + disabled, + emphasis, + size, + variant, + }, + normalizeProps, + ) - case "status": - default: - return null - } - } + const mergedProps = mergeProps(qdsApi.getRootBindings(), restProps) return ( - - {renderContent()} + + {children} ) } diff --git a/packages/frameworks/react/src/badge/icon-badge.tsx b/packages/frameworks/react/src/badge/icon-badge.tsx new file mode 100644 index 000000000..d760f9058 --- /dev/null +++ b/packages/frameworks/react/src/badge/icon-badge.tsx @@ -0,0 +1,63 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {ReactElement, ReactNode} from "react" + +import { + createQdsIconBadgeApi, + type QdsIconBadgeProps as QdsIconBadgeProps, +} from "@qualcomm-ui/qds-core/badge" +import {IconOrNode} from "@qualcomm-ui/react/icon" +import type {LucideIconOrElement} from "@qualcomm-ui/react-core/lucide" +import {normalizeProps} from "@qualcomm-ui/react-core/machine" +import { + type ElementRenderProp, + PolymorphicElement, +} from "@qualcomm-ui/react-core/system" +import {mergeProps} from "@qualcomm-ui/utils/merge-props" + +export interface IconBadgeProps + extends QdsIconBadgeProps, + ElementRenderProp<"span"> { + /** + * React {@link https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children children} prop. + * When provided, overrides the icon prop. + */ + children?: ReactNode + + /** + * {@link https://lucide.dev lucide-react} icon to display in the badge. + */ + icon?: LucideIconOrElement +} + +export function IconBadge({ + children, + disabled, + emphasis, + icon, + size, + variant, + ...restProps +}: IconBadgeProps): ReactElement { + const qdsApi = createQdsIconBadgeApi( + { + disabled, + emphasis, + size, + variant, + }, + normalizeProps, + ) + + const mergedProps = mergeProps(qdsApi.getRootBindings(), restProps) + + return ( + + {children || + (icon ? ( + + ) : null)} + + ) +} diff --git a/packages/frameworks/react/src/badge/index.ts b/packages/frameworks/react/src/badge/index.ts index c132c99a8..de14bf279 100644 --- a/packages/frameworks/react/src/badge/index.ts +++ b/packages/frameworks/react/src/badge/index.ts @@ -1 +1,4 @@ export {Badge, type BadgeProps} from "./badge" +export {NumberBadge, type NumberBadgeProps} from "./number-badge" +export {IconBadge, type IconBadgeProps} from "./icon-badge" +export {StatusBadge, type StatusBadgeProps} from "./status-badge" diff --git a/packages/frameworks/react/src/badge/number-badge.tsx b/packages/frameworks/react/src/badge/number-badge.tsx new file mode 100644 index 000000000..7577a27ae --- /dev/null +++ b/packages/frameworks/react/src/badge/number-badge.tsx @@ -0,0 +1,54 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {ReactElement, ReactNode} from "react" + +import { + createQdsNumberBadgeApi, + type QdsNumberBadgeProps as QdsNumberBadgeProps, +} from "@qualcomm-ui/qds-core/badge" +import {normalizeProps} from "@qualcomm-ui/react-core/machine" +import { + type ElementRenderProp, + PolymorphicElement, +} from "@qualcomm-ui/react-core/system" +import {mergeProps} from "@qualcomm-ui/utils/merge-props" + +export interface NumberBadgeProps + extends QdsNumberBadgeProps, + ElementRenderProp<"span"> { + /** + * React {@link https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children children} prop. + * When provided, overrides type-specific content. + */ + children?: ReactNode +} + +export function NumberBadge({ + children, + disabled, + max, + size, + value, + variant, + ...restProps +}: NumberBadgeProps): ReactElement { + const qdsApi = createQdsNumberBadgeApi( + { + disabled, + max, + size, + value, + variant, + }, + normalizeProps, + ) + + const mergedProps = mergeProps(qdsApi.getRootBindings(), restProps) + + return ( + + {children ?? qdsApi.displayValue} + + ) +} diff --git a/packages/frameworks/react/src/badge/status-badge.tsx b/packages/frameworks/react/src/badge/status-badge.tsx new file mode 100644 index 000000000..f66dfb54d --- /dev/null +++ b/packages/frameworks/react/src/badge/status-badge.tsx @@ -0,0 +1,41 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {ReactElement} from "react" + +import { + createQdsStatusBadgeApi, + type QdsStatusBadgeProps as QdsStatusBadgeProps, +} from "@qualcomm-ui/qds-core/badge" +import {normalizeProps} from "@qualcomm-ui/react-core/machine" +import { + type ElementRenderProp, + PolymorphicElement, +} from "@qualcomm-ui/react-core/system" +import {mergeProps} from "@qualcomm-ui/utils/merge-props" + +export interface StatusBadgeProps + extends QdsStatusBadgeProps, + ElementRenderProp<"span"> {} + +export function StatusBadge({ + disabled, + emphasis, + size, + variant, + ...restProps +}: StatusBadgeProps): ReactElement { + const qdsApi = createQdsStatusBadgeApi( + { + disabled, + emphasis, + size, + variant, + }, + normalizeProps, + ) + + const mergedProps = mergeProps(qdsApi.getRootBindings(), restProps) + + return +} From 07c762a2718ebf42e399ed1cabf26e16278f2aab Mon Sep 17 00:00:00 2001 From: Olaf Kappes Date: Tue, 18 Nov 2025 15:36:25 +0100 Subject: [PATCH 04/10] fix(badge): categories > colors Signed-off-by: Olaf Kappes --- .../common/qds-core/src/badge/badge.types.ts | 20 ++--- .../qds-core/src/badge/qds-icon-badge.css | 84 +++++++++---------- .../qds-core/src/badge/qds-text-badge.css | 84 +++++++++---------- .../badges+/icon-badge+/_icon-badge.mdx | 2 +- .../demos/icon-badge-emphasis-demo.ts | 20 ++--- .../demos/icon-badge-variant-demo.ts | 37 +++++--- .../badges+/text-badge+/_text-badge.mdx | 2 +- .../demos/text-badge-emphasis-demo.ts | 20 ++--- .../demos/text-badge-variant-demo.ts | 20 ++--- .../badges+/icon-badge+/_icon-badge.mdx | 2 +- .../demos/icon-badge-emphasis-demo.tsx | 20 ++--- .../demos/icon-badge-variant-demo.tsx | 20 ++--- .../badges+/text-badge+/_text-badge.mdx | 2 +- .../demos/text-badge-emphasis-demo.tsx | 20 ++--- .../demos/text-badge-variant-demo.tsx | 40 ++++----- 15 files changed, 204 insertions(+), 189 deletions(-) diff --git a/packages/common/qds-core/src/badge/badge.types.ts b/packages/common/qds-core/src/badge/badge.types.ts index d0ced89e3..6bc6d27da 100644 --- a/packages/common/qds-core/src/badge/badge.types.ts +++ b/packages/common/qds-core/src/badge/badge.types.ts @@ -18,16 +18,16 @@ export type QdsBadgeSemanticEmphasis = | "danger" export type QdsBadgeCategoryEmphasis = - | "cat-1" - | "cat-2" - | "cat-3" - | "cat-4" - | "cat-5" - | "cat-6" - | "cat-7" - | "cat-8" - | "cat-9" - | "cat-10" + | "blue" + | "cyan" + | "green" + | "kiwi" + | "magenta" + | "orange" + | "purple" + | "red" + | "teal" + | "yellow" export interface QdsBaseBadgeProps { /** diff --git a/packages/common/qds-core/src/badge/qds-icon-badge.css b/packages/common/qds-core/src/badge/qds-icon-badge.css index 6f4a073c5..49949e5fd 100644 --- a/packages/common/qds-core/src/badge/qds-icon-badge.css +++ b/packages/common/qds-core/src/badge/qds-icon-badge.css @@ -55,46 +55,46 @@ --badge-background: var(--color-background-support-danger); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-1"] { - --badge-background: var(--color-category-1-strong); + &[data-emphasis="blue"] { + --badge-background: var(--color-category-blue-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-2"] { - --badge-background: var(--color-category-2-strong); + &[data-emphasis="cyan"] { + --badge-background: var(--color-category-cyan-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-3"] { - --badge-background: var(--color-category-3-strong); + &[data-emphasis="green"] { + --badge-background: var(--color-category-green-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-4"] { - --badge-background: var(--color-category-4-strong); + &[data-emphasis="kiwi"] { + --badge-background: var(--color-category-kiwi-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-5"] { - --badge-background: var(--color-category-5-strong); + &[data-emphasis="magenta"] { + --badge-background: var(--color-category-magenta-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-6"] { - --badge-background: var(--color-category-6-strong); - --badge-text: var(--color-utility-persistent-black); - } - &[data-emphasis="cat-7"] { - --badge-background: var(--color-category-7-strong); + &[data-emphasis="orange"] { + --badge-background: var(--color-category-orange-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-8"] { - --badge-background: var(--color-category-8-strong); + &[data-emphasis="purple"] { + --badge-background: var(--color-category-purple-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-9"] { - --badge-background: var(--color-category-9-strong); + &[data-emphasis="red"] { + --badge-background: var(--color-category-red-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-10"] { - --badge-background: var(--color-category-10-strong); + &[data-emphasis="teal"] { + --badge-background: var(--color-category-teal-strong); --badge-text: var(--color-utility-persistent-white); } + &[data-emphasis="yellow"] { + --badge-background: var(--color-category-yellow-strong); + --badge-text: var(--color-utility-persistent-black); + } } /* subtle variant */ @@ -123,44 +123,44 @@ --badge-background: var(--color-background-support-danger-medium); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-1"] { - --badge-background: var(--color-category-1-subtle); + &[data-emphasis="blue"] { + --badge-background: var(--color-category-blue-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-2"] { - --badge-background: var(--color-category-2-subtle); + &[data-emphasis="cyan"] { + --badge-background: var(--color-category-cyan-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-3"] { - --badge-background: var(--color-category-3-subtle); + &[data-emphasis="green"] { + --badge-background: var(--color-category-green-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-4"] { - --badge-background: var(--color-category-4-subtle); + &[data-emphasis="kiwi"] { + --badge-background: var(--color-category-kiwi-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-5"] { - --badge-background: var(--color-category-5-subtle); + &[data-emphasis="magenta"] { + --badge-background: var(--color-category-magenta-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-6"] { - --badge-background: var(--color-category-6-subtle); + &[data-emphasis="orange"] { + --badge-background: var(--color-category-orange-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-7"] { - --badge-background: var(--color-category-7-subtle); + &[data-emphasis="purple"] { + --badge-background: var(--color-category-purple-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-8"] { - --badge-background: var(--color-category-8-subtle); + &[data-emphasis="red"] { + --badge-background: var(--color-category-red-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-9"] { - --badge-background: var(--color-category-9-subtle); + &[data-emphasis="teal"] { + --badge-background: var(--color-category-teal-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-10"] { - --badge-background: var(--color-category-10-subtle); + &[data-emphasis="yellow"] { + --badge-background: var(--color-category-yellow-subtle); --badge-text: var(--color-text-neutral-primary); } } diff --git a/packages/common/qds-core/src/badge/qds-text-badge.css b/packages/common/qds-core/src/badge/qds-text-badge.css index b1396a521..e6dbebf62 100644 --- a/packages/common/qds-core/src/badge/qds-text-badge.css +++ b/packages/common/qds-core/src/badge/qds-text-badge.css @@ -30,46 +30,46 @@ --badge-background: var(--color-background-support-danger); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-1"] { - --badge-background: var(--color-category-1-strong); + &[data-emphasis="blue"] { + --badge-background: var(--color-category-blue-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-2"] { - --badge-background: var(--color-category-2-strong); + &[data-emphasis="cyan"] { + --badge-background: var(--color-category-cyan-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-3"] { - --badge-background: var(--color-category-3-strong); + &[data-emphasis="green"] { + --badge-background: var(--color-category-green-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-4"] { - --badge-background: var(--color-category-4-strong); + &[data-emphasis="kiwi"] { + --badge-background: var(--color-category-kiwi-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-5"] { - --badge-background: var(--color-category-5-strong); + &[data-emphasis="magenta"] { + --badge-background: var(--color-category-magenta-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-6"] { - --badge-background: var(--color-category-6-strong); - --badge-text: var(--color-utility-persistent-black); - } - &[data-emphasis="cat-7"] { - --badge-background: var(--color-category-7-strong); + &[data-emphasis="orange"] { + --badge-background: var(--color-category-orange-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-8"] { - --badge-background: var(--color-category-8-strong); + &[data-emphasis="purple"] { + --badge-background: var(--color-category-purple-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-9"] { - --badge-background: var(--color-category-9-strong); + &[data-emphasis="red"] { + --badge-background: var(--color-category-red-strong); --badge-text: var(--color-utility-persistent-white); } - &[data-emphasis="cat-10"] { - --badge-background: var(--color-category-10-strong); + &[data-emphasis="teal"] { + --badge-background: var(--color-category-teal-strong); --badge-text: var(--color-utility-persistent-white); } + &[data-emphasis="yellow"] { + --badge-background: var(--color-category-yellow-strong); + --badge-text: var(--color-utility-persistent-black); + } } /* subtle variant */ @@ -98,44 +98,44 @@ --badge-background: var(--color-background-support-danger-medium); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-1"] { - --badge-background: var(--color-category-1-subtle); + &[data-emphasis="blue"] { + --badge-background: var(--color-category-blue-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-2"] { - --badge-background: var(--color-category-2-subtle); + &[data-emphasis="cyan"] { + --badge-background: var(--color-category-cyan-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-3"] { - --badge-background: var(--color-category-3-subtle); + &[data-emphasis="green"] { + --badge-background: var(--color-category-green-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-4"] { - --badge-background: var(--color-category-4-subtle); + &[data-emphasis="kiwi"] { + --badge-background: var(--color-category-kiwi-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-5"] { - --badge-background: var(--color-category-5-subtle); + &[data-emphasis="magenta"] { + --badge-background: var(--color-category-magenta-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-6"] { - --badge-background: var(--color-category-6-subtle); + &[data-emphasis="orange"] { + --badge-background: var(--color-category-orange-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-7"] { - --badge-background: var(--color-category-7-subtle); + &[data-emphasis="purple"] { + --badge-background: var(--color-category-purple-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-8"] { - --badge-background: var(--color-category-8-subtle); + &[data-emphasis="red"] { + --badge-background: var(--color-category-red-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-9"] { - --badge-background: var(--color-category-9-subtle); + &[data-emphasis="teal"] { + --badge-background: var(--color-category-teal-subtle); --badge-text: var(--color-text-neutral-primary); } - &[data-emphasis="cat-10"] { - --badge-background: var(--color-category-10-subtle); + &[data-emphasis="yellow"] { + --badge-background: var(--color-category-yellow-subtle); --badge-text: var(--color-text-neutral-primary); } } diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx index f49c99a7b..c055ca26b 100644 --- a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx @@ -26,7 +26,7 @@ Use the [icon](./#icon-1) input to provide a Lucide icon name, or use content pr ### Emphasis -Use the [emphasis](./#emphasis-1) input to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. +Use the [emphasis](./#emphasis-1) input to convey semantic meaning or add color. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Color emphasis are: `blue`, `cyan`, `green`, `kiwi`, `magenta`, `orange`, `purple`, `red`, `teal`, and `yellow`. diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.ts index afe63d06a..cac5f7a69 100644 --- a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.ts +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.ts @@ -19,16 +19,16 @@ import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
- - - - - - - - - - + + + + + + + + + +
`, diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.ts index e264757e4..651c48073 100644 --- a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.ts +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.ts @@ -39,17 +39,32 @@ import {provideIcons} from "@qualcomm-ui/angular-core/lucide" >
- - - - - - - - - - + + + + + + + + + diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts index 58a95e214..3e2aac991 100644 --- a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts @@ -16,16 +16,16 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge" Danger
- Cat 1 - Cat 2 - Cat 3 - Cat 4 - Cat 5 - Cat 6 - Cat 7 - Cat 8 - Cat 9 - Cat 10 + blue + cyan + green + kiwi + magenta + orange + purple + red + teal + yellow
`, diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts index 963dc60b2..2d23d53bc 100644 --- a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts @@ -16,16 +16,16 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge" Danger
- Cat 1 - Cat 2 - Cat 3 - Cat 4 - Cat 5 - Cat 6 - Cat 7 - Cat 8 - Cat 9 - Cat 10 + blue + cyan + green + kiwi + magenta + orange + purple + red + teal + yellow
`, diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx index b4604d87d..4c80eebfa 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx @@ -23,7 +23,7 @@ Use the [icon](./#icon-1) prop to provide a Lucide icon, or use [children](./#ch ### Emphasis -Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. +Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Color emphasis are: `blue`, `cyan`, `green`, `kiwi`, `magenta`, `orange`, `purple`, `red`, `teal`, and `yellow`. diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx index 7a8ea3d3c..833ebf209 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx @@ -16,16 +16,16 @@ export default function IconBadgeEmphasisDemo(): ReactElement {
- - - - - - - - - - + + + + + + + + + +
) diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx index cf317b052..4563a6df5 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx @@ -16,16 +16,16 @@ export default function IconBadgeVariantDemo(): ReactElement {
- - - - - - - - - - + + + + + + + + + +
) diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx index 4ece9158f..e1b3b5549 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx @@ -17,7 +17,7 @@ import {Badge} from "@qualcomm-ui/react/badge" ### Emphasis -Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Category emphasis options range from `cat-1` through `cat-10`. +Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Color emphasis are: `blue`, `cyan`, `green`, `kiwi`, `magenta`, `orange`, `purple`, `red`, `teal`, and `yellow`. diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx index 6159c4967..a1cca7afd 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx @@ -14,16 +14,16 @@ export default function TextBadgeEmphasisDemo(): ReactElement { Danger
- Cat 1 - Cat 2 - Cat 3 - Cat 4 - Cat 5 - Cat 6 - Cat 7 - Cat 8 - Cat 9 - Cat 10 + blue + cyan + green + kiwi + magenta + orange + purple + red + teal + yellow
) diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx index e1f51f478..3863ae8bd 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx @@ -26,35 +26,35 @@ export default function TextBadgeVariantDemo(): ReactElement {
- - Cat 1 + + blue - - Cat 2 + + cyan - - Cat 3 + + green - - Cat 4 + + kiwi - - Cat 5 + + magenta - - Cat 6 + + orange - - Cat 7 + + purple - - Cat 8 + + red - - Cat 9 + + teal - - Cat 10 + + yellow
From b03ec1d5313d5829b84930a580bfc5bf4f948f03 Mon Sep 17 00:00:00 2001 From: Olaf Kappes Date: Thu, 20 Nov 2025 09:59:20 +0100 Subject: [PATCH 05/10] chore: update badge react doc Signed-off-by: Olaf Kappes --- .../badges+/icon-badge+/_icon-badge.mdx | 14 +++++++------- .../demos/icon-badge-disabled-demo.tsx | 2 +- .../demos/icon-badge-emphasis-demo.tsx | 2 +- .../icon-badge+/demos/icon-badge-icon-demo.tsx | 2 +- .../icon-badge+/demos/icon-badge-size-demo.tsx | 2 +- .../demos/icon-badge-variant-demo.tsx | 2 +- .../badges+/icon-badge+/demos/index.ts | 5 +++++ .../badges+/number-badge+/_number-badge.mdx | 16 ++++++++++------ .../badges+/number-badge+/demos/index.ts | 5 +++++ .../demos/number-badge-disabled-demo.tsx | 2 +- .../demos/number-badge-max-demo.tsx | 2 +- .../demos/number-badge-size-demo.tsx | 2 +- .../demos/number-badge-value-demo.tsx | 2 +- .../demos/number-badge-variant-demo.tsx | 2 +- .../badges+/status-badge+/_status-badge.mdx | 17 ++++++++++++----- .../badges+/status-badge+/demos/index.ts | 4 ++++ .../demos/status-badge-disabled-demo.tsx | 2 +- .../demos/status-badge-emphasis-demo.tsx | 2 +- .../demos/status-badge-size-demo.tsx | 2 +- .../demos/status-badge-variant-demo.tsx | 2 +- .../badges+/text-badge+/_text-badge.mdx | 11 ++++++----- .../badges+/text-badge+/demos/index.ts | 4 ++++ .../demos/text-badge-disabled-demo.tsx | 2 +- .../demos/text-badge-emphasis-demo.tsx | 2 +- .../text-badge+/demos/text-badge-size-demo.tsx | 2 +- .../demos/text-badge-variant-demo.tsx | 2 +- 26 files changed, 71 insertions(+), 41 deletions(-) create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/index.ts create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/index.ts create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/index.ts create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/index.ts diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx index 4c80eebfa..845413c62 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx @@ -3,7 +3,8 @@ title: Icon Badge --- import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" -import {QdsDemo} from "~components/demo" +import {Demo} from "~components/demo" +import * as demos from "./demos" # {frontmatter.title} @@ -19,32 +20,31 @@ import {IconBadge} from "@qualcomm-ui/react/badge" Use the [icon](./#icon-1) prop to provide a Lucide icon, or use [children](./#children) for custom SVG content. - + ### Emphasis Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Color emphasis are: `blue`, `cyan`, `green`, `kiwi`, `magenta`, `orange`, `purple`, `red`, `teal`, and `yellow`. - + ### Variant The [variant](./#variant-1) prop controls the aspect of the badge. Two variants are available: `default` (bolder appearance) and `subtle` (muted appearance). - + ### Size Control dimensions using the [size](./#size-1) prop. Six sizes are available: `xxs`, `xs`, `sm`, `md` (default), `lg`, and `xl`. - + ### Disabled Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. - - + ## API ### \ diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.tsx index c5577ab01..b65e764ce 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.tsx @@ -4,7 +4,7 @@ import {Star} from "lucide-react" import {IconBadge} from "@qualcomm-ui/react/badge" -export default function IconBadgeDisabledDemo(): ReactElement { +export function IconBadgeDisabledDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx index 833ebf209..61e2ef674 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx @@ -4,7 +4,7 @@ import {Star} from "lucide-react" import {IconBadge} from "@qualcomm-ui/react/badge" -export default function IconBadgeEmphasisDemo(): ReactElement { +export function IconBadgeEmphasisDemo(): ReactElement { return (
diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.tsx index 20ffdd36a..dc51f3402 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.tsx @@ -4,7 +4,7 @@ import {Star} from "lucide-react" import {IconBadge} from "@qualcomm-ui/react/badge" -export default function IconBadgeIconDemo(): ReactElement { +export function IconBadgeIconDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.tsx index 2524b581b..ed586b9a5 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.tsx @@ -4,7 +4,7 @@ import {Star} from "lucide-react" import {IconBadge} from "@qualcomm-ui/react/badge" -export default function IconBadgeSizeDemo(): ReactElement { +export function IconBadgeSizeDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx index 4563a6df5..bd9031fa9 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx @@ -4,7 +4,7 @@ import {Star} from "lucide-react" import {IconBadge} from "@qualcomm-ui/react/badge" -export default function IconBadgeVariantDemo(): ReactElement { +export function IconBadgeVariantDemo(): ReactElement { return (
diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/index.ts b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/index.ts new file mode 100644 index 000000000..00af16584 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/index.ts @@ -0,0 +1,5 @@ +export * from "./icon-badge-disabled-demo" +export * from "./icon-badge-emphasis-demo" +export * from "./icon-badge-icon-demo" +export * from "./icon-badge-size-demo" +export * from "./icon-badge-variant-demo" diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx index e70bc09fa..a59015c20 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx @@ -3,7 +3,8 @@ title: Number Badge --- import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" -import {QdsDemo} from "~components/demo" +import {Demo} from "~components/demo" +import * as demos from "./demos" # {frontmatter.title} @@ -19,31 +20,34 @@ import {NumberBadge} from "@qualcomm-ui/react/badge" Use the [value](./#value-1) prop for auto formatting, or use [children](./#children) for manual content. - + ### Max (Auto Formatting) When using the [value](./#value-1) prop with [max](./#max), overflow values are automatically formatted. If value exceeds max, the badge displays "max+" and applies special styling. The default max is 99. - + ### Variant Multiple color and style options are available via the [variant](./#variant-1) prop: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. - + ### Size Control dimensions using the [size](./#size-1) prop. Three sizes are available: `sm`, `md` (default), and `lg`. - + ### Disabled Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. - + ## API diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/index.ts b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/index.ts new file mode 100644 index 000000000..751e18853 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/index.ts @@ -0,0 +1,5 @@ +export * from "./number-badge-disabled-demo" +export * from "./number-badge-max-demo" +export * from "./number-badge-size-demo" +export * from "./number-badge-value-demo" +export * from "./number-badge-variant-demo" diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx index 8d85363f9..7c01a1147 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {NumberBadge} from "@qualcomm-ui/react/badge" -export default function NumberBadgeDisabledDemo(): ReactElement { +export function NumberBadgeDisabledDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.tsx index 7d1b81d96..be9d81694 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {NumberBadge} from "@qualcomm-ui/react/badge" -export default function NumberBadgeMaxDemo(): ReactElement { +export function NumberBadgeMaxDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.tsx index 951702859..cdf6c398c 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {NumberBadge} from "@qualcomm-ui/react/badge" -export default function NumberBadgeSizeDemo(): ReactElement { +export function NumberBadgeSizeDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.tsx index fa88cc0ca..fcb9b9333 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {NumberBadge} from "@qualcomm-ui/react/badge" -export default function NumberBadgeValueDemo(): ReactElement { +export function NumberBadgeValueDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx index 8f23ff6c0..856f250db 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {NumberBadge} from "@qualcomm-ui/react/badge" -export default function NumberBadgeVariantDemo(): ReactElement { +export function NumberBadgeVariantDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx index 31cb65898..c29784e27 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx @@ -3,7 +3,8 @@ title: Status Badge --- import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" -import {QdsDemo} from "~components/demo" +import {Demo} from "~components/demo" +import * as demos from "./demos" # {frontmatter.title} @@ -19,25 +20,31 @@ import {StatusBadge} from "@qualcomm-ui/react/badge" Use the [emphasis](./#emphasis-1) prop to convey semantic meaning with colors. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. - + ### Variant The [variant](./#variant-1) prop controls the aspect of the badge. Two variants are available: `filled` (default) and `outlined`. - + ### Size Control dimensions using the [size](./#size-1) prop. Five sizes are available: `xs`, `sm`, `md` (default), `lg`, and `xl`. - + ### Disabled Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. - + ## API diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/index.ts b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/index.ts new file mode 100644 index 000000000..2e6e93f8f --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/index.ts @@ -0,0 +1,4 @@ +export * from "./status-badge-disabled-demo" +export * from "./status-badge-emphasis-demo" +export * from "./status-badge-size-demo" +export * from "./status-badge-variant-demo" diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.tsx index 38894c8c7..04947a793 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {StatusBadge} from "@qualcomm-ui/react/badge" -export default function StatusBadgeDisabledDemo(): ReactElement { +export function StatusBadgeDisabledDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.tsx index fa0d72a35..72c1f8572 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {StatusBadge} from "@qualcomm-ui/react/badge" -export default function StatusBadgeEmphasisDemo(): ReactElement { +export function StatusBadgeEmphasisDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.tsx index a9a3d88fc..39831fd72 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {StatusBadge} from "@qualcomm-ui/react/badge" -export default function StatusBadgeSizeDemo(): ReactElement { +export function StatusBadgeSizeDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.tsx index 460c75e6e..ec3e6ee80 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {StatusBadge} from "@qualcomm-ui/react/badge" -export default function StatusBadgeVariantDemo(): ReactElement { +export function StatusBadgeVariantDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx index e1b3b5549..e8d2cc9aa 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx @@ -3,7 +3,8 @@ title: Text Badge --- import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" -import {QdsDemo} from "~components/demo" +import {Demo} from "~components/demo" +import * as demos from "./demos" # {frontmatter.title} @@ -19,25 +20,25 @@ import {Badge} from "@qualcomm-ui/react/badge" Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Color emphasis are: `blue`, `cyan`, `green`, `kiwi`, `magenta`, `orange`, `purple`, `red`, `teal`, and `yellow`. - + ### Variant The [variant](./#variant-1) prop controls the aspect of the badge. Two variants are available: `default` (bolder appearance) and `subtle` (muted appearance). - + ### Size Control dimensions using the [size](./#size-1) prop. Three sizes are available: `sm`, `md` (default), and `lg`. - + ### Disabled Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. - + ## API diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/index.ts b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/index.ts new file mode 100644 index 000000000..e8625d17c --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/index.ts @@ -0,0 +1,4 @@ +export * from "./text-badge-disabled-demo" +export * from "./text-badge-emphasis-demo" +export * from "./text-badge-size-demo" +export * from "./text-badge-variant-demo" diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.tsx index f1a10e1c7..7b196dfb3 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {Badge} from "@qualcomm-ui/react/badge" -export default function TextBadgeDisabledDemo(): ReactElement { +export function TextBadgeDisabledDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx index a1cca7afd..42fb971d1 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {Badge} from "@qualcomm-ui/react/badge" -export default function TextBadgeEmphasisDemo(): ReactElement { +export function TextBadgeEmphasisDemo(): ReactElement { return (
diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.tsx index fb1fb89a8..6130e59e3 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {Badge} from "@qualcomm-ui/react/badge" -export default function TextBadgeSizeDemo(): ReactElement { +export function TextBadgeSizeDemo(): ReactElement { return (
{/* preview */} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx index 3863ae8bd..6f0baa16e 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx @@ -2,7 +2,7 @@ import type {ReactElement} from "react" import {Badge} from "@qualcomm-ui/react/badge" -export default function TextBadgeVariantDemo(): ReactElement { +export function TextBadgeVariantDemo(): ReactElement { return (
From 002e5132a417b31ef2213a9e47b110e2e92c8b2a Mon Sep 17 00:00:00 2001 From: Ryan Bower Date: Thu, 20 Nov 2025 18:58:17 -0800 Subject: [PATCH 06/10] optimized styles Signed-off-by: Ryan Bower --- .../qds-core/src/badge/number-badge.api.ts | 2 +- .../qds-core/src/badge/number-badge.types.ts | 16 +- .../qds-core/src/badge/qds-badge-colors.css | 120 ++++++++++++ .../common/qds-core/src/badge/qds-badge.css | 62 +----- .../qds-core/src/badge/qds-icon-badge.css | 183 ++++-------------- .../qds-core/src/badge/qds-number-badge.css | 65 +++---- .../qds-core/src/badge/qds-status-badge.css | 53 +++-- .../qds-core/src/badge/qds-text-badge.css | 146 ++------------ .../badges+/number-badge+/_number-badge.mdx | 5 +- .../badges+/number-badge+/demos/index.ts | 2 +- .../demos/number-badge-disabled-demo.tsx | 4 +- .../demos/number-badge-emphasis-demo.tsx | 22 +++ .../demos/number-badge-variant-demo.tsx | 22 --- .../src/badge/number-badge.directive.ts | 30 +-- .../react/src/badge/number-badge.tsx | 4 +- 15 files changed, 288 insertions(+), 448 deletions(-) create mode 100644 packages/common/qds-core/src/badge/qds-badge-colors.css create mode 100644 packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-emphasis-demo.tsx delete mode 100644 packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx diff --git a/packages/common/qds-core/src/badge/number-badge.api.ts b/packages/common/qds-core/src/badge/number-badge.api.ts index 311d050fb..f609cbaa0 100644 --- a/packages/common/qds-core/src/badge/number-badge.api.ts +++ b/packages/common/qds-core/src/badge/number-badge.api.ts @@ -30,11 +30,11 @@ export function createQdsNumberBadgeApi( return normalize.element({ className: badgeClasses.root, "data-disabled": booleanDataAttr(props.disabled), + "data-emphasis": props.emphasis || "neutral", "data-overflow": booleanDataAttr(overflow), "data-part": "root", "data-scope": "number-badge", "data-size": props.size || "md", - "data-variant": props.variant || "neutral", }) }, } diff --git a/packages/common/qds-core/src/badge/number-badge.types.ts b/packages/common/qds-core/src/badge/number-badge.types.ts index f011f81e2..dc7b41584 100644 --- a/packages/common/qds-core/src/badge/number-badge.types.ts +++ b/packages/common/qds-core/src/badge/number-badge.types.ts @@ -9,7 +9,7 @@ import type { QdsBaseBadgeProps, } from "./badge.types" -export type QdsNumberBadgeVariant = +export type QdsNumberBadgeEmphasis = | "neutral" | "neutral-outline" | "brand" @@ -22,6 +22,12 @@ export type QdsNumberBadgeVariant = | "persistent-white" export interface QdsNumberBadgeProps extends QdsBaseBadgeProps { + /** + * Governs the color and style of the number badge. + * @default 'neutral' + */ + emphasis?: QdsNumberBadgeEmphasis + /** * Maximum value to display. * @default 99 @@ -38,22 +44,16 @@ export interface QdsNumberBadgeProps extends QdsBaseBadgeProps { * The numeric value to display. */ value?: number - - /** - * Governs the color and style of the number badge. - * @default 'neutral' - */ - variant?: QdsNumberBadgeVariant } export interface QdsNumberBadgeRootBindings { className: BadgeClasses["root"] "data-disabled": BooleanDataAttr + "data-emphasis": QdsNumberBadgeEmphasis "data-overflow": BooleanDataAttr "data-part": "root" "data-scope": "number-badge" "data-size": QdsBadgeBasicSize - "data-variant": QdsNumberBadgeVariant } export interface QdsNumberBadgeApi { diff --git a/packages/common/qds-core/src/badge/qds-badge-colors.css b/packages/common/qds-core/src/badge/qds-badge-colors.css new file mode 100644 index 000000000..b3893000f --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-badge-colors.css @@ -0,0 +1,120 @@ +/* default variant */ +.qui-badge__root { + &[data-emphasis] { + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger); + } + &[data-emphasis="blue"] { + --badge-background: var(--color-category-blue-strong); + } + &[data-emphasis="cyan"] { + --badge-background: var(--color-category-cyan-strong); + } + &[data-emphasis="green"] { + --badge-background: var(--color-category-green-strong); + } + &[data-emphasis="kiwi"] { + --badge-background: var(--color-category-kiwi-strong); + } + &[data-emphasis="magenta"] { + --badge-background: var(--color-category-magenta-strong); + } + &[data-emphasis="orange"] { + --badge-background: var(--color-category-orange-strong); + } + &[data-emphasis="purple"] { + --badge-background: var(--color-category-purple-strong); + } + &[data-emphasis="red"] { + --badge-background: var(--color-category-red-strong); + } + &[data-emphasis="teal"] { + --badge-background: var(--color-category-teal-strong); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning); + --badge-text: var(--color-utility-persistent-black); + } + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-neutral-10); + --badge-text: var(--color-text-neutral-inverse); + } + &[data-emphasis="yellow"] { + --badge-background: var(--color-category-yellow-strong); + --badge-text: var(--color-utility-persistent-black); + } +} + +/* Shared color definitions for subtle variant (used by text and icon badges) */ +.qui-badge__root[data-variant="subtle"] { + &[data-emphasis] { + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary-subtle); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info-medium); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success-medium); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning-medium); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger-medium); + } + &[data-emphasis="blue"] { + --badge-background: var(--color-category-blue-subtle); + } + &[data-emphasis="cyan"] { + --badge-background: var(--color-category-cyan-subtle); + } + &[data-emphasis="green"] { + --badge-background: var(--color-category-green-subtle); + } + &[data-emphasis="kiwi"] { + --badge-background: var(--color-category-kiwi-subtle); + } + &[data-emphasis="magenta"] { + --badge-background: var(--color-category-magenta-subtle); + } + &[data-emphasis="orange"] { + --badge-background: var(--color-category-orange-subtle); + } + &[data-emphasis="purple"] { + --badge-background: var(--color-category-purple-subtle); + } + &[data-emphasis="red"] { + --badge-background: var(--color-category-red-subtle); + } + &[data-emphasis="teal"] { + --badge-background: var(--color-category-teal-subtle); + } + &[data-emphasis="yellow"] { + --badge-background: var(--color-category-yellow-subtle); + } + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-support-neutral); + --badge-text: var(--color-utility-persistent-white); + } +} + +.qui-badge__root[data-scope][data-emphasis][data-disabled] { + --badge-background: var(--color-utility-disabled-background); + --badge-border: var(--color-utility-disabled-border); + --badge-text: var(--color-utility-disabled-text); + --icon-color: var(--color-utility-disabled-icon); +} diff --git a/packages/common/qds-core/src/badge/qds-badge.css b/packages/common/qds-core/src/badge/qds-badge.css index 219cb0afd..b3341b41b 100644 --- a/packages/common/qds-core/src/badge/qds-badge.css +++ b/packages/common/qds-core/src/badge/qds-badge.css @@ -1,66 +1,8 @@ -/* shared styles */ - .qui-badge__root { align-items: center; + box-sizing: border-box; + cursor: default; display: inline-flex; justify-content: center; line-height: 1; - cursor: default; - box-sizing: border-box; - - &[data-size="xxs"] { - --status-size: var(--sizing-40); - --icon-radius: var(--border-radius-xs); - --icon-size: var(--sizing-60); - } - - &[data-size="xs"] { - --status-size: var(--sizing-40); - --icon-radius: var(--border-radius-xs); - --icon-size: var(--sizing-70); - } - - &[data-size="sm"] { - border-radius: var(--border-radius-xs); - font: var(--font-static-body-xs-default); - padding: var(--spacing-10) var(--spacing-40); - --count-size: var(--sizing-80); - --status-size: var(--sizing-50); - --icon-radius: var(--border-radius-sm); - --icon-size: var(--sizing-80); - } - - &[data-size="md"] { - border-radius: var(--border-radius-sm); - font: var(--font-static-body-sm-default); - padding: var(--spacing-20) var(--spacing-50); - --count-size: var(--sizing-90); - --status-size: var(--sizing-60); - --icon-radius: var(--border-radius-sm); - --icon-size: var(--sizing-90); - } - - &[data-size="lg"] { - border-radius: var(--border-radius-sm); - font: var(--font-static-body-md-default); - padding: var(--spacing-40) var(--spacing-70); - --count-size: var(--sizing-120); - --status-size: var(--sizing-70); - --icon-radius: var(--border-radius-md); - --icon-size: var(--sizing-120); - } - - &[data-size="xl"] { - --status-size: var(--sizing-80); - --icon-radius: var(--border-radius-lg); - --icon-size: var(--sizing-140); - } - - /* MOAR SPECIFICITY */ - &[data-disabled][data-disabled][data-disabled] { - background: var(--color-utility-disabled-background); - border-color: var(--color-utility-disabled-border); - color: var(--color-utility-disabled-text); - --icon-color: var(--color-utility-disabled-icon); - } } diff --git a/packages/common/qds-core/src/badge/qds-icon-badge.css b/packages/common/qds-core/src/badge/qds-icon-badge.css index 49949e5fd..63814f546 100644 --- a/packages/common/qds-core/src/badge/qds-icon-badge.css +++ b/packages/common/qds-core/src/badge/qds-icon-badge.css @@ -1,178 +1,61 @@ +.qui-badge__root { + &[data-size="xxs"] { + --icon-radius: var(--border-radius-xs); + --icon-size: var(--sizing-60); + } + &[data-size="xs"] { + --icon-radius: var(--border-radius-xs); + --icon-size: var(--sizing-70); + } + &[data-size="sm"] { + --icon-radius: var(--border-radius-sm); + --icon-size: var(--sizing-80); + } + &[data-size="md"] { + --icon-radius: var(--border-radius-sm); + --icon-size: var(--sizing-90); + } + &[data-size="lg"] { + --icon-radius: var(--border-radius-md); + --icon-size: var(--sizing-120); + } + &[data-size="xl"] { + --icon-radius: var(--border-radius-lg); + --icon-size: var(--sizing-140); + } +} + .qui-badge__root[data-scope="icon-badge"] { - color: var(--badge-text); background: var(--badge-background); border: solid var(--border-size, 0) var(--badge-border); - - /* Override size-specific styles with higher specificity */ - &[data-size="xxs"], - &[data-size="xs"], - &[data-size="sm"], - &[data-size="md"], - &[data-size="lg"], - &[data-size="xl"] { - border-radius: var(--icon-radius); - } + border-radius: var(--icon-radius); + color: var(--badge-text); &[data-size="xxs"], &[data-size="xs"], &[data-size="sm"] { padding: var(--spacing-20); } + &[data-size="md"] { padding: var(--spacing-40); } + &[data-size="lg"] { padding: var(--spacing-50); } + &[data-size="xl"] { padding: var(--spacing-60); } } -/* default variant */ -.qui-badge__root[data-scope="icon-badge"][data-variant="default"] { - &[data-emphasis="neutral"] { - --badge-background: var(--color-background-neutral-10); - --badge-text: var(--color-text-neutral-inverse); - } - &[data-emphasis="brand"] { - --badge-background: var(--color-background-brand-primary); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="info"] { - --badge-background: var(--color-background-support-info); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="success"] { - --badge-background: var(--color-background-support-success); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="warning"] { - --badge-background: var(--color-background-support-warning); - --badge-text: var(--color-utility-persistent-black); - } - &[data-emphasis="danger"] { - --badge-background: var(--color-background-support-danger); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="blue"] { - --badge-background: var(--color-category-blue-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="cyan"] { - --badge-background: var(--color-category-cyan-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="green"] { - --badge-background: var(--color-category-green-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="kiwi"] { - --badge-background: var(--color-category-kiwi-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="magenta"] { - --badge-background: var(--color-category-magenta-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="orange"] { - --badge-background: var(--color-category-orange-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="purple"] { - --badge-background: var(--color-category-purple-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="red"] { - --badge-background: var(--color-category-red-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="teal"] { - --badge-background: var(--color-category-teal-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="yellow"] { - --badge-background: var(--color-category-yellow-strong); - --badge-text: var(--color-utility-persistent-black); - } -} - -/* subtle variant */ -.qui-badge__root[data-scope="icon-badge"][data-variant="subtle"] { - &[data-emphasis="neutral"] { - --badge-background: var(--color-background-support-neutral); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="brand"] { - --badge-background: var(--color-background-brand-primary-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="info"] { - --badge-background: var(--color-background-support-info-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="success"] { - --badge-background: var(--color-background-support-success-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="warning"] { - --badge-background: var(--color-background-support-warning-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="danger"] { - --badge-background: var(--color-background-support-danger-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="blue"] { - --badge-background: var(--color-category-blue-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cyan"] { - --badge-background: var(--color-category-cyan-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="green"] { - --badge-background: var(--color-category-green-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="kiwi"] { - --badge-background: var(--color-category-kiwi-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="magenta"] { - --badge-background: var(--color-category-magenta-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="orange"] { - --badge-background: var(--color-category-orange-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="purple"] { - --badge-background: var(--color-category-purple-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="red"] { - --badge-background: var(--color-category-red-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="teal"] { - --badge-background: var(--color-category-teal-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="yellow"] { - --badge-background: var(--color-category-yellow-subtle); - --badge-text: var(--color-text-neutral-primary); - } -} - -/* icon overrides - higher specificity than .qui-icon__root[data-size] rules */ .qui-badge__icon[data-scope="icon-badge"] { color: var(--icon-color, inherit); --icon-size: inherit; } -/* style custom SVG children in icon badges (used with children prop) */ .qui-badge__root[data-scope="icon-badge"] > svg { - inline-size: var(--icon-size); block-size: var(--icon-size); + inline-size: var(--icon-size); } diff --git a/packages/common/qds-core/src/badge/qds-number-badge.css b/packages/common/qds-core/src/badge/qds-number-badge.css index 940aff944..f8aefaf8b 100644 --- a/packages/common/qds-core/src/badge/qds-number-badge.css +++ b/packages/common/qds-core/src/badge/qds-number-badge.css @@ -1,63 +1,56 @@ +.qui-badge__root { + &[data-size="sm"] { + font: var(--font-static-body-xs-default); + --count-size: var(--sizing-80); + } + &[data-size="md"] { + font: var(--font-static-body-sm-default); + --count-size: var(--sizing-90); + } + &[data-size="lg"] { + font: var(--font-static-body-md-default); + --count-size: var(--sizing-120); + } +} + .qui-badge__root[data-scope="number-badge"] { - block-size: var(--count-size); - min-inline-size: var(--count-size); - color: var(--badge-text); background: var(--badge-background); + block-size: var(--count-size); border: solid var(--border-size, 0) var(--badge-border); - - /* override defaults */ - &[data-size="sm"], - &[data-size="md"], - &[data-size="lg"] { - border-radius: var(--border-radius-rounded); - padding: 0; - } + border-radius: var(--border-radius-rounded); + color: var(--badge-text); + min-inline-size: var(--count-size); + padding: 0; &[data-overflow] { padding: 0 var(--spacing-50); } - &[data-variant="neutral"] { + &[data-emphasis="neutral"] { --badge-background: var(--color-background-support-neutral); --badge-text: var(--color-utility-persistent-white); } - &[data-variant="neutral-outline"] { + + &[data-emphasis="neutral-outline"] { --badge-background: transparent; --badge-border: var(--color-border-support-neutral); --badge-text: var(--color-text-neutral-primary); --border-size: 1px; } - &[data-variant="brand"] { - --badge-background: var(--color-background-brand-primary); - --badge-text: var(--color-utility-persistent-white); - } - &[data-variant="brand-outline"] { + + &[data-emphasis="brand-outline"] { --badge-background: transparent; --badge-border: var(--color-border-support-neutral); --badge-text: var(--color-text-brand-primary); --border-size: 1px; } - &[data-variant="info"] { - --badge-background: var(--color-background-support-info); - --badge-text: var(--color-utility-persistent-white); - } - &[data-variant="success"] { - --badge-background: var(--color-background-support-success); - --badge-text: var(--color-utility-persistent-white); - } - &[data-variant="warning"] { - --badge-background: var(--color-background-support-warning); - --badge-text: var(--color-utility-persistent-black); - } - &[data-variant="danger"] { - --badge-background: var(--color-background-support-danger); - --badge-text: var(--color-utility-persistent-white); - } - &[data-variant="persistent-black"] { + + &[data-emphasis="persistent-black"] { --badge-background: var(--color-utility-persistent-black); --badge-text: var(--color-utility-persistent-white); } - &[data-variant="persistent-white"] { + + &[data-emphasis="persistent-white"] { --badge-background: var(--color-utility-persistent-white); --badge-text: var(--color-utility-persistent-black); } diff --git a/packages/common/qds-core/src/badge/qds-status-badge.css b/packages/common/qds-core/src/badge/qds-status-badge.css index e7af7ae08..f447272b3 100644 --- a/packages/common/qds-core/src/badge/qds-status-badge.css +++ b/packages/common/qds-core/src/badge/qds-status-badge.css @@ -1,43 +1,60 @@ +.qui-badge__root { + &[data-size="xxs"] { + --status-size: var(--sizing-40); + } + &[data-size="xs"] { + --status-size: var(--sizing-40); + } + &[data-size="sm"] { + --status-size: var(--sizing-50); + } + &[data-size="md"] { + --status-size: var(--sizing-60); + } + &[data-size="lg"] { + --status-size: var(--sizing-70); + } + &[data-size="xl"] { + --status-size: var(--sizing-80); + } +} + .qui-badge__root[data-scope="status-badge"] { + background: var(--badge-background); + border: solid var(--border-size, 0) var(--badge-background); + border-radius: var(--border-radius-rounded); + color: var(--badge-text); height: var(--status-size); min-width: var(--status-size); + padding: 0; width: var(--status-size); - color: var(--badge-text); - background: var(--badge-background); - border: solid var(--border-size, 0) var(--badge-background); - - /* Override size-specific styles with higher specificity */ - &[data-size="xs"], - &[data-size="sm"], - &[data-size="md"], - &[data-size="lg"], - &[data-size="xl"] { - border-radius: var(--border-radius-rounded); - padding: 0; - } &[data-emphasis="neutral"] { --badge-background: var(--color-background-support-neutral); } + &[data-emphasis="brand"] { --badge-background: var(--color-background-brand-primary); } + &[data-emphasis="info"] { --badge-background: var(--color-background-support-info); } + &[data-emphasis="success"] { --badge-background: var(--color-background-support-success); } + &[data-emphasis="warning"] { --badge-background: var(--color-background-support-warning); } + &[data-emphasis="danger"] { --badge-background: var(--color-background-support-danger); } -} -/* outlined variant */ -.qui-badge__root[data-scope="status-badge"][data-variant="outlined"] { - background: transparent; - border-width: 1px; + &[data-variant="outlined"] { + background: transparent; + border-width: 1px; + } } diff --git a/packages/common/qds-core/src/badge/qds-text-badge.css b/packages/common/qds-core/src/badge/qds-text-badge.css index e6dbebf62..2027d7df9 100644 --- a/packages/common/qds-core/src/badge/qds-text-badge.css +++ b/packages/common/qds-core/src/badge/qds-text-badge.css @@ -1,141 +1,23 @@ .qui-badge__root[data-scope="text-badge"] { - color: var(--badge-text); background: var(--badge-background); border: solid var(--border-size, 0) var(--badge-border); -} + color: var(--badge-text); -/* default variant */ -.qui-badge__root[data-scope="text-badge"][data-variant="default"] { - &[data-emphasis="neutral"] { - --badge-background: var(--color-background-neutral-10); - --badge-text: var(--color-text-neutral-inverse); - } - &[data-emphasis="brand"] { - --badge-background: var(--color-background-brand-primary); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="info"] { - --badge-background: var(--color-background-support-info); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="success"] { - --badge-background: var(--color-background-support-success); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="warning"] { - --badge-background: var(--color-background-support-warning); - --badge-text: var(--color-utility-persistent-black); - } - &[data-emphasis="danger"] { - --badge-background: var(--color-background-support-danger); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="blue"] { - --badge-background: var(--color-category-blue-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="cyan"] { - --badge-background: var(--color-category-cyan-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="green"] { - --badge-background: var(--color-category-green-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="kiwi"] { - --badge-background: var(--color-category-kiwi-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="magenta"] { - --badge-background: var(--color-category-magenta-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="orange"] { - --badge-background: var(--color-category-orange-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="purple"] { - --badge-background: var(--color-category-purple-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="red"] { - --badge-background: var(--color-category-red-strong); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="teal"] { - --badge-background: var(--color-category-teal-strong); - --badge-text: var(--color-utility-persistent-white); + &[data-size="sm"] { + border-radius: var(--border-radius-xs); + font: var(--font-static-body-xs-default); + padding: var(--spacing-10) var(--spacing-40); } - &[data-emphasis="yellow"] { - --badge-background: var(--color-category-yellow-strong); - --badge-text: var(--color-utility-persistent-black); - } -} -/* subtle variant */ -.qui-badge__root[data-scope="text-badge"][data-variant="subtle"] { - &[data-emphasis="neutral"] { - --badge-background: var(--color-background-support-neutral); - --badge-text: var(--color-utility-persistent-white); - } - &[data-emphasis="brand"] { - --badge-background: var(--color-background-brand-primary-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="info"] { - --badge-background: var(--color-background-support-info-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="success"] { - --badge-background: var(--color-background-support-success-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="warning"] { - --badge-background: var(--color-background-support-warning-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="danger"] { - --badge-background: var(--color-background-support-danger-medium); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="blue"] { - --badge-background: var(--color-category-blue-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="cyan"] { - --badge-background: var(--color-category-cyan-subtle); - --badge-text: var(--color-text-neutral-primary); + &[data-size="md"] { + border-radius: var(--border-radius-sm); + font: var(--font-static-body-sm-default); + padding: var(--spacing-20) var(--spacing-50); } - &[data-emphasis="green"] { - --badge-background: var(--color-category-green-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="kiwi"] { - --badge-background: var(--color-category-kiwi-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="magenta"] { - --badge-background: var(--color-category-magenta-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="orange"] { - --badge-background: var(--color-category-orange-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="purple"] { - --badge-background: var(--color-category-purple-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="red"] { - --badge-background: var(--color-category-red-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="teal"] { - --badge-background: var(--color-category-teal-subtle); - --badge-text: var(--color-text-neutral-primary); - } - &[data-emphasis="yellow"] { - --badge-background: var(--color-category-yellow-subtle); - --badge-text: var(--color-text-neutral-primary); + + &[data-size="lg"] { + border-radius: var(--border-radius-sm); + font: var(--font-static-body-md-default); + padding: var(--spacing-40) var(--spacing-70); } } diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx index a59015c20..5ede5e98e 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx @@ -32,7 +32,10 @@ When using the [value](./#value-1) prop with [max](./#max), overflow values are Multiple color and style options are available via the [variant](./#variant-1) prop: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. - + ### Size diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/index.ts b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/index.ts index 751e18853..5f0eaf639 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/index.ts +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/index.ts @@ -1,5 +1,5 @@ export * from "./number-badge-disabled-demo" +export * from "./number-badge-emphasis-demo" export * from "./number-badge-max-demo" export * from "./number-badge-size-demo" export * from "./number-badge-value-demo" -export * from "./number-badge-variant-demo" diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx index 7c01a1147..e8a3a361c 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx @@ -6,8 +6,8 @@ export function NumberBadgeDisabledDemo(): ReactElement { return (
{/* preview */} - - + + {/* preview */}
) diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-emphasis-demo.tsx new file mode 100644 index 000000000..10e4a3156 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-emphasis-demo.tsx @@ -0,0 +1,22 @@ +import type {ReactElement} from "react" + +import {NumberBadge} from "@qualcomm-ui/react/badge" + +export function NumberBadgeEmphasisDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx deleted file mode 100644 index 856f250db..000000000 --- a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type {ReactElement} from "react" - -import {NumberBadge} from "@qualcomm-ui/react/badge" - -export function NumberBadgeVariantDemo(): ReactElement { - return ( -
- {/* preview */} - - - - - - - - - - - {/* preview */} -
- ) -} diff --git a/packages/frameworks/angular/src/badge/number-badge.directive.ts b/packages/frameworks/angular/src/badge/number-badge.directive.ts index b46dbcc53..5b30b3e64 100644 --- a/packages/frameworks/angular/src/badge/number-badge.directive.ts +++ b/packages/frameworks/angular/src/badge/number-badge.directive.ts @@ -18,8 +18,8 @@ import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals" import { createQdsNumberBadgeApi, type QdsBadgeBasicSize, + type QdsNumberBadgeEmphasis, type QdsNumberBadgeProps, - type QdsNumberBadgeVariant, } from "@qualcomm-ui/qds-core/badge" import type {Booleanish} from "@qualcomm-ui/utils/coercion" @@ -32,12 +32,6 @@ import type {Booleanish} from "@qualcomm-ui/utils/coercion" export class NumberBadgeDirective implements OnInit, SignalifyInput { - /** - * Governs the size of the badge. - * @default 'md' - */ - readonly size = input() - /** * The badge disabled state. */ @@ -46,23 +40,29 @@ export class NumberBadgeDirective }) /** - * Governs the style of the badge. + * Governs the color and style of the number badge. * @default 'neutral' */ - readonly variant = input() + readonly emphasis = input() /** - * The numeric value to display for the number badge. + * Maximum value to display for the number badge. + * @default 99 */ - readonly value = input(undefined, { + readonly max = input(undefined, { transform: numberAttribute, }) /** - * Maximum value to display for the number badge. - * @default 99 + * Governs the size of the badge. + * @default 'md' */ - readonly max = input(undefined, { + readonly size = input() + + /** + * The numeric value to display for the number badge. + */ + readonly value = input(undefined, { transform: numberAttribute, }) @@ -70,10 +70,10 @@ export class NumberBadgeDirective return createQdsNumberBadgeApi( { disabled: this.disabled(), + emphasis: this.emphasis(), max: this.max(), size: this.size(), value: this.value(), - variant: this.variant(), }, normalizeProps, ) diff --git a/packages/frameworks/react/src/badge/number-badge.tsx b/packages/frameworks/react/src/badge/number-badge.tsx index 7577a27ae..9d1b9597f 100644 --- a/packages/frameworks/react/src/badge/number-badge.tsx +++ b/packages/frameworks/react/src/badge/number-badge.tsx @@ -27,19 +27,19 @@ export interface NumberBadgeProps export function NumberBadge({ children, disabled, + emphasis, max, size, value, - variant, ...restProps }: NumberBadgeProps): ReactElement { const qdsApi = createQdsNumberBadgeApi( { disabled, + emphasis, max, size, value, - variant, }, normalizeProps, ) From a7998a2626e5bef4b70471deb364c06c295b1d03 Mon Sep 17 00:00:00 2001 From: Olaf Kappes Date: Fri, 21 Nov 2025 09:55:30 +0100 Subject: [PATCH 07/10] variant > emphasis in mdx Signed-off-by: Olaf Kappes --- .../components+/badges+/number-badge+/_number-badge.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx index 5ede5e98e..22b8b77bd 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx @@ -28,9 +28,9 @@ When using the [value](./#value-1) prop with [max](./#max), overflow values are -### Variant +### Emphasis -Multiple color and style options are available via the [variant](./#variant-1) prop: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. +Multiple color and style options are available via the [emphasis](./#emphasis-1) prop: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. Date: Mon, 24 Nov 2025 13:56:30 -0800 Subject: [PATCH 08/10] docs startup fix Signed-off-by: Ryan Bower --- packages/docs/react-docs/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/docs/react-docs/package.json b/packages/docs/react-docs/package.json index 5121d3e05..0745a5508 100644 --- a/packages/docs/react-docs/package.json +++ b/packages/docs/react-docs/package.json @@ -11,7 +11,8 @@ "build:site": "react-router build --mode production", "build:typedoc": "qui-typedoc build", "watch:typedoc": "qui-typedoc watch", - "dev": "run-p dev:app typecheck", + "clean": "shx rm -rf .react-router", + "dev": "pnpm clean && run-p dev:app typecheck", "dev:app": "vite -c vite.config.ts", "lint": "eslint --quiet", "start": "cross-env NODE_ENV=production react-router-serve ./build/server/index.js", From 26697dbcdbe438118ca332de20dd5f4f256bbe01 Mon Sep 17 00:00:00 2001 From: Ryan Bower Date: Mon, 24 Nov 2025 14:01:24 -0800 Subject: [PATCH 09/10] consolidate badge emphasis docs, remove redundant docs Signed-off-by: Ryan Bower --- .webstorm/bookmarks.json | 4 ++-- .../components+/badges+/icon-badge+/_icon-badge.mdx | 2 +- .../badges+/status-badge+/_status-badge.mdx | 2 +- .../components+/badges+/text-badge+/_text-badge.mdx | 2 +- .../text-badge+/demos/text-badge-emphasis-demo.ts | 12 ++++++------ .../text-badge+/demos/text-badge-variant-demo.ts | 12 ++++++------ .../components+/badges+/icon-badge+/_icon-badge.mdx | 2 +- .../badges+/status-badge+/_status-badge.mdx | 2 +- .../components+/badges+/text-badge+/_text-badge.mdx | 2 +- .../text-badge+/demos/text-badge-emphasis-demo.tsx | 12 ++++++------ .../text-badge+/demos/text-badge-variant-demo.tsx | 12 ++++++------ 11 files changed, 32 insertions(+), 32 deletions(-) diff --git a/.webstorm/bookmarks.json b/.webstorm/bookmarks.json index 95120f1fe..cbf90eacd 100644 --- a/.webstorm/bookmarks.json +++ b/.webstorm/bookmarks.json @@ -176,13 +176,13 @@ { "description": "angular-docs", "provider": "com.intellij.ide.bookmark.providers.LineBookmarkProvider", - "url": "file://$PROJECT_DIR$/packages/docs/angular-docs/src/routes/components+/badge+", + "url": "file://$PROJECT_DIR$/packages/docs/angular-docs/src/routes/components+/badges+", "line": "-1" }, { "description": "react-docs", "provider": "com.intellij.ide.bookmark.providers.LineBookmarkProvider", - "url": "file://$PROJECT_DIR$/packages/docs/react-docs/src/routes/components+/badge+", + "url": "file://$PROJECT_DIR$/packages/docs/react-docs/src/routes/components+/badges+", "line": "-1" }, { diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx index c055ca26b..07ea29eeb 100644 --- a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx @@ -26,7 +26,7 @@ Use the [icon](./#icon-1) input to provide a Lucide icon name, or use content pr ### Emphasis -Use the [emphasis](./#emphasis-1) input to convey semantic meaning or add color. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Color emphasis are: `blue`, `cyan`, `green`, `kiwi`, `magenta`, `orange`, `purple`, `red`, `teal`, and `yellow`. +Use the [emphasis](./#emphasis-1) input to convey semantic meaning or add color. diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx index 0ca5e2362..3daa8deb8 100644 --- a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx +++ b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx @@ -20,7 +20,7 @@ import {StatusBadgeDirective} from "@qualcomm-ui/angular/badge" ### Emphasis -Use the [emphasis](./#emphasis-1) input to convey semantic meaning with colors. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. +Use the [emphasis](./#emphasis-1) input to convey semantic meaning with colors. diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx index 018637d3f..9a7472542 100644 --- a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx @@ -20,7 +20,7 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge" ### Emphasis -Use the [emphasis](./#emphasis-1) input to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Color emphasis are: `blue`, `cyan`, `green`, `kiwi`, `magenta`, `orange`, `purple`, `red`, `teal`, and `yellow`. +Use the [emphasis](./#emphasis-1) input to convey semantic meaning or categorize content. diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts index 3e2aac991..8b5be0654 100644 --- a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts @@ -8,12 +8,12 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge" template: `
- Neutral - Brand - Info - Success - Warning - Danger + neutral + brand + info + success + warning + danger
blue diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts index 2d23d53bc..7045892a4 100644 --- a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts @@ -8,12 +8,12 @@ import {BadgeDirective} from "@qualcomm-ui/angular/badge" template: `
- Neutral - Brand - Info - Success - Warning - Danger + neutral + brand + info + success + warning + danger
blue diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx index 845413c62..7fc731fd7 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx @@ -24,7 +24,7 @@ Use the [icon](./#icon-1) prop to provide a Lucide icon, or use [children](./#ch ### Emphasis -Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. Color emphasis are: `blue`, `cyan`, `green`, `kiwi`, `magenta`, `orange`, `purple`, `red`, `teal`, and `yellow`. +Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx index c29784e27..4d39cadf6 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx @@ -18,7 +18,7 @@ import {StatusBadge} from "@qualcomm-ui/react/badge" ### Emphasis -Use the [emphasis](./#emphasis-1) prop to convey semantic meaning with colors. Available semantic emphasis are: `neutral`, `brand`, `info`, `success`, `warning`, and `danger`. +Use the [emphasis](./#emphasis-1) prop to convey semantic meaning with colors. diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx index 42fb971d1..40e14381b 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx @@ -6,12 +6,12 @@ export function TextBadgeEmphasisDemo(): ReactElement { return (
- Neutral - Brand - Info - Success - Warning - Danger + neutral + brand + info + success + warning + danger
blue diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx index 6f0baa16e..325e768e1 100644 --- a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx @@ -7,22 +7,22 @@ export function TextBadgeVariantDemo(): ReactElement {
- Neutral + neutral - Brand + brand - Info + info - Success + success - Warning + warning - Danger + danger
From 301126e5ed9890594cbb9fc220bdeb913bdd3892 Mon Sep 17 00:00:00 2001 From: Ryan Bower Date: Mon, 24 Nov 2025 14:03:48 -0800 Subject: [PATCH 10/10] version bumps, changelogs Signed-off-by: Ryan Bower --- packages/common/qds-core/CHANGELOG.md | 10 ++++++ packages/common/qds-core/package.json | 2 +- packages/frameworks/angular/CHANGELOG.md | 14 ++++++++ packages/frameworks/angular/package.json | 6 ++-- packages/frameworks/react-mdx/CHANGELOG.md | 6 ++++ packages/frameworks/react-mdx/package.json | 6 ++-- packages/frameworks/react/CHANGELOG.md | 10 ++++++ packages/frameworks/react/package.json | 6 ++-- pnpm-lock.yaml | 40 +++++++++++----------- 9 files changed, 70 insertions(+), 30 deletions(-) diff --git a/packages/common/qds-core/CHANGELOG.md b/packages/common/qds-core/CHANGELOG.md index 59d83a48b..925237f32 100644 --- a/packages/common/qds-core/CHANGELOG.md +++ b/packages/common/qds-core/CHANGELOG.md @@ -1,5 +1,15 @@ # @qualcomm-ui/qds-core +## 1.5.0 (2025/11/24) + +### Features + +- add badge component + +### Bug Fixes + +- [badge]: categories > colors + ## 1.4.2 (2025/11/21) ### Miscellaneous Chores diff --git a/packages/common/qds-core/package.json b/packages/common/qds-core/package.json index dc560043f..e8533f1b3 100644 --- a/packages/common/qds-core/package.json +++ b/packages/common/qds-core/package.json @@ -1,6 +1,6 @@ { "name": "@qualcomm-ui/qds-core", - "version": "1.4.2", + "version": "1.5.0", "description": "qds core components", "repository": "https://github.com/qualcomm/qualcomm-ui", "author": "Ryan Bower", diff --git a/packages/frameworks/angular/CHANGELOG.md b/packages/frameworks/angular/CHANGELOG.md index 7f308dedb..63d82fc56 100644 --- a/packages/frameworks/angular/CHANGELOG.md +++ b/packages/frameworks/angular/CHANGELOG.md @@ -1,5 +1,19 @@ # @qualcomm-ui/angular +## 1.4.0 (2025/11/24) + +### Features + +- add badge component + +### Bug Fixes + +- remove useless context, fix doc + +### Miscellaneous Chores + +- **deps:** update dependencies [@qualcomm-ui/qds-core] + ## 1.3.3 (2025/11/23) ### Bug Fixes diff --git a/packages/frameworks/angular/package.json b/packages/frameworks/angular/package.json index 888935b6d..eb85c4061 100644 --- a/packages/frameworks/angular/package.json +++ b/packages/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@qualcomm-ui/angular", - "version": "1.3.3", + "version": "1.4.0", "author": "Ryan Bower", "license": "BSD-3-Clause-Clear", "description": "QUI Angular Components", @@ -59,7 +59,7 @@ "@qualcomm-ui/angular-core": "workspace:^1.0.5", "@qualcomm-ui/cli": "workspace:^1", "@qualcomm-ui/core": "workspace:^1.0.7", - "@qualcomm-ui/qds-core": "workspace:^1.4.2", + "@qualcomm-ui/qds-core": "workspace:^1.5.0", "@qualcomm-ui/tailwind-plugin": "workspace:^1.1.0", "@qualcomm-ui/tsconfig": "workspace:^1.0.4", "@qualcomm-ui/utils": "workspace:^1.0.3", @@ -101,7 +101,7 @@ "@angular/platform-browser-dynamic": ">=20.1.0 <21", "@qualcomm-ui/angular-core": "workspace:^1.0.5", "@qualcomm-ui/core": "workspace:^1.0.7", - "@qualcomm-ui/qds-core": "workspace:^1.4.2", + "@qualcomm-ui/qds-core": "workspace:^1.5.0", "@qualcomm-ui/utils": "workspace:^1.0.3", "@tanstack/virtual-core": ">=3.13.12", "lucide-angular": ">=0.487.0 <1", diff --git a/packages/frameworks/react-mdx/CHANGELOG.md b/packages/frameworks/react-mdx/CHANGELOG.md index fd4920afe..0d89d48cc 100644 --- a/packages/frameworks/react-mdx/CHANGELOG.md +++ b/packages/frameworks/react-mdx/CHANGELOG.md @@ -1,5 +1,11 @@ # @qualcomm-ui/react-mdx +## 1.5.1 (2025/11/24) + +### Miscellaneous Chores + +- **deps:** update dependencies [@qualcomm-ui/react] + ## 1.5.0 (2025/11/21) ### Features diff --git a/packages/frameworks/react-mdx/package.json b/packages/frameworks/react-mdx/package.json index 5eb269854..5f3dc57d6 100644 --- a/packages/frameworks/react-mdx/package.json +++ b/packages/frameworks/react-mdx/package.json @@ -1,6 +1,6 @@ { "name": "@qualcomm-ui/react-mdx", - "version": "1.5.0", + "version": "1.5.1", "description": "React components and utilities for MDX documentation sites based on QUI Docs", "author": "Ryan Bower", "license": "BSD-3-Clause-Clear", @@ -58,7 +58,7 @@ "@qualcomm-ui/dom": "workspace:^1.0.5", "@qualcomm-ui/esbuild": "workspace:^1.0.3", "@qualcomm-ui/mdx-common": "workspace:^1.2.0", - "@qualcomm-ui/react": "workspace:^1.1.6", + "@qualcomm-ui/react": "workspace:^1.2.0", "@qualcomm-ui/react-core": "workspace:^1.0.7", "@qualcomm-ui/react-test-utils": "workspace:^1.0.0", "@qualcomm-ui/tsconfig": "workspace:^1.0.4", @@ -100,7 +100,7 @@ "@mdx-js/react": ">=3.0.1 <4", "@qualcomm-ui/core": "workspace:^1.0.7", "@qualcomm-ui/mdx-common": "workspace:^1.2.0", - "@qualcomm-ui/react": "workspace:^1.1.6", + "@qualcomm-ui/react": "workspace:^1.2.0", "@qualcomm-ui/react-core": "workspace:^1.0.7", "@qualcomm-ui/utils": "workspace:^1.0.3", "@shikijs/langs": ">=3.13.0", diff --git a/packages/frameworks/react/CHANGELOG.md b/packages/frameworks/react/CHANGELOG.md index 96b61798f..4eabd8136 100644 --- a/packages/frameworks/react/CHANGELOG.md +++ b/packages/frameworks/react/CHANGELOG.md @@ -1,5 +1,15 @@ # @qualcomm-ui/react +## 1.2.0 (2025/11/24) + +### Features + +- add badge component + +### Miscellaneous Chores + +- **deps:** update dependencies [@qualcomm-ui/qds-core] + ## 1.1.6 (2025/11/21) ### Code Refactoring diff --git a/packages/frameworks/react/package.json b/packages/frameworks/react/package.json index 6031fd4f9..c63dda64d 100644 --- a/packages/frameworks/react/package.json +++ b/packages/frameworks/react/package.json @@ -1,7 +1,7 @@ { "name": "@qualcomm-ui/react", "sideEffects": false, - "version": "1.1.6", + "version": "1.2.0", "description": "QUI React components", "author": "Ryan Bower", "license": "BSD-3-Clause-Clear", @@ -43,7 +43,7 @@ "@qualcomm-ui/cli": "workspace:^1.0.5", "@qualcomm-ui/core": "workspace:^1.0.7", "@qualcomm-ui/esbuild": "workspace:^1.0.3", - "@qualcomm-ui/qds-core": "workspace:^1.4.2", + "@qualcomm-ui/qds-core": "workspace:^1.5.0", "@qualcomm-ui/react-core": "workspace:^1.0.7", "@qualcomm-ui/react-test-utils": "workspace:^1.0.0", "@qualcomm-ui/tsconfig": "workspace:^1.0.4", @@ -80,7 +80,7 @@ "peerDependencies": { "@tanstack/react-virtual": ">=3.13.9", "@qualcomm-ui/core": "workspace:^1.0.7", - "@qualcomm-ui/qds-core": "workspace:^1.4.2", + "@qualcomm-ui/qds-core": "workspace:^1.5.0", "@qualcomm-ui/react-core": "workspace:^1.0.7", "@qualcomm-ui/utils": "workspace:^1.0.3", "lucide-react": ">=0.379.0 <1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 67519f31f..55a3e98a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1087,10 +1087,10 @@ importers: version: 10.1.0 eslint-plugin-boundaries: specifier: ^5.0.1 - version: 5.1.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)) + version: 5.1.0(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)) eslint-plugin-import: specifier: ^2.31.0 - version: 2.32.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)) + version: 2.32.0(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)) vitest: specifier: ^4.0.8 version: 4.0.9(@types/debug@4.1.12)(@types/node@24.10.1)(@vitest/browser-playwright@4.0.9)(@vitest/ui@4.0.9)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.93.3)(sass@1.94.0)(stylus@0.62.0)(terser@5.44.1)(tsx@4.20.6)(yaml@2.8.1) @@ -3318,7 +3318,7 @@ importers: specifier: workspace:^1.0.7 version: link:../../common/core '@qualcomm-ui/qds-core': - specifier: workspace:^1.4.2 + specifier: workspace:^1.5.0 version: link:../../common/qds-core '@qualcomm-ui/tailwind-plugin': specifier: workspace:^1.1.0 @@ -3594,7 +3594,7 @@ importers: specifier: workspace:^1.0.3 version: link:../../common/esbuild '@qualcomm-ui/qds-core': - specifier: workspace:^1.4.2 + specifier: workspace:^1.5.0 version: link:../../common/qds-core '@qualcomm-ui/react-core': specifier: workspace:^1.0.7 @@ -3943,7 +3943,7 @@ importers: specifier: workspace:^1.2.0 version: link:../../common/mdx-common '@qualcomm-ui/react': - specifier: workspace:^1.1.6 + specifier: workspace:^1.2.0 version: link:../react '@qualcomm-ui/react-core': specifier: workspace:^1.0.7 @@ -23206,7 +23206,7 @@ snapshots: sirv: 3.0.2 tinyglobby: 0.2.15 tinyrainbow: 3.0.3 - vitest: 4.0.9(@types/debug@4.1.12)(@types/node@24.9.2)(@vitest/browser-playwright@4.0.9)(@vitest/ui@4.0.9)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.93.3)(sass@1.94.0)(stylus@0.62.0)(terser@5.44.1)(tsx@4.20.6)(yaml@2.8.1) + vitest: 4.0.9(@types/debug@4.1.12)(@types/node@24.10.1)(@vitest/browser-playwright@4.0.9)(@vitest/ui@4.0.9)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.93.3)(sass@1.94.0)(stylus@0.62.0)(terser@5.44.1)(tsx@4.20.6)(yaml@2.8.1) '@vitest/utils@4.0.9': dependencies: @@ -25033,32 +25033,32 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1)): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3) - eslint: 9.37.0(jiti@2.6.1) + eslint: 9.39.1(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1)): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)): dependencies: debug: 3.2.7 optionalDependencies: - '@typescript-eslint/parser': 8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3) - eslint: 9.39.1(jiti@2.6.1) + '@typescript-eslint/parser': 8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) + eslint: 9.37.0(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 transitivePeerDependencies: - supports-color - eslint-plugin-boundaries@5.1.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)): + eslint-plugin-boundaries@5.1.0(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)): dependencies: chalk: 4.1.2 eslint: 9.37.0(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)) micromatch: 4.0.8 transitivePeerDependencies: - '@typescript-eslint/parser' @@ -25103,7 +25103,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)): + eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1)): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -25112,9 +25112,9 @@ snapshots: array.prototype.flatmap: 1.3.3 debug: 3.2.7 doctrine: 2.1.0 - eslint: 9.37.0(jiti@2.6.1) + eslint: 9.39.1(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -25132,7 +25132,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1)): + eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -25141,9 +25141,9 @@ snapshots: array.prototype.flatmap: 1.3.3 debug: 3.2.7 doctrine: 2.1.0 - eslint: 9.39.1(jiti@2.6.1) + eslint: 9.37.0(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -25155,7 +25155,7 @@ snapshots: string.prototype.trimend: 1.0.9 tsconfig-paths: 3.15.0 optionalDependencies: - '@typescript-eslint/parser': 8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/parser': 8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) transitivePeerDependencies: - eslint-import-resolver-typescript - eslint-import-resolver-webpack