From 1778457987f3ca7f9ca7da6d3b3088840f30f6b8 Mon Sep 17 00:00:00 2001
From: Eugene Kotsarev <gimmethenick@gmail.com>
Date: Wed, 4 Dec 2024 20:42:34 +0300
Subject: [PATCH] feat(vara-ui): upd select

---
 .../vara-ui/src/components/select/helpers.ts  |   5 +
 .../src/components/select/select.module.scss  | 157 ++++++++++++++----
 .../src/components/select/select.stories.ts   |  13 ++
 .../vara-ui/src/components/select/select.tsx  |  10 +-
 4 files changed, 153 insertions(+), 32 deletions(-)
 create mode 100644 utils/vara-ui/src/components/select/helpers.ts

diff --git a/utils/vara-ui/src/components/select/helpers.ts b/utils/vara-ui/src/components/select/helpers.ts
new file mode 100644
index 0000000000..9575169bbf
--- /dev/null
+++ b/utils/vara-ui/src/components/select/helpers.ts
@@ -0,0 +1,5 @@
+const selectSizes = ['default', 'medium', 'small'] as const;
+type ISelectSizes = (typeof selectSizes)[number];
+
+export { selectSizes };
+export type { ISelectSizes };
diff --git a/utils/vara-ui/src/components/select/select.module.scss b/utils/vara-ui/src/components/select/select.module.scss
index 49901205a2..e6a48f3a83 100644
--- a/utils/vara-ui/src/components/select/select.module.scss
+++ b/utils/vara-ui/src/components/select/select.module.scss
@@ -1,31 +1,32 @@
 .root {
   &.disabled {
-    pointer-events: none;
-    opacity: 0.3;
-  }
-}
+    cursor: not-allowed;
 
-.base {
-  position: relative;
-}
+    * {
+      pointer-events: none;
+    }
 
-.select,
-.label {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.009em;
-  color: #010500;
+    .fieldset {
+      background-color: #eceded;
+      border-color: #d0d5dd;
+    }
 
-  &.default {
-    font-size: 16px;
-  }
+    .select:disabled {
+      cursor: not-allowed;
+    }
 
-  &.small {
-    font-size: 14px;
+    .select,
+    .label {
+      color: #58696e80;
+    }
   }
 }
 
+.base {
+  position: relative;
+  user-select: none;
+}
+
 .select {
   appearance: none;
   background-color: transparent;
@@ -36,7 +37,7 @@
 
   width: 100%;
   padding: 8px 14px;
-  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.616 5.54a.5.5 0 0 0 .768 0L9.317.82A.5.5 0 0 0 8.932 0H1.068a.5.5 0 0 0-.385.82l3.933 4.72Z' fill='%230C0C0D' fill-opacity='.5'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.616 5.54a.5.5 0 0 0 .768 0L9.317.82A.5.5 0 0 0 8.932 0H1.068a.5.5 0 0 0-.385.82l3.933 4.72Z' fill='%2358696E'/%3E%3C/svg%3E");
   background-position: right 14px center;
   background-repeat: no-repeat;
 
@@ -58,32 +59,37 @@
 
   &:focus {
     ~ .fieldset {
-      border-color: #00b387;
+      border-color: #53eece;
 
       .legendLabel {
-        color: #00b387;
+        color: #53eece;
       }
     }
   }
 
   &.error {
     ~ .fieldset {
-      border-color: #fc174d;
+      border-color: #ff3231cc;
 
       .legendLabel {
-        color: #fc174d;
+        color: #ff3231cc;
       }
     }
   }
 
   &.default {
-    padding-top: 13px;
-    padding-bottom: 13px;
+    padding-top: 14px;
+    padding-bottom: 14px;
+  }
+
+  &.medium {
+    padding-top: 9px;
+    padding-bottom: 9px;
   }
 
   &.small {
-    padding-top: 8px;
-    padding-bottom: 8px;
+    padding-top: 6px;
+    padding-bottom: 6px;
   }
 }
 
@@ -95,6 +101,26 @@
   left: 13px;
 }
 
+.select,
+.label {
+  font-weight: 400;
+  line-height: 24px;
+  color: #000000;
+
+  &.default {
+    font-size: 16px;
+  }
+
+  &.medium {
+    font-size: 16px;
+  }
+
+  &.small {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
 .fieldset {
   min-width: 0;
   margin: 0;
@@ -107,9 +133,12 @@
   bottom: 0;
   left: 0;
   right: 0;
+  z-index: -1;
 
-  border: 1px solid #0000003b;
   border-radius: 4px;
+  background-color: #ffffff;
+  border: 1px solid #d0d5dd;
+  box-shadow: 0 1px 2px 0 #1018280d;
 }
 
 .legend,
@@ -117,7 +146,6 @@
   font-size: 12px;
   font-weight: 400;
   line-height: 1;
-  letter-spacing: 0.01em;
 }
 
 .legend {
@@ -138,3 +166,72 @@
 .block {
   width: 100%;
 }
+
+:global(.dark-theme) {
+  .root {
+    &.disabled {
+      .fieldset {
+        background-color: #282c301a;
+        border-color: #ffffff0a;
+      }
+
+      .input,
+      .label {
+        color: #9cacb166;
+      }
+    }
+  }
+
+  .fieldset {
+    background-color: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    box-shadow: 0 1px 2px 0 #1018280d;
+  }
+
+  .label,
+  .select {
+    color: #828b8e;
+  }
+
+  .select {
+    color: #f6f6f6e5;
+    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.616 5.54a.5.5 0 0 0 .768 0L9.317.82A.5.5 0 0 0 8.932 0H1.068a.5.5 0 0 0-.385.82l3.933 4.72Z' fill='%23828B8E'/%3E%3C/svg%3E");
+
+
+    &:focus::placeholder {
+      color: #828b8e;
+    }
+
+    &:focus {
+      ~ .fieldset {
+        border-color: #0fa885;
+
+        .legendLabel {
+          color: #0fa885;
+        }
+      }
+    }
+
+    &.error {
+      ~ .label {
+        color: #d73b4f;
+      }
+
+      ~ .fieldset {
+        border-color: #d73b4f;
+
+        .legendLabel {
+          color: #d73b4f;
+        }
+      }
+    }
+
+    .message {
+      color: #d73b4f;
+    }
+  }
+
+  .legend {
+    color: #828b8e;
+  }
+}
diff --git a/utils/vara-ui/src/components/select/select.stories.ts b/utils/vara-ui/src/components/select/select.stories.ts
index 4fbbc7d8d2..1dfac74977 100644
--- a/utils/vara-ui/src/components/select/select.stories.ts
+++ b/utils/vara-ui/src/components/select/select.stories.ts
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Select } from './select';
+import { selectSizes } from './helpers';
 
 type Type = typeof Select;
 type Story = StoryObj<Type>;
@@ -13,6 +14,18 @@ const meta: Meta<Type> = {
       { label: 'Option 2', value: 'option-2' },
       { label: 'Option 3', value: 'option-3' },
     ],
+    label: '',
+    size: 'default',
+    disabled: false,
+    block: false,
+  },
+  argTypes: {
+    disabled: { control: 'boolean' },
+    block: { control: 'boolean' },
+    size: {
+      options: selectSizes,
+      control: { type: 'select' },
+    },
   },
 };
 
diff --git a/utils/vara-ui/src/components/select/select.tsx b/utils/vara-ui/src/components/select/select.tsx
index 8664975bf4..f96dd9d2b6 100644
--- a/utils/vara-ui/src/components/select/select.tsx
+++ b/utils/vara-ui/src/components/select/select.tsx
@@ -1,10 +1,11 @@
 import { SelectHTMLAttributes, OptionHTMLAttributes, ReactNode, useId, forwardRef } from 'react';
 import cx from 'clsx';
 import styles from './select.module.scss';
+import type { ISelectSizes } from './helpers.ts';
 
 type Props = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'id' | 'size'> & {
   options: OptionHTMLAttributes<HTMLOptionElement>[] | Readonly<OptionHTMLAttributes<HTMLOptionElement>[]>;
-  size?: 'default' | 'small';
+  size?: ISelectSizes;
   label?: string;
   error?: ReactNode;
   block?: boolean;
@@ -21,7 +22,12 @@ const Select = forwardRef<HTMLSelectElement, Props>(
     return (
       <div className={cx(styles.root, className, disabled && styles.disabled, block && styles.block)}>
         <div className={styles.base}>
-          <select id={id} className={cx(styles.select, styles[size], error && styles.error)} ref={ref} {...attrs}>
+          <select
+            id={id}
+            className={cx(styles.select, styles[size], error && styles.error)}
+            ref={ref}
+            disabled={disabled}
+            {...attrs}>
             {getOptions()}
           </select>