style(autocomplete): add missing global styles

add css classes to restore the autocomplete widget style when the global style option of the EuiProvider is removed. As a proof of concept that this approach might work for all widgets. related to #144
ts4nfdi · Jan 13, 2025 · 2be1e16 · 2be1e16
1 parent 5a9070e
commit 2be1e16
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/.storybook/react/preview.js b/.storybook/react/preview.js
@@ -16,7 +16,7 @@ const queryClient = new QueryClient();
 export const decorators = [
   (Story) => (
     <>
-      <EuiProvider colorMode="light">
+      <EuiProvider colorMode="light" globalStyles={false}>
         <QueryClientProvider client={queryClient}>
           {Story()}
         </QueryClientProvider>

diff --git a/src/style/autocompleteStyles.css b/src/style/autocompleteStyles.css
@@ -1,10 +1,23 @@
 .custom-autocomplete-style * {
   font-size: 18px !important;
+  font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
 }
 
 .custom-autocomplete-style input,
 .custom-autocomplete-style .euiComboBox__inputWrap{
   background-color: #edc4c4 !important;
 }
 
+.custom-autocomplete-style button {
+  background: none;
+  border: none;
+}
+
+.euiComboBoxOptionsList * {
+  border: none;
+  background-color: inherit;
+}
 
+.euiComboBoxOptionsList__empty {
+  font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
+}