fix(ui-library): pressed state removed and updated focus state for re…

…adonly
deven-org · Nov 6, 2024 · 3e65935 · 3e65935
1 parent fc5fa4a
commit 3e65935
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 110 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
@@ -124,19 +124,6 @@ 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.${theme} {
           outline-offset: calc(${inputfield.container.border.default.focus.width} * -1);
           outline-width: ${inputfield.container.border.default.focus.width};
@@ -193,6 +180,22 @@ export const staticSemanticStyles = css`
           &::placeholder {
             color: ${inputfield.placeholder.textcolor.default.readonly};
           }
+
+          &:focus-within.${theme} {
+            outline-offset: calc(${inputfield.container.border.default.focus.width} * -1);
+            outline-width: ${inputfield.container.border.default.focus.width};
+            outline-style: ${inputfield.container.border.default.focus.style};
+            outline-color: ${inputfield.container.border.default.focus.color};
+            background-color: ${inputfield.container.bgcolor.default.focus};
+
+            & > input {
+              color: ${inputfield.userinput.textcolor.default.focus};
+
+              &::placeholder {
+                color: ${inputfield.placeholder.textcolor.default.focus};
+              }
+            }
+          }
         }
 
         &:disabled {
@@ -253,16 +256,6 @@ export const staticSemanticStyles = css`
           color: ${inputfield.placeholder.textcolor.error.rest};
         }
 
-        &:active {
-          outline: none;
-          color: ${inputfield.userinput.textcolor.error.pressed};
-          background-color: ${inputfield.container.bgcolor.error.pressed};
-
-          &::placeholder {
-            color: ${inputfield.placeholder.textcolor.error.pressed};
-          }
-        }
-
         &:focus-within {
           outline: none;
           color: ${inputfield.userinput.textcolor.error.focus};
@@ -273,15 +266,6 @@ export const staticSemanticStyles = css`
           }
         }
       }
-
-      &.readonly.${theme} {
-        color: ${inputfield.userinput.textcolor.default.readonly};
-        background-color: ${inputfield.container.bgcolor.default.readonly};
-
-        &::placeholder {
-          color: ${inputfield.placeholder.textcolor.default.readonly};
-        }
-      }
     `;
   })}
 `;
@@ -401,11 +385,6 @@ export const staticComponentStyles = css`
           color: ${stepperbutton.icon.iconcolor.hover};
         }
 
-        &:active:not(:disabled) {
-          background-color: ${stepperbutton.container.bgcolor.pressed};
-          color: ${stepperbutton.icon.iconcolor.pressed};
-        }
-
         &:disabled {
           background-color: ${stepperbutton.container.bgcolor.disabled};
           color: ${stepperbutton.icon.iconcolor.disabled};

diff --git a/packages/ui-library/src/components/input-field-number/index.ts b/packages/ui-library/src/components/input-field-number/index.ts
@@ -258,7 +258,6 @@ export class BlrInputFieldNumber extends LitElementCustom {
         [this.sizeVariant]: this.sizeVariant,
         [this.stepperVariant || 'split']: this.stepperVariant || 'split',
         'error-input': this.hasError || false,
-        'readonly': this.readonly || false,
         [this.theme]: this.theme,
       });
 

diff --git a/packages/ui-library/src/components/input-field-text/index.css.ts b/packages/ui-library/src/components/input-field-text/index.css.ts
@@ -74,12 +74,6 @@ export const styleCustom = css`
             }
           }
 
-          &:active {
-            &::placeholder {
-              color: ${inputfield.placeholder.textcolor.default.pressed};
-            }
-          }
-
           &[readonly] {
             &::placeholder {
               color: ${inputfield.placeholder.textcolor.default.readonly};
@@ -128,15 +122,6 @@ export const styleCustom = css`
               }
             }
 
-            &:active {
-              border: none;
-              outline: none;
-
-              &::placeholder {
-                color: ${inputfield.placeholder.textcolor.error.pressed};
-              }
-            }
-
             &.focus {
               border: none;
               outline: none;
@@ -230,6 +215,13 @@ export const styleCustom = css`
           outline: ${inputfield.container.border.default.hover.width} ${inputfield.container.border.default.readonly.style}
             ${inputfield.container.border.default.readonly.color};
           background-color: ${inputfield.container.bgcolor.default.readonly};
+
+          &.focus {
+            outline-offset: calc(${inputfield.container.border.default.focus.width} * -1);
+            outline: ${inputfield.container.border.default.focus.width} ${inputfield.container.border.default.focus.style}
+              ${inputfield.container.border.default.focus.color};
+            background-color: ${inputfield.container.bgcolor.default.focus};
+          }
         }
 
         &:active {
@@ -258,13 +250,6 @@ export const styleCustom = css`
             background-color: ${inputfield.container.bgcolor.error.hover};
           }
 
-          &:active {
-            outline: ${inputfield.container.border.error.pressed.width} ${inputfield.container.border.error.pressed.style}
-              ${inputfield.container.border.error.pressed.color};
-            color: ${inputfield.userinput.textcolor.error.pressed};
-            background-color: ${inputfield.container.bgcolor.error.pressed};
-          }
-
           .blr-form-input {
             background: transparent;
             color: ${inputfield.userinput.textcolor.error.rest};
@@ -316,10 +301,6 @@ function getInputIconStyles({ theme, semanticTokens }: { theme: ThemeType; seman
           color: ${inputfield.icon.iconcolor.default.focus};
         }
 
-        &:active .${iconClassName} {
-          color: ${inputfield.icon.iconcolor.default.pressed};
-        }
-
         &:has(input[readonly]):not(.error-input) .${iconClassName} {
           color: ${inputfield.icon.iconcolor.default.readonly};
         }
@@ -340,10 +321,6 @@ function getInputIconStyles({ theme, semanticTokens }: { theme: ThemeType; seman
           &:focus-within .${iconClassName} {
             color: ${inputfield.icon.iconcolor.error.focus};
           }
-
-          &:active .${iconClassName} {
-            color: ${inputfield.icon.iconcolor.error.pressed};
-          }
         }
       }
     }

diff --git a/packages/ui-library/src/components/select/index.css.ts b/packages/ui-library/src/components/select/index.css.ts
@@ -116,12 +116,6 @@ export const staticStyles = css`
             ${inputfield.container.border.default.focus.color};
         }
 
-        &:active {
-          color: ${inputfield.userinput.textcolor.default.pressed};
-          background-color: ${inputfield.container.bgcolor.default.pressed};
-          border-color: ${inputfield.container.border.default.pressed.color};
-        }
-
         &.disabled {
           color: ${inputfield.userinput.textcolor.default.disabled};
           background-color: ${inputfield.container.bgcolor.default.disabled};
@@ -139,12 +133,6 @@ export const staticStyles = css`
             border-color: ${inputfield.container.border.error.hover.color};
           }
 
-          &:active {
-            color: ${inputfield.userinput.textcolor.error.pressed};
-            background-color: ${inputfield.container.bgcolor.error.pressed};
-            border-color: ${inputfield.container.border.error.pressed.color};
-          }
-
           &.focus {
             color: ${inputfield.userinput.textcolor.error.focus};
             background-color: ${inputfield.container.bgcolor.error.focus};
@@ -190,10 +178,6 @@ function getDirectionIndicatorIconStyles({ theme, semanticTokens }: { theme: The
         color: ${inputfield.icon.iconcolor.default.focus};
       }
 
-      &:active .${directionIndicatorIconClassName} {
-        color: ${inputfield.icon.iconcolor.default.pressed};
-      }
-
       &.disabled {
         .${directionIndicatorIconClassName} {
           color: ${inputfield.icon.iconcolor.default.disabled};
@@ -213,10 +197,6 @@ function getDirectionIndicatorIconStyles({ theme, semanticTokens }: { theme: The
         &:focus-within .${directionIndicatorIconClassName} {
           color: ${inputfield.icon.iconcolor.error.focus};
         }
-
-        &:active .${directionIndicatorIconClassName} {
-          color: ${inputfield.icon.iconcolor.error.pressed};
-        }
       }
     }
   `;

diff --git a/packages/ui-library/src/components/textarea/index.css.ts b/packages/ui-library/src/components/textarea/index.css.ts
@@ -193,17 +193,6 @@ export const staticStyles = css`
           }
         }
 
-        &:active {
-          outline: ${inputfield.container.border.default.pressed.width} ${inputfield.container.border.default.pressed.style}
-            ${inputfield.container.border.default.pressed.color};
-          color: ${inputfield.userinput.textcolor.default.pressed};
-          background-color: ${inputfield.container.bgcolor.default.pressed};
-
-          &::placeholder {
-            color: ${inputfield.placeholder.textcolor.default.pressed};
-          }
-        }
-
         &.disabled {
           outline: ${inputfield.container.border.default.disabled.width} ${inputfield.container.border.default.disabled.style}
             ${inputfield.container.border.default.disabled.color};
@@ -270,17 +259,6 @@ export const staticStyles = css`
               color: ${inputfield.placeholder.textcolor.error.focus};
             }
           }
-
-          &:active {
-            outline: ${inputfield.container.border.error.pressed.width} ${inputfield.container.border.error.pressed.style}
-              ${inputfield.container.border.error.pressed.color};
-            color: ${inputfield.userinput.textcolor.error.pressed};
-            background-color: ${inputfield.container.bgcolor.error.pressed};
-
-            &::placeholder {
-              color: ${inputfield.placeholder.textcolor.error.pressed};
-            }
-          }
         }
 
         &.sm {