diff --git a/packages/widgets/src/tabbar.ts b/packages/widgets/src/tabbar.ts index bcedd63e6..68d6ebd96 100644 --- a/packages/widgets/src/tabbar.ts +++ b/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. * diff --git a/packages/widgets/style/tabbar.css b/packages/widgets/style/tabbar.css index c61b0fc7a..0eff6e46b 100644 --- a/packages/widgets/style/tabbar.css +++ b/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; +} diff --git a/review/api/widgets.api.md b/review/api/widgets.api.md index 7462b947b..c8b3e192e 100644 --- a/review/api/widgets.api.md +++ b/review/api/widgets.api.md @@ -1187,6 +1187,7 @@ export namespace TabBar { renderCloseIcon(data: IRenderData): VirtualElement; renderIcon(data: IRenderData): VirtualElement; renderLabel(data: IRenderData): VirtualElement; + renderOverlay(dataset: ElementDataset): VirtualElement; renderTab(data: IRenderData): VirtualElement; } const defaultRenderer: Renderer;