feat: InputTime dropdown menu has default max height of 10.5 rows

fixes #249
cision · Aug 3, 2020 · 3724fa0 · 3724fa0
1 parent 6fcf6f3
commit 3724fa0
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 13 deletions.
diff --git 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
@@ -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
@@ -41,6 +41,7 @@ export interface AsStringProps
 const AsString: React.FC<AsStringProps> = ({
   className = '',
   disabled,
+  fauxDisabled,
   formatTime,
   forwardedRef,
   fuzzyInputProps = {},
@@ -206,6 +207,7 @@ const AsString: React.FC<AsStringProps> = ({
       <Input
         className={styles.Input}
         disabled={disabled}
+        fauxDisabled={fauxDisabled}
         onBlur={handleBlurFuzzyValue}
         onChange={handleChangeFuzzyValue}
         ref={localRef}
@@ -214,7 +216,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 +227,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}

diff --git a/src/components/InputTime/Dropdown/Dropdown.module.css b/src/components/InputTime/Dropdown/Dropdown.module.css
@@ -6,11 +6,15 @@
   margin-right: 0;
 }
 
-.dropdownToggle {
+.toggle {
   display: block;
   padding: 3px;
 }
 
+.menu {
+  max-height: calc(var(--rvr-space-lg) * 2 * 5.5); /* --rvr-space-lg * 2 is the height of one row. */
+}
+
 .menuItem {
   text-align: right;
   white-space: nowrap;

diff --git a/src/components/InputTime/Dropdown/Dropdown.tsx b/src/components/InputTime/Dropdown/Dropdown.tsx
@@ -39,12 +39,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 +138,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
@@ -27,3 +27,7 @@
 .icon:not(:last-child) {
   margin-right: 0;
 }
+
+.disabledIcon {
+  color: var(--rvr-gray-40);
+}