refactor(look&feel): select native

apps/look-and-feel-stories/src/Select.stories.tsx

@@ -2,12 +2,6 @@ import { Select } from "@axa-fr/design-system-look-and-feel-react";
 import { Meta, StoryObj } from "@storybook/react";
 import { ComponentProps } from "react";
 
-const options = [
-  { value: "fun", label: "For fun" },
-  { value: "work", label: "For work" },
-  { value: "drink", label: "For drink" },
-];
-
 const meta: Meta<typeof Select> = {
   component: Select,
   title: "Components/Form/Input/Select",
@@ -23,18 +17,20 @@ export const SelectStory: Story = {
   tags: ["Form", "Input"],
   render: ({ onChange, ...args }) => (
     <div style={{ width: 300 }}>
-      <Select onChange={onChange} {...args} />
+      <Select onChange={onChange} {...args}>
+        <option value="fun">For fun</option>
+        <option value="work">For work</option>
+        <option value="drink">For drink</option>
+      </Select>
     </div>
   ),
   args: {
-    className: "",
-    options,
     label: "Label",
     disabled: false,
     required: false,
     placeholder: "Placeholder",
-    noOptionsMessage: "Pas d'option",
     errorLabel: "",
+    value: "",
   },
   argTypes: {
     onChange: { action: "onChange" },

client/look-and-feel/css/src/Form/Select/Select.scss

@@ -2,125 +2,76 @@
 @use "../../common/reboot";
 @use "../../common/common" as common;
 
-.af-form {
-  &__select {
-    &-label {
-      display: inline-block;
-      margin-bottom: 0.5rem;
-      font-size: common.rem(18);
-      font-weight: 600;
-      color: var(--color-gray-900);
-    }
+.af-form__select {
+  &-label {
+    display: inline-block;
+    margin-bottom: 0.5rem;
+    font-size: common.rem(18);
+    font-weight: 600;
+    color: var(--color-gray-900);
+  }
 
-    &-single-value {
+  &-input {
+    display: block;
+    width: 100%;
+    margin-bottom: 0.5rem;
+    padding: 1rem;
+    border: 1px solid var(--color-gray);
+    border-radius: var(--default-border-radius);
+    color: var(--color-gray-900);
+    background: url("@material-symbols/svg-400/outlined/arrow_drop_down.svg")
+      no-repeat right 1rem center / 1.5rem 1.5rem;
+    background-color: white;
+    background-position-x: calc(100% - 1rem);
+    appearance: none;
+
+    option {
       color: var(--color-gray-900);
 
-      &-disabled {
-        color: var(--color-gray-500);
+      &:disabled {
+        color: var(--color-gray-700);
       }
     }
 
-    &-error {
-      display: flex;
-      margin-top: 0.5rem;
-      gap: 0.5rem;
-      color: var(--color-red-700);
+    &:open {
+      background-image: url("@material-symbols/svg-400/outlined/arrow_drop_up.svg");
+    }
 
-      &-icon {
-        path {
-          fill: var(--color-red-700);
-        }
-      }
+    &:focus-visible {
+      border-color: var(--color-axa);
+      box-shadow: 0 0 0 1px var(--color-axa) inset;
+      outline: 2px solid var(--color-focus);
+      outline-offset: 3px;
     }
-  }
 
-  &__input-select {
-    min-height: unset !important;
-    padding: 0.75rem 1rem;
-    font-size: 1.125rem;
-    color: var(--color-gray-700);
+    &:disabled {
+      cursor: not-allowed;
+    }
 
-    &[aria-disabled] {
-      cursor: not-allowed !important;
-      pointer-events: auto !important;
+    &:not(:disabled):hover,
+    &:not(:disabled):active {
+      border-color: var(--color-axa);
+      box-shadow: 0 0 0 1px var(--color-axa) inset;
     }
 
-    &-container {
-      border: 1px solid var(--color-gray-700);
-      border-radius: var(--default-border-radius);
+    &-placeholder {
       color: var(--color-gray-700);
-      background-color: var(--color-white);
-
-      &-error {
-        margin-bottom: 0.5rem;
-        border-width: 1px;
-        border-color: var(--color-red-700);
+    }
 
-        &:not([class*="-disabled"]):hover,
-        &:not([class*="-disabled"]):active {
-          border-color: var(--color-red-700);
-          box-shadow: 0 0 0 1px var(--color-red-700) inset !important;
-        }
-      }
+    &--error {
+      border-color: var(--color-red-700);
 
-      &-focused,
       &:focus-visible {
-        box-shadow: 0 0 0 1px var(--color-axa) inset;
+        border-color: var(--color-red-700);
+        box-shadow: 0 0 0 1px var(--color-red-700) inset;
         outline: 2px solid var(--color-focus);
         outline-offset: 3px;
       }
 
-      &:not(&-disabled, &-error):hover,
-      &:not(&-disabled, &-error):active {
-        border-color: var(--color-axa);
-        box-shadow: 0 0 0 1px var(--color-axa) inset;
-      }
-
-      &-disabled {
-        border-color: var(--color-gray-400);
-        background-color: var(--color-gray-200);
-        cursor: not-allowed !important;
-        pointer-events: auto !important;
-      }
-
-      &-icon {
-        &-disabled {
-          path {
-            fill: var(--color-gray-500);
-          }
-        }
-      }
-    }
-
-    &-menu {
-      margin-top: 0.4rem;
-      margin-left: -1rem;
-      background-color: var(--color-white);
-      box-shadow: 0 4px 16px -2px #00008f40;
-
-      &-options {
-        padding: 0.75rem 1rem;
-        border: 1px solid transparent;
-        font-weight: 400;
-        color: var(--color-gray-900);
-        box-shadow: none;
-
-        &-selected {
-          font-weight: 600;
-          color: var(--color-axa);
-        }
-
-        &-focused {
-          border: 1px solid var(--color-axa);
-        }
-
-        &:nth-child(odd) {
-          background-color: var(--color-blue-2);
-        }
-
-        &:nth-child(even) {
-          background-color: var(--color-white);
-        }
+      &:not(:disabled):hover,
+      &:not(:disabled):active {
+        border-color: var(--color-red-700);
+        box-shadow: 0 0 0 1px var(--color-red-700) inset;
       }
     }
   }

client/look-and-feel/react/package.json

@@ -58,8 +58,7 @@
     "@tanem/svg-injector": "^10.1.68",
     "classnames": "^2.5.1",
     "dompurify": "^3.1.5",
-    "rc-slider": "^11.1.7",
-    "react-select": "^5.9.0"
+    "rc-slider": "^11.1.7"
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": "eslint --fix",