FDS-661 category propetry added to f-tag

packages/flow-core/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 # Change Log
 
+## [2.9.7] - 2024-03-28
+
+### Improvements
+
+- Added `category` property to `f-tag` to support both `fill` and `outline` values. Default value set to `fill`.
+- Added `max-width` property to `f-tag`.
+
 ## [2.9.6] - 2024-03-28
 
 ### Improvements

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.9.6",
+  "version": "2.9.7",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

packages/flow-core/src/components/f-counter/f-counter.ts

@@ -12,6 +12,7 @@ import { validateHTMLColor } from "validate-color";
 import { validateHTMLColorName } from "validate-color";
 import { flowElement } from "./../../utils";
 import { injectCss } from "@ollion/flow-core-config";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 injectCss("f-counter", globalStyle);
 
@@ -190,9 +191,9 @@ export class FCounter extends FRoot {
 		return html`<div
 			class=${classMap(classes)}
 			style=${this.applyStyles()}
-			size=${this.size}
-			state=${this.state}
-			category=${this.category}
+			size=${ifDefined(this.size)}
+			state=${ifDefined(this.state)}
+			category=${ifDefined(this.category)}
 			?loading=${this.loading}
 			?disabled=${this.disabled}
 		>

packages/flow-core/src/components/f-tag/f-tag.scss

@@ -90,7 +90,6 @@ in this case it is `f-tag`
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			max-width: 240px;
 		}
 
 		// class to appply shimmer . This class is applied through javascript please check f-tag.ts
@@ -111,7 +110,7 @@ in this case it is `f-tag`
 		}
 
 		@each $state, $color in $states {
-			&[state="#{$state}"] {
+			&[state="#{$state}"][category="fill"] {
 				background-color: map.get($color, "background") !important;
 				border: 1px
 					solid
@@ -138,6 +137,34 @@ in this case it is `f-tag`
 					}
 				}
 			}
+			&[state="#{$state}"][category="outline"] {
+				background-color: transparent !important;
+				color: map.get($color, "background");
+				border: 1px
+					solid
+					map.get($color, "background") !important; // added to match width of outline category
+				// hover changes background
+				&[selected] {
+					background-color: transparent !important;
+					border: 1px solid map.get($color, "selected") !important;
+				}
+				// if loading attribute specified then change background, border, color and svg
+				&[loading] {
+					background-color: transparent !important;
+					border: 1px solid map.get($color, "loading") !important;
+					color: transparent !important;
+					svg path.loader-fill {
+						fill: map.get($color, "background") !important;
+					}
+				}
+				// adding clickable behavior
+				&[clickable]:not([selected]) {
+					cursor: pointer;
+					&:hover {
+						border: 1px solid map.get($color, "hover") !important;
+					}
+				}
+			}
 		}
 		/**
   * Iterating over sizes with padding, fontsize, height

packages/flow-core/src/components/f-tag/f-tag.ts

@@ -1,4 +1,4 @@
-import { html, PropertyValueMap, unsafeCSS } from "lit";
+import { html, nothing, PropertyValueMap, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { FRoot } from "../../mixins/components/f-root/f-root";
 import eleStyle from "./f-tag.scss?inline";
@@ -16,6 +16,9 @@ import { flowElement } from "./../../utils";
 import { createRef, ref, Ref } from "lit/directives/ref.js";
 import type { FDiv } from "../f-div/f-div";
 import { injectCss } from "@ollion/flow-core-config";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { keyed } from "lit/directives/keyed.js";
+
 injectCss("f-tag", globalStyle);
 
 export type FTagStateProp =
@@ -27,6 +30,8 @@ export type FTagStateProp =
 	| "inherit"
 	| `custom, ${string}`;
 
+export type FTagCategory = "fill" | "outline";
+
 /**
  * @summary Tags allow users to categorize the content. They can be used to add metadata to an element such as category, or property or show a status.
  */
@@ -66,6 +71,12 @@ export class FTag extends FRoot {
 	@property({ reflect: true, type: String })
 	size?: "large" | "medium" | "small" = "medium";
 
+	/**
+	 * @attribute category defined background and border
+	 */
+	@property({ reflect: true, type: String })
+	category?: FTagCategory = "fill";
+
 	/**
 	 * @attribute The states on tags are to indicate various degrees of emphasis of the action.
 	 */
@@ -114,6 +125,12 @@ export class FTag extends FRoot {
 	@property({ type: Boolean })
 	clickable?: boolean = false;
 
+	/**
+	 * @attribute is clickable
+	 */
+	@property({ type: String, reflect: true, attribute: "max-width" })
+	maxWidth: string = "240px";
+
 	labelDiv: Ref<FDiv> = createRef();
 
 	/**
@@ -149,18 +166,33 @@ export class FTag extends FRoot {
 	 * apply inline styles to shadow-dom for custom fill.
 	 */
 	applyStyles() {
-		if (this.fill) {
-			if (this.selected) {
-				return `background: ${this.fill}; border: 1px solid ${this.fill}; filter: brightness(60%); color: ${this.textColor}`;
-			} else if (this.loading) {
-				return `background-color: ${LightenDarkenColor(
-					this.fill,
-					-150
-				)}; border: 1px solid ${LightenDarkenColor(this.fill, -150)}; color: transparent; fill: ${
-					this.fill
-				}`;
-			} else {
-				return `background: ${this.fill}; border: 1px solid ${this.fill}; color: ${this.textColor}`;
+		if (this.category === "fill") {
+			if (this.fill) {
+				if (this.selected) {
+					return `background: ${this.fill}; border: 1px solid ${this.fill}; filter: brightness(60%); color: ${this.textColor}`;
+				} else if (this.loading) {
+					return `background-color: ${LightenDarkenColor(
+						this.fill,
+						-150
+					)}; border: 1px solid ${LightenDarkenColor(this.fill, -150)}; color: transparent; fill: ${
+						this.fill
+					}`;
+				} else {
+					return `background: ${this.fill}; border: 1px solid ${this.fill}; color: ${this.textColor}`;
+				}
+			}
+		} else {
+			if (this.fill) {
+				if (this.selected) {
+					return `background: transparent; border: 1px solid ${this.fill}; filter: brightness(60%); color: ${this.fill}`;
+				} else if (this.loading) {
+					return `background-color: transparent; border: 1px solid ${LightenDarkenColor(
+						this.fill,
+						-150
+					)}; color: transparent; fill: ${this.fill}`;
+				} else {
+					return `background: transparent; border: 1px solid ${this.fill}; color: ${this.fill}`;
+				}
 			}
 		}
 		return "";
@@ -182,13 +214,16 @@ export class FTag extends FRoot {
 			throw new Error("f-tag : enter correct color-name or color-code");
 		}
 	}
-
-	render() {
+	protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		/**
 		 * creating local fill variable out of state prop.
 		 */
+
 		this.fill = getCustomFillColor(this.state ?? "");
+		super.willUpdate(changedProperties);
+	}
 
+	render() {
 		/**
 		 * validate
 		 */
@@ -206,16 +241,19 @@ export class FTag extends FRoot {
 			this.classList.add("hasShimmer");
 		}
 
+		let iconClasses: Record<string, boolean> = {};
 		/**
 		 * classes to apply on icon , based on category
 		 */
-		const iconClasses: Record<string, boolean> = {
-			"fill-button-surface": !this.fill ? true : false,
-			"fill-button-surface-light":
-				this.fill && getTextContrast(this.fill) === "light-text" ? true : false,
-			"fill-button-surface-dark":
-				this.fill && getTextContrast(this.fill) === "dark-text" ? true : false
-		};
+		if (this.category === "fill") {
+			iconClasses = {
+				"fill-button-surface": !this.fill ? true : false,
+				"fill-button-surface-light":
+					this.fill && getTextContrast(this.fill) === "light-text" ? true : false,
+				"fill-button-surface-dark":
+					this.fill && getTextContrast(this.fill) === "dark-text" ? true : false
+			};
+		}
 
 		// merging host classes
 		this.classList.forEach(cl => {
@@ -242,7 +280,7 @@ export class FTag extends FRoot {
 					.size=${this.iconSize}
 					?clickable=${true}
 			  ></f-icon>`
-			: "";
+			: nothing;
 		/**
 		 * create iconRight if available
 		 */
@@ -261,28 +299,32 @@ export class FTag extends FRoot {
 					.size=${this.iconSize}
 					?clickable=${true}
 			  ></f-icon>`
-			: "";
+			: nothing;
 
+		let counterClasses = {};
 		/**
 		 * create counter if available
 		 */
-		const counterClasses = {
-			"fill-button-surface": !this.fill ? true : false,
-			"fill-button-surface-light":
-				this.fill && getTextContrast(this.fill) === "light-text" ? true : false,
-			"fill-button-surface-dark":
-				this.fill && getTextContrast(this.fill) === "dark-text" ? true : false
-		};
+		if (this.category === "fill") {
+			counterClasses = {
+				"fill-button-surface": !this.fill ? true : false,
+				"fill-button-surface-light":
+					this.fill && getTextContrast(this.fill) === "light-text" ? true : false,
+				"fill-button-surface-dark":
+					this.fill && getTextContrast(this.fill) === "dark-text" ? true : false
+			};
+		}
 		const counter =
 			this.counter !== undefined
 				? html`<f-counter
+						.category=${this.category === "outline" ? "transparent" : "fill"}
 						data-qa-counter
 						.state=${this.state}
 						.size=${this.size}
 						.label=${Number(this.counter)}
 						class=${classMap(counterClasses)}
 				  ></f-counter>`
-				: "";
+				: nothing;
 		/**
 		 * render loading if required
 		 */
@@ -296,8 +338,9 @@ export class FTag extends FRoot {
 				})}
 				style=${this.applyStyles()}
 				?label=${this.label ? true : false}
-				size=${this.size}
-				state=${this.state}
+				size=${ifDefined(this.size)}
+				state=${ifDefined(this.state)}
+				category=${ifDefined(this.category)}
 				?loading=${this.loading}
 				?disabled=${this.disabled}
 				?selected=${this.selected}
@@ -309,25 +352,31 @@ export class FTag extends FRoot {
 		/**
 		 * Final html to render
 		 */
-		return html`<div
-			class=${classMap({
-				"f-tag": true,
-				hasShimmer,
-				"custom-loader": this.fill ? true : false
-			})}
-			style=${this.applyStyles()}
-			?label=${this.label ? true : false}
-			size=${this.size}
-			state=${this.state}
-			?loading=${this.loading}
-			?disabled=${this.disabled}
-			?selected=${this.selected}
-			?clickable=${this.clickable}
-		>
-			${iconLeft}
-			<f-div class="text-content" ${ref(this.labelDiv)}>${this.label}</f-div>
-			${counter}${iconRight}
-		</div>`;
+		return keyed(
+			this.category,
+			html`<div
+				class=${classMap({
+					"f-tag": true,
+					hasShimmer,
+					"custom-loader": this.fill ? true : false
+				})}
+				style=${this.applyStyles()}
+				?label=${this.label ? true : false}
+				size=${ifDefined(this.size)}
+				state=${ifDefined(this.state)}
+				category=${ifDefined(this.category)}
+				?loading=${this.loading}
+				?disabled=${this.disabled}
+				?selected=${this.selected}
+				?clickable=${this.clickable}
+			>
+				${iconLeft}
+				<f-div class="text-content" style="max-width:${this.maxWidth}" ${ref(this.labelDiv)}
+					>${this.label}</f-div
+				>
+				${counter}${iconRight}
+			</div>`
+		);
 	}
 	protected async updated(
 		changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>