feat(global): apply readonly color to icons & add control to select

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

Hide file tree

Showing 4 changed files with 39 additions and 2 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
@@ -99,7 +99,8 @@ $ods-datepicker-padding: 6px;
     &__icon {
       color: var(--ods-color-primary-500);
 
-      &--disabled {
+      &--disabled,
+      &--readonly {
         color: var(--ods-color-neutral-500);
       }
     }

diff --git a/packages/ods/src/components/datepicker/src/components/ods-datepicker/ods-datepicker.tsx b/packages/ods/src/components/datepicker/src/components/ods-datepicker/ods-datepicker.tsx
@@ -274,6 +274,7 @@ export class OdsDatepicker {
             class={{
               'ods-datepicker__actions__icon': true,
               'ods-datepicker__actions__icon--disabled': this.isDisabled,
+              'ods-datepicker__actions__icon--readonly': this.isReadonly,
             }}
             name={ ODS_ICON_NAME.calendar }
             onClick={ () => this.open() }>

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
@@ -25,7 +25,7 @@ $select-padding-right: $select-caret-size + ($select-base-padding * 2);
     border: solid 1px var(--ods-color-neutral-300);
     border-radius: 0;
     background-color: $select-background-color;
-    cursor: pointer !important;
+    cursor: pointer;
     padding: 0 $select-padding-right 0 $select-base-padding !important;
     height: input.$ods-input-input-height;
     min-height: auto;
@@ -247,6 +247,21 @@ $select-padding-right: $select-caret-size + ($select-base-padding * 2);
     &.locked {
       .ts-control {
         @include state.ods-is-readonly();
+
+        cursor: default;
+
+        &::after {
+          color: var(--ods-color-neutral-500);
+        }
+
+        .ts-merged-items {
+          background: var(--ods-color-neutral-050);
+
+          &__count {
+            color: var(--ods-color-text);
+            font-weight: 700;
+          }
+        }
       }
     }
   }

diff --git a/packages/storybook/stories/components/select/select.stories.ts b/packages/storybook/stories/components/select/select.stories.ts
@@ -15,6 +15,7 @@ export const Demo: StoryObj = {
   render: (arg) => html`
   <ods-select has-error="${arg.hasError}"
               is-disabled="${arg.isDisabled}"
+              is-readonly="${arg.isReadonly}"
               placeholder="${arg.placeholder}">
     <option value="dog">Dog</option>
     <option value="cat">Cat</option>
@@ -41,6 +42,14 @@ export const Demo: StoryObj = {
       },
       control: 'boolean',
     },
+    isReadonly: {
+      table: {
+        category: CONTROL_CATEGORY.general,
+        defaultValue: { summary: false },
+        type: { summary: 'boolean' },
+      },
+      control: 'boolean',
+    },
     placeholder: {
       table: {
         category: CONTROL_CATEGORY.general,
@@ -53,6 +62,7 @@ export const Demo: StoryObj = {
   args: {
     hasError: false,
     isDisabled: false,
+    isReadonly: false,
   },
 };
 
@@ -61,6 +71,7 @@ export const DemoMultiple: StoryObj = {
   <ods-select allow-multiple
               has-error="${arg.hasError}"
               is-disabled="${arg.isDisabled}"
+              is-readonly="${arg.isReadonly}"
               multiple-selection-label="${arg.multipleSelectionLabel}"
               placeholder="${arg.placeholder}">
     <option value="dog">Dog</option>
@@ -88,6 +99,14 @@ export const DemoMultiple: StoryObj = {
       },
       control: 'boolean',
     },
+    isReadonly: {
+      table: {
+        category: CONTROL_CATEGORY.general,
+        defaultValue: { summary: false },
+        type: { summary: 'boolean' },
+      },
+      control: 'boolean',
+    },
     multipleSelectionLabel: {
       table: {
         category: CONTROL_CATEGORY.general,
@@ -108,6 +127,7 @@ export const DemoMultiple: StoryObj = {
   args: {
     hasError: false,
     isDisabled: false,
+    isReadonly: false,
     multipleSelectionLabel: 'Selected item',
   },
 };