feat(component): convert Dropdown/Select to FC and add MultiSelect

bigcommerce · Jan 16, 2020 · 16cadf5 · 16cadf5
1 parent d83d376
commit 16cadf5
Show file tree

Hide file tree

Showing 47 changed files with 2,984 additions and 2,165 deletions.
diff --git a/packages/big-design/package.json b/packages/big-design/package.json
@@ -46,12 +46,12 @@
     "@bigcommerce/big-design-icons": "^0.6.0",
     "@bigcommerce/big-design-theme": "^0.4.0",
     "@types/hoist-non-react-statics": "^3.3.0",
+    "downshift": "^4.0.5",
     "focus-trap": "^5.1.0",
     "hoist-non-react-statics": "^3.3.0",
     "polished": "^3.0.3",
-    "react-popper": "^1.3.6",
-    "react-uid": "^2.2.0",
-    "scroll-into-view-if-needed": "^2.2.20"
+    "react-popper": "^1.3.7",
+    "react-uid": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",

diff --git a/packages/big-design/src/components/Chip/Chip.tsx b/packages/big-design/src/components/Chip/Chip.tsx
@@ -1,44 +1,32 @@
 import { CloseIcon } from '@bigcommerce/big-design-icons';
 import React, { memo } from 'react';
 
-import { MarginProps } from '../../mixins';
 import { Text } from '../Typography';
 
 import { StyledChip, StyledCloseButton } from './styled';
-
-export interface ChipProps extends MarginProps {
-  label: string;
-  onDelete?(): void;
-}
+import { ChipProps } from './types';
 
 export const Chip: React.FC<ChipProps> = memo(({ children, label, onDelete, ...rest }) => {
   const ariaLabel = label ? { 'aria-label': `Remove ${label}` } : {};
 
-  const handleOnDelete = (event: React.SyntheticEvent<HTMLButtonElement, MouseEvent>) => {
-    event.preventDefault();
-
-    if (typeof onDelete === 'function') {
-      onDelete();
-    }
-  };
-
   const renderDeleteButton = () =>
     onDelete && (
       <StyledCloseButton
         {...ariaLabel}
-        variant="subtle"
-        onClick={handleOnDelete}
         iconOnly={<CloseIcon size="medium" title="Delete" />}
-      ></StyledCloseButton>
+        onClick={onDelete}
+        type="button"
+        variant="subtle"
+      />
     );
 
   return (
     <StyledChip
       backgroundColor="secondary30"
+      borderRadius="normal"
+      margin="xxSmall"
       paddingLeft="xSmall"
       paddingRight="xxSmall"
-      margin="xxSmall"
-      borderRadius="normal"
       {...rest}
     >
       <Text margin="none" marginRight="xxSmall">

diff --git a/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
@@ -173,6 +173,7 @@ exports[`renders with close button if onRemove is present 1`] = `
     class="c3 c4"
     role="button"
     tabindex="0"
+    type="button"
   >
     <span
       class="c5"

diff --git a/packages/big-design/src/components/Chip/index.ts b/packages/big-design/src/components/Chip/index.ts
@@ -1,4 +1,4 @@
-import { ChipProps as _ChipProps } from './Chip';
+import { ChipProps as _ChipProps } from './types';
 
 export { Chip } from './Chip';
 export type ChipProps = _ChipProps;
diff --git a/packages/big-design/src/components/Chip/types.ts b/packages/big-design/src/components/Chip/types.ts
@@ -0,0 +1,6 @@
+import { MarginProps } from '../../mixins/margins/margins';
+
+export interface ChipProps extends MarginProps {
+  label: string;
+  onDelete?(): void;
+}