FLOW-808 FLOW-809 FLOW-804 bug fixes (#86)

* FLOW-808 FLOW-809 FLOW-804 bug fixes * FLOW-808 readme updated
ollionorg · Jul 3, 2023 · 1f0fc2d · 1f0fc2d
1 parent 1004329
commit 1f0fc2d
Show file tree

Hide file tree

Showing 39 changed files with 4,767 additions and 4,606 deletions.
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
@@ -4,6 +4,12 @@
 
 # Change Log
 
+## [1.17.2] - 2023-07-03
+### Bug Fixes
+- tooltip not displaying when element is disabled.
+- `f-input` browser autofill style updated.
+- `f-text` state switching issue.
+
 ## [1.17.1] - 2023-06-21
 ### Improvements
 - Extract shared configuration into `@cldcvr/flow-core-config` package.

diff --git a/packages/flow-core/custom-elements.json b/packages/flow-core/custom-elements.json
diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@cldcvr/flow-core",
- "version": "1.17.1",
+ "version": "1.17.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-breadcrumb/f-breadcrumb.scss b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.scss
@@ -9,12 +9,29 @@
  color: var(--color-primary-default) !important;
  }
  }
+ &[disabled] {
+ @include disabled();
+ pointer-events: none;
+ opacity: 1;
+ }
  }
  .toggle-popover-hover {
  &:hover {
  cursor: pointer;
  color: var(--color-primary-default) !important;
  }
+ &[disabled] {
+ @include disabled();
+ pointer-events: none;
+ opacity: 1;
+ }
+ }
+ #breadcrumb-popover {
+ &[disabled] {
+ @include disabled();
+ pointer-events: none;
+ opacity: 1;
+ }
  }
 }
 

diff --git a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts
@@ -89,6 +89,7 @@ export class FBreadcrumb extends FRoot {
  width="hug-content"
  align="middle-left"
  class="f-breadcrumb-content"
+ ?disabled=${this.disabled}
  @click=${(event: MouseEvent) => this.handleDispatchEvent(event, crumb)}
  >
  <f-text
@@ -97,6 +98,7 @@ export class FBreadcrumb extends FRoot {
  .weight=${this.isCurrentCrumb(index, array) ? "medium" : "regular"}
  class=${this.isCurrentCrumb(index, array) ? "" : "f-breadcrumb-text-hover"}
  ?ellipsis=${true}
+ ?disabled=${this.disabled}
  .tooltip=${crumb?.title}
  >${crumb?.title}</f-text
  ></f-div
@@ -148,6 +150,7 @@ export class FBreadcrumb extends FRoot {
  width="hug-content"
  align="middle-left"
  class="f-breadcrumb-content"
+ ?disabled=${this.disabled}
  @click=${(event: MouseEvent) => this.handleDispatchEvent(event, this.initialCrumbs)}
  >
  <f-text
@@ -168,6 +171,7 @@ export class FBreadcrumb extends FRoot {
  ></f-icon>
  <f-div
  clickable
+ ?disabled=${this.disabled}
  @mouseenter=${() => this.togglePopover("open")}
  id="breadcrumb-popover"
  >

diff --git a/packages/flow-core/src/components/f-button/f-button.scss b/packages/flow-core/src/components/f-button/f-button.scss
@@ -211,6 +211,7 @@ in this case it is `f-button`
  // disabled button will use `disabled()` mixins
  &[disabled] {
  @include disabled();
+ opacity: 1;
  }
  // loading use `rotate` mixins
  &[loading] {

diff --git a/packages/flow-core/src/components/f-checkbox/f-checkbox.scss b/packages/flow-core/src/components/f-checkbox/f-checkbox.scss
@@ -180,6 +180,11 @@ $sizes: (
  slot[name="label"] {
  cursor: pointer;
  }
+ [disabled] {
+ @include disabled();
+ pointer-events: none;
+ opacity: 1;
+ }
 }
 
 f-checkbox {

diff --git a/packages/flow-core/src/components/f-checkbox/f-checkbox.ts b/packages/flow-core/src/components/f-checkbox/f-checkbox.ts
@@ -74,6 +74,7 @@ export class FCheckbox extends FRoot {
  gap="x-small"
  direction="column"
  width="hug-content"
+ ?disabled=${this.disabled}
  >
  <f-div
  class="f-checkbox-section"

diff --git a/packages/flow-core/src/components/f-counter/f-counter.scss b/packages/flow-core/src/components/f-counter/f-counter.scss
@@ -165,4 +165,7 @@ in this case it is `f-counter`
 f-counter {
  display: inline-flex;
  vertical-align: top;
+ &[disabled] {
+ @include disabled();
+ }
 }
diff --git a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.scss b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.scss
@@ -346,3 +346,11 @@ span.flatpickr-weekday {
 .flatpickr-day.selected {
  color: var(--color-surface-default);
 }
+
+:host {
+ [disabled] {
+ @include disabled();
+ pointer-events: none;
+ opacity: 1;
+ }
+}
diff --git a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.scss b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.scss
@@ -121,6 +121,11 @@ $categories: (
  }
  }
  }
+ [disabled] {
+ @include disabled();
+ pointer-events: none;
+ opacity: 1;
+ }
 }
 
 f-emoji-picker {

diff --git a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts
@@ -470,6 +470,7 @@ export class FEmojiPicker extends FRoot {
  variant=${this.variant}
  clear=${this.value && this.clear ? true : false}
  tabindex="1"
+ ?disabled=${this.disabled}
  @click=${(e: MouseEvent) => {
  e.stopPropagation();
  this.toggleEmojiPicker(true);

diff --git a/packages/flow-core/src/components/f-field/f-field.scss b/packages/flow-core/src/components/f-field/f-field.scss
@@ -1,79 +1,82 @@
 @import "./../../mixins/scss/mixins";
 
 $states: (
- "default": (
- "color": var(--color-surface-tertiary),
- ),
- "primary": (
- "color": var(--color-primary-default),
- ),
- "success": (
- "color": var(--color-success-default),
- ),
- "warning": (
- "color": var(--color-warning-default),
- ),
- "danger": (
- "color": var(--color-danger-default),
- ),
+ "default": (
+ "color": var(--color-surface-tertiary)
+ ),
+ "primary": (
+ "color": var(--color-primary-default)
+ ),
+ "success": (
+ "color": var(--color-success-default)
+ ),
+ "warning": (
+ "color": var(--color-warning-default)
+ ),
+ "danger": (
+ "color": var(--color-danger-default)
+ )
 );
 
 $sizes: (
- "medium": 16px,
- "small": 12px,
+ "medium": 16px,
+ "small": 12px
 );
 
 :host {
- .f-field-wrapper {
- overflow: visible;
- .f-field {
- @include base();
- display: flex;
- gap: 12px;
- flex: 1 1;
- flex-direction: column;
- width: 100%;
- height: 100%;
+ .f-field-wrapper {
+ overflow: visible;
+ .f-field {
+ @include base();
+ display: flex;
+ gap: 12px;
+ flex: 1 1;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
 
- &[validation-state="danger"] {
- --color-subtext-default: var(--color-danger-default) !important;
- --color-input-default: var(--color-danger-default) !important;
- --color-input-border-default: var(--color-danger-default) !important;
- }
+ &[validation-state="danger"] {
+ --color-subtext-default: var(--color-danger-default) !important;
+ --color-input-default: var(--color-danger-default) !important;
+ --color-input-border-default: var(--color-danger-default) !important;
+ }
 
- @each $state, $value in $states {
- &[state^="#{$state}"] {
- // include mixin for inheritance rules
- @include subtext-color($state);
- @include input-color($state);
- }
- }
+ @each $state, $value in $states {
+ &[state^="#{$state}"] {
+ // include mixin for inheritance rules
+ @include subtext-color($state);
+ @include input-color($state);
+ }
+ }
 
- @each $size, $value in $sizes {
- &[size="#{$size}"] {
- @include inherit-size($size);
- }
- }
+ @each $size, $value in $sizes {
+ &[size="#{$size}"] {
+ @include inherit-size($size);
+ }
+ }
 
- &[variant="inline"] {
- display: inline-flex;
- flex-direction: row;
- width: fit-content;
- gap: 12px;
- }
+ &[variant="inline"] {
+ display: inline-flex;
+ flex-direction: row;
+ width: fit-content;
+ gap: 12px;
+ }
 
- &[disabled] {
- @include disabled();
- }
- }
- }
+ &[disabled] {
+ @include disabled();
+ }
+ }
+ }
 }
 
 f-field {
- width: 100%;
- &[variant="inline"] {
- flex: 0 0 auto;
- width: fit-content;
- }
- // flex: 1 0 auto;
+ width: 100%;
+ &[variant="inline"] {
+ flex: 0 0 auto;
+ width: fit-content;
+ }
+ &[disabled] {
+ @include disabled();
+ }
+ // flex: 1 0 auto;
 }
diff --git a/packages/flow-core/src/components/f-file-upload/f-file-upload.scss b/packages/flow-core/src/components/f-file-upload/f-file-upload.scss
@@ -33,6 +33,11 @@ $sizes: (
  &[loading] {
  cursor: no-drop;
  }
+ &[disabled] {
+ @include disabled();
+ pointer-events: none;
+ opacity: 1;
+ }
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;

diff --git a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts
@@ -458,6 +458,7 @@ export class FFileUpload extends FRoot {
  state=${this.state}
  size=${this.size}
  ?loading=${this.loading}
+ ?disabled=${this.disabled}
  @click=${this.handleClick}
  @drop=${this.dropFile}
  @dragover=${(e: DragEvent) => {

diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button.scss b/packages/flow-core/src/components/f-icon-button/f-icon-button.scss
@@ -219,6 +219,11 @@ in this case it is `f-icon-button`
  }
  }
  }
+ [disabled] {
+ @include disabled();
+ pointer-events: none;
+ opacity: 1 !important;
+ }
 }
 
 :root {
@@ -258,6 +263,9 @@ f-icon-button {
  &[size="large"] {
  --input-border-radius-round: 22px;
  }
+ &[disabled] {
+ @include disabled();
+ }
 }
 
 f-form-group {

diff --git a/packages/flow-core/src/components/f-icon/f-icon.scss b/packages/flow-core/src/components/f-icon/f-icon.scss
@@ -261,6 +261,7 @@ in this case it is `f-icon`
  // applying disabled mixins
  &[disabled] {
  @include disabled();
+ opacity: 1;
  }
 
  // applying loading mixins
@@ -277,4 +278,7 @@ in this case it is `f-icon`
 f-icon {
  display: inline-flex;
  vertical-align: top;
+ &[disabled] {
+ @include disabled();
+ }
 }
diff --git a/packages/flow-core/src/components/f-icon/f-icon.ts b/packages/flow-core/src/components/f-icon/f-icon.ts
@@ -74,14 +74,14 @@ export class FIcon extends FRoot {
  }
  // source computed based on value given by user
  set source(value) {
- this._originalSource =value;
+ this._originalSource = value;
  this.computeSource(value);
  }
 
  /**
  * @attribute The disabled attribute can be set to keep a user from clicking on the f-icon.
  */
- @property({ type: Boolean })
+ @property({ type: Boolean, reflect: true })
  disabled?: boolean = false;
 
  /**
@@ -148,7 +148,6 @@ export class FIcon extends FRoot {
  }
 
  computeSource(value: string) {
-
  const emojiRegex = /\p{Extended_Pictographic}/u;
  if (isValidHttpUrl(value)) {
  this.isURLSource = true;

diff --git a/packages/flow-core/src/components/f-input/f-input.scss b/packages/flow-core/src/components/f-input/f-input.scss
@@ -84,6 +84,12 @@ applies styles on f-input
  position: relative;
  height: var(--form-input-div-size);
 
+ &[disabled] {
+ @include disabled();
+ pointer-events: none;
+ opacity: 1;
+ }
+
  @each $size, $value in $sizes {
  &[size="#{$size}"] {
  height: map.get($value, "main-height");
@@ -250,6 +256,7 @@ applies styles on f-input
  color: var(--color-text-default);
  color-scheme: dark;
  width: 50px;
+ -webkit-background-clip: text;
 
  @each $category, $value in $categories {
  &[category^="#{$category}"] {