fix(TDOPS-4964/components): SidePanel colors (#4847)

* fix(TDOPS-4964/components): SidePanel colors * fix: add focus and active styles * fix: linter errors * fix: undo fork sass changes * fix: remove package update * fix: components build * fix: linter errors * fix: test and color tokens in use * fix: test and color tokens in use * fix: SidePanel test in containers
Talend · Aug 22, 2023 · a5348a4 · a5348a4
1 parent 619d227
commit a5348a4
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 19 deletions.
diff --git a/.changeset/real-needles-study.md b/.changeset/real-needles-study.md
@@ -0,0 +1,6 @@
+---
+'@talend/react-components': patch
+'@talend/bootstrap-theme': patch
+---
+
+TDOPS-4964 - Fix SidePanel colors
diff --git a/packages/components/src/ActionList/ActionList.component.js b/packages/components/src/ActionList/ActionList.component.js
@@ -89,7 +89,7 @@ function ActionList(props) {
 				'tc-action-list',
 				className,
 				{
-					'nav-inverse': props.reverse,
+					'nav-inverse': !props.reverse,
 				},
 			)}
 		>

diff --git a/packages/components/src/ActionList/ActionList.module.scss b/packages/components/src/ActionList/ActionList.module.scss
@@ -28,7 +28,7 @@ $tc-action-list-item-border-size: 0.2rem !default;
 				text-overflow: inherit;
 				text-transform: none;
 
-				> span {
+				>span {
 					margin-left: $padding-normal;
 					vertical-align: middle;
 					transition: 0.1s opacity ease-out;

diff --git a/packages/components/src/SidePanel/SidePanel.component.js b/packages/components/src/SidePanel/SidePanel.component.js
@@ -73,15 +73,15 @@ function SidePanel({
 			const actionList = ref.current.querySelector('.tc-action-list');
 			setWidth(actionList.offsetWidth);
 		}
-	}, [ref, docked]);
+	}, [ref, docked, minimised, large]);
 
 	useEffect(() => {
 		// animation is disabled at first to avoid the panel to be animated at first render
 		// when the width is initialized, then we enable animation
 		if (!animation && width) {
 			setAnimation(true);
 		}
-	}, [width]);
+	}, [animation, width]);
 
 	const onToggle = (...args) => {
 		if (onToggleDock) {
@@ -101,9 +101,7 @@ function SidePanel({
 		[theme.reverse]: reverse,
 		[theme.animate]: animation,
 	});
-	const listCSS = classNames(theme['tc-side-panel-list'], 'tc-side-panel-list', {
-		'nav-inverse': !reverse,
-	});
+	const listCSS = classNames(theme['tc-side-panel-list'], 'tc-side-panel-list');
 
 	const expandLabel = t('SIDEPANEL_EXPAND', { defaultValue: 'Expand menu' });
 	const collapseTitle = t('SIDEPANEL_COLLAPSE', { defaultValue: 'Collapse menu' });

diff --git a/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap b/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap
@@ -30,7 +30,7 @@ exports[`SidePanel should render 1`] = `
     data-simplebar="true"
   >
     <ul
-      class="nav nav-pills nav-stacked theme-tc-action-list tc-action-list theme-tc-side-panel-list tc-side-panel-list nav-inverse nav-inverse"
+      class="nav nav-pills nav-stacked theme-tc-action-list tc-action-list theme-tc-side-panel-list tc-side-panel-list"
     >
       <li
         class="theme-tc-action-list-item tc-action-list-item"

diff --git a/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap b/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap
@@ -31,7 +31,7 @@ exports[`SidePanel should render 1`] = `
     data-simplebar="true"
   >
     <ul
-      class="nav nav-pills nav-stacked theme-tc-action-list tc-action-list theme-tc-side-panel-list tc-side-panel-list nav-inverse nav-inverse"
+      class="nav nav-pills nav-stacked theme-tc-action-list tc-action-list theme-tc-side-panel-list tc-side-panel-list"
     />
   </div>
 </nav>

diff --git a/packages/theme/src/theme/_navs.scss b/packages/theme/src/theme/_navs.scss
@@ -33,12 +33,24 @@ $tc-tabbar-active-border-size: 0.2rem !default;
 				margin: 0;
 			}
 
+			.btn-link {
+				color: tokens.$coral-color-accent-text-weak;
+			}
+
+			&:focus,
 			&:hover,
+			&:active {
+				.btn-link {
+					// TODO: replace with token
+					background-color: rgba(255, 255, 255, 0.12);
+				}
+			}
+
 			&.active,
 			&.open {
 				.btn-link {
-					color: tokens.$coral-color-accent-text-weak;
-					background-color: tokens.$coral-color-accent-background-strong;
+					background-color: tokens.$coral-color-neutral-background;
+					color: tokens.$coral-color-accent-text;
 				}
 			}
 
@@ -82,19 +94,16 @@ $tc-tabbar-active-border-size: 0.2rem !default;
 			.btn.btn-link {
 				width: 100%;
 				text-align: left;
-
-				&:focus,
-				&:hover,
-				&:active {
-					background-color: tokens.$coral-color-accent-background-strong;
-					color: tokens.$coral-color-accent-text-weak;
-				}
 			}
 		}
 	}
 
 	&-pills.nav-inverse {
 		> li {
+			.btn-link {
+				color: tokens.$coral-color-accent-text;
+			}
+
 			&:focus,
 			&:hover {
 				background-color: tokens.$coral-color-accent-background-hover;
@@ -108,7 +117,7 @@ $tc-tabbar-active-border-size: 0.2rem !default;
 			&:active,
 			&.active,
 			&.open {
-				background-color: tokens.$coral-color-accent-background-strong;
+				background-color: tokens.$coral-color-accent-background-weak;
 			}
 		}
 	}