From be8582adfe42b6f60cff788eeed0eb70acd9ca80 Mon Sep 17 00:00:00 2001 From: John Kapantzakis Date: Thu, 16 Apr 2026 22:41:49 +0300 Subject: [PATCH 1/3] Add flavours to tab --- src/components/tabs/styled.js | 59 ++++++++++++++++++++++++++++------- src/components/tabs/tab.js | 4 +-- 2 files changed, 49 insertions(+), 14 deletions(-) diff --git a/src/components/tabs/styled.js b/src/components/tabs/styled.js index 343ac272a..3842d87b3 100644 --- a/src/components/tabs/styled.js +++ b/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)` diff --git a/src/components/tabs/tab.js b/src/components/tabs/tab.js index e8b35cb23..82db62d92 100644 --- a/src/components/tabs/tab.js +++ b/src/components/tabs/tab.js @@ -3,8 +3,8 @@ 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 ( { onClick={rest.disabled ? undefined : onClick} {...rest} > - {rest.label} + {typeof rest.label === "function" ? rest.label({ index, isMenuItem, ...rest }) : rest.label} ) } From 04ef1a3eee9f26479ead1c549d370f0a7279cbd6 Mon Sep 17 00:00:00 2001 From: John Kapantzakis Date: Thu, 16 Apr 2026 22:46:04 +0300 Subject: [PATCH 2/3] v5.4.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3bda46171..e38fa67bc 100644 --- a/package.json +++ b/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", From d979ab142b7779aa6a2e0364fdf6b4fb218bd14c Mon Sep 17 00:00:00 2001 From: John Kapantzakis Date: Thu, 16 Apr 2026 22:47:25 +0300 Subject: [PATCH 3/3] Update test snapshot --- .../tabs/__snapshots__/tabs.test.js.snap | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/tabs/__snapshots__/tabs.test.js.snap b/src/components/tabs/__snapshots__/tabs.test.js.snap index 98532096f..aede8b190 100644 --- a/src/components/tabs/__snapshots__/tabs.test.js.snap +++ b/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; +} +