Add overlay UI element

packages/widgets/src/tabbar.ts

@@ -1713,7 +1713,8 @@ export namespace TabBar {
         return h.li(
           { id, key, className, title, style, dataset, ...aria },
           this.renderIcon(data),
-          this.renderLabel(data)
+          this.renderLabel(data),
+          this.renderOverlay(dataset)
         );
       }
     }
@@ -1755,6 +1756,21 @@ export namespace TabBar {
       return h.div({ className: 'lm-TabBar-tabCloseIcon' });
     }
 
+    /**
+     * Add a className to display/hide the ovleray on a tab.
+     *
+     * @param dataset - The data to identify a launcher.
+     *
+     * @returns A virtual element representing the tab overlay.
+     */
+    renderOverlay(dataset: ElementDataset): VirtualElement {
+      if (dataset.id?.toLowerCase().includes('launcher')) {
+        return h.div({ className: 'lm-TabBar-UI-Overlay.lm-mod-hidden' });
+      } else {
+        return h.div({ className: 'lm-TabBar-UI-Overlay' });
+      }
+    }
+
     /**
      * Create a unique render key for the tab.
      *

packages/widgets/style/tabbar.css

@@ -103,3 +103,21 @@
   box-sizing: border-box;
   background: inherit;
 }
+
+.lm-TabBar-UI-Overlay {
+  position: absolute;
+  top: 67%;
+  left: 45%;
+  width: 47%;
+  height: 32%;
+  border-radius: 25%;
+  z-index: inherit;
+  text-align: center;
+  color: rgb(255, 255, 255);
+  background: rgb(51, 51, 51);
+  visibility: hidden;
+}
+
+.lm-TabBar-UI-Overlay.lm-mod-hidden {
+  display: none !important;
+}

review/api/widgets.api.md

@@ -1187,6 +1187,7 @@ export namespace TabBar {
         renderCloseIcon(data: IRenderData<any>): VirtualElement;
         renderIcon(data: IRenderData<any>): VirtualElement;
         renderLabel(data: IRenderData<any>): VirtualElement;
+        renderOverlay(dataset: ElementDataset): VirtualElement;
         renderTab(data: IRenderData<any>): VirtualElement;
     }
     const defaultRenderer: Renderer;