Merge pull request #3750 from webkom/ivarnakken/aba-243-make-select-c…

…omponent-feel-more-at-home Make selectors feel more at home
webkom · Apr 10, 2023 · b37c1ee · b37c1ee
2 parents 0aa57d7 + b07ecf1
commit b37c1ee
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 45 deletions.
diff --git a/app/components/Form/Field.css b/app/components/Form/Field.css
@@ -8,11 +8,13 @@
 }
 
 .inputWithError {
-  border: 1.5px solid var(--danger-color) !important;
+  border: 1.5px solid var(--danger-color);
+  border-radius: var(--border-radius-md);
 }
 
 .inputWithWarning {
-  border: 1.5px solid var(--color-orange-6) !important;
+  border: 1.5px solid var(--color-orange-6);
+  border-radius: var(--border-radius-md);
 }
 
 .fieldError {
@@ -44,22 +46,3 @@
   font-weight: 600;
   margin-left: 2px;
 }
-
-:global {
-  /* stylelint-disable-next-line selector-class-pattern */
-  .Select.is-disabled > .Select-control {
-    background-color: var(--additive-background) !important;
-    color: var(--color-gray-5);
-  }
-
-  /* stylelint-disable-next-line selector-class-pattern */
-  .Select--multi.is-disabled .Select-value-label {
-    background-color: var(--additive-background) !important;
-    color: var(--color-gray-5);
-  }
-
-  /* stylelint-disable-next-line selector-class-pattern */
-  .Select--multi.is-disabled .Select-value {
-    border: none !important;
-  }
-}
diff --git a/app/components/Form/SelectInput.tsx b/app/components/Form/SelectInput.tsx
@@ -35,7 +35,18 @@ type Props = {
 };
 
 export const selectStyles = {
-  control: (styles: Record<string, any>) => ({ ...styles, cursor: 'pointer' }),
+  control: (
+    styles: Record<string, any>,
+    { isDisabled }: { isDisabled: boolean }
+  ) => ({
+    ...styles,
+    cursor: 'pointer',
+    opacity: isDisabled ? '0.5' : 1,
+    backgroundColor: isDisabled && undefined,
+    border: '1.5px solid var(--border-gray)',
+    borderRadius: 'var(--border-radius-md)',
+    fontSize: '14px',
+  }),
   option: (
     styles: Record<string, any>,
     {
@@ -49,6 +60,7 @@ export const selectStyles = {
     ...styles,
     cursor: isDisabled ? 'not-allowed' : 'pointer',
     color: isSelected ? 'var(--color-gray-1)' : undefined,
+    fontSize: '14px',
   }),
 };
 export const selectTheme = (
@@ -57,23 +69,23 @@ export const selectTheme = (
   ...theme,
   colors: {
     ...theme.colors,
-    //primary: 'var(--color-blue-4)', // Selected backgroundColor
-    primary25: 'var(--color-select-hover)',
-    // Hover backgroundColor
-    //primary75:  // Unknown
-    neutral0: 'var(--color-white)',
-    // Background color
-    //neutral5: // Unknown
-    neutral10: 'var(--color-select-multi-bg)',
-    // Multiselect item background
-    // neutral20: // Border color
-    // neutral30: // Hover border color
-    // neutral40: // Unknown
-    // neutral50: // Placholder font color,
-    // neutral60: // Unknown
+    primary: 'var(--color-gray-4)', // Primary color
+    // primary75: // Unknown
+    // primary50: // Unknown
+    primary25: 'var(--additive-background)', // Hover background color
+    neutral0: 'var(--lego-card-color)', // Background color
+    // netutral5: // Unknown
+    neutral10: 'var(--additive-background)', // Multi select item background
+    neutral20: 'var(--border-gray)', // Border color
+    neutral30: 'var(--border-gray)', // Hover border color
+    neutral40: 'var(--secondary-font-color)', //  Text color in dropdown ("No options" and "Loading...")
+    neutral50: 'var(--color-gray-5)', // Placholder color,
+    neutral60: 'var(--color-gray-4)', // Focused arrow color
     // neutral70: // Unknown
-    neutral80: 'var(--lego-font-color)', // Font color
+    neutral80: 'var(--lego-font-color)', // Font color and hover arrow color
     // neutral90: // Unknown
+    danger: 'var(--danger-color)', // Color of delete button in multi select items
+    dangerLight: 'rgba(255, 0, 0, var(--color-red-hover-alpha))', // Background color of delete button in multi select items
   },
 });
 
@@ -105,6 +117,8 @@ function SelectInput({
           shouldKeyDownEventCreateNewOption={shouldKeyDownEventCreateNewOption}
           options={options}
           isLoading={fetching}
+          styles={selectStyle ?? selectStyles}
+          theme={selectTheme}
           onInputChange={(value) => {
             if (props.onSearch) {
               props.onSearch(value);

diff --git a/app/routes/admin/email/components/RestrictedMailEditor.tsx b/app/routes/admin/email/components/RestrictedMailEditor.tsx
@@ -143,7 +143,7 @@ const RestrictedMailEditor = ({
         disabled={restrictedMailId}
         label="Epost addresser"
         name="rawAddresses"
-        placeholder="Enkelte eposter du ønsker å sende til"
+        placeholder="Enkelte e-poster du ønsker å sende til"
         component={SelectInput.Field}
         tags
         isMulti

diff --git a/app/routes/articles/components/ArticleEditor.tsx b/app/routes/articles/components/ArticleEditor.tsx
@@ -122,6 +122,7 @@ const ArticleEditor = ({
           component={TextInput.Field}
           id="article-title"
         />
+
         <Field
           name="tags"
           label="Tags"

diff --git a/app/routes/surveys/components/SurveyEditor/Question.tsx b/app/routes/surveys/components/SurveyEditor/Question.tsx
@@ -86,6 +86,7 @@ const Question = ({
           <div className={styles.questionType}>
             <Field
               name={`${question}.questionType`}
+              placeholder="Velg type"
               component={SelectInput.Field}
               components={{
                 Option: (props: any) => {

diff --git a/app/routes/surveys/utils.tsx b/app/routes/surveys/utils.tsx
@@ -106,7 +106,7 @@ export const QuestionTypeOption = ({ iconName, option, ...props }: any) => (
         ? 'var(--color-gray-2)'
         : props.isFocused
         ? 'var(--additive-background)'
-        : 'var(--color-white)',
+        : 'var(--lego-card-color)',
     }}
     className={cx(styles.dropdownOption, styles.dropdown)}
     onMouseDown={(event) => {

diff --git a/app/styles/variables.css b/app/styles/variables.css
@@ -95,9 +95,6 @@
   --color-red-8: #730202;
   --color-red-9: #400101;
 
-  --color-select-hover: rgb(178, 212, 255);
-  --color-select-multi-bg: rgb(230, 230, 230);
-
   --color-red-hover-alpha: 5%;
 
   --font-size: 16px;
@@ -203,8 +200,5 @@
   --color-red-8: #e52d2e;
   --color-red-9: #e9494a;
 
-  --color-select-hover: var(--color-gray-4);
-  --color-select-multi-bg: var(--color-gray-5);
-
   --color-red-hover-alpha: 10%;
 }