Web: TabsContainer: Added support for adding a border.

packages/components/tabs-container/index.js

@@ -181,7 +181,8 @@ class TabContainer extends Component {
   render() {
     //console.log("Tabs container render");
 
-    const { isDisabled, elements, withBodyScroll, multiple } = this.props;
+    const { isDisabled, elements, withBodyScroll, multiple, withBorder } =
+      this.props;
     const { activeTab, onScrollHide } = this.state;
 
     const content = (
@@ -204,6 +205,7 @@ class TabContainer extends Component {
               selected={isSelected}
               isDisabled={isDisabled}
               multiple={multiple}
+              withBorder={withBorder}
             >
               <Text fontWeight={600} className="title_style" fontSize="13px">
                 {item.title}
@@ -247,12 +249,15 @@ TabContainer.propTypes = {
   withBodyScroll: PropTypes.bool,
   /** Enables multiple select  */
   multiple: PropTypes.bool,
+  /** Indicates that component contain border */
+  withBorder: PropTypes.bool,
 };
 
 TabContainer.defaultProps = {
   selectedItem: 0,
   withBodyScroll: true,
   multiple: false,
+  withBorder: false,
 };
 
 export default TabContainer;

packages/components/tabs-container/styled-tabs-container.js

@@ -27,6 +27,11 @@ NavItem.defaultProps = { theme: Base };
 const Label = styled.div`
   height: ${(props) => props.theme.tabsContainer.label.height};
   border-radius: ${(props) => props.theme.tabsContainer.label.borderRadius};
+  ${(props) =>
+    props.withBorder &&
+    css`
+      border: ${props.theme.tabsContainer.label.border};
+    `}
   min-width: ${(props) => props.theme.tabsContainer.label.minWidth};
   width: ${(props) => props.theme.tabsContainer.label.width};
 

packages/components/themes/base.js

@@ -976,6 +976,7 @@ const Base = {
       backgroundColor: blueLightMid,
       hoverBackgroundColor: grayLight,
       disableBackgroundColor: grayLightMid,
+      border: `1px solid ${grayLightMid}`,
 
       title: {
         margin: "7px 15px 7px 15px",

packages/components/themes/dark.js

@@ -48,7 +48,7 @@ const {
   strongBlue,
   lightGrayishStrongBlue,
   darkRed,
-
+  darkDividersColor,
   darkErrorStatus,
 } = globalColors;
 
@@ -966,7 +966,7 @@ const Dark = {
       backgroundColor: "#d6d6d6",
       hoverBackgroundColor: "#3D3D3D",
       disableBackgroundColor: "#292929",
-
+      border: `1px solid ${darkDividersColor}`,
       title: {
         margin: "7px 15px 7px 15px",
         overflow: "hidden",

packages/components/utils/globalColors.js

@@ -6,6 +6,7 @@ const globalColors = {
   grayLight: "#F8F9F9",
   grayMaxLight: "#eeeeee",
   grayLightMid: "#ECEEF1",
+  darkDividersColor: "#242424",
   graySilver: "#D8D8D8",
   grayMid: "#D0D5DA",
   gray: "#A3A9AE",