From a97539a547e1aed3452cd58795dabc84880ad7f3 Mon Sep 17 00:00:00 2001
From: Nicolas Biehler <biehler.nicolas@gmail.com>
Date: Mon, 27 Jul 2020 13:12:58 +0200
Subject: [PATCH 1/7] refactor: move sidetray to typescript

---
 .../{SideTray.test.js => SideTray.test.tsx}   |   2 +-
 .../SideTray/{index.js => SideTray.tsx}       | 105 ++++++++++--------
 src/components/SideTray/index.ts              |   1 +
 .../SideTray/{story.js => story.tsx}          |   2 +-
 4 files changed, 61 insertions(+), 49 deletions(-)
 rename src/components/SideTray/{SideTray.test.js => SideTray.test.tsx} (92%)
 rename src/components/SideTray/{index.js => SideTray.tsx} (78%)
 create mode 100644 src/components/SideTray/index.ts
 rename src/components/SideTray/{story.js => story.tsx} (99%)

diff --git a/src/components/SideTray/SideTray.test.js b/src/components/SideTray/SideTray.test.tsx
similarity index 92%
rename from src/components/SideTray/SideTray.test.js
rename to src/components/SideTray/SideTray.test.tsx
index 6dcb4558..489ceea0 100644
--- a/src/components/SideTray/SideTray.test.js
+++ b/src/components/SideTray/SideTray.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import SideTray from './';
+import SideTray from '.';
 
 describe('SideTray', () => {
   it('renders', () => {
diff --git a/src/components/SideTray/index.js b/src/components/SideTray/SideTray.tsx
similarity index 78%
rename from src/components/SideTray/index.js
rename to src/components/SideTray/SideTray.tsx
index 40823d66..551315d6 100644
--- a/src/components/SideTray/index.js
+++ b/src/components/SideTray/SideTray.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, ReactNode, CSSProperties } from 'react';
 import PropTypes from 'prop-types';
 
 // Rover UI dependencies
@@ -7,14 +7,61 @@ import { parseCssSize } from '../../shared/css-utils';
 // This component's dependencies
 import styles from './SideTray.module.css';
 
-const SideTray = ({
+interface SideTrayProps {
+  children: ReactNode;
+  className?: string;
+  direction?: string;
+  height?: string | number;
+  onClose: (...args) => void;
+  style?: object;
+  visible?: boolean;
+  width?: string | number;
+}
+
+interface SideTrayChildProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const Header: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
+  <div {...props} className={`${styles.header} ${className}`} />
+);
+Header.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+const Footer: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
+  <div {...props} className={`${styles.footer} ${className}`} />
+);
+Footer.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+const Body: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
+  <div {...props} className={`${styles.body} ${className}`} />
+);
+Body.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+interface SideTrayType extends React.FC<SideTrayProps> {
+  Header: typeof Header;
+  Footer: typeof Footer;
+  Body: typeof Body;
+}
+
+const SideTray: SideTrayType = ({
   children,
-  className,
-  direction,
-  height,
+  className = '',
+  direction = 'r',
+  height = '100vh',
   onClose,
-  visible,
-  width,
+  style = {},
+  visible = false,
+  width = '400px',
   ...passedProps
 }) => {
   // Close tray when the user hits "Escape"
@@ -52,7 +99,7 @@ const SideTray = ({
   const parsedWidth = parseCssSize({ size: width });
   let hideTransformStyle;
 
-  const sideTrayStyles = {
+  const sideTrayStyles: CSSProperties = {
     bottom: 0,
     height: `${parsedHeight.size}${parsedHeight.unit}`,
     left: 0,
@@ -82,20 +129,20 @@ const SideTray = ({
   }
 
   return (
-    <>
+    <React.Fragment>
       <div
         {...passedProps}
         style={{
           ...sideTrayStyles,
           ...(!visible ? { transform: hideTransformStyle } : {}),
-          ...passedProps.style,
+          ...style,
         }}
         className={`${styles.SideTray} ${className}`}
       >
         <div className={styles.container}>{children}</div>
       </div>
       {clickOffBackdrop}
-    </>
+    </React.Fragment>
   );
 };
 
@@ -110,42 +157,6 @@ SideTray.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
-SideTray.defaultProps = {
-  className: '',
-  direction: 'r',
-  height: '100vh',
-  style: {},
-  visible: false,
-  width: '400px',
-};
-
-const Header = ({ className, ...props }) => (
-  <div {...props} className={`${styles.header} ${className}`} />
-);
-Header.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-Header.defaultProps = { className: '' };
-
-const Footer = ({ className, ...props }) => (
-  <div {...props} className={`${styles.footer} ${className}`} />
-);
-Footer.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-Footer.defaultProps = { className: '' };
-
-const Body = ({ className, ...props }) => (
-  <div {...props} className={`${styles.body} ${className}`} />
-);
-Body.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-Body.defaultProps = { className: '' };
-
 SideTray.Header = Header;
 SideTray.Footer = Footer;
 SideTray.Body = Body;
diff --git a/src/components/SideTray/index.ts b/src/components/SideTray/index.ts
new file mode 100644
index 00000000..d5a69a1f
--- /dev/null
+++ b/src/components/SideTray/index.ts
@@ -0,0 +1 @@
+export { default } from './SideTray';
diff --git a/src/components/SideTray/story.js b/src/components/SideTray/story.tsx
similarity index 99%
rename from src/components/SideTray/story.js
rename to src/components/SideTray/story.tsx
index 47a8df87..2326c91f 100644
--- a/src/components/SideTray/story.js
+++ b/src/components/SideTray/story.tsx
@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean, select, text } from '@storybook/addon-knobs';
 
-import SideTray from './';
+import SideTray from '.';
 import Button from '../Button';
 import Readme from './README.md';
 

From cd263e397c88cf39782a773a17cfac7b3ea45572 Mon Sep 17 00:00:00 2001
From: Nicolas Biehler <biehler.nicolas@gmail.com>
Date: Tue, 28 Jul 2020 11:05:34 +0200
Subject: [PATCH 2/7] refactor: remove SideTray child components explicit prop
 types

---
 src/components/SideTray/SideTray.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/components/SideTray/SideTray.tsx b/src/components/SideTray/SideTray.tsx
index 551315d6..462f1322 100644
--- a/src/components/SideTray/SideTray.tsx
+++ b/src/components/SideTray/SideTray.tsx
@@ -26,26 +26,12 @@ interface SideTrayChildProps {
 const Header: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
   <div {...props} className={`${styles.header} ${className}`} />
 );
-Header.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-
 const Footer: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
   <div {...props} className={`${styles.footer} ${className}`} />
 );
-Footer.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-
 const Body: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
   <div {...props} className={`${styles.body} ${className}`} />
 );
-Body.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
 
 interface SideTrayType extends React.FC<SideTrayProps> {
   Header: typeof Header;

From 20eaca219a8b6b6f1cd1468e749db1d7f9d11891 Mon Sep 17 00:00:00 2001
From: Nicolas Biehler <biehler.nicolas@gmail.com>
Date: Mon, 3 Aug 2020 11:08:45 +0200
Subject: [PATCH 3/7] refactor: disallow undefined as a className

---
 src/components/SideTray/SideTray.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/SideTray/SideTray.tsx b/src/components/SideTray/SideTray.tsx
index 462f1322..f4a60eeb 100644
--- a/src/components/SideTray/SideTray.tsx
+++ b/src/components/SideTray/SideTray.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, ReactNode, CSSProperties } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 // Rover UI dependencies
 import { parseCssSize } from '../../shared/css-utils';
@@ -13,7 +14,7 @@ interface SideTrayProps {
   direction?: string;
   height?: string | number;
   onClose: (...args) => void;
-  style?: object;
+  style?: CSSProperties;
   visible?: boolean;
   width?: string | number;
 }
@@ -24,13 +25,13 @@ interface SideTrayChildProps {
 }
 
 const Header: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
-  <div {...props} className={`${styles.header} ${className}`} />
+  <div {...props} className={classNames(styles.header, className)} />
 );
 const Footer: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
-  <div {...props} className={`${styles.footer} ${className}`} />
+  <div {...props} className={classNames(styles.footer, className)} />
 );
 const Body: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
-  <div {...props} className={`${styles.body} ${className}`} />
+  <div {...props} className={classNames(styles.body, className)} />
 );
 
 interface SideTrayType extends React.FC<SideTrayProps> {
@@ -123,7 +124,7 @@ const SideTray: SideTrayType = ({
           ...(!visible ? { transform: hideTransformStyle } : {}),
           ...style,
         }}
-        className={`${styles.SideTray} ${className}`}
+        className={classNames(styles.SideTray, className)}
       >
         <div className={styles.container}>{children}</div>
       </div>

From 72a96a21997b09f5525efd39cd0f6543ab299f9b Mon Sep 17 00:00:00 2001
From: David Droddy <david.droddy@cision.com>
Date: Tue, 28 Jul 2020 09:32:55 -0400
Subject: [PATCH 4/7] seemed like the idea was incomplete -- left ho components
 v. left off/out ho (#242)

---
 ORGANIZATION.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ORGANIZATION.md b/ORGANIZATION.md
index 8b0655a3..8c72741e 100644
--- a/ORGANIZATION.md
+++ b/ORGANIZATION.md
@@ -2,7 +2,7 @@
 
 Currently, there is no clear, definitive organization to our RoverUI component library. Some effort has been made to do this, but it is currently half-baked. The following outline is a starting point of discussion to decide how components are organized and which pieces we should/should not migrate from tk-ui v1 to RoverUI.
 
-> **Disclaimer**: I've left higher-order components for now. We are still unsure what our best practices and patterns for creating re-usable components is and when to apply them. HOCs will be revisited later.
+> **Disclaimer**: I've left out higher-order components for now. We are still unsure what our best practices and patterns for creating re-usable components is and when to apply them. HOCs will be revisited later.
 
 #### Clarification
 

From 4466e87da66b9cf5dd702215a09dd36aae2c00a4 Mon Sep 17 00:00:00 2001
From: Chris Garcia <pixelbandito@gmail.com>
Date: Mon, 3 Aug 2020 18:51:24 -0500
Subject: [PATCH 5/7] feat: InputTime dropdown menu has default max height of
 10.5 rows (#252)

* feat: InputTime dropdown menu has default max height of 10.5 rows
fixes #249

* docs: Add InputTime stories for disabled and sans-validation cases

* feat: InputTime has dropdownProps for customizing display of dropdown menu

* refactor: InputTime Dropdown CSS refactor with clear variable names.
---
 src/components/Dropdown/Menu/Menu.module.css  |  1 +
 src/components/Dropdown/story.tsx             | 28 +++++++++++++++++-
 src/components/InputTime/AsString.tsx         | 13 +++++++--
 .../InputTime/Dropdown/Dropdown.module.css    |  8 ++++-
 .../InputTime/Dropdown/Dropdown.tsx           | 29 ++++++++++++++-----
 src/components/InputTime/InputTime.module.css |  4 +++
 src/components/InputTime/story.tsx            | 29 +++++++++++++++++++
 7 files changed, 99 insertions(+), 13 deletions(-)

diff --git a/src/components/Dropdown/Menu/Menu.module.css b/src/components/Dropdown/Menu/Menu.module.css
index 1edee9e9..88d9cbbf 100644
--- a/src/components/Dropdown/Menu/Menu.module.css
+++ b/src/components/Dropdown/Menu/Menu.module.css
@@ -11,6 +11,7 @@
   transition: opacity 200ms var(--rvr-easeInOutQuad);
   opacity: 0;
   display: block;
+  overflow-y: auto;
 }
 
 .entering {
diff --git a/src/components/Dropdown/story.tsx b/src/components/Dropdown/story.tsx
index cf4a745d..e384d78b 100644
--- a/src/components/Dropdown/story.tsx
+++ b/src/components/Dropdown/story.tsx
@@ -51,12 +51,15 @@ storiesOf('Star Systems/Dropdown', module)
     'Overview',
     () => (
       <Dropdown
-        className={text('className', '')}
+        className={text('className', 'm-5')}
         disabled={boolean('disabled', false)}
         isOpen={boolean('isOpen', false)}
         onToggle={action('onToggle')}
       >
         {text('children', 'Dropdown children')}
+        <Dropdown.Menu>
+          {text('Dropdown.Menu children', 'Dropdown menu children')}
+        </Dropdown.Menu>
       </Dropdown>
     ),
     {
@@ -104,6 +107,29 @@ storiesOf('Star Systems/Dropdown', module)
               className="inline"
             />
           </div>
+          <div className="m-5">
+            <OpenableDropdown
+              buttonProps={{
+                children: "With `menuProps.style.max-height: '100px'`",
+              }}
+              className="inline"
+              menuProps={{
+                // Too lazy to type out a story example
+                /* eslint-disable @typescript-eslint/no-explicit-any, react/no-array-index-key */
+                children: new Array(20)
+                  .fill(null)
+                  .map((props: any, i: number) => (
+                    <div key={i} {...props}>
+                      Item {i + 1}
+                    </div>
+                  )),
+                /* eslint-enable @typescript-eslint/no-explicit-any, react/no-array-index-key */
+                style: {
+                  maxHeight: '100px',
+                },
+              }}
+            />
+          </div>
           <div className="m-5">
             <OpenableDropdown
               buttonProps={{
diff --git a/src/components/InputTime/AsString.tsx b/src/components/InputTime/AsString.tsx
index e629c4ce..b5e7da9b 100644
--- a/src/components/InputTime/AsString.tsx
+++ b/src/components/InputTime/AsString.tsx
@@ -29,6 +29,7 @@ import styles from './InputTime.module.css';
 
 export interface AsStringProps
   extends Omit<InputProps, 'value' | 'max' | 'min'> {
+  dropdownProps?: Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
   formatTime?: (date: Date) => string;
   fuzzyInputProps?: InputProps;
   max?: string;
@@ -41,6 +42,8 @@ export interface AsStringProps
 const AsString: React.FC<AsStringProps> = ({
   className = '',
   disabled,
+  dropdownProps,
+  fauxDisabled,
   formatTime,
   forwardedRef,
   fuzzyInputProps = {},
@@ -206,6 +209,7 @@ const AsString: React.FC<AsStringProps> = ({
       <Input
         className={styles.Input}
         disabled={disabled}
+        fauxDisabled={fauxDisabled}
         onBlur={handleBlurFuzzyValue}
         onChange={handleChangeFuzzyValue}
         ref={localRef}
@@ -214,7 +218,9 @@ const AsString: React.FC<AsStringProps> = ({
       />
       <div className={styles.addons}>
         <Icon
-          className={styles.icon}
+          className={classNames(styles.icon, {
+            [styles.disabledIcon]: disabled || fauxDisabled,
+          })}
           fill="currentColor"
           height={16}
           name="clock"
@@ -223,8 +229,8 @@ const AsString: React.FC<AsStringProps> = ({
         />
         {showDropdown && (
           <Dropdown
-            className={styles.addons}
-            disabled={disabled}
+            className={styles.dropdown}
+            disabled={disabled || fauxDisabled}
             formatTime={formatTime}
             max={max}
             min={min}
@@ -234,6 +240,7 @@ const AsString: React.FC<AsStringProps> = ({
             stepFrom={stepFrom}
             toggleAriaLabel={toggleAriaLabel}
             value={value}
+            {...dropdownProps}
           />
         )}
       </div>
diff --git a/src/components/InputTime/Dropdown/Dropdown.module.css b/src/components/InputTime/Dropdown/Dropdown.module.css
index dfbe91dd..7cdd2b6e 100644
--- a/src/components/InputTime/Dropdown/Dropdown.module.css
+++ b/src/components/InputTime/Dropdown/Dropdown.module.css
@@ -6,11 +6,17 @@
   margin-right: 0;
 }
 
-.dropdownToggle {
+.toggle {
   display: block;
   padding: 3px;
 }
 
+.menu {
+  --item-height: calc(var(--rvr-space-lg) * 2);
+  --visible-items-before-scrolling: 5.5;
+  max-height: calc(var(--item-height) * var(--visible-items-before-scrolling));
+}
+
 .menuItem {
   text-align: right;
   white-space: nowrap;
diff --git a/src/components/InputTime/Dropdown/Dropdown.tsx b/src/components/InputTime/Dropdown/Dropdown.tsx
index 50c5367a..a446902f 100644
--- a/src/components/InputTime/Dropdown/Dropdown.tsx
+++ b/src/components/InputTime/Dropdown/Dropdown.tsx
@@ -24,12 +24,14 @@ interface DropdownProps {
   disabled?: boolean;
   formatTime?: (date: Date) => string;
   max?: string;
+  menuProps?: Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
   min?: string;
   onSelectMenuItem: Function;
   showDropdown?: 'click' | 'focus';
   step?: number;
   stepFrom?: string;
   toggleAriaLabel?: string;
+  toggleProps?: Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
   value?: string;
   [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
@@ -39,12 +41,15 @@ const Dropdown: React.FC<DropdownProps> = ({
   disabled,
   formatTime,
   max,
+  menuProps,
   min,
   onSelectMenuItem,
+  passedProps,
   showDropdown,
   step: customStep,
   stepFrom,
   toggleAriaLabel = 'Toggle time dropdown',
+  toggleProps,
   value,
 }) => {
   const menuItems = useMemo(() => {
@@ -135,21 +140,29 @@ const Dropdown: React.FC<DropdownProps> = ({
   return (
     <EasyDropdown
       className={classNames(className, styles.Dropdown)}
+      defaultIsOpen={false}
       disabled={disabled}
       isOpen={
-        undefined /* Suppresses typescript lint warning about missing prop */
+        /*
+          Explicit `undefined` suppresses typescript lint warning about missing prop.
+          We want to pass undefined to preserve controlled behavior
+        */
+        undefined
       }
-      onToggle={() => {}}
-      toggleProps={{
-        disabled,
-      }}
-      defaultIsOpen={false}
       menuItems={menuItems}
-      menuProps={{ position: 'bottomLeft' }}
+      menuProps={{
+        className: styles.menu,
+        position: 'bottomLeft',
+        ...menuProps,
+      }}
+      onToggle={() => {}}
+      toggleProps={toggleProps}
+      {...passedProps}
     >
       <Button
         aria-label={toggleAriaLabel}
-        className={styles.dropdownToggle}
+        className={styles.toggle}
+        disabled={disabled}
         level="text"
         size="sm"
       >
diff --git a/src/components/InputTime/InputTime.module.css b/src/components/InputTime/InputTime.module.css
index f56eaa49..816be35a 100644
--- a/src/components/InputTime/InputTime.module.css
+++ b/src/components/InputTime/InputTime.module.css
@@ -27,3 +27,7 @@
 .icon:not(:last-child) {
   margin-right: 0;
 }
+
+.disabledIcon {
+  color: var(--rvr-gray-40);
+}
diff --git a/src/components/InputTime/story.tsx b/src/components/InputTime/story.tsx
index 6810910a..736ff7c1 100644
--- a/src/components/InputTime/story.tsx
+++ b/src/components/InputTime/story.tsx
@@ -169,6 +169,14 @@ storiesOf('Planets/InputTime', module)
 
       return (
         <>
+          <Wrap>
+            <Title>Required props only</Title>
+            <InteractiveInput
+              Component={InputTime}
+              onChange={action('onChange string')}
+              value={getShortTimeString(new Date().getHours(), 0)}
+            />
+          </Wrap>
           <Wrap>
             <Title>With string times for max, min, and value</Title>
             <InteractiveInput
@@ -180,6 +188,18 @@ storiesOf('Planets/InputTime', module)
               value={getShortTimeString(new Date().getHours(), 0)}
             />
           </Wrap>
+          <Wrap>
+            <Title>
+              Override menu max-height with
+              `dropdownProps.menuProps.style.maxHeight`
+            </Title>
+            <InteractiveInput
+              Component={InputTime}
+              dropdownProps={{ menuProps: { style: { maxHeight: '115px' } } }}
+              onChange={action('onChange string')}
+              value={getShortTimeString(new Date().getHours(), 0)}
+            />
+          </Wrap>
           <Wrap>
             <Title>With Date times for max, min, and value</Title>
             <InteractiveInput
@@ -222,6 +242,15 @@ storiesOf('Planets/InputTime', module)
               value={getShortTimeString(new Date().getHours(), 0)}
             />
           </Wrap>
+          <Wrap>
+            <Title>Disabled</Title>
+            <InteractiveInput
+              Component={InputTime}
+              disabled
+              onChange={action('onChange string')}
+              value={getShortTimeString(new Date().getHours(), 0)}
+            />
+          </Wrap>
           <Wrap>
             <Title>Using a `ref` to control focus</Title>
             <InputTime ref={ref} value={new Date().toISOString()} />{' '}

From 18ac5e8a48e14f2f7a76b7210fef939342c2d67a Mon Sep 17 00:00:00 2001
From: Chris Garcia <pixelbandito@gmail.com>
Date: Tue, 4 Aug 2020 10:32:15 -0500
Subject: [PATCH 6/7] fix: Alignment and style fixes for InputTime (#253)

---
 src/components/InputTime/Dropdown/Dropdown.tsx | 6 +++++-
 src/components/InputTime/InputTime.module.css  | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/InputTime/Dropdown/Dropdown.tsx b/src/components/InputTime/Dropdown/Dropdown.tsx
index a446902f..92e5d2d3 100644
--- a/src/components/InputTime/Dropdown/Dropdown.tsx
+++ b/src/components/InputTime/Dropdown/Dropdown.tsx
@@ -166,7 +166,11 @@ const Dropdown: React.FC<DropdownProps> = ({
         level="text"
         size="sm"
       >
-        <Icon fill="currentColor" name="arrow-drop-down" />
+        <Icon
+          fill="currentColor"
+          name="arrow-drop-down"
+          style={{ display: 'block' }}
+        />
       </Button>
     </EasyDropdown>
   );
diff --git a/src/components/InputTime/InputTime.module.css b/src/components/InputTime/InputTime.module.css
index 816be35a..268f4584 100644
--- a/src/components/InputTime/InputTime.module.css
+++ b/src/components/InputTime/InputTime.module.css
@@ -1,15 +1,22 @@
 .InputTime {
+  box-sizing: border-box;
   position: relative;
   display: inline-flex;
   flex-flow: row nowrap;
   padding: 0;
 }
 
+.InputTime * {
+  box-sizing: border-box;
+}
+
 .Input.Input {
   background: transparent;
   border-width: 0;
   box-shadow: none;
   height: calc(var(--rvr-line-height-lg) + 2 * var(--rvr-space-bordered-sm));
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .addons {

From cc346768f8f91490b4d6458ffa059fa43e5eaa45 Mon Sep 17 00:00:00 2001
From: Nicolas Biehler <biehler.nicolas@gmail.com>
Date: Wed, 12 Aug 2020 15:12:39 +0200
Subject: [PATCH 7/7] refactor: make css property direction typing more strict

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

diff --git a/src/components/SideTray/SideTray.tsx b/src/components/SideTray/SideTray.tsx
index f4a60eeb..27a6ea94 100644
--- a/src/components/SideTray/SideTray.tsx
+++ b/src/components/SideTray/SideTray.tsx
@@ -8,10 +8,12 @@ import { parseCssSize } from '../../shared/css-utils';
 // This component's dependencies
 import styles from './SideTray.module.css';
 
+type SideTrayDirection = 't' | 'b' | 'r' | 'l';
+
 interface SideTrayProps {
   children: ReactNode;
   className?: string;
-  direction?: string;
+  direction?: SideTrayDirection;
   height?: string | number;
   onClose: (...args) => void;
   style?: CSSProperties;