Web:Components:Combobox: add new modern view

packages/components/combobox/index.js

@@ -107,6 +107,7 @@ class ComboBox extends React.Component {
       isExternalLink,
       isPersonal,
       offsetLeft,
+      modernView,
     } = this.props;
     const { isOpen, selectedOption } = this.state;
 
@@ -153,6 +154,7 @@ class ComboBox extends React.Component {
           size={size}
           scaled={scaled}
           comboIcon={comboIcon}
+          modernView={modernView}
           fillIcon={fillIcon}
         />
         {displayType !== "toggle" && (
@@ -266,6 +268,9 @@ ComboBox.propTypes = {
   isPersonal: PropTypes.bool,
 
   offsetLeft: PropTypes.number,
+
+  /**Tell when combo-box should displaying at modern view */
+  modernView: PropTypes.bool,
 };
 
 ComboBox.defaultProps = {
@@ -284,6 +289,7 @@ ComboBox.defaultProps = {
   fixedDirection: false,
   disableItemClick: false,
   isExternalLink: false,
+  modernView: false,
 };
 
 export default ComboBox;

packages/components/combobox/sub-components/combo-button.js

@@ -34,8 +34,11 @@ class ComboButton extends React.Component {
       size,
       comboIcon,
       fillIcon,
+      modernView,
     } = this.props;
 
+    console.log(modernView);
+
     const defaultOption = selectedOption.default;
     const isSelected = selectedOption.key !== 0;
 
@@ -50,6 +53,7 @@ class ComboButton extends React.Component {
         scaled={scaled}
         size={size}
         isSelected={isSelected}
+        modernView={modernView}
         className="combo-button"
       >
         {innerContainer && (
@@ -88,6 +92,7 @@ class ComboButton extends React.Component {
           needDisplay={withOptions || withAdvancedOptions}
           noBorder={noBorder}
           isOpen={isOpen}
+          modernView={modernView}
           className="combo-buttons_arrow-icon"
         >
           {(withOptions || withAdvancedOptions) &&
@@ -129,6 +134,7 @@ ComboButton.propTypes = {
   onClick: PropTypes.func,
   comboIcon: PropTypes.string,
   fillIcon: PropTypes.bool,
+  modernView: PropTypes.bool,
 };
 
 ComboButton.defaultProps = {
@@ -140,6 +146,7 @@ ComboButton.defaultProps = {
   isOpen: false,
   size: "content",
   scaled: false,
+  modernView: false,
 };
 
 export default ComboButton;

packages/components/combobox/sub-components/styled-combobutton.js

@@ -1,7 +1,24 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Base from "../../themes/base";
 import NoUserSelect from "../../utils/commonStyles";
 
+const modernViewButton = css`
+  height: ${(props) => props.theme.comboBox.button.heightModernView};
+  background: ${(props) =>
+    props.isOpen
+      ? props.theme.comboBox.button.activeBackgroundModernView
+      : props.theme.comboBox.button.backgroundModernView};
+
+  border: none;
+`;
+
+const hoverModernViewButton = css`
+  background: ${(props) =>
+    props.isOpen
+      ? props.theme.comboBox.button.activeBackgroundModernView
+      : props.theme.comboBox.button.hoverBackgroundModernView} !important;
+`;
+
 const StyledComboButton = styled.div`
   display: flex;
   align-items: center;
@@ -60,7 +77,11 @@ const StyledComboButton = styled.div`
     height: 32px;
   `}
 
+  ${(props) => props.modernView && modernViewButton}
+
   :hover {
+    ${(props) => props.modernView && hoverModernViewButton}
+
     border-color: ${(props) =>
       props.isOpen
         ? props.theme.comboBox.button.hoverBorderColorOpen

packages/components/themes/base.js

@@ -1550,12 +1550,15 @@ const Base = {
     button: {
       height: "18px",
       heightWithBorder: "30px",
+      heightModernView: "28px",
+
       paddingLeft: "8px",
 
       color: black,
       disabledColor: grayMid,
       background: white,
       backgroundWithBorder: "none",
+      backgroundModernView: "none",
 
       border: `1px solid ${grayMid}`,
       borderRadius: "3px",
@@ -1567,6 +1570,9 @@ const Base = {
       hoverBorderColor: gray,
       hoverBorderColorOpen: blueMain,
       hoverDisabledBorderColor: grayLightMid,
+      hoverBackgroundModernView: "#F8F9F9",
+
+      activeBackgroundModernView: "#F3F4F4",
     },
 
     label: {

packages/components/themes/dark.js

@@ -1553,6 +1553,7 @@ const Dark = {
       disabledColor: "#858585",
       background: "#292929",
       backgroundWithBorder: "none",
+      backgroundModernView: "none",
 
       border: `1px solid #474747`,
       borderRadius: "3px",
@@ -1566,6 +1567,9 @@ const Dark = {
       hoverBorderColor: "#858585",
       hoverBorderColorOpen: grayMaxLight,
       hoverDisabledBorderColor: "#474747",
+      hoverBackgroundModernView: "#474747",
+
+      activeBackgroundModernView: "#858585",
     },
 
     label: {