@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");
+ }
+ }
+ }
+ }
 }