fix: Select and input text height not matching each other (#562)

decentraland · Oct 9, 2024 · f56ec5b · f56ec5b
1 parent 8ac9d05
commit f56ec5b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/src/components/SelectField/SelectField.css b/src/components/SelectField/SelectField.css
@@ -9,7 +9,7 @@
   border-bottom: 2px solid var(--divider);
   padding: 2px 0px 0px 0px;
   width: 100%;
-  margin-top: 8px;
+  margin-top: 6px;
   min-height: 40px;
 }
 
@@ -37,7 +37,7 @@
   font-size: 20px;
   font-weight: 500;
   font-family: var(--font-family);
-  line-height: 30px;
+  line-height: 24px;
 }
 
 .dcl.select-field .ui.dropdown > .default.text {
@@ -59,6 +59,7 @@
   padding-right: 0px;
   padding-bottom: 0px;
   color: var(--text);
+  top: 0.4em;
 }
 
 .dcl.select-field.border .ui.dropdown .dropdown.icon {
@@ -148,8 +149,6 @@
 }
 
 .dcl.select-field.error .ui.selection.dropdown > i.icon:before {
-  /* content: '';
-  display: none; */
   color: var(--error);
 }
 

diff --git a/src/components/SelectField/SelectField.stories.tsx b/src/components/SelectField/SelectField.stories.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { storiesOf } from '@storybook/react'
 import { Header } from '../Header/Header'
 import { SelectField } from './SelectField'
+import { Field } from '../Field/Field'
 
 storiesOf('SelectField', module)
   .add('Basic', () => (
@@ -155,3 +156,20 @@ storiesOf('SelectField', module)
       />
     </>
   ))
+  .add('Select field aligned with input field', () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: '10px',
+        width: '500px'
+      }}
+    >
+      <SelectField
+        placeholder="Placeholder"
+        options={[{ key: 1, text: 'Choice 1', value: 1 }]}
+      />
+      <Field placeholder="Placeholder" value="A value" />
+    </div>
+  ))