v5.4.5 (#618)

* Add flavours to tab

* v5.4.5

* Update test snapshot

Author: kapantzak

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.4.4",
+  "version": "5.4.5",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/tabs/__snapshots__/tabs.test.js.snap

@@ -31,48 +31,52 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
 
 .c3 {
   white-space: nowrap;
-  border-bottom: 1px solid #42B861;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
   box-sizing: border-box;
   border-radius: 2px 2px 0 0;
   max-width: 208px;
   height: 32px;
   cursor: pointer;
   opacity: 1;
-  background: #F1FFF7;
   pointer-events: auto;
   margin-bottom: -1px;
-}
-
-.c3:hover {
-  border-bottom: 1px solid #00AB44;
+  border-bottom-color: #42B861;
+  background: #F1FFF7;
 }
 
 .c3>span {
   color: #00AB44;
 }
 
+.c3:hover {
+  border-bottom-color: #00AB44;
+}
+
 .c4 {
   white-space: nowrap;
-  border-bottom: 1px solid #E4E8E8;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
   box-sizing: border-box;
   border-radius: 2px 2px 0 0;
   max-width: 208px;
   height: 32px;
   cursor: pointer;
   opacity: 1;
-  background: #F6F7F7;
   pointer-events: auto;
   margin-bottom: -1px;
-}
-
-.c4:hover {
-  border-bottom: 1px solid #00AB44;
+  border-bottom-color: #E4E8E8;
+  background: #F6F7F7;
 }
 
 .c4>span {
   color: #708585;
 }
 
+.c4:hover {
+  border-bottom-color: #00AB44;
+}
+
 <div
   class="c0"
 >

src/components/tabs/styled.js

@@ -25,15 +25,57 @@ export const StyledTabs = styled(Flex).attrs(props => ({
   ...props,
 }))``
 
+const colorsByFlavour = {
+  success: { background: "menuItemSelected", borderColor: "accent", color: "menuItem" },
+  warning: { background: "warningSemi", borderColor: "warning", color: "menuItem" },
+  error: { background: "errorSemi", borderColor: "error", color: "menuItem" },
+  default: { background: "modalBackground", borderColor: "border", color: "menuItem" },
+}
+
+const activeColorsByFlavour = {
+  success: { ...colorsByFlavour.success, color: "primary" },
+  warning: { ...colorsByFlavour.warning, color: "warning" },
+  error: { ...colorsByFlavour.error, color: "error" },
+  default: { background: "menuItemSelected", borderColor: "accent", color: "primary" },
+}
+
+const hoverColorsByFlavour = {
+  ...colorsByFlavour,
+  default: { ...colorsByFlavour.default, borderColor: "primary" },
+}
+
+const colors = ({ theme, active, green, flavour }) => {
+  const dictionary = active ? activeColorsByFlavour : colorsByFlavour
+  const { background, borderColor, color } = dictionary[flavour] || dictionary.default
+
+  const styles = [
+    `border-bottom-color: ${getColor(borderColor)({ theme })};`,
+    `background: ${getColor(background)({ theme })};`,
+    `& > span { color: ${getColor(color)({ theme })}; }`,
+  ]
+
+  if (!active && green) {
+    styles.push(`border-bottom-color: ${getColor(["transparent", "full"])({ theme })};`)
+  }
+
+  const hoverStyles = [
+    `&:hover {
+    border-bottom-color: ${getColor((hoverColorsByFlavour[flavour] || hoverColorsByFlavour.default)?.borderColor)({ theme })};
+  }`,
+  ]
+
+  return [...styles, ...hoverStyles].join("")
+}
+
 export const StyledTab = styled(Flex).attrs(props => ({
   small: true,
   padding: [0, 6],
   ...props,
 }))`
   white-space: nowrap;
-  border-bottom: 1px solid
-    ${({ active, green }) =>
-      active ? getColor("accent") : green ? getColor(["transparent", "full"]) : getColor("border")};
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+
   box-sizing: border-box;
 
   border-radius: 2px 2px 0 0;
@@ -44,19 +86,12 @@ export const StyledTab = styled(Flex).attrs(props => ({
 
   cursor: pointer;
   opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};
-  background: ${({ active }) =>
-    active ? getColor("menuItemSelected") : getColor("modalBackground")};
+
   pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
 
   margin-bottom: -1px;
 
-  &:hover {
-    border-bottom: 1px solid ${getColor("primary")};
-  }
-
-  & > span {
-    color: ${({ active }) => (active ? getColor("primary") : getColor("menuItem"))};
-  }
+  ${colors}
 `
 
 export const StyledTabMenu = styled(Flex)`

src/components/tabs/tab.js

@@ -3,16 +3,16 @@ import { StyledTab, StyledTabMenu } from "./styled"
 
 export const Tab = ({ index, isMenuItem, onChange, ...rest }) => {
   const onClick = useCallback(e => onChange && onChange(index || 0, e), [index, onChange])
-
   const TabComponent = isMenuItem ? StyledTabMenu : StyledTab
+
   return (
     <TabComponent
       justifyContent="center"
       alignItems="center"
       onClick={rest.disabled ? undefined : onClick}
       {...rest}
     >
-      {rest.label}
+      {typeof rest.label === "function" ? rest.label({ index, isMenuItem, ...rest }) : rest.label}
     </TabComponent>
   )
 }