Merge pull request #24 from gsoft-inc/feature/OR-128-autocomplete

Feat: [OR-128] Autocomplete rebrand and ellipsis fix

packages/components/src/autocomplete/src/Autocomplete.css

@@ -1,19 +1,25 @@
 .o-ui-autocomplete-no-results {
-    font-size: var(--o-ui-fs-3);
-    line-height: var(--o-ui-lh-2);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+    color: var(--hop-neutral-text);
+    font-size: var(--hop-body-sm-font-size);
+    line-height: var(--hop-body-sm-line-height);
     display: inline-flex;
     align-items: center;
-    border: 1px solid var(--o-ui-b-alias-low-break);
-    border-radius: var(--o-ui-br-2);
-    box-shadow: var(--o-ui-bs-alias-floating);
-    background-color: var(--o-ui-bg-alias-surface);
-    padding-right: var(--o-ui-sp-8);
-    padding-left: var(--o-ui-sp-3);
+    border: 1px solid var(--hop-neutral-border-weak);
+    border-radius: var(--hop-shape-rounded-md);
+    box-shadow: var(--hop-elevation-lifted);
+    background-color: var(--hop-neutral-surface);
+    padding: var(--hop-space-inset-squish-md);
     position: relative;
     cursor: default;
-    height: calc(var(--o-ui-sz-5) + 2px);
+    height: 2rem + var(--hop-space-inset-sm) * 2;
     min-width: 100%;
+    max-width: 100%;
+}
+
+.o-ui-autocomplete-no-results-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }

packages/components/src/autocomplete/src/Autocomplete.tsx

@@ -377,8 +377,10 @@ export function InnerAutocomplete(props: InnerAutocompleteProps) {
         />
     );
 
+    const noResultsText = noResultsMessage ?? "No results found.";
+
     const noResultsMarkup = (
-        <Box className="o-ui-autocomplete-no-results">{noResultsMessage ?? "No results found."}</Box>
+        <Box className="o-ui-autocomplete-no-results" title={noResultsText}><span className="o-ui-autocomplete-no-results-text">{noResultsText}</span></Box>
     );
 
     return (