diff --git a/src/components/SelectField/SelectField.css b/src/components/SelectField/SelectField.css index 04218b7d..fbde2526 100644 --- 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 index 07206f21..3c21f837 100644 --- 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', () => ( +