fix: pr feedback

bigcommerce · Dec 9, 2020 · 90e1459 · 90e1459
1 parent acb2558
commit 90e1459
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 42 deletions.
diff --git a/packages/big-design/src/components/Dropdown/Dropdown.tsx b/packages/big-design/src/components/Dropdown/Dropdown.tsx
@@ -3,13 +3,11 @@ import React, { cloneElement, isValidElement, memo, useCallback, useMemo, useRef
 import { usePopper } from 'react-popper';
 
 import { useUniqueId } from '../../hooks';
+import { Box } from '../Box';
 import { List } from '../List';
-import { StyledMenuContainer } from '../List/styled';
 
 import { StyledBox } from './styled';
-import { DropdownItem, DropdownLinkItem, DropdownProps } from './types';
-
-import { DropdownItemGroup } from '.';
+import { DropdownItem, DropdownItemGroup, DropdownLinkItem, DropdownProps } from './types';
 
 export const Dropdown = memo(
   ({
@@ -88,7 +86,7 @@ export const Dropdown = memo(
     const renderToggle = useMemo(() => {
       return (
         isValidElement(toggle) &&
-        cloneElement<React.HTMLAttributes<any> & React.RefAttributes<any>>(toggle as any, {
+        cloneElement(toggle, {
           ...getToggleButtonProps({
             'aria-expanded': isOpen, // Because of memoization, we need to manually set this option
             disabled,
@@ -101,7 +99,7 @@ export const Dropdown = memo(
     return (
       <StyledBox>
         {renderToggle}
-        <StyledMenuContainer ref={popperRef} style={styles.popper} {...attributes.poppper}>
+        <Box ref={popperRef} style={styles.popper} {...attributes.poppper} zIndex="popover">
           <List
             {...props}
             autoWidth={autoWidth}
@@ -114,7 +112,7 @@ export const Dropdown = memo(
             maxHeight={maxHeight}
             update={update}
           />
-        </StyledMenuContainer>
+        </Box>
       </StyledBox>
     );
   },

diff --git a/packages/big-design/src/components/List/Item/Item.tsx b/packages/big-design/src/components/List/Item/Item.tsx
@@ -31,7 +31,7 @@ interface PrivateProps {
   forwardedRef: Ref<HTMLLIElement>;
 }
 
-type Items = DropdownItem | DropdownLinkItem | SelectOption<unknown> | SelectAction;
+type Items<T> = DropdownItem | DropdownLinkItem | SelectOption<T> | SelectAction;
 
 const StyleableListItem = typedMemo(
   <T extends unknown>({
@@ -116,7 +116,7 @@ export const ListItem = memo(
   )),
 );
 
-const getContent = (item: Items, isHighlighted: boolean) => {
+const getContent = (item: Items<unknown>, isHighlighted: boolean) => {
   const { content, disabled, description, icon } = item;
 
   const baseContent = (
@@ -147,7 +147,7 @@ const getContent = (item: Items, isHighlighted: boolean) => {
   return disabled && 'tooltip' in item && item.tooltip ? wrapInTooltip(item.tooltip, finalContent) : finalContent;
 };
 
-const renderIcon = (item: Items, isHighlighted: boolean) => {
+const renderIcon = (item: Items<unknown>, isHighlighted: boolean) => {
   return (
     isValidElement(item.icon) &&
     cloneElement(item.icon, {
@@ -157,7 +157,7 @@ const renderIcon = (item: Items, isHighlighted: boolean) => {
   );
 };
 
-const iconColor = (item: Items, isHighlighted: boolean) => {
+const iconColor = (item: Items<unknown>, isHighlighted: boolean) => {
   if (item.disabled) {
     return 'secondary40';
   }

diff --git a/packages/big-design/src/components/List/List.tsx b/packages/big-design/src/components/List/List.tsx
@@ -217,6 +217,7 @@ const StyleableList = typedMemo(
 );
 
 export const List = memo(
+  // Using unknown because memo looses the generic type
   forwardRef<HTMLUListElement, ListProps<unknown>>((props, ref) => <StyleableList {...props} forwardedRef={ref} />),
 );
 

diff --git a/packages/big-design/src/components/List/styled.tsx b/packages/big-design/src/components/List/styled.tsx
@@ -16,9 +16,4 @@ export const StyledList = styled.ul<Partial<ListProps<unknown>>>`
   z-index: ${({ theme }) => theme.zIndex.popover};
 `;
 
-export const StyledMenuContainer = styled.div`
-  z-index: ${({ theme }) => theme.zIndex.popover};
-`;
-
 StyledList.defaultProps = { theme: defaultTheme };
-StyledMenuContainer.defaultProps = { theme: defaultTheme };
diff --git a/packages/big-design/src/components/MultiSelect/MultiSelect.tsx b/packages/big-design/src/components/MultiSelect/MultiSelect.tsx
@@ -14,10 +14,10 @@ import { usePopper } from 'react-popper';
 
 import { useUniqueId } from '../../hooks';
 import { typedMemo, warning } from '../../utils';
+import { Box } from '../Box';
 import { FormControlLabel } from '../Form';
 import { Input } from '../Input';
 import { List } from '../List';
-import { StyledMenuContainer } from '../List/styled';
 import { SelectAction, SelectOption, SelectOptionGroup } from '../Select';
 import { DropdownButton, StyledDropdownIcon, StyledInputContainer } from '../Select/styled';
 
@@ -380,7 +380,7 @@ export const MultiSelect = typedMemo(
       <div>
         {renderLabel}
         <div {...getComboboxProps()}>{renderInput}</div>
-        <StyledMenuContainer ref={popperRef} style={styles.popper} {...attributes.poppper}>
+        <Box ref={popperRef} style={styles.popper} {...attributes.poppper} zIndex="popover">
           <List
             action={action}
             addItem={addSelectedItem}
@@ -396,7 +396,7 @@ export const MultiSelect = typedMemo(
             selectedItems={selectedOptions}
             update={update}
           />
-        </StyledMenuContainer>
+        </Box>
       </div>
     );
   },

diff --git a/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
@@ -17,6 +17,11 @@ exports[`render pagination component 1`] = `
   box-sizing: border-box;
 }
 
+.c8 {
+  box-sizing: border-box;
+  z-index: 1060;
+}
+
 .c1 {
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
@@ -73,10 +78,6 @@ exports[`render pagination component 1`] = `
   z-index: 1060;
 }
 
-.c8 {
-  z-index: 1060;
-}
-
 .c3 {
   position: relative;
 }
@@ -436,6 +437,11 @@ exports[`render pagination component with invalid page info 1`] = `
   box-sizing: border-box;
 }
 
+.c8 {
+  box-sizing: border-box;
+  z-index: 1060;
+}
+
 .c1 {
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
@@ -492,10 +498,6 @@ exports[`render pagination component with invalid page info 1`] = `
   z-index: 1060;
 }
 
-.c8 {
-  z-index: 1060;
-}
-
 .c3 {
   position: relative;
 }
@@ -855,6 +857,11 @@ exports[`render pagination component with invalid range info 1`] = `
   box-sizing: border-box;
 }
 
+.c8 {
+  box-sizing: border-box;
+  z-index: 1060;
+}
+
 .c1 {
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
@@ -911,10 +918,6 @@ exports[`render pagination component with invalid range info 1`] = `
   z-index: 1060;
 }
 
-.c8 {
-  z-index: 1060;
-}
-
 .c3 {
   position: relative;
 }
@@ -1275,6 +1278,11 @@ exports[`render pagination component with no items 1`] = `
   box-sizing: border-box;
 }
 
+.c8 {
+  box-sizing: border-box;
+  z-index: 1060;
+}
+
 .c1 {
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
@@ -1331,10 +1339,6 @@ exports[`render pagination component with no items 1`] = `
   z-index: 1060;
 }
 
-.c8 {
-  z-index: 1060;
-}
-
 .c3 {
   position: relative;
 }

diff --git a/packages/big-design/src/components/Select/Select.tsx b/packages/big-design/src/components/Select/Select.tsx
@@ -14,10 +14,10 @@ import React, {
 import { usePopper } from 'react-popper';
 
 import { typedMemo, warning } from '../../utils';
+import { Box } from '../Box';
 import { FormControlLabel } from '../Form';
 import { Input } from '../Input';
 import { List } from '../List';
-import { StyledMenuContainer } from '../List/styled';
 import { SelectOption, SelectOptionGroup, SelectProps } from '../Select';
 import { DropdownButton, StyledDropdownIcon, StyledInputContainer } from '../Select/styled';
 import { SelectAction } from '../Select/types';
@@ -295,7 +295,7 @@ export const Select = typedMemo(
       <div>
         {renderLabel}
         <div {...getComboboxProps()}>{renderInput}</div>
-        <StyledMenuContainer ref={popperRef} style={styles.popper} {...attributes.poppper}>
+        <Box ref={popperRef} style={styles.popper} {...attributes.poppper} zIndex="popover">
           <List
             action={action}
             autoWidth={autoWidth}
@@ -309,7 +309,7 @@ export const Select = typedMemo(
             selectedItem={selectedItem && 'value' in selectedItem ? selectedItem : null}
             update={update}
           />
-        </StyledMenuContainer>
+        </Box>
       </div>
     );
   },

diff --git a/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap
@@ -17,6 +17,11 @@ exports[`renders a pagination component 1`] = `
   box-sizing: border-box;
 }
 
+.c11 {
+  box-sizing: border-box;
+  z-index: 1060;
+}
+
 .c4 {
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
@@ -92,10 +97,6 @@ exports[`renders a pagination component 1`] = `
   z-index: 1060;
 }
 
-.c11 {
-  z-index: 1060;
-}
-
 .c6 {
   position: relative;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -217,6 +217,7 @@ const StyleableList = typedMemo( @@
     );
     export const List = memo(
+      // Using unknown because memo looses the generic type
       forwardRef<HTMLUListElement, ListProps<unknown>>((props, ref) => <StyleableList {...props} forwardedRef={ref} />),
     );
@@ Expand Down @@