From 94295c892c5dc124bbf956e6e09b5eda98efddaa Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Wed, 24 Jun 2020 14:26:42 -0400
Subject: [PATCH 1/4] Improve Boolean focus state again

---
 lib/components/src/controls/Boolean.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/lib/components/src/controls/Boolean.tsx b/lib/components/src/controls/Boolean.tsx
index cd33d862194..cc896b22182 100644
--- a/lib/components/src/controls/Boolean.tsx
+++ b/lib/components/src/controls/Boolean.tsx
@@ -24,13 +24,11 @@ const Label = styled.label(({ theme }) => ({
     border: 'none',
     background: 'transparent',
     cursor: 'pointer',
+    borderRadius: '3em',
 
     '&:focus': {
       outline: 'none',
-
-      '& ~ span': {
-        boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`,
-      },
+      boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`,
     },
   },
 
@@ -82,7 +80,7 @@ const parse = (value: string | null) => value === 'true';
 
 export type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
 export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange }) => (
-  <Label htmlFor={name}>
+  <Label htmlFor={name} title={value ? 'Change to false' : 'Change to true'}>
     <input
       id={name}
       name={name}

From 8326fc4511c6e540f3f24b8a3e2b6b90f1770344 Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Wed, 24 Jun 2020 14:27:32 -0400
Subject: [PATCH 2/4] Sizing and simplification for date controls

---
 lib/components/src/controls/Date.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/lib/components/src/controls/Date.tsx b/lib/components/src/controls/Date.tsx
index eafb16069a1..5fee749b11d 100644
--- a/lib/components/src/controls/Date.tsx
+++ b/lib/components/src/controls/Date.tsx
@@ -39,19 +39,21 @@ const formatTime = (value: Date | number) => {
 const FlexSpaced = styled.div({
   flex: 1,
   display: 'flex',
-  '&& > *': {
+
+  input: {
     marginLeft: 10,
+    flex: 1,
+    height: 32, // hardcode height bc Chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=417606
+
+    '&::-webkit-calendar-picker-indicator': {
+      opacity: 0.5,
+      height: 12,
+    },
   },
-  '&& > *:first-of-type': {
+  'input:first-of-type': {
     marginLeft: 0,
   },
 });
-const FlexInput = styled(Form.Input)({
-  flex: 1,
-  '&::-webkit-calendar-picker-indicator': {
-    opacity: 0.5,
-  },
-});
 
 export type DateProps = ControlProps<DateValue> & DateConfig;
 export const DateControl: FC<DateProps> = ({ name, value, onChange }) => {
@@ -92,7 +94,7 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange }) => {
 
   return (
     <FlexSpaced>
-      <FlexInput
+      <Form.Input
         type="date"
         max="9999-12-31" // I do this because of a rendering bug in chrome
         ref={dateRef as RefObject<HTMLInputElement>}
@@ -100,7 +102,7 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange }) => {
         name={`${name}date`}
         onChange={onDateChange}
       />
-      <FlexInput
+      <Form.Input
         type="time"
         id={`${name}time`}
         name={`${name}time`}

From 4c5ef73b0885d938f70ce5450df493d9ac82114c Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Wed, 24 Jun 2020 14:27:51 -0400
Subject: [PATCH 3/4] Ensure all control inputs are 32px high

---
 lib/components/src/form/input/input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/src/form/input/input.tsx b/lib/components/src/form/input/input.tsx
index f56e7a98f5d..0dd4abcf8c4 100644
--- a/lib/components/src/form/input/input.tsx
+++ b/lib/components/src/form/input/input.tsx
@@ -28,7 +28,7 @@ const styles = ({ theme }: { theme: Theme }): CSSObject => ({
   borderRadius: theme.input.borderRadius,
   fontSize: theme.typography.size.s2 - 1,
   lineHeight: '20px',
-  padding: '.42em 1em', // 32
+  padding: '.46em 1em', // 32
 
   '&:focus': {
     boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,

From 7b3d654c450099f71e6b3dc18393f77e2da53735 Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Tue, 23 Jun 2020 17:24:44 -0400
Subject: [PATCH 4/4] Make Form.Button uniform in size with the rest of the
 Controls

---
 lib/components/src/Button/Button.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/components/src/Button/Button.tsx b/lib/components/src/Button/Button.tsx
index 0fdb2f95e30..e792c202824 100644
--- a/lib/components/src/Button/Button.tsx
+++ b/lib/components/src/Button/Button.tsx
@@ -114,7 +114,7 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
         }
       : {};
   },
-  ({ theme, tertiary, inForm }) =>
+  ({ theme, tertiary, inForm, small }) =>
     tertiary
       ? {
           background:
@@ -125,6 +125,8 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
           boxShadow: `${theme.input.border} 0 0 0 1px inset`,
           borderRadius: theme.input.borderRadius,
 
+          ...(inForm && small ? { padding: '10px 16px' } : {}),
+
           '&:hover': {
             background:
               theme.base === 'light'