add badge comboBox & comboBox-sb fix

packages/components/combobox/combobox.stories.js

@@ -8,6 +8,18 @@ import CatalogEmployeeReactSvgUrl from "PUBLIC_DIR/images/catalog.employee.react
 import CatalogGuestReactSvgUrl from "PUBLIC_DIR/images/catalog.guest.react.svg?url";
 import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url";
 
+export default {
+  title: "Components/ComboBox",
+  component: ComboBox,
+  parameters: {
+    docs: {
+      description: {
+        component: "ComboBox is used for a action on a page.",
+      },
+    },
+  },
+};
+
 const comboOptions = [
   {
     key: 1,
@@ -74,6 +86,21 @@ const Wrapper = (props) => (
 
 const childrenItems = children.length > 0 ? children : null;
 
+const BadgeTypeTemplate = (args) => (
+  <Wrapper>
+    <ComboBox
+      {...args}
+      options={[
+        { key: 1, label: "Option 1" },
+        { key: 2, label: "Option 2" },
+      ]}
+      selectedOption={{
+        key: 0,
+        label: "Select",
+      }}
+    />
+  </Wrapper>
+);
 const Template = (args) => (
   <Wrapper>
     <ComboBox
@@ -147,3 +174,9 @@ advancedOption.args = {
   directionX: "right",
   directionY: "bottom",
 };
+
+export const badgeType = BadgeTypeTemplate.bind({});
+badgeType.args = {
+  scaled: false,
+  type: "badge",
+};

packages/components/combobox/index.js

@@ -3,6 +3,8 @@ import React from "react";
 import equal from "fast-deep-equal/react";
 
 import ComboButton from "./sub-components/combo-button";
+import Badge from "@docspace/components/badge";
+
 import DropDown from "../drop-down";
 import DropDownItem from "../drop-down-item";
 import StyledComboBox from "./styled-combobox";
@@ -101,6 +103,7 @@ class ComboBox extends React.Component {
       directionY,
       scaled,
       size,
+      type,
       options,
       advancedOptions,
       isDisabled,
@@ -125,6 +128,7 @@ class ComboBox extends React.Component {
       withBackdrop,
       isAside,
       withBackground,
+      backgroundColor,
       advancedOptionsCount,
       isMobileView,
       withoutPadding,
@@ -132,7 +136,7 @@ class ComboBox extends React.Component {
       isNoFixedHeightOptions,
       hideMobileView,
     } = this.props;
-
+    console.log(this.props);
     const { tabIndex, ...props } = this.props;
 
     const { isOpen, selectedOption } = this.state;
@@ -188,24 +192,29 @@ class ComboBox extends React.Component {
         withoutPadding={withoutPadding}
         {...props}
       >
-        <ComboButton
-          noBorder={noBorder}
-          isDisabled={isDisabled}
-          selectedOption={selectedOption}
-          withOptions={optionsLength > 0}
-          optionsLength={optionsLength}
-          withAdvancedOptions={withAdvancedOptions}
-          innerContainer={children}
-          innerContainerClassName="optionalBlock"
-          isOpen={isOpen}
-          size={size}
-          scaled={scaled}
-          comboIcon={comboIcon}
-          modernView={modernView}
-          fillIcon={fillIcon}
-          tabIndex={tabIndex}
-          isLoading={isLoading}
-        />
+        {type === "badge" ? (
+          <Badge label={selectedOption.label} noHover={true} />
+        ) : (
+          <ComboButton
+            noBorder={noBorder}
+            isDisabled={isDisabled}
+            selectedOption={selectedOption}
+            withOptions={optionsLength > 0}
+            optionsLength={optionsLength}
+            withAdvancedOptions={withAdvancedOptions}
+            innerContainer={children}
+            innerContainerClassName="optionalBlock"
+            isOpen={isOpen}
+            size={size}
+            scaled={scaled}
+            comboIcon={comboIcon}
+            modernView={modernView}
+            fillIcon={fillIcon}
+            tabIndex={tabIndex}
+            isLoading={isLoading}
+          />
+        )}
+
         {displayType !== "toggle" && (
           <DropDown
             id={this.props.dropDownId}
@@ -250,6 +259,8 @@ class ComboBox extends React.Component {
                       textOverflow={textOverflow}
                       key={option.key}
                       disabled={disabled}
+                      backgroundColor={backgroundColor}
+                      type={type}
                       onClick={this.optionClick.bind(this, option)}
                       fillIcon={fillIcon}
                       isModern={noBorder}

packages/components/drop-down-item/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { ReactSVG } from "react-svg";
 
+import Badge from "@docspace/components/badge";
 import RightArrowReactSvgUrl from "PUBLIC_DIR/images/right.arrow.react.svg?url";
 
 import {
@@ -16,10 +17,12 @@ const DropDownItem = (props) => {
   const {
     isSeparator,
     label,
+    backgroundColor,
     icon,
     children,
     disabled,
     className,
+    type,
     theme,
     fillIcon,
     isSubMenu,
@@ -46,6 +49,8 @@ const DropDownItem = (props) => {
     onClickAction(event);
   };
 
+  console.log("isSubMenu: ", isSubMenu, "withToggle: ", isSubMenu);
+
   return (
     <StyledDropdownItem
       {...rest}
@@ -73,7 +78,15 @@ const DropDownItem = (props) => {
         </IconWrapper>
       )}
 
-      {isSeparator ? "\u00A0" : label ? label : children && children}
+      {type === "badge" ? (
+        <Badge label={label} noHover={true} backgroundColor={backgroundColor} />
+      ) : isSeparator ? (
+        "\u00A0"
+      ) : label ? (
+        label
+      ) : (
+        children && children
+      )}
 
       {isSubMenu && (
         <IconWrapper className="submenu-arrow">
@@ -83,7 +96,6 @@ const DropDownItem = (props) => {
           />
         </IconWrapper>
       )}
-
       {withToggle && (
         <WrapperToggle onClick={stopPropagation}>
           <ToggleButton isChecked={checked} onChange={onChange} noAnimation />