diff --git a/src/components/Form/FormSectionTitle.js b/src/components/Form/FormSectionTitle.js index 8dc2e2d2..338fb9ed 100644 --- a/src/components/Form/FormSectionTitle.js +++ b/src/components/Form/FormSectionTitle.js @@ -14,6 +14,7 @@ const name = 'formSectionTitle'; const [FormSectionTitleTag, theme] = createThemeTag(name, ({ FONTS }: *) => ({ root: { ...FONTS.H5, + letterSpacing: '0.5px', }, modifiers: {}, defaults: {}, diff --git a/src/components/Input/Input.stories.js b/src/components/Input/Input.stories.js index 639cc247..6ddfbc5e 100644 --- a/src/components/Input/Input.stories.js +++ b/src/components/Input/Input.stories.js @@ -104,3 +104,9 @@ export const withKindUnderline = () => ( withKindUnderline.story = { name: 'with kind="underline"', }; + +export const disabledStory = () => null } disabled />; + +disabledStory.story = { + name: 'with disabled=true', +}; diff --git a/src/components/Input/Input.theme.js b/src/components/Input/Input.theme.js index db000c66..5d789cee 100644 --- a/src/components/Input/Input.theme.js +++ b/src/components/Input/Input.theme.js @@ -9,7 +9,8 @@ const [InputTag, themeInput] = createThemeTag(name, ({ COLORS, SIZES, FONTS }: * root: props => ({ width: props.width ? `${props.width}rem` : props.stretch ? '100%' : SIZES.FIELD_WIDTH, outline: 'none', - paddingLeft: props.hasLeftIcon ? '36px' : '8px', + paddingTop: '1px', + paddingLeft: props.hasLeftIcon ? '36px' : '15px', paddingRight: props.hasRightIcon || (props.type === 'number' && !props.hideNumberArrows) ? '48px' : '16px', backgroundColor: (props.disabled || props.readOnly) @@ -38,6 +39,7 @@ const [InputTag, themeInput] = createThemeTag(name, ({ COLORS, SIZES, FONTS }: * }, ...FONTS.BODY_1, + color: props.disabled ? COLORS.LIGHT_TEXT_COLOR : COLORS.PRIMARY_TEXT_COLOR, height: '36px', transition: 'all .15s ease-in-out', diff --git a/src/components/InputField/InputField.stories.js b/src/components/InputField/InputField.stories.js index 09eee891..f5a9ef56 100644 --- a/src/components/InputField/InputField.stories.js +++ b/src/components/InputField/InputField.stories.js @@ -97,6 +97,11 @@ export const common = () => ( mask="999-999" stretch={ false } /> +