From d54eb8fb21b40a71f9bd341f88ba1c3679deb76d Mon Sep 17 00:00:00 2001
From: Alex Tran <atran@goodrx.com>
Date: Wed, 26 Aug 2020 09:40:25 -0700
Subject: [PATCH] more fixes

---
 src/Form/Input.tsx          | 12 +++++-------
 src/Icon/Icon.tsx           |  4 ++--
 src/Modal/Modal.stories.tsx |  2 ++
 src/Modal/Modal.tsx         |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/Form/Input.tsx b/src/Form/Input.tsx
index ca82a40..5c8a331 100644
--- a/src/Form/Input.tsx
+++ b/src/Form/Input.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, ComponentProps } from 'react';
 import styled, { css } from 'styled-components';
 import { Field } from './Field';
 import StyledLabel from './Label';
@@ -29,13 +29,11 @@ export interface InputProps {
   placeholder?: string;
   multiline?: boolean;
   label?: any;
-  autofocus?: any;
+  autoFocus?: boolean;
   transformOnBlur?: any;
   onFocus?: any;
   onBlur?: any;
   onChange?: any;
-  autoFocus?: boolean;
-  maxLength?: number;
   onKeyDown?: any;
   minRows?: number;
   rows?: number;
@@ -242,7 +240,7 @@ export class InputClass extends Component<InputProps, any> {
   }
 
   componentDidMount() {
-    if (this.props.autofocus && this.ref.current) {
+    if (this.props.autoFocus && this.ref.current) {
       this.ref.current.focus();
     }
 
@@ -344,7 +342,7 @@ export class InputClass extends Component<InputProps, any> {
       label,
       multiline,
       autogrow,
-      autofocus,
+      autoFocus,
       id,
       error,
       floating,
@@ -428,4 +426,4 @@ export class InputClass extends Component<InputProps, any> {
   }
 }
 
-export const Input = createEasyInput<InputProps & EasyInputProps>(InputClass);
+export const Input = createEasyInput<ComponentProps<typeof StyledInput> & EasyInputProps>(InputClass);
diff --git a/src/Icon/Icon.tsx b/src/Icon/Icon.tsx
index df59104..82e5f46 100644
--- a/src/Icon/Icon.tsx
+++ b/src/Icon/Icon.tsx
@@ -15,8 +15,8 @@ export const Icon = createComponent<IconProps, 'i'>({
   props: ({ name }) => ({
     className: `mdi mdi-${name}`,
   }),
-  style: ({ theme, size, color, disabled, onClick }: any) => {
-    const colorFromTheme = theme.colors[color];
+  style: ({ theme, size, color, disabled, onClick }) => {
+    const colorFromTheme = color ? theme.colors[color] : '';
     const resolvedColor = colorFromTheme || color;
 
     return css`
diff --git a/src/Modal/Modal.stories.tsx b/src/Modal/Modal.stories.tsx
index 731be2a..76d4e95 100644
--- a/src/Modal/Modal.stories.tsx
+++ b/src/Modal/Modal.stories.tsx
@@ -31,3 +31,5 @@ export const LongContent = () => (
 export const DropdownTrigger = () => <ModalDropdownExample body="I'm triggered by a dropdown" />;
 
 export const NoAutoFocus = () => <ModalNoAutoFocusExample body="I'm triggered by a dropdown" />;
+
+export const TitleElement = () => <ModalNoAutoFocusExample title={<h1>Hello world</h1>} />;
diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
index 5083b05..669bae8 100644
--- a/src/Modal/Modal.tsx
+++ b/src/Modal/Modal.tsx
@@ -23,7 +23,7 @@ export interface ModalProps {
   animationOut?: string;
   animationDuration?: number;
   onClose?: any;
-  title?: string;
+  title?: string | JSX.Element;
 }
 
 const ModalContainer = createComponent({