Align menu styling with Figma (#281)

* Implement caret collapse icon inside menus

* Fix a typo

Co-authored-by: Agriya Khetarpal <[email protected]>

* Drop icon for now, add aria placeholders

* Update Playwright Snapshots

---------

Co-authored-by: Agriya Khetarpal <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 3 people

src/ui-components/DownloadDropdownButton.tsx

@@ -1,5 +1,6 @@
 import { ReactWidget, ToolbarButtonComponent } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
+import { UUID } from '@lumino/coreutils';
 import { Menu } from '@lumino/widgets';
 import React from 'react';
 import { EverywhereIcons } from '../icons';
@@ -12,8 +13,10 @@ export class DownloadDropdownButton extends ReactWidget {
 
     this._menu = new Menu({ commands });
     this._menu.addClass('je-DownloadDropdownButton-menu');
+    this._menu.addClass('je-DropdownMenu');
     this._menu.addItem({ command: 'jupytereverywhere:download-pdf' });
     this._menu.addItem({ command: 'jupytereverywhere:download-notebook' });
+    this._menu.id = UUID.uuid4();
   }
 
   render(): React.ReactElement {
@@ -24,13 +27,18 @@ export class DownloadDropdownButton extends ReactWidget {
         label="Download"
         tooltip="Download notebook"
         onClick={this._showMenu.bind(this)}
+        // Aria attributes will only work once https://github.com/jupyterlab/jupyterlab/issues/18037 is solved and dependencies are updated
+        aria-expanded={this._menu.isVisible}
+        aria-controls={this._menu.id}
+        aria-haspopup={true}
       />
     );
   }
 
   private _showMenu(): void {
-    const rect = this.node.getBoundingClientRect();
-    this._menu.open(rect.left, rect.top);
+    const node = this.node.querySelector('jp-button') ?? this.node;
+    const rect = node.getBoundingClientRect();
+    this._menu.open(rect.left, rect.top - 4);
   }
 
   private _menu: Menu;

src/ui-components/KernelSwitcherDropdownButton.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import { CommandRegistry } from '@lumino/commands';
+import { UUID } from '@lumino/coreutils';
 import { Menu } from '@lumino/widgets';
 import { Message } from '@lumino/messaging';
 import { ToolbarButtonComponent, ReactWidget } from '@jupyterlab/ui-components';
 import { EverywhereIcons } from '../icons';
-import { CommandRegistry } from '@lumino/commands';
 import { ACTIVE_KERNELS, KERNEL_DISPLAY_NAMES } from '../kernels';
 import { INotebookTracker } from '@jupyterlab/notebook';
 
@@ -20,6 +21,8 @@ export class KernelSwitcherDropdownButton extends ReactWidget {
     this._tracker = tracker;
     this._menu = new Menu({ commands });
     this._menu.addClass('je-KernelSwitcherDropdownButton-menu');
+    this._menu.addClass('je-DropdownMenu');
+    this._menu.id = UUID.uuid4();
   }
 
   onAfterAttach(msg: Message): void {
@@ -66,6 +69,10 @@ export class KernelSwitcherDropdownButton extends ReactWidget {
         label={label}
         tooltip="Switch coding language"
         onClick={() => this._showMenu()}
+        // Aria attributes will only work once https://github.com/jupyterlab/jupyterlab/issues/18037 is solved and dependencies are updated
+        aria-expanded={this._menu.isVisible}
+        aria-controls={this._menu.id}
+        aria-haspopup={true}
       />
     );
   }
@@ -92,7 +99,8 @@ export class KernelSwitcherDropdownButton extends ReactWidget {
       });
     }
 
-    const rect = this.node.getBoundingClientRect();
-    this._menu.open(rect.left, rect.top);
+    const node = this.node.querySelector('jp-button') ?? this.node;
+    const rect = node.getBoundingClientRect();
+    this._menu.open(rect.left, rect.top - 4);
   }
 }

style/base.css

@@ -55,6 +55,20 @@
   border: 0;
 }
 
+.je-DropdownMenu {
+  font-size: calc(var(--je-scale) * 24px);
+  font-weight: 600;
+}
+
+.je-DropdownMenu .lm-Menu-itemLabel {
+  padding: 7px 10px;
+}
+
+.je-DropdownMenu .lm-Menu-itemSubmenuIcon,
+.je-DropdownMenu .lm-Menu-itemIcon {
+  display: none;
+}
+
 .jp-Dialog-content {
   border: 3px solid var(--je-slate-blue);
   border-radius: var(--je-dialog-round-corners);