fix(accordion): hover colors (#2068)

* fix(accordion): hover colors * fix(accordion): hover states * fix(accordion): panel border regression
RedHat-UX · Dec 9, 2024 · 33535ef · 33535ef
1 parent 67296ba
commit 33535ef
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 92 deletions.
diff --git a/.changeset/lazy-ants-cough.md b/.changeset/lazy-ants-cough.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-accordion>`: restore missing hover colors
diff --git a/elements/rh-accordion/rh-accordion-header.css b/elements/rh-accordion/rh-accordion-header.css
@@ -3,7 +3,6 @@
   --_padding-inline-end: var(--rh-space-xl, 24px);
   --_padding-block-end: var(--rh-space-lg, 16px);
   --_padding-inline-start: var(--rh-space-xl, 24px);
-  --_active-text-color: var(--rh-color-text-primary);
   --_font-size: var(--rh-font-size-body-text-lg, 1.125rem);
   --_after-background-color: transparent;
   --_expanded-background-color: var(--rh-color-accent-brand);
@@ -48,19 +47,18 @@ a {
   border-inline-start-color: var(--rh-color-border-subtle);
 }
 
-#button,
-#button:before,
-#button:after {
-  background-color: var(--rh-color-surface);
-}
-
 #icon {
   width: 16px;
   height: 16px;
   will-change: rotate;
   transition: rotate 0.2s ease-in 0s;
 }
 
+span {
+  overflow: hidden;
+  text-align: start;
+}
+
 #button {
   width: 100%;
   padding:
@@ -71,36 +69,60 @@ a {
   font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
   font-size: var(--_font-size);
   color: var(--rh-color-text-primary);
-}
 
-#button #icon {
-  fill: currentcolor;
-}
+  & #icon {
+    fill: currentcolor;
+  }
 
-#button:after {
-  inset-block-start: -1px;
-  width: var(--rh-border-width-lg, 3px);
-  background-color: var(--_after-background-color);
-}
+  &:is(:hover,:active,:focus) {
+    &.light { background-color: var(--rh-color-surface-lighter); }
+    &.dark { background-color: var(--rh-color-surface-dark-alt); }
 
-span {
-  overflow: hidden;
-  text-align: start;
-}
+    & span {
+      color: var(--rh-color-text-primary);
+    }
+  }
 
-[part='container'] {
-  display: flex;
-  gap: var(--rh-space-xl, 24px);
-  container-type: inline-size;
+  &:focus {
+    outline: 2px solid var(--rh-color-interactive-primary-default);
+  }
+
+  &,
+  &:before,
+  &:after {
+    background-color: var(--rh-color-surface);
+  }
+
+  &:after {
+    inset-block-start: -1px;
+    width: var(--rh-border-width-lg, 3px);
+    background-color: var(--_after-background-color);
+  }
+
+  &.expanded {
+    --_after-background-color: var(--rh-color-accent-brand);
+
+    & #icon {
+      rotate: calc(var(--_isRTL, -1) * 180deg);
+    }
+
+    &.on.light {
+      --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+    }
+
+    &.on.dark {
+      --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+    }
+  }
 }
 
 #header-container {
   display: flex;
   gap: var(--rh-space-md, 8px);
-}
 
-#header-container.bottom {
-  flex-direction: column;
+  &.bottom {
+    flex-direction: column;
+  }
 }
 
 #header-text {
@@ -113,54 +135,26 @@ span {
   gap: var(--rh-space-md, 8px);
 }
 
-.expanded #button {
-  --_after-background-color: var(--rh-color-accent-brand);
-}
-
-.expanded #button #icon {
-  rotate: calc(var(--_isRTL, -1) * 180deg);
-}
-
-#button:hover,
-#button:active,
-#button:focus {
-  background-color: var(--rh-color-surface);
-}
-
-#button:hover span,
-#button:focus span,
-#button:active span {
-  color: var(--_active-text-color);
-}
-
-.toggle,
-.toggle:before,
-.toggle:after {
-  padding: 0;
-  margin: 0;
-}
-
 .toggle {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border: 0;
-}
-
-.toggle:after {
-  content: '';
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-}
 
-.expanded.on.light {
-  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
-}
+  &,
+  &:before,
+  &:after {
+    padding: 0;
+    margin: 0;
+  }
 
-.expanded.on.dark {
-  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+  &:after {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
 }
 
 @container (min-width: 576px) {

diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts
@@ -81,26 +81,24 @@ export class RhAccordionHeader extends LitElement {
   }
 
   render() {
-    const { expanded, on = '' } = this;
+    const { expanded, on = 'light' } = this;
     const { accents, large = false } = this.ctx ?? {};
     const rtl = this.#dir.dir === 'rtl';
     return html`
-      <div id="container" class="${classMap({ on: true, [on]: !!on, rtl, large, expanded })}">
-        <button id="button"
-                class="toggle"
-                @click="${this.#onClick}">
-          <span id="header-container" class="${classMap({ [accents ?? '']: !!accents })}">
-            <span id="header-text" part="text"><slot></slot></span>
-            <span part="accents"><slot name="accents"></slot></span>
-          </span>
-          <svg id="icon"
-               role="presentation"
-               xmlns="http://www.w3.org/2000/svg"
-               viewBox="0 0 448 512">
-            <path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
-          </svg>
-        </button>
-      </div>
+      <button id="button"
+              class="${classMap({ on: true, toggle: true, [on]: !!on, rtl, large, expanded })}"
+              @click="${this.#onClick}">
+        <span id="header-container" class="${classMap({ [accents ?? '']: !!accents })}">
+          <span id="header-text" part="text"><slot></slot></span>
+          <span part="accents"><slot name="accents"></slot></span>
+        </span>
+        <svg id="icon"
+             role="presentation"
+             xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 448 512">
+          <path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
+        </svg>
+      </button>
     `;
   }
 

diff --git a/elements/rh-accordion/rh-accordion-panel.ts b/elements/rh-accordion/rh-accordion-panel.ts
@@ -22,8 +22,6 @@ import { context, type RhAccordionContext } from './context.js';
  */
 @customElement('rh-accordion-panel')
 export class RhAccordionPanel extends LitElement {
-  static readonly version = '{{version}}';
-
   static readonly styles = [styles];
 
   @property({ type: Boolean, reflect: true }) expanded = false;

diff --git a/elements/rh-accordion/rh-accordion.ts b/elements/rh-accordion/rh-accordion.ts
@@ -153,11 +153,15 @@ export class RhAccordion extends LitElement {
   }
 
   override render(): TemplateResult {
-    const { on = 'light' } = this;
+    const { on } = this;
     const expanded = this.#expanded;
     return html`
       <div id="container"
-           class="${classMap({ on: true, [on]: true, expanded })}"><slot></slot></div>
+           class="${classMap({
+             on: true,
+             [on ?? 'light']: true,
+             expanded,
+           })}"><slot></slot></div>
     `;
   }
 

diff --git a/elements/rh-surface/test/elements.ts b/elements/rh-surface/test/elements.ts
@@ -6,6 +6,7 @@ import {
   colorContextConsumer,
   type ColorTheme,
 } from '@rhds/elements/lib/context/color/consumer.js';
+
 import {
   colorContextProvider,
   type ColorPalette,
@@ -37,4 +38,3 @@ export class ContextProviderConsumer extends ReactiveElement {
   @property({ reflect: true })
   on?: ColorTheme;
 }
-
diff --git a/lib/context/color/consumer.ts b/lib/context/color/consumer.ts
@@ -69,11 +69,18 @@ export class ColorContextConsumer<
     this.#override = null;
   }
 
-  hostUpdated() {
+  async hostUpdated() {
     if (!isServer && !this.host.hasUpdated) {
       // This is definitely overkill, but it's the only
       // way we've found so far to work around lit-ssr hydration woes
-      this.hostConnected();
+      const original = this.#propertyValue;
+
+      if (original) {
+        await this.host.updateComplete;
+        this.#propertyValue = '__LIT_SSR_WORKAROUND__' as ColorTheme;
+        await this.host.updateComplete;
+        this.#propertyValue = original as ColorTheme;
+      }
     }
   }
 

diff --git a/lib/context/color/provider.ts b/lib/context/color/provider.ts
@@ -110,10 +110,10 @@ export class ColorContextProvider<
   async hostConnected() {
     this.host.addEventListener('context-request', e => this.#onChildContextRequestEvent(e));
     this.#mo.observe(this.host, { attributes: true, attributeFilter: [this.#attribute] });
+    await this.host.updateComplete;
     for (const [host, fired] of contextEvents) {
       host.dispatchEvent(fired);
     }
-    await this.host.updateComplete;
     this.update();
     return true;
   }