fix: #88 select incorrect height (#96)

* fix: #88 select component incorrect height * fix: #88 select incorrect height
reapit · Apr 10, 2024 · fcc0655 · fcc0655
1 parent f5f3e6b
commit fcc0655
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/form-layout/form-layout.stories.tsx b/src/components/form-layout/form-layout.stories.tsx
@@ -6,6 +6,7 @@ import { TextArea } from '../textarea'
 import { MultiSelectInput } from '../multi-select'
 import { Button, ButtonGroup } from '../button'
 import { Label } from '../label'
+import { Select } from '../select'
 
 export default {
   title: 'FormLayout',
@@ -105,7 +106,14 @@ export const ComplexForm = {
           <InputGroup icon="calendar" label="Date of Birth" type="date" />
         </InputWrap>
         <InputWrap>
-          <InputGroup icon="email" label="Email" type="text" />
+          <InputGroup>
+            <Label>Select Option</Label>
+            <Select>
+              <option value="1">Option 1</option>
+              <option value="2">Option 2</option>
+              <option value="3">Option 3</option>
+            </Select>
+          </InputGroup>
         </InputWrap>
         <InputWrapSmall>
           <InputGroup type="checkbox" label="Status" />

diff --git a/src/components/select/__styles__/index.ts b/src/components/select/__styles__/index.ts
@@ -6,7 +6,7 @@ export const ElSelect = styled.select`
   background-color: var(--component-input-bg);
   padding: 0 0.6875rem;
   padding-right: 2rem;
-  height: 2rem;
+  height: 2.25rem;
   appearance: none;
   border: var(--component-input-border);
   position: relative;

diff --git a/src/storybook/changelog.mdx b/src/storybook/changelog.mdx
@@ -18,8 +18,9 @@ Beta versions should be relatively stable but subject to occssional breaking cha
 
 ### **4.3.0 - 11/04/24**
 
-- Fixes issue where inline PersistentNotification z-index interfeares with Nav
-- Fixes issue where Modal goes off the screen if too much content is included. Now scrolls and has a max height.
+- Fixes issue where inline `PersistentNotification` z-index interfeares with Nav
+- Fixes issue where `Modal` goes off the screen if too much content is included. Now scrolls and has a max height.
+- Fixes `Select` component height so it matches that of an input.
 
 ### **4.2.0 - 10/04/24**