feat(text-field): styled read-only attribute w/ tokens (#313)

telekom · May 6, 2021 · 1abbdd6 · 1abbdd6
1 parent 37947be
commit 1abbdd6
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 10 deletions.
diff --git a/packages/components/src/components/text-field/text-field.css b/packages/components/src/components/text-field/text-field.css
@@ -23,6 +23,8 @@ scale-text-field {
   --spacing-x: var(--scl-spacing-12);
   --color-disabled: var(--scl-color-background-disabled);
   --background-disabled: var(--scl-color-white);
+  --border-color-readonly: var(--scl-color-grey-0);
+  --background-readonly: var(--scl-color-grey-0);
 
   /*meta*/
   --font-weight-meta: var(--scl-font-weight-bold);
@@ -57,6 +59,7 @@ scale-text-field {
 
   /*label*/
   --color-label: var(--scl-color-grey-60);
+  --color-label-readonly: var(--scl-color-text-standard);
   --z-index-label: var(--scl-z-index-10);
   --transition-label: var(--transition);
   --font-size-label: var(--scl-font-size-16);
@@ -113,11 +116,13 @@ scale-text-field {
   color: var(--color-meta);
 }
 
-.text-field:not(.text-field--disabled) .text-field__control:hover {
+.text-field:not(.text-field--disabled):not(.text-field--readonly)
+  .text-field__control:hover {
   border-color: var(--border-color-hover);
 }
 
-.text-field:not(.text-field--disabled) .text-field__control:focus {
+.text-field:not(.text-field--disabled):not(.text-field--readonly)
+  .text-field__control:focus {
   border-color: var(--border-color-focus);
   box-shadow: var(--box-shadow-focus);
 }
@@ -148,7 +153,7 @@ scale-text-field {
   );
   font-weight: var(--font-weight-label);
 }
-.text-field--has-focus .text-field__label,
+.text-field--has-focus:not(.text-field--readonly) .text-field__label,
 .animated .text-field__label {
   transform: translate(var(--spacing-x), var(--scl-spacing-8));
   font-size: var(--font-size-label-focus);
@@ -174,14 +179,25 @@ scale-text-field {
   );
   font-weight: var(--font-weight-label-small);
 }
-.text-field--size-small.text-field--has-focus .text-field__label,
+.text-field--size-small.text-field--has-focus:not(.text-field--readonly)
+  .text-field__label,
 .text-field--size-small.animated .text-field__label {
   transform: translate(var(--spacing-x), var(--scl-spacing-4));
   font-size: var(--font-size-label-focus);
 }
 .text-field--transparent .text-field__control {
   background-color: transparent;
 }
+.text-field--readonly input,
+.text-field--readonly .text-field__control {
+  color: var(--color-label-readonly);
+  border-color: var(--border-color-readonly);
+  background: var(--background-readonly);
+}
+
+.text-field--readonly .text-field__control:focus {
+  box-shadow: var(--box-shadow-focus);
+}
 
 .text-field--disabled label,
 .text-field--disabled .text-field__label,

diff --git a/packages/components/src/components/text-field/text-field.tsx b/packages/components/src/components/text-field/text-field.tsx
@@ -208,6 +208,7 @@ export class TextField {
       this.transparent && 'text-field--transparent',
       this.status && `text-field--status-${this.status}`,
       this.size && `text-field--size-${this.size}`,
+      this.readonly && `text-field--readonly`,
       animated && 'animated'
     );
   }

diff --git a/packages/components/src/html/index.html b/packages/components/src/html/index.html
@@ -340,6 +340,23 @@ <h3>Input Text - disabled</h3>
       label="input text disabled"
     ></scale-text-field>
 
+    <h3>Input Text - read only</h3>
+    <scale-text-field
+      type="string"
+      label="input text read only"
+      value="hello"
+      readonly
+    ></scale-text-field>
+
+    <h3>Input Text - read only empty</h3>
+
+    <scale-text-field
+      type="string"
+      label="input text read only empty"
+      readonly
+    ></scale-text-field>
+
+    <h3>Input Text - small</h3>
     <scale-text-field type="email" label="email"></scale-text-field>
     <scale-text-field type="number" label="number"></scale-text-field>
     <scale-text-field type="password" label="password"></scale-text-field>

diff --git a/packages/storybook-vue/stories/3_components/text-field/TextField.stories.mdx b/packages/storybook-vue/stories/3_components/text-field/TextField.stories.mdx
@@ -102,6 +102,8 @@ scale-text-field {
   --spacing-x: var(--scl-spacing-12);
   --color-disabled: var(--scl-color-background-disabled);
   --background-disabled: var(--scl-color-white);
+  --border-color-readonly: var(--scl-color-grey-0);
+  --background-readonly: var(--scl-color-grey-0);
 
   /*meta*/
   --font-weight-meta: var(--scl-font-weight-bold);
@@ -136,6 +138,7 @@ scale-text-field {
 
   /*label*/
   --color-label: var(--scl-color-grey-60);
+  --color-label-readonly: var(--scl-color-text-standard);
   --z-index-label: var(--scl-z-index-10);
   --transition-label: var(--transition);
   --font-size-label: var(--scl-font-size-16);
@@ -261,14 +264,13 @@ scale-text-field {
 ```
 
 
-<!--
-## Readonly 
+## Readonly
 
 <Canvas withSource="none">
   <Story
-    name="Readonly"
+    name="Read Only"
     args={{
-      label: "Readonly",
+      label: "Read only",
       readonly: true,
       value: "This cannot be changed"
     }}
@@ -278,9 +280,8 @@ scale-text-field {
 </Canvas>
 
 ```html
-<scale-text-field label="Readonly" value="This cannot be changed" readonly></scale-text-field>
+<scale-text-field label="Read only" value="This cannot be changed" readonly></scale-text-field>
 ```
--->
 
 
 ## Max Length With Counter

diff --git a/...src/__image_snapshots__/textfield-visual-spec-js-textfield-read-only-1-snap.png b/...src/__image_snapshots__/textfield-visual-spec-js-textfield-read-only-1-snap.png
diff --git a/packages/visual-tests/src/textfield.visual.spec.js b/packages/visual-tests/src/textfield.visual.spec.js
@@ -5,6 +5,7 @@ describe('Textfield', () => {
     ['helper-text'],
     ['with-error'],
     ['disabled'],
+    ['read-only'],
     ['small'],
     ['max-length-with-counter'],
   ])('%p', async (variant) => {