feat(combobox, input-time-zone): highlight text matches consistently (#…

…11193) **Related Issue:** #11173 ## Summary This also introduces a mixin for shared text highlighting styles.
Esri · Jan 3, 2025 · 75f54de · 75f54de
1 parent 242a7ad
commit 75f54de
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
@@ -210,3 +210,13 @@ $common-animatable-props: "background-color, block-size, border-color, box-shado
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
 }
+
+// Mixin for text highlighting styles.
+// - this should be used in conjunction with the `text.tsx` util.
+@mixin text-highlight-item() {
+  .text-match {
+    background-color: transparent;
+    color: inherit;
+    font-weight: var(--calcite-font-weight-bold);
+  }
+}
diff --git a/packages/calcite-components/src/components/autocomplete-item/autocomplete-item.scss b/packages/calcite-components/src/components/autocomplete-item/autocomplete-item.scss
@@ -66,12 +66,6 @@
   line-height: var(--calcite-font-line-height-relative-snug);
 }
 
-.text-match {
-  font-weight: var(--calcite-font-weight-bold);
-  background-color: transparent;
-  color: inherit;
-}
-
 :host(:hover:not([disabled])) .container {
   background-color: var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-2));
 
@@ -91,5 +85,6 @@
   padding-block: 0;
 }
 
+@include text-highlight-item();
 @include base-component();
 @include disabled();
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -117,12 +117,6 @@ ul:focus {
   color: theme("backgroundColor.brand");
 }
 
-.text-match {
-  font-weight: var(--calcite-font-weight-bold);
-  color: var(--calcite-color-text-1);
-  background-color: var(--calcite-color-foreground-current);
-}
-
 .center-content {
   display: flex;
   flex-direction: column;
@@ -155,3 +149,5 @@ ul:focus {
 .short-text {
   line-height: var(--calcite-font-line-height-relative-snug);
 }
+
+@include text-highlight-item();
diff --git a/packages/calcite-components/src/utils/text.tsx b/packages/calcite-components/src/utils/text.tsx
@@ -1,5 +1,17 @@
 import { h, JsxNode } from "@arcgis/lumina";
 
+const CSS = {
+  textMatch: "text-match",
+};
+
+/**
+ * Highlight text based on a search pattern.
+ *
+ * Items using this in their rendering should include the `text-highlight-item` mixin from `includes.scss` in their styles.
+ *
+ * @param text
+ * @param pattern
+ */
 export function highlightText({
   text,
   pattern,
@@ -15,7 +27,7 @@ export function highlightText({
 
   if (parts.length > 1) {
     // we only highlight the first match
-    parts[1] = <mark class="text-match">{parts[1]}</mark>;
+    parts[1] = <mark class={CSS.textMatch}>{parts[1]}</mark>;
   }
 
   return parts;