Suggest styles, a few UI bugs

elastic · Jun 18, 2024 · 78aa0a0 · 78aa0a0
1 parent fec5158
commit 78aa0a0
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 26 deletions.
diff --git a/packages/kbn-monaco/src/esql/lib/esql_theme.ts b/packages/kbn-monaco/src/esql/lib/esql_theme.ts
@@ -48,7 +48,7 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({
 
     // source commands
     ...buildRuleGroup(
-      ['from', 'row', 'show'],
+      ['from', 'row', 'show', 'meta'],
       euiThemeVars.euiColorPrimaryText,
       true // isBold
     ),
@@ -77,7 +77,6 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({
         'in',
         'as',
         'expr_ws',
-        'meta',
         'limit',
         'nulls_ordering_direction',
         'nulls_ordering',
@@ -144,6 +143,10 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({
     'editor.lineHighlightBorder': euiThemeVars.euiColorLightestShade,
     'editor.selectionHighlightBackground': euiThemeVars.euiColorLightestShade,
     'editor.selectionHighlightBorder': euiThemeVars.euiColorLightShade,
-    'editorSuggestWidget.selectedBackground': euiThemeVars.euiColorAccent,
+    'editorSuggestWidget.background': euiThemeVars.euiColorEmptyShade,
+    'editorSuggestWidget.border': euiThemeVars.euiColorEmptyShade,
+    'editorSuggestWidget.foreground': euiThemeVars.euiTextSubduedColor,
+    'editorSuggestWidget.selectedBackground': euiThemeVars.euiColorPrimary,
+    'editorSuggestWidget.selectedForeground': euiThemeVars.euiColorEmptyShade,
   },
 });
diff --git a/packages/kbn-text-based-editor/src/editor_footer.tsx b/packages/kbn-text-based-editor/src/editor_footer.tsx
@@ -173,7 +173,6 @@ export const EditorFooter = memo(function EditorFooter({
       direction="column"
       css={css`
         width: 100%;
-        box-shadow: ${shadowStyle};
       `}
     >
       <EuiFlexItem grow={false}>

diff --git a/packages/kbn-text-based-editor/src/overwrite.scss b/packages/kbn-text-based-editor/src/overwrite.scss
@@ -1,4 +1,8 @@
-.TextBasedLangEditor .monaco-editor {
+/* Editor styles for any layout mode */
+/* NOTE: Much of this is overriding Monaco styles so the specificity is intentional */
+
+// Radius for both the main container and the margin (container for line numbers)
+.TextBasedLangEditor .monaco-editor, .TextBasedLangEditor .monaco-editor .margin {
   border-top-left-radius: $euiBorderRadius;
   border-bottom-left-radius: $euiBorderRadius;
 }
@@ -7,38 +11,43 @@
   display: none !important;
 }
 
-.TextBasedLangEditor--expanded .monaco-editor .monaco-hover {
-  display: block !important;
-}
-
-.TextBasedLangEditor .monaco-editor .margin {
-  border-top-left-radius: $euiBorderRadius;
-  border-bottom-left-radius: $euiBorderRadius;
+.TextBasedLangEditor .monaco-editor .margin-view-overlays .line-numbers {
+  color: $euiColorDisabledText;
 }
 
-.TextBasedLangEditor--compact .monaco-editor {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+// Currently focused line(s)
+.TextBasedLangEditor .monaco-editor .current-line ~ .line-numbers {
+  color: $euiTextSubduedColor;
 }
 
-.TextBasedLangEditor--compact .monaco-editor .margin {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  color: $euiColorDisabledText;
+// Suggest (autocomplete) menu
+.TextBasedLangEditor .monaco-editor .suggest-widget {
+  @include euiBottomShadow;
+  border-radius: $euiBorderRadius;
 }
 
-.TextBasedLangEditor .monaco-editor .margin-view-overlays .line-numbers {
-  color: $euiColorDisabledText;
+.TextBasedLangEditor_errorMessage {
+  @include euiTextBreakWord;
 }
 
-.TextBasedLangEditor .monaco-editor .current-line ~ .line-numbers {
-  color: $euiTextSubduedColor;
-}
+/* For compact mode */
 
+// All scrollable containers (e.g. main container and suggest menu)
 .TextBasedLangEditor--compact .monaco-editor .monaco-scrollable-element {
   margin-left: $euiSizeS;
 }
 
-.TextBasedLangEditor_errorMessage {
-  @include euiTextBreakWord;
+// Suggest menu in compact mode
+.TextBasedLangEditor--compact .monaco-editor .monaco-list .monaco-scrollable-element {
+  margin-left: 0;
+
+  .monaco-list-row.focused {
+    border-radius: $euiBorderRadius;
+  }
+}
+
+/*  For expanded mode */
+
+.TextBasedLangEditor--expanded .monaco-editor .monaco-hover {
+  display: block !important;
 }
diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
@@ -1017,6 +1017,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                           borderRadius: 0,
                           backgroundColor: isDark ? euiTheme.colors.lightestShade : '#e9edf3',
                           border: '1px solid rgb(17 43 134 / 10%) !important',
+                          transform: 'none !important',
                         },
                       }}
                     />
@@ -1046,6 +1047,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                       backgroundColor: isDark ? euiTheme.colors.lightestShade : '#e9edf3',
                       border: '1px solid rgb(17 43 134 / 10%) !important',
                       borderLeft: 'transparent !important',
+                      transform: 'none !important',
                     }}
                   />
                 </EuiToolTip>