@ollion/flow-text-editor (#285)

* flow-text-editor package added

* flow-text-editor button actions property added

* flow-text-editor quill integrated

* flow-text-editor events tested

* flow-text-editor stories updated

* flow-text-editor changelogs updated

* flow-text-editor changelogs updated

* flow-text-editor toolbar property type updated

* flow-text-editor button actions type updated

* flow-text-editor package.json updates

.github/workflows/release.yml

@@ -47,6 +47,7 @@ jobs:
               "@ollion/flow-log":"packages/flow-log/CHANGELOG.md",
               "@ollion/flow-code-editor":"packages/flow-code-editor/CHANGELOG.md",
               "@ollion/flow-md-editor":"packages/flow-md-editor/CHANGELOG.md",
+              "@ollion/flow-text-editor":"packages/flow-text-editor/CHANGELOG.md",
               "@ollion/flow-core":"packages/flow-core/CHANGELOG.md",
               "@ollion/flow-table":"packages/flow-table/CHANGELOG.md",
               "@ollion/flow-core-config":"packages/flow-core-config/CHANGELOG.md",

.storybook/main.ts

@@ -9,6 +9,7 @@ const alias = [
 	"flow-lineage",
 	"flow-log",
 	"flow-md-editor",
+	"flow-text-editor",
 	"flow-table",
 	"flow-dashboard"
 ].map(pkg => ({

.storybook/preview.ts

@@ -11,6 +11,7 @@ import "@ollion/flow-log";
 import "@ollion/flow-code-editor";
 import "@ollion/flow-table";
 import "@ollion/flow-md-editor";
+import "@ollion/flow-text-editor";
 import "@ollion/flow-form-builder";
 import "@ollion/flow-lineage";
 import "@ollion/flow-dashboard";
@@ -65,6 +66,8 @@ export const parameters = {
 					["About", "Release Notes", "Properties", "*", "Examples", "Debug"],
 					"flow-code-editor",
 					["About", "Release Notes"],
+					"flow-text-editor",
+					["About", "Release Notes"],
 					"flow-md-editor",
 					["About", "Release Notes"],
 					"flow-log",
@@ -134,6 +137,10 @@ async function run() {
 		await fetch(new URL("../packages/flow-md-editor/custom-elements.json", import.meta.url))
 	).json();
 
+	const textEditorCustomElements = await (
+		await fetch(new URL("../packages/flow-text-editor/custom-elements.json", import.meta.url))
+	).json();
+
 	setCustomElementsManifest(customElements);
 	setCustomElements(customElements);
 	setCustomElementsManifest(loggerCustomElements);
@@ -146,6 +153,8 @@ async function run() {
 
 	setCustomElementsManifest(mdEditorCustomElements);
 	setCustomElements(mdEditorCustomElements);
+	setCustomElementsManifest(textEditorCustomElements);
+	setCustomElements(textEditorCustomElements);
 	setCustomElementsManifest(dashboardCustomElements);
 	setCustomElements(dashboardCustomElements);
 }

package.json

@@ -80,6 +80,7 @@
     "@ollion/flow-lineage": "workspace:*",
     "@ollion/flow-log": "workspace:*",
     "@ollion/flow-md-editor": "workspace:*",
+    "@ollion/flow-text-editor": "workspace:*",
     "@ollion/flow-product-icon": "1.14.0",
     "@ollion/flow-system-icon": "latest",
     "@ollion/flow-table": "workspace:*",

packages/flow-core/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.10.0] - 2024-07-10
+
+### Minor Changes
+
+- `actions` property added in `f-button`, it will be displayed under chevron
+
 ## [2.9.15] - 2024-07-08
 
 ### Patch Changes

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.9.15",
+  "version": "2.10.0",
   "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-button/f-button.scss

@@ -43,27 +43,31 @@ $sizes: (
 	"x-small": (
 		"height": 20px,
 		"padding": 0px 8px,
+		"options-padding": 0px 4px,
 		"fontSize": 10px,
 		"gap": 4px,
 		"loaderSize": 12px
 	),
 	"small": (
 		"height": 28px,
 		"padding": 0px 12px,
+		"options-padding": 0px 8px,
 		"fontSize": 12px,
 		"gap": 8px,
 		"loaderSize": 16px
 	),
 	"medium": (
 		"height": 36px,
 		"padding": 0px 16px,
+		"options-padding": 0px 12px,
 		"fontSize": 14px,
 		"gap": 12px,
 		"loaderSize": 20px
 	),
 	"large": (
 		"height": 44px,
 		"padding": 0px 20px,
+		"options-padding": 0px 16px,
 		"fontSize": 16px,
 		"gap": 16px,
 		"loaderSize": 24px
@@ -162,7 +166,10 @@ in this case it is `f-button`
 				}
 			}
 		}
-
+		&.has-options {
+			border-top-right-radius: 0px !important;
+			border-bottom-right-radius: 0px !important;
+		}
 		/**
   * Iterating over sizes with padding, fontsize, height
   **/
@@ -180,6 +187,10 @@ in this case it is `f-button`
 					padding: map.get($value, "padding");
 				}
 
+				&.has-options {
+					padding-right: map.get($value, "gap") !important;
+				}
+
 				f-counter {
 					margin-left: map.get($value, "gap");
 				}
@@ -231,4 +242,65 @@ in this case it is `f-button`
 	button:focus {
 		outline: none;
 	}
+
+	.options-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		cursor: pointer;
+		//
+
+		@each $state, $color in $states {
+			&[state="#{$state}"][category="fill"] {
+				background-color: map.get($color, "background");
+				border: 1px solid map.get($color, "background"); // added to match width of outline category
+				border-left: 1px solid var(--color-border-default) !important;
+				// hover changes background
+				&:hover {
+					background-color: map.get($color, "hover");
+					border: 1px solid map.get($color, "hover");
+				}
+			}
+
+			// outline category states styles, where backgrounds are transparent
+			&[state="#{$state}"][category="outline"] {
+				background-color: transparent;
+				border: 1px solid map.get($color, "background");
+				border-left: 1px solid transparent !important;
+				color: map.get($color, "background");
+				&:hover {
+					border: 1px solid map.get($color, "hover");
+					color: map.get($color, "hover");
+				}
+			}
+			//transparent category with transparent background and border
+			&[state="#{$state}"][category="transparent"],
+			&[state="#{$state}"][category="packed"] {
+				background-color: transparent;
+				border: 1px solid transparent;
+				color: map.get($color, "background");
+				&:hover {
+					border: 1px solid transparent;
+					color: map.get($color, "hover");
+				}
+			}
+		}
+
+		@each $size, $value in $sizes {
+			&[size="#{$size}"] {
+				&[variant="round"] {
+					border-top-right-radius: var(--input-border-radius-round);
+					border-bottom-right-radius: var(--input-border-radius-round);
+				}
+				&[category="packed"] {
+					padding: 0px;
+				}
+				&:not([category="packed"]) {
+					height: map.get($value, "height");
+					padding: map.get($value, "options-padding");
+				}
+			}
+		}
+	}
 }