CommandPalette header icon mostly fixed, some minor styling bugs remain

packages/apputils/style/commandpalette.css

@@ -90,35 +90,22 @@
 }
 
 .lm-CommandPalette-header {
-  margin-top: 8px;
-  padding: 8px 0 8px 12px;
+  border-bottom: solid var(--jp-border-width) var(--jp-border-color2);
   color: var(--jp-ui-font-color1);
+  cursor: pointer;
+  display: flex;
   font-size: var(--jp-ui-font-size0);
   font-weight: 600;
-  cursor: pointer;
-  text-transform: uppercase;
-  border-bottom: solid var(--jp-border-width) var(--jp-border-color2);
   letter-spacing: 1px;
+  margin-top: 8px;
+  padding: 8px 0 8px 12px;
+  text-transform: uppercase;
 }
 
 .lm-CommandPalette-header.lm-mod-active {
   background: var(--jp-layout-color2);
 }
 
-.lm-CommandPalette-header:hover::after {
-  content: '';
-  min-width: 12px;
-  min-height: 12px;
-  background-size: 14px;
-  margin-right: 16px;
-  float: right;
-  display: inline-block;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-image: var(--jp-icon-filter-list);
-}
-
 .lm-CommandPalette-header > mark {
   background-color: transparent;
   font-weight: bold;

packages/ui-components/src/icon/commandpalettesvg.ts

@@ -4,20 +4,44 @@
 import { h, VirtualElement } from '@lumino/virtualdom';
 import { CommandPalette } from '@lumino/widgets';
 
-import { checkIcon } from './iconimports';
+import { checkIcon, filterListIcon } from './iconimports';
 import { iconStyle } from '../style';
 import { classes } from '../utils';
 
-// const submenuIcon = caretRightIcon.bindprops({
-//   justify: 'center',
-//   kind: 'menuItem'
-// });
+const searchHeaderIcon = filterListIcon.bindprops({
+  justify: 'center',
+  kind: 'commandPaletteHeader'
+});
 
 export namespace CommandPaletteSvg {
   /**
    * a modified implementation of the CommandPalette Renderer
    */
   export class Renderer extends CommandPalette.Renderer {
+    /**
+     * Render the virtual element for a command palette header.
+     *
+     * @param data - The data to use for rendering the header.
+     *
+     * @returns A virtual element representing the header.
+     */
+    renderHeader(data: CommandPalette.IHeaderRenderData): VirtualElement {
+      const content = this.formatHeader(data);
+      return h.li(
+        {
+          className: classes(
+            'lm-CommandPalette-header',
+            'jp-icon-hoverShow',
+            /* <DEPRECATED> */
+            'p-CommandPalette-header'
+            /* </DEPRECATED> */
+          )
+        },
+        content,
+        h.span(searchHeaderIcon)
+      );
+    }
+
     /**
      * Render the icon for a command palette item.
      *
@@ -26,7 +50,7 @@ export namespace CommandPaletteSvg {
      * @returns A virtual element representing the icon.
      */
     renderItemIcon(data: CommandPalette.IItemRenderData): VirtualElement {
-      let className = this.createIconClass(data);
+      const className = this.createIconClass(data);
 
       if (data.item.isToggled) {
         // check mark icon takes precedence

packages/ui-components/src/icon/menusvg.ts

@@ -82,7 +82,7 @@ export namespace MenuSvg {
      * @returns A virtual element representing the item icon.
      */
     renderIcon(data: Menu.IRenderData): VirtualElement {
-      let className = this.createIconClass(data);
+      const className = this.createIconClass(data);
 
       if (data.item.isToggled) {
         // check mark icon takes precedence

packages/ui-components/src/style/icon.ts

@@ -17,6 +17,7 @@ import { NestedCSSProperties } from 'typestyle/lib/types';
  */
 export type IconKindType =
   | 'breadCrumb'
+  | 'commandPaletteHeader'
   | 'commandPaletteItem'
   | 'launcherCard'
   | 'launcherSection'
@@ -59,6 +60,11 @@ const iconCSSBreadCrumb: NestedCSSProperties = {
   verticalAlign: 'middle'
 };
 
+const iconCSSCommandPaletteHeader: NestedCSSProperties = {
+  height: '14px',
+  width: '14px'
+};
+
 const iconCSSCommandPaletteItem: NestedCSSProperties = {
   height: '16px',
   width: '16px'
@@ -142,6 +148,7 @@ const iconCSSToolbarButton: NestedCSSProperties = {
 
 const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   breadCrumb: iconCSSBreadCrumb,
+  commandPaletteHeader: iconCSSCommandPaletteHeader,
   commandPaletteItem: iconCSSCommandPaletteItem,
   launcherCard: iconCSSLauncherCard,
   launcherSection: iconCSSLauncherSection,
@@ -176,6 +183,10 @@ const containerCSSBreadCrumb: NestedCSSProperties = {
   }
 };
 
+const containerCSSCommandPaletteHeader: NestedCSSProperties = {
+  margin: '0 14px 0 auto'
+};
+
 const containerCSSLauncherCard: NestedCSSProperties = {
   height: '68px'
 };
@@ -283,6 +294,7 @@ const containerCSSToolbarButton: NestedCSSProperties = {
 
 const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   breadCrumb: containerCSSBreadCrumb,
+  commandPaletteHeader: containerCSSCommandPaletteHeader,
   commandPaletteItem: {},
   launcherCard: containerCSSLauncherCard,
   launcherSection: containerCSSLauncherSection,

packages/ui-components/style/base.css

@@ -114,7 +114,6 @@ input::placeholder {
   line-height: 14px;
   padding: 0 25px 0 10px;
   text-align: left;
-  vertical-align: middle;
   -moz-appearance: none;
   -webkit-appearance: none;
 }

packages/ui-components/style/iconshover.css

@@ -3,6 +3,10 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+.jp-icon-hoverShow:not(:hover) svg {
+  display: none !important;
+}
+
 /**
  * Support for hover colors for icons as inline SVG HTMLElements
  */