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.
cision · Aug 3, 2020 · 719ad61 · 719ad61
1 parent 6fcf6f3
commit 719ad61
Show file tree

Hide file tree

Showing 7 changed files with 99 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()} />{' '}