Merge pull request #5781 from matuzalemsteles/autocomplete-mark

feat(@clayui/autocomplete): update component highlight
liferay · Mar 11, 2024 · 8c82282 · 8c82282
2 parents 6fd8c53 + f9943f9
commit 8c82282
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 38 deletions.
diff --git a/packages/clay-autocomplete/src/Item.tsx b/packages/clay-autocomplete/src/Item.tsx
@@ -98,7 +98,14 @@ const NewItem = React.forwardRef<HTMLLIElement, IProps>(function NewItem(
 							const value = item.replace(/\}/g, '');
 
 							return value ? (
-								<Text key={index}>{value}</Text>
+								<Text
+									className={
+										!item.includes('}') ? 'mark' : undefined
+									}
+									key={index}
+								>
+									{value}
+								</Text>
 							) : null;
 						})
 						.filter(Boolean)

diff --git a/packages/clay-core/src/typography/TextHighlight.tsx b/packages/clay-core/src/typography/TextHighlight.tsx
@@ -33,7 +33,14 @@ export function TextHighlight({children, match}: Props) {
 							const value = item.replace(/\+/g, '');
 
 							return value ? (
-								<Text key={index}>{value}</Text>
+								<Text
+									className={
+										!item.includes('}') ? 'mark' : undefined
+									}
+									key={index}
+								>
+									{value}
+								</Text>
 							) : null;
 						})
 						.filter(Boolean)

diff --git a/packages/clay-css/src/scss/cadmin/variables/_globals.scss b/packages/clay-css/src/scss/cadmin/variables/_globals.scss
@@ -811,31 +811,18 @@ $cadmin-hr-margin-y: $cadmin-spacer !default;
 
 $cadmin-mark-bg: #ffe399 !default;
 $cadmin-mark-color: null !default;
-$cadmin-mark-padding: 2px 0.25em 3px 0 !default;
+$cadmin-mark-padding: null !default;
 
 $cadmin-mark: () !default;
 $cadmin-mark: map-deep-merge(
 	(
 		background-color: $cadmin-mark-bg,
-		box-decoration-break: clone,
-		box-shadow: -0.25em 0 0 $cadmin-mark-bg,
 		color: $cadmin-mark-color,
 		display: inline,
 		line-height: normal,
 		padding: $cadmin-mark-padding,
 		position: relative,
 		white-space: pre-wrap,
-		before: (
-			background-color: $cadmin-mark-bg,
-			bottom: 0,
-			content: '',
-			display: block,
-			position: absolute,
-			right: 100%,
-			top: 0,
-			width: 0.25em,
-			z-index: -1,
-		),
 	),
 	$cadmin-mark
 );
@@ -844,11 +831,7 @@ $cadmin-clay-dark-mark: () !default;
 $cadmin-clay-dark-mark: map-deep-merge(
 	(
 		background-color: $cadmin-dark-l2,
-		box-shadow: -0.25em 0 0 $cadmin-dark-l2,
 		color: $cadmin-white,
-		before: (
-			background-color: $cadmin-dark-l2,
-		),
 	),
 	$cadmin-clay-dark-mark
 );

diff --git a/packages/clay-css/src/scss/variables/_globals.scss b/packages/clay-css/src/scss/variables/_globals.scss
@@ -694,31 +694,18 @@ $hr-margin-y: $spacer !default;
 
 $mark-bg: #fcf8e3 !default;
 $mark-color: null !default;
-$mark-padding: 2px 0.25em 3px 0 !default;
+$mark-padding: null !default;
 
 $mark: () !default;
 $mark: map-deep-merge(
 	(
 		background-color: $mark-bg,
-		box-decoration-break: clone,
-		box-shadow: -0.25em 0 0 $mark-bg,
 		color: $mark-color,
 		display: inline,
 		line-height: normal,
 		padding: $mark-padding,
 		position: relative,
 		white-space: pre-wrap,
-		before: (
-			background-color: $mark-bg,
-			bottom: 0,
-			content: '',
-			display: block,
-			position: absolute,
-			right: 100%,
-			top: 0,
-			width: 0.25em,
-			z-index: -1,
-		),
 	),
 	$mark
 );
@@ -727,11 +714,7 @@ $clay-dark-mark: () !default;
 $clay-dark-mark: map-deep-merge(
 	(
 		background-color: $dark-l2,
-		box-shadow: -0.25em 0 0 $dark-l2,
 		color: $white,
-		before: (
-			background-color: $dark-l2,
-		),
 	),
 	$clay-dark-mark
 );