fix(TDOPS-5873): Fix faceted search container width (#5105)

Talend · Jan 9, 2024 · ab1ae8a · ab1ae8a
1 parent 0f44243
commit ab1ae8a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 66 deletions.
diff --git a/.changeset/dirty-pears-appear.md b/.changeset/dirty-pears-appear.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': patch
+---
+
+TDOPS-5873 - Faceted search container no longer takes more then 100% width
diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.scss b/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.scss
@@ -1,5 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 @use '~@talend/design-tokens/lib/tokens';
 
 .tc-basic-search {
@@ -9,19 +7,8 @@
 	overflow: visible;
 	position: relative;
 	width: 100%;
-	margin-left: tokens.$coral-spacing-s;
-	margin-right: tokens.$coral-spacing-s;
-
-	&::after {
-		content: '';
-		height: tokens.$coral-sizing-xs;
-		width: 0;
-		border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
-		position: absolute;
-		top: 50%;
-		right: 0;
-		transform: translateY(-50%);
-	}
+	padding-left: tokens.$coral-spacing-s;
+	padding-right: tokens.$coral-spacing-s;
 
 	&-quicksearch {
 		margin-right: tokens.$coral-spacing-xs;
@@ -34,8 +21,4 @@
 		flex-wrap: wrap;
 		flex-grow: 1;
 	}
-
-	&-clear-content {
-		margin-right: tokens.$coral-spacing-xs;
-	}
 }
diff --git a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss
@@ -1,4 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 @use '~@talend/design-tokens/lib/tokens';
 
 // stylelint-disable order/order
@@ -14,52 +13,19 @@ $toolbar-height: 5.5rem;
 
 	.tc-faceted-switch-mode {
 		width: auto;
-		margin-right: $padding-small;
-	}
-
-	&-buttons {
-		background: tokens.$coral-color-neutral-background;
-		border-radius: $padding-large $padding-large $padding-large $padding-large;
-		display: flex;
-		margin-right: $padding-large;
-		position: absolute;
-		margin-top: $padding-normal;
-		right: 0;
-		top: 0;
-
-		&-basic,
-		&-advanced {
-			&.tc-button-selected {
-				background: tokens.$coral-color-accent-background-strong;
-				border-radius: $padding-large;
-				color: tokens.$coral-color-accent-text-weak;
-			}
-
-			background: tokens.$coral-color-neutral-background;
-			color: tokens.$coral-color-neutral-text;
-			min-height: 2.5rem;
-			height: 2.5rem;
-			font-size: 1rem;
-
-			> span {
-				height: inherit;
-			}
-
-			&:active,
-			&:focus,
-			&:hover {
-				background: tokens.$coral-color-accent-background-strong;
-			}
-		}
-
-		&-advanced,
-		&-advanced.tc-button-selected {
-			border-radius: 0 $padding-large $padding-large 0;
-		}
-
-		&-basic,
-		&-basic.tc-button-selected {
-			border-radius: $padding-large 0 0 $padding-large;
+		position: relative;
+		padding-right: tokens.$coral-spacing-s;
+		padding-left: tokens.$coral-spacing-s;
+
+		&::before {
+			content: '';
+			height: tokens.$coral-sizing-xs;
+			width: 0;
+			border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
+			position: absolute;
+			top: 50%;
+			left: 0;
+			transform: translateY(-50%);
 		}
 	}
 }