FLOW-1036 | f-button packed category addition (#213)

* FLOW-1036 f-cutton packed * FLOW-1036 height resolved * FLOW-1036 height resolved
ollionorg · Dec 20, 2023 · fd40d42 · fd40d42
1 parent 38aafbc
commit fd40d42
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 6 deletions.
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.7.2] - 2023-12-19
+
+### Improvements
+
+- `f-button`: `packed` category added.
+
 ## [2.7.1] - 2023-12-18
 
 ### Bug fixes

diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-core",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

diff --git a/packages/flow-core/src/components/f-button/f-button.scss b/packages/flow-core/src/components/f-button/f-button.scss
@@ -150,7 +150,8 @@ in this case it is `f-button`
 				}
 			}
 			//transparent category with transparent background and border
-			&[state="#{$state}"][category="transparent"] {
+			&[state="#{$state}"][category="transparent"],
+			&[state="#{$state}"][category="packed"] {
 				background-color: transparent;
 				border: 1px solid transparent;
 				color: map.get($color, "background");
@@ -172,12 +173,17 @@ in this case it is `f-button`
   **/
 		@each $size, $value in $sizes {
 			&[size="#{$size}"] {
-				height: map.get($value, "height");
-				padding: map.get($value, "padding");
 				font-size: map.get($value, "fontSize");
 				&[variant="round"] {
 					border-radius: var(--input-border-radius-round);
 				}
+				&[category="packed"] {
+					padding: 0px;
+				}
+				&:not([category="packed"]) {
+					height: map.get($value, "height");
+					padding: map.get($value, "padding");
+				}
 
 				f-counter {
 					margin-left: map.get($value, "gap");

diff --git a/packages/flow-core/src/components/f-button/f-button.ts b/packages/flow-core/src/components/f-button/f-button.ts
@@ -58,7 +58,7 @@ export class FButton extends FRoot {
 	 * @attribute category of button
 	 */
 	@property({ reflect: true, type: String })
-	category?: "fill" | "outline" | "transparent" = "fill";
+	category?: "fill" | "outline" | "transparent" | "packed" = "fill";
 
 	/**
 	 * @attribute The medium size is the default and recommended option.

diff --git a/stories/flow-core/f-button.stories.js b/stories/flow-core/f-button.stories.js
@@ -56,7 +56,7 @@ export const Playground = {
 
 		category: {
 			control: "select",
-			options: ["fill", "outline", "transparent"]
+			options: ["fill", "outline", "transparent", "packed"]
 		},
 
 		size: {
@@ -150,6 +150,7 @@ export const Category = {
 			<f-button label="Fill" category="fill"></f-button>
 			<f-button label="Outline" category="outline"></f-button>
 			<f-button label="Transparent" category="transparent"></f-button>
+			<f-button label="Packed" category="packed"></f-button>
 		</f-div>`,
 
 	name: "category"