NFX-493-2 f-div round variant fixed (#42)

nonfx · Oct 21, 2024 · ca4bb07 · ca4bb07
1 parent c2826c2
commit ca4bb07
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 12 deletions.
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 # Change Log
 
+## [3.0.1] - 2024-10-24
+
+### patch changes
+
+- f-div `variant="round"` fixed
+- f-select selected option ellipsis fixed
+
 ## [3.0.0] - 2024-10-20
 
 ### Major/Breaking Changes

diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nonfx/flow-core",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Core package of flow design system",
   "type": "module",
   "module": "dist/flow-core.es.js",

diff --git a/packages/flow-core/src/components/f-div/f-div-global.scss b/packages/flow-core/src/components/f-div/f-div-global.scss
@@ -650,9 +650,6 @@ f-div {
 	&[variant="curved"] {
 		border-radius: 4px;
 	}
-	&[variant="round"] {
-		border-radius: 50%;
-	}
 }
 
 f-div {

diff --git a/packages/flow-core/src/components/f-div/f-div.ts b/packages/flow-core/src/components/f-div/f-div.ts
@@ -1,4 +1,4 @@
-import { html, PropertyValueMap, unsafeCSS } from "lit";
+import { html, PropertyValueMap, PropertyValues, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { FRoot } from "../../mixins/components/f-root/f-root";
 import eleStyle from "./f-div.scss?inline";
@@ -255,6 +255,16 @@ export class FDiv extends FRoot {
 		 */
 		return html` <slot></slot>${this.loading === "loader" ? html`${unsafeSVG(loader)}` : ""}`;
 	}
+	protected updated(changedProperties: PropertyValues): void {
+		super.updated(changedProperties);
+
+		/**
+		 * Haven't found css alternative, hence js is the only way
+		 */
+		if (this.variant === "round") {
+			this.style.borderRadius = `${this.offsetHeight / 2}px`;
+		}
+	}
 }
 
 /**

diff --git a/packages/flow-core/src/components/f-select/f-select.scss b/packages/flow-core/src/components/f-select/f-select.scss
@@ -29,7 +29,7 @@ applies styles on f-select
 			// Important :  always include base mixins
 			@include base();
 			display: grid;
-			grid-template-columns: 1fr 42px;
+			grid-template-columns: 1fr auto;
 			flex-shrink: 1;
 			position: relative;
 			min-height: var(--form-input-div-size);
@@ -164,7 +164,7 @@ applies styles on f-select
 					flex-wrap: wrap;
 					width: 100%;
 					align-items: center;
-					width: calc(100% - 20px);
+					// width: calc(100% - 20px);
 				}
 				.placeholder-text {
 					font-style: normal;
@@ -179,6 +179,8 @@ applies styles on f-select
 				position: relative;
 				display: flex;
 				align-items: center;
+				justify-content: flex-end;
+				width: fit-content;
 				.chevron {
 					padding: 0px 12px;
 					height: 100%;

diff --git a/packages/flow-core/src/components/f-select/render.ts b/packages/flow-core/src/components/f-select/render.ts
@@ -133,7 +133,11 @@ export default function render(this: FSelect) {
 				  >`
 				: nothing}
 			${Array.isArray(this.selectedOptions) && selectedOptionsLength > 0
-				? html` <div class="f-select-searchable" data-type="${this.type ?? "single"}">
+				? html` <div
+						class="f-select-searchable"
+						.style=${this.iconLeft ? "width:calc(100% - 20px)" : "width:100%"}
+						data-type="${this.type ?? "single"}"
+				  >
 						${this.type === "single"
 							? this.selectedOptions.map(option => this.renderSingleSelection(option))
 							: html`${this.selectedOptions

diff --git a/stories/flow-core/performance-testing.stories.ts b/stories/flow-core/performance-testing.stories.ts
@@ -32,7 +32,7 @@ export const Test = {
 						</div-->
 						<f-div
 							state="primary"
-							width="300px"
+							width="200px"
 							padding="medium"
 							border="small solid default around"
 							gap="medium"
@@ -44,10 +44,9 @@ export const Test = {
 									"option2",
 									"option3"
 								]}
-								.value=${["option1"]}
+								.value=${"option1"}
 								searchable
-								icon-left="i-plus"
-								type="multiple"
+								icon-left="i-org"
 							></f-select>
 						</f-div>`
 			)}