fix(menu): support context

RedHat-UX · Oct 22, 2023 · c0e7b2a · c0e7b2a
1 parent 19d489b
commit c0e7b2a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/.changeset/menu-context.md b/.changeset/menu-context.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-menu>`: support color context
diff --git a/elements/rh-menu/rh-menu.css b/elements/rh-menu/rh-menu.css
@@ -7,4 +7,21 @@ slot {
   align-items: stretch;
   flex-direction: column;
   width: max-content;
-}
+}
+
+.dark::slotted(a) {
+  color: var(--rh-color-interactive-blue-lightest, #bee1f4) !important;
+  padding: 5px !important; /* WARNING: not a token value */
+}
+
+.dark::slotted(a:hover) {
+  color: var(--rh-color-interactive-blue-lighter, #73bcf7);
+}
+
+.dark::slotted(a:visited) {
+  color: var(--rh-color-interactive-purple-lighter, #a18fff) !important;
+}
+
+.dark::slotted(a:visited:hover) {
+  color: var(--rh-color-interactive-purple-lighter, #a18fff) !important;
+}
diff --git a/elements/rh-menu/rh-menu.ts b/elements/rh-menu/rh-menu.ts
@@ -1,17 +1,20 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
-import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { classMap } from 'lit/directives/class-map.js';
+
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
-import { ComposedEvent } from '@patternfly/pfe-core';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+
+import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import styles from './rh-menu.css';
 
-export class MenuToggleEvent extends ComposedEvent {
+export class MenuToggleEvent extends Event {
   constructor(
     public open: boolean,
     public menu: HTMLElement
   ) {
-    super('toggle');
+    super('toggle', { bubbles: true });
   }
 }
 
@@ -23,6 +26,8 @@ export class MenuToggleEvent extends ComposedEvent {
 export class RhMenu extends LitElement {
   static readonly styles = [styles];
 
+  @colorContextConsumer() private on?: ColorTheme;
+
   #tabindex = new RovingTabindexController(this);
 
   get activeItem() {
@@ -37,8 +42,9 @@ export class RhMenu extends LitElement {
   }
 
   render() {
+    const { on = '' } = this;
     return html`
-      <slot part="menu"></slot>
+      <slot part="menu" class="${classMap({ [on]: !!on })}"></slot>
     `;
   }