From a1b8f533e157a24ebe1b07b0e2ad64e157ac6898 Mon Sep 17 00:00:00 2001
From: Mostafa Shamsitabar <50550858+mimshins@users.noreply.github.com>
Date: Sun, 10 Nov 2024 13:40:22 +0330
Subject: [PATCH] refactor(badge): update variants and their corresponding
styles (#249)
---
docs/dev/components/elements-config.json | 9 +-
.../src/badge-wrapper/badge-wrapper.style.ts | 78 +-
.../src/badge-wrapper/badge-wrapper.ts | 38 +-
.../src/badge-wrapper/constants.ts | 4 +
.../web-components/src/badge-wrapper/index.ts | 13 +-
.../web-components/src/badge/badge.style.ts | 226 ++-
packages/web-components/src/badge/badge.ts | 118 +-
.../web-components/src/badge/constants.ts | 3 +
packages/web-components/src/badge/index.ts | 48 +-
packages/web-components/src/badge/types.ts | 4 -
pnpm-lock.yaml | 1293 +++++++++--------
11 files changed, 965 insertions(+), 869 deletions(-)
create mode 100644 packages/web-components/src/badge-wrapper/constants.ts
create mode 100644 packages/web-components/src/badge/constants.ts
delete mode 100644 packages/web-components/src/badge/types.ts
diff --git a/docs/dev/components/elements-config.json b/docs/dev/components/elements-config.json
index 045bb56e..b71f5891 100644
--- a/docs/dev/components/elements-config.json
+++ b/docs/dev/components/elements-config.json
@@ -36,8 +36,9 @@
"tap-badge": {
"propertyDefaultValues": {
"value": "درخواست",
- "variant": "info",
- "priority": "low"
+ "color": "info",
+ "priority": "low",
+ "variant": "pill"
},
"slotKnobs": {}
},
@@ -107,8 +108,8 @@
"Icon Button": ""
},
"badge": {
- "Pill Badge": "",
- "Dot Badge": ""
+ "Pill Badge": "",
+ "Dot Badge": ""
}
}
},
diff --git a/packages/web-components/src/badge-wrapper/badge-wrapper.style.ts b/packages/web-components/src/badge-wrapper/badge-wrapper.style.ts
index 0c10cefc..d336b678 100644
--- a/packages/web-components/src/badge-wrapper/badge-wrapper.style.ts
+++ b/packages/web-components/src/badge-wrapper/badge-wrapper.style.ts
@@ -1,16 +1,86 @@
import { css } from "lit";
export default css`
- .wrapper {
+ .root.left .badge {
+ transform: translate(-50%, -50%);
+ }
+
+ .root.right .badge {
+ transform: translate(50%, -50%);
+ }
+
+ .root.rectangle.top .badge {
+ top: 0;
+ }
+
+ .root.rectangle.middle .badge {
+ top: 50%;
+ }
+
+ .root.rectangle.left .badge {
+ left: 0;
+ }
+
+ .root.rectangle.right .badge {
+ right: 0;
+ }
+
+ .root.circle.top .badge {
+ top: 14.5%;
+ }
+
+ .root.circle.middle .badge {
+ top: 50%;
+ }
+
+ .root.circle:not(.middle).left .badge {
+ left: 14.5%;
+ }
+
+ .root.circle:not(.middle).right .badge {
+ right: 14.5%;
+ }
+
+ .root.pill.top .badge {
+ top: 6px;
+ }
+
+ .root.pill.middle .badge {
+ top: 50%;
+ }
+
+ .root.pill:not(.middle).left .badge {
+ left: 6px;
+ }
+
+ .root.pill:not(.middle).right .badge {
+ right: 6px;
+ }
+
+ .root.pill.middle.left .badge {
+ left: 0;
+ }
+
+ .root.pill.middle.right .badge {
+ right: 0;
+ }
+
+ .root {
position: relative;
+
display: inline-flex;
+ flex-shrink: 0;
+
+ vertical-align: middle;
+
+ z-index: 2;
}
.badge {
display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
position: absolute;
- top: 0;
- left: 0;
- transform: translate(-50%, -30%);
}
`;
diff --git a/packages/web-components/src/badge-wrapper/badge-wrapper.ts b/packages/web-components/src/badge-wrapper/badge-wrapper.ts
index 24e9423a..2aad23c2 100644
--- a/packages/web-components/src/badge-wrapper/badge-wrapper.ts
+++ b/packages/web-components/src/badge-wrapper/badge-wrapper.ts
@@ -1,19 +1,39 @@
import { html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { Slots } from "./constants";
export class BadgeWrapper extends LitElement {
+ @property({ type: String, attribute: "anchor-shape" })
+ public anchorShape: "rectangle" | "circle" | "pill" = "rectangle";
+
+ @property({ type: String, attribute: "badge-side" })
+ public badgeSide: "left" | "right" = "right";
+
+ @property({ type: String, attribute: "badge-alignment" })
+ public badgeAlignment: "top" | "middle" = "top";
+
protected override render() {
+ const rootClasses = classMap({
+ root: true,
+ [this.anchorShape]: true,
+ [this.badgeAlignment]: true,
+ [this.badgeSide]: true,
+ });
+
return html`
-
-
-
+
+
+
+
`;
}
}
diff --git a/packages/web-components/src/badge-wrapper/constants.ts b/packages/web-components/src/badge-wrapper/constants.ts
new file mode 100644
index 00000000..2611b722
--- /dev/null
+++ b/packages/web-components/src/badge-wrapper/constants.ts
@@ -0,0 +1,4 @@
+export const Slots = {
+ DEFAULT: "",
+ BADGE: "badge",
+};
diff --git a/packages/web-components/src/badge-wrapper/index.ts b/packages/web-components/src/badge-wrapper/index.ts
index 5950c29b..3f9e5ca3 100644
--- a/packages/web-components/src/badge-wrapper/index.ts
+++ b/packages/web-components/src/badge-wrapper/index.ts
@@ -2,14 +2,17 @@ import { customElement } from "lit/decorators.js";
import { BadgeWrapper } from "./badge-wrapper";
import styles from "./badge-wrapper.style";
+export { Slots } from "./constants";
+
/**
- * @summary A wrapper component to position a badge relative to its content.
+ * @summary A wrapper component to position a badge relative to an anchor.
*
- * @slot - The default slot for the main content.
- * @slot badge - The slot for the badge to be positioned.
+ * @prop {"rectangle" | "circle" | "pill"} [anchor-shape="rectangle"] - The shape of the anchor.
+ * @prop {"left" | "right"} [badge-side="right"] - The horizontal placement of the badge.
+ * @prop {"top" | "middle"} [badge-alignment="alignment"] - The vertical alignment of the badge.
*
- * @csspart [wrapper] - The container that wraps the main content and the badge.
- * @csspart [badge] - The container that positions the badge.
+ * @slot - The default slot for the anchor element.
+ * @slot badge - The slot for the badge to be positioned.
*/
@customElement("tap-badge-wrapper")
export class TapBadgeWrapper extends BadgeWrapper {
diff --git a/packages/web-components/src/badge/badge.style.ts b/packages/web-components/src/badge/badge.style.ts
index ecf93c7d..95a634b2 100644
--- a/packages/web-components/src/badge/badge.style.ts
+++ b/packages/web-components/src/badge/badge.style.ts
@@ -1,148 +1,100 @@
import { css } from "lit";
export default css`
- .wrapper {
- position: relative;
+ *,
+ *::before,
+ *::after {
+ box-sizing: border-box;
+ }
+
+ [hidden] {
+ display: none !important;
+ }
+
+ :host {
display: inline-flex;
}
- .badge {
+ .root:not(.dot).medium {
+ height: 1.5rem;
+ min-width: 1.5rem;
+ }
+
+ .root:not(.dot).small {
+ height: 1.25rem;
+ min-width: 1.25rem;
+ }
+
+ .root.dot {
+ width: 0.375rem;
+ height: 0.375rem;
+
+ padding: 0;
+ }
+
+ .root.success.high {
+ --badge-bg-color: var(--tap-sys-color-surface-positive);
+ --badge-color: var(--tap-sys-color-content-on-negative);
+ }
+
+ .root.info.high {
+ --badge-bg-color: var(--tap-sys-color-surface-accent);
+ --badge-color: var(--tap-sys-color-content-on-negative);
+ }
+
+ .root.error.high {
+ --badge-bg-color: var(--tap-sys-color-surface-negative);
+ --badge-color: var(--tap-sys-color-content-on-negative);
+ }
+
+ .root.warning.high {
+ --badge-bg-color: var(--tap-sys-color-surface-warning);
+ --badge-color: var(--tap-sys-color-content-on-warning);
+ }
+
+ .root.success.low {
+ --badge-bg-color: var(--tap-sys-color-surface-positive-light);
+ --badge-color: var(--tap-sys-color-content-positive);
+ }
+
+ .root.info.low {
+ --badge-bg-color: var(--tap-sys-color-surface-accent-light);
+ --badge-color: var(--tap-sys-color-content-accent);
+ }
+
+ .root.error.low {
+ --badge-bg-color: var(--tap-sys-color-surface-negative-light);
+ --badge-color: var(--tap-sys-color-content-negative);
+ }
+
+ .root.warning.low {
+ --badge-bg-color: var(--tap-sys-color-surface-warning-light);
+ --badge-color: var(--tap-sys-color-content-warning);
+ }
+
+ .root.neutral {
+ --badge-bg-color: var(--tap-sys-color-surface-disabled);
+ --badge-color: var(--tap-sys-color-content-tertiary);
+ }
+
+ .root {
display: inline-flex;
align-items: center;
+ justify-content: center;
+
gap: var(--tap-sys-spacing-2);
- font: inherit;
- font-family: var(--tap-font-family, var(--tap-sys-font-family));
- line-height: var(
- --tap-badge-line-height,
- var(--tap-sys-typography-body-xs-height)
- );
- font-size: var(--tap-badge-font-size, --tap-sys-typography-body-xs-size);
- font-weight: var(
- --tap-badge-font-weight,
- var(--tap-sys-typography-body-xs-weight)
- );
- color: var(--tap-badge-color, --tap-sys-color-content-primary);
- border-radius: var(--tap-badge-border-radius, var(--tap-sys-radius-4));
- }
-
- .icon {
- margin: var(--tap-badge-icon-margin, var(--tap-sys-spacing-2));
- }
-
- :host([type="pill"]) .badge,
- :host([type="numeral"]) .badge {
- border-radius: var(
- --tap-badge-pill-numeral-border-radius,
- var(--tap-sys-radius-4)
- );
- padding: var(
- --tap-badge-pill-numeral-vertical-padding,
- var(--tap-sys-spacing-2)
- )
- var(--tap-badge-pill-numeral-horizontal-padding, var(--tap-sys-spacing-4));
- }
-
- :host([type="dot"]) .badge {
- /* FIXME: we dont have sizing tokens yet */
- width: var(--tap-badge-dot-width, 6px);
- height: var(--tap-badge-dot-height, 6px);
- /* FIXME: use spacing tokens */
- margin: var(--tap-badge-dot-margin, 3px);
- }
-
- :host([variant="info"]) .badge {
- background-color: var(
- --tap-badge-info-background-color,
- var(--tap-sys-color-surface-accent)
- );
- color: var(
- --tap-badge-info-color,
- var(--tap-sys-color-content-on-negative)
- );
- }
-
- :host([variant="success"]) .badge {
- background-color: var(
- --tap-badge-success-background-color,
- var(--tap-sys-color-surface-positive)
- );
- color: var(
- --tap-badge-success-color,
- var(--tap-sys-color-content-on-negative)
- );
- }
-
- :host([variant="error"]) .badge {
- background-color: var(
- --tap-badge-error-background-color,
- var(--tap-sys-color-surface-negative)
- );
- color: var(
- --tap-badge-error-color,
- var(--tap-sys-color-content-on-negative)
- );
- }
-
- :host([variant="warning"]) .badge {
- background-color: var(
- --tap-badge-warning-background-color,
- var(--tap-sys-color-surface-warning)
- );
- color: var(
- --tap-badge-warning-color,
- var(--tap-sys-color-content-on-warning)
- );
- }
-
- :host([variant="inverse"]) .badge {
- background-color: var(
- --tap-badge-inverse-background-color,
- var(--tap-sys-color-surface-disabled)
- );
- color: var(
- --tap-badge-inverse-color,
- var(--tap-sys-color-content-tertiary)
- );
- }
-
- :host([variant="info"][priority="low"]) .badge {
- background-color: var(
- --tap-badge-info-low-background-color,
- var(--tap-sys-color-surface-accent-light)
- );
- color: var(--tap-badge-info-low-color, var(--tap-sys-color-content-accent));
- }
-
- :host([variant="success"][priority="low"]) .badge {
- background-color: var(
- --tap-badge-success-low-background-color,
- var(--tap-sys-color-surface-positive-light)
- );
- color: var(
- --tap-badge-success-low-color,
- var(--tap-sys-color-content-positive)
- );
- }
-
- :host([variant="error"][priority="low"]) .badge {
- background-color: var(
- --tap-badge-error-low-background-color,
- var(--tap-sys-color-surface-negative-light)
- );
- color: var(
- --tap-badge-error-low-color,
- var(--tap-sys-color-content-negative)
- );
- }
-
- :host([variant="warning"][priority="low"]) .badge {
- background-color: var(
- --tap-badge-warning-low-background-color,
- var(--tap-sys-color-surface-warning-light)
- );
- color: var(
- --tap-badge-warning-low-color,
- var(--tap-sys-color-content-warning)
- );
+
+ font-family: var(--tap-sys-font-family);
+ line-height: var(--tap-sys-typography-body-xs-height);
+ font-size: var(--tap-sys-typography-body-xs-size);
+ font-weight: var(--tap-sys-typography-body-xs-weight);
+
+ border-radius: var(--tap-sys-radius-full);
+
+ color: var(--badge-color);
+ background-color: var(--badge-bg-color);
+
+ padding-right: var(--tap-sys-spacing-3-1);
+ padding-left: var(--tap-sys-spacing-3-1);
}
`;
diff --git a/packages/web-components/src/badge/badge.ts b/packages/web-components/src/badge/badge.ts
index 2abe9748..d2f09a7f 100644
--- a/packages/web-components/src/badge/badge.ts
+++ b/packages/web-components/src/badge/badge.ts
@@ -1,63 +1,93 @@
-import { html, LitElement } from "lit";
-import { property } from "lit/decorators.js";
-import {
- type BadgePriority,
- type BadgeType,
- type BadgeValue,
- type BadgeVariant,
-} from "./types";
+import { html, LitElement, type PropertyValues } from "lit";
+import type { DirectiveResult } from "lit/async-directive";
+import { property, state } from "lit/decorators.js";
+import { classMap, type ClassMapDirective } from "lit/directives/class-map.js";
+import { getRenderRootSlot, runAfterRepaint } from "../utils";
+import { Slots } from "./constants";
+
+type ClassMap = DirectiveResult;
export class Badge extends LitElement {
- @property({ reflect: true })
- public value?: BadgeValue = "";
+ @property({ type: String })
+ public value: string | number = "";
- @property({ reflect: true })
- public type?: BadgeType = "pill";
+ @property({ type: String })
+ public variant: "pill" | "numeral" | "dot" = "pill";
- @property({ reflect: true })
- public variant?: BadgeVariant = "inverse";
+ @property({ type: String })
+ public color: "success" | "error" | "info" | "warning" | "neutral" =
+ "neutral";
- @property({ reflect: true })
- public priority?: BadgePriority = "high";
+ @property({ type: String })
+ public priority: "high" | "low" = "high";
- @property({ type: Boolean })
- public leadingIcon? = false;
+ @property({ type: String })
+ public size: "medium" | "small" = "medium";
- private _renderIcon() {
- return html`
-
- `;
+ @state()
+ private _hasIcon = false;
+
+ protected override updated(changed: PropertyValues): void {
+ super.updated(changed);
+
+ runAfterRepaint(() => {
+ const iconSlot = getRenderRootSlot(this.renderRoot, Slots.ICON);
+
+ if (!iconSlot) return;
+
+ this._hasIcon = iconSlot.assignedNodes().length > 0;
+ });
+ }
+
+ private _renderDotBadge(rootClasses: ClassMap) {
+ return html``;
}
- private _renderDotBadge() {
- return html``;
+ private _renderNumeralBadge(rootClasses: ClassMap) {
+ return html`
+ ${this.value ?? 0}
+
`;
}
- private _renderNormalBadge() {
+ private _renderPillBadge(rootClasses: ClassMap) {
return html`
-
- ${this.leadingIcon ? this._renderIcon() : null} ${this.value}
-
+
+
+
+
+ ${this.value ?? ""}
+