@thecb/components 6.0.0-beta.11 → 6.0.0-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0-beta.11",
+  "version": "6.0.0-beta.14",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/dropdown/Dropdown.js

@@ -39,6 +39,10 @@ const DropdownContentWrapper = styled.div`
   &:focus {
     outline: none;
   }
+
+  ul {
+    padding-left: 0;
+  }
 `;
 
 const DropdownItemWrapper = styled.li`
@@ -51,6 +55,7 @@ const DropdownItemWrapper = styled.li`
   padding: 1rem;
   box-sizing: border-box;
   width: 100%;
+  list-style: none;
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 
   &:hover {
@@ -230,8 +235,29 @@ const Dropdown = ({
   }, [filteredOptions]);
 
   return (
-    <Fragment>
-      <Stack direction="row" bottomItem={2} extraStyles={`position: relative;`}>
+    <Box
+      padding="0"
+      background={isOpen ? themeValues.hoverColor : WHITE}
+      borderSize="1px"
+      borderColor={
+        isError
+          ? ERROR_COLOR
+          : isOpen
+          ? themeValues.selectedColor
+          : GREY_CHATEAU
+      }
+      borderRadius="2px"
+      borderWidthOverride="0px 1px 0px 0px"
+      extraStyles={`position: relative;`}
+      minWidth="100%"
+      onClick={() => {
+        if (!isOpen) {
+          onClick();
+        }
+      }}
+      width="100%"
+    >
+      <Stack direction="row" bottomItem={2}>
         <Box
           as="input"
           aria-multiline="false"
@@ -253,6 +279,7 @@ const Dropdown = ({
               ? themeValues.selectedColor
               : GREY_CHATEAU
           }
+          borderWidthOverride="1px 0px 1px 1px"
           extraStyles={
             disabled &&
             `color: #6e727e;
@@ -261,10 +288,15 @@ const Dropdown = ({
           }
           hoverStyles={`background-color: ${themeValues.hoverColor};`}
           isOpen={isOpen}
+          minHeight="48px"
+          minWidth="85%"
           name={autocompleteValue}
           onKeyDown={onKeyDown}
-          onClick={onClick}
-          onFocus={onClick}
+          onFocus={() => {
+            if (!isOpen) {
+              onClick();
+            }
+          }}
           onChange={e => {
             console.log("input change event", e.target);
             console.log("input change event value", e.target.value);
@@ -276,9 +308,9 @@ const Dropdown = ({
           themeValues={themeValues}
           title={hasTitles ? getSelection() : null}
           type="text"
-          tabIndex={-1}
+          tabIndex={0}
           value={inputValue}
-          width="100%"
+          width="85%"
           dataQa={placeholder}
         />
         <IconWrapper open={isOpen}>
@@ -361,7 +393,7 @@ const Dropdown = ({
           <Fragment />
         )}
       </Fragment>
-    </Fragment>
+    </Box>
   );
 };
 

package/src/components/atoms/layouts/Box.js

@@ -80,7 +80,7 @@ const Box = ({
     onTouchEnd={onTouchEnd}
     {...rest}
   >
-    {safeChildren(children, <Fragment />)}
+    {children && safeChildren(children, <Fragment />)}
   </BoxWrapper>
 );