fix(TDOPS-5081): fix FilterBar in VList having wrong style on hover (#…

…4858) * fix(TDOPS-5081): fix FilterBar in VList having wrong style on hover * fix test
Talend · Aug 30, 2023 · 72b95c8 · 72b95c8
1 parent 665f624
commit 72b95c8
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/.changeset/serious-shrimps-obey.md b/.changeset/serious-shrimps-obey.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+TDOPS-5081 - Fixed FilterBar in VList header having wrong style on hover
diff --git a/packages/components/src/FilterBar/FilterBar.component.js b/packages/components/src/FilterBar/FilterBar.component.js
@@ -157,12 +157,11 @@ export default function FilterBar(props) {
 		return (
 			<Action
 				id={props.id}
-				className={props.className}
+				className={classNames(props.className, theme['button-docked'])}
 				onClick={props.onToggle}
 				label={t('LIST_FILTER_TOGGLE', { defaultValue: 'Toggle filter' })}
 				hideLabel
 				icon="talend-search"
-				bsStyle="link"
 				data-feature={props['data-feature']}
 				tooltipPlacement={props.tooltipPlacement}
 				role="search"

diff --git a/packages/components/src/FilterBar/FilterBar.module.scss b/packages/components/src/FilterBar/FilterBar.module.scss
@@ -86,6 +86,10 @@ $tc-filter-bar-width: 250px !default;
 	}
 }
 
+.button-docked {
+	color: tokens.$coral-color-neutral-icon-weak;
+}
+
 @keyframes reveal {
 	0% {
 		opacity: 0;

diff --git a/...nents/src/List/ListComposition/TextFilter/__snapshots__/TextFilter.component.test.js.snap b/...nents/src/List/ListComposition/TextFilter/__snapshots__/TextFilter.component.test.js.snap
@@ -4,7 +4,7 @@ exports[`TextFilter should render text filter component 1`] = `
 <button
   aria-describedby="42"
   aria-label="Toggle filter"
-  class="btn-icon-only btn btn-link"
+  class="theme-button-docked btn-icon-only btn btn-default"
   id="myTextFilter"
   role="search"
   type="button"