Add Label to Searchbar and improve Menu component (#50)

gudangada · Aug 2, 2022 · c8ffa35 · c8ffa35
1 parent 6c5c99e
commit c8ffa35
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gudangada/design-system",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "description": "Gada Design System",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

diff --git a/src/components/core/Searchbar/Searchbar.stories.tsx b/src/components/core/Searchbar/Searchbar.stories.tsx
@@ -24,6 +24,7 @@ const Template: Story<iSearchbarProps> = (props) => {
   return (
     <SearchbarUI
       {...props}
+      label="Search label"
       value={value}
       onChangeValue={handleChange}
       onClickCancel={handleReset}

diff --git a/src/components/core/Searchbar/Searchbar.tsx b/src/components/core/Searchbar/Searchbar.tsx
@@ -1,6 +1,8 @@
 import { Box, FormControl, IconButton, InputAdornment } from "@mui/material";
 import * as React from "react";
 import { CrossCircleIcon, SearchIcon } from "../../../assets";
+import { Label } from "../../inputs";
+import { Col } from "../Col";
 import { StyledOutlinedInput } from "./styles";
 import { iSearchbarProps } from "./types";
 
@@ -11,6 +13,7 @@ const Searchbar: React.VFC<iSearchbarProps> = (props) => {
     onClickCancel,
     onChangeValue,
     size = "default",
+    label,
     ...rest
   } = props;
 
@@ -24,32 +27,35 @@ const Searchbar: React.VFC<iSearchbarProps> = (props) => {
   };
 
   return (
-    <FormControl variant="outlined" {...formControlProps}>
-      <StyledOutlinedInput
-        {...rest}
-        size={size === "default" ? undefined : "small"}
-        onChange={(event) => onChangeValue(event.target.value)}
-        startAdornment={
-          <InputAdornment position="start">
-            <SearchIcon />
-          </InputAdornment>
-        }
-        inputRef={inputRef}
-        endAdornment={
-          withEndAdornment && (
-            <InputAdornment position="end" style={{ paddingRight: 0 }}>
-              {props.value ? (
-                <IconButton onClick={handleClickCancel}>
-                  <CrossCircleIcon />
-                </IconButton>
-              ) : (
-                <Box width={48} />
-              )}
+    <Col spacing={8}>
+      {label && <Label>{label}</Label>}
+      <FormControl variant="outlined" {...formControlProps}>
+        <StyledOutlinedInput
+          {...rest}
+          size={size === "default" ? undefined : "small"}
+          onChange={(event) => onChangeValue(event.target.value)}
+          startAdornment={
+            <InputAdornment position="start">
+              <SearchIcon />
             </InputAdornment>
-          )
-        }
-      />
-    </FormControl>
+          }
+          inputRef={inputRef}
+          endAdornment={
+            withEndAdornment && (
+              <InputAdornment position="end" style={{ paddingRight: 0 }}>
+                {props.value ? (
+                  <IconButton onClick={handleClickCancel}>
+                    <CrossCircleIcon />
+                  </IconButton>
+                ) : (
+                  <Box width={48} />
+                )}
+              </InputAdornment>
+            )
+          }
+        />
+      </FormControl>
+    </Col>
   );
 };
 

diff --git a/src/components/inputs/AutoComplete/styles.ts b/src/components/inputs/AutoComplete/styles.ts
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { outlinedInputClasses } from "@mui/material";
-import { Col } from "../../core";
+import { Col } from "../../core/Col";
 
 export const StyledAutoCompleteContainer = styled(Col)<{ isError?: boolean }>(
   ({ theme: { palette }, isError }) => ({

diff --git a/src/components/navigation/Menu/Menu.tsx b/src/components/navigation/Menu/Menu.tsx
@@ -3,8 +3,9 @@ import { Menu as MuiMenu } from "@mui/material";
 import { iMenuProps } from "./types";
 import MenuItem from "./MenuItem";
 
-const Menu: React.VFC<iMenuProps> = ({
+const Menu: React.FC<iMenuProps> = ({
   menuItems,
+  children,
   handleClose,
   ...menuProps
 }) => {
@@ -18,12 +19,16 @@ const Menu: React.VFC<iMenuProps> = ({
         vertical: "top",
         horizontal: "center",
       }}
+      BackdropProps={{ style: { backgroundColor: "rgba(0,0,0,0.001)" } }}
+      PaperProps={{ elevation: 1 }}
       {...menuProps}
       onClose={handleClose}
     >
-      {menuItems.map((menuItem) => {
-        return <MenuItem key={menuItem.label} {...menuItem} />;
-      })}
+      {menuItems
+        ? menuItems.map((menuItem) => {
+            return <MenuItem key={menuItem.label} {...menuItem} />;
+          })
+        : children}
     </MuiMenu>
   );
 };

diff --git a/src/components/navigation/Menu/types.ts b/src/components/navigation/Menu/types.ts
@@ -10,6 +10,6 @@ export interface iMenuItemProps {
 }
 
 export interface iMenuProps extends MenuProps {
-  menuItems: iMenuItemProps[];
+  menuItems?: iMenuItemProps[];
   handleClose: VoidFunction;
 }