Web: TabsContainer: Added support for adding a border.
This commit is contained in:
parent
8cb87da1d5
commit
83e1180c37
@ -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;
|
||||
|
@ -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};
|
||||
|
||||
|
@ -976,6 +976,7 @@ const Base = {
|
||||
backgroundColor: blueLightMid,
|
||||
hoverBackgroundColor: grayLight,
|
||||
disableBackgroundColor: grayLightMid,
|
||||
border: `1px solid ${grayLightMid}`,
|
||||
|
||||
title: {
|
||||
margin: "7px 15px 7px 15px",
|
||||
|
@ -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",
|
||||
|
@ -6,6 +6,7 @@ const globalColors = {
|
||||
grayLight: "#F8F9F9",
|
||||
grayMaxLight: "#eeeeee",
|
||||
grayLightMid: "#ECEEF1",
|
||||
darkDividersColor: "#242424",
|
||||
graySilver: "#D8D8D8",
|
||||
grayMid: "#D0D5DA",
|
||||
gray: "#A3A9AE",
|
||||
|
Loading…
Reference in New Issue
Block a user