feat(global): add read-only tokens & apply style to components

Signed-off-by: astagnol <[email protected]>
ovh · Oct 31, 2024 · df51f02 · df51f02
1 parent 7e6309b
commit df51f02
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 6 deletions.
diff --git a/packages/ods/src/components/datepicker/src/components/ods-datepicker/ods-datepicker.scss b/packages/ods/src/components/datepicker/src/components/ods-datepicker/ods-datepicker.scss
@@ -49,7 +49,7 @@ $ods-datepicker-padding: 6px;
 
     padding-right: input.$ods-input-input-padding-right;
 
-    &:not(#{$input}--error, :disabled) {
+    &:not(#{$input}--error, :disabled, :read-only) {
       &:focus {
         border-color: var(--ods-color-form-element-border-focus-default);
       }

diff --git a/packages/ods/src/components/input/src/components/ods-input/ods-input.scss b/packages/ods/src/components/input/src/components/ods-input/ods-input.scss
@@ -40,7 +40,7 @@
       margin: 0;
     }
 
-    &:not(#{$input}--error, :disabled) {
+    &:not(#{$input}--error, :disabled, :read-only) {
       &:focus {
         border-color: var(--ods-color-form-element-border-focus-default);
       }

diff --git a/packages/ods/src/components/select/src/components/ods-select/ods-select.scss b/packages/ods/src/components/select/src/components/ods-select/ods-select.scss
@@ -244,7 +244,7 @@ $select-padding-right: $select-caret-size + ($select-base-padding * 2);
       }
     }
 
-    &.readonly {
+    &.locked {
       .ts-control {
         @include state.ods-is-readonly();
       }

diff --git a/packages/ods/src/components/select/src/components/ods-select/ods-select.tsx b/packages/ods/src/components/select/src/components/ods-select/ods-select.tsx
@@ -94,7 +94,6 @@ export class OdsSelect {
 
   @Watch('isReadonly')
   onIsReadonlyChange(newValue: boolean): void {
-    // TODO use same still as input readonly (focused)
     if (newValue) {
       this.select?.lock();
     } else {

diff --git a/packages/ods/src/components/textarea/src/components/ods-textarea/ods-textarea.scss b/packages/ods/src/components/textarea/src/components/ods-textarea/ods-textarea.scss
@@ -13,7 +13,7 @@
     height: auto;
     resize: none;
 
-    &:not(#{$textarea}--error, :disabled) {
+    &:not(#{$textarea}--error, :disabled, :read-only) {
       &:focus {
         border-color: var(--ods-color-form-element-border-focus-default);
       }

diff --git a/packages/ods/src/style/_state.scss b/packages/ods/src/style/_state.scss
@@ -1,6 +1,8 @@
 $ods-state-is-disabled-background-color: var(--ods-color-background-disabled-default);
 $ods-state-is-disabled-border-color: var(--ods-color-border-disabled-default);
 $ods-state-is-disabled-text-color: var(--ods-color-text-disabled-default);
+$ods-state-is-readonly-background-color: var(--ods-color-background-readonly-default);
+$ods-state-is-readonly-border-color: var(--ods-color-border-readonly-default);
 
 @mixin ods-is-disabled() {
   border-color: $ods-state-is-disabled-border-color;
@@ -10,5 +12,6 @@ $ods-state-is-disabled-text-color: var(--ods-color-text-disabled-default);
 }
 
 @mixin ods-is-readonly() {
-  // Empty for now, no style has been yet defined
+  border-color: $ods-state-is-readonly-border-color;
+  background-color: $ods-state-is-readonly-background-color;
 }
diff --git a/packages/themes/src/default/_variables.scss b/packages/themes/src/default/_variables.scss
@@ -154,7 +154,9 @@ $ods-color-new: $ods-palette-bright-cyan;
 $ods-color-promotion: $ods-palette-royal-fuschia;
 $ods-color-text: $ods-palette-twilight;
 $ods-color-background-disabled-default: $ods-color-neutral-100;
+$ods-color-background-readonly-default: $ods-color-neutral-050;
 $ods-color-border-disabled-default: $ods-color-neutral-200;
+$ods-color-border-readonly-default: $ods-color-neutral-050;
 $ods-color-text-disabled-default: $ods-color-neutral-500;
 $ods-color-form-element-background-default: $ods-color-neutral-000;
 $ods-color-form-element-background-hover-default: $ods-color-neutral-000;

diff --git a/packages/themes/src/default/index.scss b/packages/themes/src/default/index.scss
@@ -15,7 +15,9 @@
   --ods-border-width-md: #{var.$ods-border-width-md};
   --ods-color-alpha: #{var.$ods-color-alpha};
   --ods-color-background-disabled-default: #{var.$ods-color-background-disabled-default};
+  --ods-color-background-readonly-default: #{var.$ods-color-background-readonly-default};
   --ods-color-border-disabled-default: #{var.$ods-color-border-disabled-default};
+  --ods-color-border-readonly-default: #{var.$ods-color-border-readonly-default};
   --ods-color-beta: #{var.$ods-color-beta};
   --ods-color-critical-000: #{var.$ods-color-critical-000};
   --ods-color-critical-050: #{var.$ods-color-critical-050};