@kubex/zinc 1.1.170 → 1.1.171

package/docs/pages/components/button-group.md

@@ -139,6 +139,55 @@ Button groups work with all button variants including colors and styles.
 </zn-button-group>
 ```
 
+### Panel Background
+
+Use the `panel-bg` attribute to give every button in the group the icon button look: a panel background with a border, text-coloured labels and a tinted hover. Color variants tint the label and icon instead of filling the button.
+
+```html:preview
+<zn-button-group panel-bg>
+  <zn-button icon="format_bold"></zn-button>
+  <zn-button icon="format_italic"></zn-button>
+  <zn-button icon="format_underlined"></zn-button>
+</zn-button-group>
+
+<br />
+<br />
+
+<zn-button-group panel-bg>
+  <zn-button icon="view_list">List</zn-button>
+  <zn-button icon="grid_view">Grid</zn-button>
+  <zn-button icon="delete" color="error">Delete</zn-button>
+</zn-button-group>
+
+<br />
+<br />
+
+<zn-button-group panel-bg gap>
+  <zn-button>Cancel</zn-button>
+  <zn-button>Save</zn-button>
+</zn-button-group>
+```
+
+Set `aria-pressed="true"` on the selected button to show it in its active colour, for segmented toggles.
+
+```html:preview
+<zn-button-group panel-bg class="panel-bg-toggle">
+  <zn-button aria-pressed="false">Mine</zn-button>
+  <zn-button aria-pressed="true">Everyone</zn-button>
+</zn-button-group>
+
+<script type="module">
+  const group = document.querySelector('.panel-bg-toggle');
+  group.addEventListener('click', event => {
+    const clicked = event.target.closest('zn-button');
+    if (!clicked) return;
+    group.querySelectorAll('zn-button').forEach(button => {
+      button.setAttribute('aria-pressed', String(button === clicked));
+    });
+  });
+</script>
+```
+
 ### With Icons
 
 Button groups work seamlessly with icon buttons.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.170",
+  "version": "1.1.171",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/button/button.scss

@@ -493,12 +493,12 @@
 }
 
 :host([data-zn-button-group__button--first]:not([data-zn-button-group__button--last])) .button {
-  border-radius: 5px 0 0 5px !important;
+  border-radius: var(--zn-button-border-radius, var(--zn-border-radius)) 0 0 var(--zn-button-border-radius, var(--zn-border-radius)) !important;
   border-right: 0 !important;
 }
 
 :host([data-zn-button-group__button--last]:not([data-zn-button-group__button--first])) .button {
-  border-radius: 0 5px 5px 0 !important;
+  border-radius: 0 var(--zn-button-border-radius, var(--zn-border-radius)) var(--zn-button-border-radius, var(--zn-border-radius)) 0 !important;
   border-left: 0 !important;
 }
 
@@ -513,12 +513,32 @@
   white-space: nowrap;
 }
 
-.button--panel-bg {
+// The icon-button look on a regular button: color variants tint the ink only
+@mixin panel-bg {
   background: rgb(var(--zn-panel));
   border-color: var(--zn-button-border-color, rgb(var(--zn-border-color)));
   color: rgb(var(--zn-text));
 
+  &.button--error, &.button--info, &.button--success, &.button--warning {
+    color: rgb(var(--btn-color));
+  }
+
   &:hover:not([disabled]), &:active:not([disabled]) {
     background: rgba(var(--zn-color-tab), 0.5);
   }
+
+  &[aria-pressed="true"] {
+    &, &:hover:not([disabled]), &:active:not([disabled]) {
+      background: rgba(var(--btn-color), 0.1);
+      color: rgb(var(--btn-color));
+    }
+  }
+}
+
+.button--panel-bg {
+  @include panel-bg;
+}
+
+:host([data-zn-button-group__button--panel-bg]) .button:not(.button--icon-button) {
+  @include panel-bg;
 }

package/src/components/button-group/button-group.component.ts

@@ -1,5 +1,5 @@
 import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {property, query} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
@@ -30,18 +30,27 @@ export default class ZnButtonGroup extends ZincElement {
   @property({type: Boolean}) wrap = false;
   @property({type: Boolean}) start = false;
   @property({type: Boolean}) gap = false;
+  /** Gives every button in the group the icon-button look: panel background,
+   * border, text-colored ink and a tab-tint hover. */
+  @property({type: Boolean, attribute: 'panel-bg'}) panelBackground = false;
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
+  protected updated(changed: PropertyValues<this>) {
+    if (changed.has('panelBackground')) {
+      this.handleSlotChange();
+    }
+  }
+
   private handleSlotChange() {
-    if (this.direction === 'vertical') {
+    if (!this.defaultSlot) {
       return;
     }
 
     const allSlotted = [...this.defaultSlot.assignedElements({flatten: true})] as HTMLElement[];
 
     // Collect buttons from direct zn-button elements and from zn-dropdown wrappers
-    const groupItems: {button: HTMLElement; wrapper?: HTMLElement}[] = [];
+    const groupItems: { button: HTMLElement; wrapper?: HTMLElement }[] = [];
     for (const el of allSlotted) {
       if (el.tagName === 'ZN-BUTTON') {
         groupItems.push({button: el});
@@ -53,6 +62,14 @@ export default class ZnButtonGroup extends ZincElement {
       }
     }
 
+    groupItems.forEach(({button}) => {
+      button.toggleAttribute('data-zn-button-group__button--panel-bg', this.panelBackground);
+    });
+
+    if (this.direction === 'vertical') {
+      return;
+    }
+
     groupItems.forEach(({button, wrapper}, index) => {
       button.toggleAttribute('data-zn-button-group__button--grow', this.grow);
 

package/src/components/button-group/button-group.test.ts

@@ -7,4 +7,22 @@ describe('<zn-button-group>', () => {
 
     expect(el).to.exist;
   });
+
+  it('marks slotted buttons with panel-bg and clears it when removed', async () => {
+    const el = await fixture<HTMLElement & {panelBackground: boolean; updateComplete: Promise<boolean>}>(html`
+      <zn-button-group panel-bg>
+        <zn-button>One</zn-button>
+        <zn-button>Two</zn-button>
+      </zn-button-group>
+    `);
+    await el.updateComplete;
+    const buttons = [...el.querySelectorAll('zn-button')];
+
+    expect(buttons.every(b => b.hasAttribute('data-zn-button-group__button--panel-bg'))).to.be.true;
+
+    el.panelBackground = false;
+    await el.updateComplete;
+
+    expect(buttons.some(b => b.hasAttribute('data-zn-button-group__button--panel-bg'))).to.be.false;
+  });
 });