fix(storybook): state issues

deven-org · Sep 2, 2024 · a337e1e · a337e1e
1 parent bb8c18a
commit a337e1e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 18 deletions.
diff --git a/packages/ui-library/src/components/input-field-number/index.css.ts b/packages/ui-library/src/components/input-field-number/index.css.ts
@@ -118,6 +118,19 @@ export const staticSemanticStyles = css`
         outline-color: ${inputfield.container.border.default.rest.color};
         border-radius: ${inputfield.container.borderradius};
 
+        &.readonly {
+          color: ${inputfield.userinput.textcolor.default.readonly};
+          background-color: ${inputfield.container.bgcolor.default.readonly};
+
+          & > input {
+            color: ${inputfield.userinput.textcolor.default.readonly};
+
+            &::placeholder {
+              color: ${inputfield.placeholder.textcolor.default.readonly};
+            }
+          }
+        }
+
         &:focus-within {
           outline-offset: calc(${inputfield.container.border.default.focus.width} * -1);
           outline-width: ${inputfield.container.border.default.focus.width};
@@ -134,14 +147,32 @@ export const staticSemanticStyles = css`
           }
         }
       }
-
       input.${theme} {
-        all: initial;
+        all: inherit;
         color: ${inputfield.userinput.textcolor.default.rest};
+        border: none;
 
         &::placeholder {
           color: ${inputfield.placeholder.textcolor.default.rest};
         }
+
+        &.readonly {
+          color: ${inputfield.userinput.textcolor.default.readonly};
+          background-color: ${inputfield.container.bgcolor.default.readonly};
+
+          &::placeholder {
+            color: ${inputfield.placeholder.textcolor.default.readonly};
+          }
+        }
+
+        &:disabled {
+          color: ${inputfield.userinput.textcolor.default.disabled};
+          background-color: ${inputfield.container.bgcolor.default.disabled};
+
+          &::placeholder {
+            color: ${inputfield.placeholder.textcolor.default.disabled};
+          }
+        }
       }
 
       .input-unit-container.${theme} {
@@ -181,15 +212,6 @@ export const staticSemanticStyles = css`
           ${inputfield.container.border.default.disabled.color};
         background-color: ${inputfield.container.bgcolor.default.disabled};
         cursor: not-allowed;
-
-        & > input {
-          color: ${inputfield.userinput.textcolor.default.disabled};
-          cursor: not-allowed;
-
-          &::placeholder {
-            color: ${inputfield.placeholder.textcolor.default.disabled};
-          }
-        }
       }
 
       &.error-input.${theme} {

diff --git a/packages/ui-library/src/components/input-field-number/index.ts b/packages/ui-library/src/components/input-field-number/index.ts
@@ -81,7 +81,7 @@ export class BlrInputFieldNumber extends LitElementCustom {
   @state() protected accessor isFocused = false;
 
   protected stepperUp(event: MouseEvent) {
-    if (this.currentValue !== undefined && this.step !== undefined) {
+    if (!this.readonly && this.currentValue !== undefined && this.step !== undefined) {
       const oldValue = Number(this.currentValue);
       const step = Number(this.step ?? 1);
       const newValue = oldValue + step;
@@ -93,7 +93,7 @@ export class BlrInputFieldNumber extends LitElementCustom {
   }
 
   protected stepperDown(event: MouseEvent) {
-    if (this.currentValue !== undefined && this.step !== undefined) {
+    if (!this.readonly && this.currentValue !== undefined && this.step !== undefined) {
       const oldValue = Number(this.currentValue);
       const step = Number(this.step ?? 1);
       const newValue = oldValue - step;
@@ -130,9 +130,11 @@ export class BlrInputFieldNumber extends LitElementCustom {
   };
 
   protected handleChange(event: Event) {
-    const newValue = Number(this._numberFieldNode.value) || 0;
-    this.currentValue = newValue;
-    this.dispatchEvent(createBlrNumberValueChangeEvent({ originalEvent: event, inputValue: newValue }));
+    if (!this.readonly) {
+      const newValue = Number(this._numberFieldNode.value) || 0;
+      this.currentValue = newValue;
+      this.dispatchEvent(createBlrNumberValueChangeEvent({ originalEvent: event, inputValue: newValue }));
+    }
   }
 
   protected customFormat(cur: number, fractions: number, digits: number): string {
@@ -189,7 +191,7 @@ export class BlrInputFieldNumber extends LitElementCustom {
           },
           {
             'aria-hidden': true,
-          }
+          },
         )}
       </button>
     `;
@@ -335,7 +337,7 @@ export class BlrInputFieldNumber extends LitElementCustom {
                 ? html`<div class="${unitClasses}">${this.unit}</div>`
                 : nothing}
             </div>
-            ${this.renderMode()}
+            ${!this.readonly ? this.renderMode() : nothing}
           </div>
         </div>