Refactor accordion styling to use contextual tokens (#2570)

Author: jpzwarte

.changeset/grumpy-paws-jam.md

@@ -0,0 +1,11 @@
+---
+'@sl-design-system/accordion': minor
+---
+
+Various improvements:
+- Add a global and per instance `iconType` property with default value `plusminus` and new option `chevron`
+- Add `::part(details)` so you can remove the bottom border from the last `<sl-accordion-item>`
+- Add `summary-extras` slot for extra content in the header of the accordion item
+- Reduce `<summary>` font-size from 18px to 16px
+- Use relative font-size and inherit the font-family
+- Refactor styling to use contextual tokens

packages/components/accordion/src/accordion-item.scss

@@ -1,26 +1,5 @@
 :host {
-  --_background: var(--sl-color-accordion-default-header);
-  --_background-hover: var(--sl-color-accordion-hover-header);
-  --_background-active: var(--sl-color-accordion-active-header);
-  --_border-color: var(--sl-color-accordion-default-border);
-  --_border-width: var(--sl-border-width-divider);
-  --_focus-outline: var(--sl-color-focusring-default) solid var(--sl-border-width-focusring-default);
-  --_focus-outline-offset: var(--sl-border-width-focusring-offset);
-  --_focus-radius: var(--sl-border-radius-focusring-default);
-  --_icon-size: var(--sl-size-accordion-icon-height);
-  --_padding-block: var(--sl-space-accordion-content-block);
-  --_panel-color: var(--sl-color-accordion-default-foreground);
-  --_panel-font: var(--sl-text-accordion-body);
-  --_panel-padding-block: var(--sl-space-accordion-content-block);
-  --_panel-padding-inline: var(--sl-space-accordion-content-inline);
-  --_title-color: var(--sl-color-accordion-default-foreground);
-  --_title-color-active: var(--sl-color-accordion-active-foreground);
-  --_title-color-disabled: var(--sl-color-accordion-disabled-foreground);
-  --_title-color-hover: var(--sl-color-accordion-hover-foreground);
-  --_title-font: var(--sl-text-accordion-title);
-  --_title-gap: var(--sl-space-accordion-title-gap);
-  --_title-padding: var(--sl-space-accordion-title-inline);
-  --_transition-duration: 300ms;
+  --_transition-duration: 0.3s; // This is used in JavaScript as well
 
   display: flex;
   outline: 0;
@@ -30,22 +9,35 @@
   pointer-events: none;
 
   summary {
-    --_title-color: var(--_title-color-disabled);
+    color: var(--sl-color-foreground-disabled);
+  }
+}
+
+:host([icon-type='chevron']) {
+  details[open],
+  details.opening {
+    sl-icon {
+      transform: rotate(-180deg);
+    }
+  }
+
+  details[open].closing sl-icon {
+    transform: rotate(0deg);
   }
 }
 
 details {
-  border-block-end: var(--_border-width) solid var(--_border-color);
+  border-block-end: var(--sl-size-borderWidth-subtle) solid var(--sl-color-border-plain);
   flex: 1;
 
   &[open] summary::after {
-    background: var(--_border-color);
-    block-size: var(--_border-width);
+    background: var(--sl-color-border-plain);
+    block-size: var(--sl-size-borderWidth-subtle);
     content: '';
-    inline-size: calc(100% - 2 * var(--_panel-padding-inline));
+    inline-size: calc(100% - 2 * var(--sl-size-500));
     inset-block-end: 0;
     inset-inline-start: 0;
-    margin-inline: var(--_panel-padding-inline);
+    margin-inline: var(--sl-size-500);
     position: absolute;
   }
 
@@ -81,14 +73,23 @@ details {
 }
 
 summary {
-  background: var(--_background);
-  color: var(--_title-color);
+  --_bg-opacity: var(--sl-opacity-interactive-bold-idle);
+
+  // align-items: center;
+  background: color-mix(
+    in srgb,
+    var(--sl-elevation-surface-base-default),
+    var(--sl-color-background-secondary-interactive-plain) calc(100% * var(--_bg-opacity))
+  );
+  color: var(--sl-color-foreground-plain);
   cursor: pointer;
   display: flex;
-  font: var(--_title-font);
-  gap: var(--_title-gap);
-  padding-block: var(--_padding-block);
-  padding-inline: var(--_title-padding);
+  font-size: calc((16 / 14) * 1em);
+  gap: var(--sl-size-100);
+  line-height: calc((24 / 16) * 1em);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
+  outline-offset: var(--sl-size-outlineOffset-default);
+  padding: var(--sl-size-200);
   position: relative;
   z-index: 1; /* To work properly with sticky */
 
@@ -97,31 +98,50 @@ summary {
   }
 
   &:hover {
-    background: var(--_background-hover);
-    color: var(--_title-color-hover);
+    --_bg-opacity: var(--sl-opacity-interactive-bold-hover);
   }
 
   &:active {
-    background: var(--_background-active);
-    color: var(--_title-color-active);
+    --_bg-opacity: var(--sl-opacity-interactive-bold-active);
   }
 
   &:focus-visible {
-    border-radius: var(--_focus-radius);
-    outline: var(--_focus-outline);
-    outline-offset: var(--_focus-outline-offset);
+    border-radius: var(--sl-size-borderRadius-default);
+    outline-color: var(--sl-color-border-focused);
     position: relative;
     z-index: 2; // Make sure the outline is not clipped by the next accordion item
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: background var(--_transition-duration);
+    transition-duration: var(--_transition-duration);
+    transition-property: background, outline-color;
   }
 }
 
-svg {
-  block-size: var(--_icon-size);
+slot[name='summary'] {
+  display: block;
+  inline-size: 100%;
+  text-box: trim-both cap alphabetic;
+}
+
+svg,
+sl-icon {
+  align-self: start;
   flex-shrink: 0;
+  margin-block-start: round(up, 1ex - 1cap, 1px);
+}
+
+sl-icon {
+  block-size: var(--sl-size-200);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform var(--_transition-duration) ease-in-out;
+  }
+}
+
+svg {
+  aspect-ratio: 1;
+  block-size: var(--sl-size-200);
 }
 
 g {
@@ -131,7 +151,6 @@ g {
     transform: rotate(90deg);
   }
 
-  /* stylelint-disable-next-line max-nesting-depth */
   @media (prefers-reduced-motion: no-preference) {
     transition: transform var(--_transition-duration) cubic-bezier(0.6, 2, 0.6, 1);
   }
@@ -142,7 +161,7 @@ g {
   animation-fill-mode: both;
   animation-iteration-count: 1;
   animation-timing-function: linear;
-  background: var(--_background);
+  background: var(--sl-elevation-surface-base-default);
   display: grid;
   overflow: hidden;
 
@@ -157,9 +176,8 @@ g {
 }
 
 [part='panel'] {
-  color: var(--_panel-color);
-  font: var(--_panel-font);
-  padding: var(--_panel-padding-block) var(--_panel-padding-inline);
+  color: var(--sl-color-foreground-plain);
+  padding: var(--sl-size-200) var(--sl-size-500);
   position: relative;
 }
 

packages/components/accordion/src/accordion-item.spec.ts

@@ -19,15 +19,40 @@ describe('sl-accordion-item', () => {
       summary = el.renderRoot.querySelector('summary') as HTMLElement;
     });
 
-    it('should render correctly', () => {
-      expect(el).shadowDom.to.equalSnapshot();
-    });
-
     it('should not be disabled', () => {
       expect(el).not.to.have.attribute('disabled');
       expect(el.disabled).not.to.be.true;
     });
 
+    it('should not have an icon type', () => {
+      expect(el).not.to.have.attribute('icon-type');
+      expect(el.iconType).to.be.undefined;
+    });
+
+    it('should have an icon type when set', async () => {
+      el.iconType = 'chevron';
+      await el.updateComplete;
+
+      expect(el).to.have.attribute('icon-type', 'chevron');
+    });
+
+    it('should render a custom svg icon', () => {
+      const icon = el.renderRoot.querySelector('svg');
+
+      expect(icon).to.exist;
+      expect(icon).to.contain('g.horizontal-line');
+      expect(icon).to.contain('g.vertical-line');
+    });
+
+    it('should render an sl-icon when icon type is "chevron"', async () => {
+      el.iconType = 'chevron';
+      await el.updateComplete;
+
+      const icon = el.renderRoot.querySelector('sl-icon');
+      expect(icon).to.exist;
+      expect(icon).to.have.attribute('name', 'chevron-down');
+    });
+
     it('should have the correct attributes', () => {
       expect(summary).to.have.attribute('aria-controls', 'content');
       expect(summary).to.have.attribute('aria-expanded', 'false');

packages/components/accordion/src/accordion-item.ts

@@ -4,6 +4,7 @@ import { type SlToggleEvent } from '@sl-design-system/shared/events.js';
 import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './accordion-item.scss.js';
+import { type AccordionIconType } from './accordion.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -14,11 +15,13 @@ declare global {
 /**
  * An accordion item component.
  *
+ * @csspart details - Details element of the accordion-item
  * @csspart summary - Header element of the accordion-item
  * @csspart panel - The body of the accordion-item
  *
  * @slot default - Body content for the accordion
  * @slot summary - Header content for the accordion; use this if the `summary` property is not enough
+ * @slot summary-extras - Extra content in the header of the accordion item
  */
 @localized()
 export class AccordionItem extends LitElement {
@@ -28,6 +31,9 @@ export class AccordionItem extends LitElement {
   /** Whether the element is disabled. */
   @property({ type: Boolean, reflect: true }) disabled?: boolean;
 
+  /** @internal */
+  @property({ attribute: 'icon-type', reflect: true }) iconType?: AccordionIconType;
+
   /** Whether the details element is opened. */
   @property({ type: Boolean, reflect: true }) open?: boolean;
 
@@ -55,7 +61,7 @@ export class AccordionItem extends LitElement {
 
   override render(): TemplateResult {
     return html`
-      <details @toggle=${this.#onToggle}>
+      <details @toggle=${this.#onToggle} part="details">
         <summary
           @click=${this.#onClick}
           aria-controls="content"
@@ -64,15 +70,20 @@ export class AccordionItem extends LitElement {
           part="summary"
           tabindex=${this.disabled ? -1 : 0}
         >
-          <svg viewBox="-12 -14 24 28" xmlns="http://www.w3.org/2000/svg">
-            <g class="horizontal-line">
-              <rect x="-1" y="-8" width="2" height="16" rx="0.824742" fill="currentColor" />
-            </g>
-            <g class="vertical-line">
-              <rect x="-1" y="-8" width="2" height="16" rx="0.824742" fill="currentColor" />
-            </g>
-          </svg>
+          ${this.iconType === 'chevron'
+            ? html`<sl-icon name="chevron-down"></sl-icon>`
+            : html`
+                <svg viewBox="-8 -8 16 16" xmlns="http://www.w3.org/2000/svg">
+                  <g class="horizontal-line">
+                    <rect x="-1" y="-7" width="2" height="14" rx="0.82" fill="currentColor" />
+                  </g>
+                  <g class="vertical-line">
+                    <rect x="-1" y="-7" width="2" height="14" rx="0.82" fill="currentColor" />
+                  </g>
+                </svg>
+              `}
           <slot name="summary">${this.summary}</slot>
+          <slot name="summary-extras"></slot>
         </summary>
         <div class="wrapper">
           <div class="body">

packages/components/accordion/src/accordion.scss

@@ -1,6 +1,4 @@
 :host {
-  --_background: var(--sl-body-background);
-
-  background: var(--_background);
+  background: var(--sl-elevation-surface-base-default);
   display: block;
 }

packages/components/accordion/src/accordion.spec.ts

@@ -7,16 +7,6 @@ import { Accordion } from './accordion.js';
 describe('sl-accordion', () => {
   let el: Accordion;
 
-  describe('empty', () => {
-    beforeEach(async () => {
-      el = await fixture(html`<sl-accordion></sl-accordion>`);
-    });
-
-    it('should not break', () => {
-      expect(el).shadowDom.to.equalSnapshot();
-    });
-  });
-
   describe('defaults', () => {
     beforeEach(async () => {
       el = await fixture(html`
@@ -28,8 +18,27 @@ describe('sl-accordion', () => {
       `);
     });
 
-    it('should render correctly', () => {
-      expect(el).shadowDom.to.equalSnapshot();
+    it('should have icon type "plusminus"', () => {
+      expect(el.iconType).to.equal('plusminus');
+    });
+
+    it('should propagate the icon type to all items', () => {
+      const iconTypes = Array.from(el.querySelectorAll('sl-accordion-item')).map(item =>
+        item.getAttribute('icon-type')
+      );
+
+      expect(iconTypes).to.deep.equal(['plusminus', 'plusminus', 'plusminus']);
+    });
+
+    it('should have icon type "chevron" when set', async () => {
+      el.iconType = 'chevron';
+      await el.updateComplete;
+
+      const iconTypes = Array.from(el.querySelectorAll('sl-accordion-item')).map(item =>
+        item.getAttribute('icon-type')
+      );
+
+      expect(iconTypes).to.deep.equal(['chevron', 'chevron', 'chevron']);
     });
 
     it('should not be in single mode', () => {
@@ -100,4 +109,21 @@ describe('sl-accordion', () => {
       expect(items.at(1)?.open).to.be.true;
     });
   });
+
+  describe('global icon type', () => {
+    it('should have a default icon type of "plusminus"', () => {
+      expect(Accordion.iconType).to.equal('plusminus');
+    });
+
+    it('should allow setting a global icon type', async () => {
+      Accordion.iconType = 'chevron';
+
+      el = await fixture(html`<sl-accordion></sl-accordion>`);
+
+      expect(el.iconType).to.equal('chevron');
+
+      // Reset for future tests
+      Accordion.iconType = 'plusminus';
+    });
+  });
 });