Fix disabled state of tool bar buttons not being reflected in menu items

.changeset/rich-ravens-shout.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/tool-bar': patch
+---
+
+Fix issue where changing disabled state of buttons wasn't reflected in the menu items.

packages/components/tool-bar/src/tool-bar.spec.ts

@@ -106,6 +106,17 @@ describe('sl-tool-bar', () => {
       expect(group.selects).to.equal('single');
       expect(group.visible).to.be.true;
     });
+
+    it('should update the disabled state of the items when they change', async () => {
+      expect(el.items[0]).to.have.property('disabled', false);
+
+      const button = el.querySelector('sl-button')!;
+      button.setAttribute('disabled', '');
+
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(el.items[0]).to.have.property('disabled', true);
+    });
   });
 
   describe('overflow', () => {

packages/components/tool-bar/src/tool-bar.stories.ts

@@ -20,6 +20,7 @@ import {
   faItalic as fasItalic,
   faUnderline as fasUnderline
 } from '@fortawesome/pro-solid-svg-icons';
+import { type Button } from '@sl-design-system/button';
 import '@sl-design-system/button/register.js';
 import { Icon } from '@sl-design-system/icon';
 import '@sl-design-system/icon/register.js';
@@ -114,44 +115,8 @@ export default {
 export const Basic: Story = {
   args: {
     description:
-      'This example shows a typical tool bar with text formatting options. You can resize the tool bar by dragging the right edge. This showcases how the tool bar can adapt to different widths and overflow items in a menu.',
+      'This example shows a typical tool bar with buttons. You can resize the tool bar by dragging the right edge. This showcases how the tool bar can adapt to different widths and overflow items in a menu.',
     items: () => html`
-      <sl-toggle-group multiple>
-        <sl-toggle-button aria-label="Bold">
-          <sl-icon name="far-bold" slot="default"></sl-icon>
-          <sl-icon name="fas-bold" slot="pressed"></sl-icon>
-        </sl-toggle-button>
-        <sl-toggle-button aria-label="Italic">
-          <sl-icon name="far-italic" slot="default"></sl-icon>
-          <sl-icon name="fas-italic" slot="pressed"></sl-icon>
-        </sl-toggle-button>
-        <sl-toggle-button aria-label="Underline">
-          <sl-icon name="far-underline" slot="default"></sl-icon>
-          <sl-icon name="fas-underline" slot="pressed"></sl-icon>
-        </sl-toggle-button>
-      </sl-toggle-group>
-
-      <sl-toggle-group>
-        <sl-toggle-button aria-label="Align left">
-          <sl-icon name="far-align-left" slot="default"></sl-icon>
-          <sl-icon name="fas-align-left" slot="pressed"></sl-icon>
-        </sl-toggle-button>
-        <sl-toggle-button aria-label="Align center">
-          <sl-icon name="far-align-center" slot="default"></sl-icon>
-          <sl-icon name="fas-align-center" slot="pressed"></sl-icon>
-        </sl-toggle-button>
-        <sl-toggle-button aria-label="Align right">
-          <sl-icon name="far-align-right" slot="default"></sl-icon>
-          <sl-icon name="fas-align-right" slot="pressed"></sl-icon>
-        </sl-toggle-button>
-        <sl-toggle-button aria-label="Align justify">
-          <sl-icon name="far-align-justify" slot="default"></sl-icon>
-          <sl-icon name="fas-align-justify" slot="pressed"></sl-icon>
-        </sl-toggle-button>
-      </sl-toggle-group>
-
-      <sl-tool-bar-divider></sl-tool-bar-divider>
-
       <sl-button disabled fill="outline">
         <sl-icon name="far-scissors"></sl-icon>
         Cut
@@ -235,6 +200,31 @@ export const Overflow: Story = {
   }
 };
 
+export const State: Story = {
+  args: {
+    description:
+      'This example shows a how the tool bar automatically updates when the disabled state of buttons changes.',
+    items: () => {
+      const onClick = (event: Event) => {
+        const buttons = (event.target as HTMLElement).parentElement?.querySelectorAll<Button>(
+          'sl-button:not(:first-child)'
+        );
+
+        buttons?.forEach(button => {
+          button.disabled = !button.disabled;
+        });
+      };
+
+      return html`
+        <sl-button @click=${onClick}>Toggle disabled</sl-button>
+        <sl-button>Action 1</sl-button>
+        <sl-button>Action 2</sl-button>
+        <sl-button>Action 3</sl-button>
+      `;
+    }
+  }
+};
+
 export const Tooltips: Story = {
   args: {
     description: 'This example shows a tool bar with different tooltip techniques on the buttons.',

packages/components/tool-bar/src/tool-bar.ts

@@ -68,8 +68,11 @@ export class ToolBar extends ScopedElementsMixin(LitElement) {
   /** @internal */
   static override styles: CSSResultGroup = styles;
 
-  // Observe changes to the size of the element.
-  #observer = new ResizeObserver(entries => this.#onResize(entries.at(0)?.contentBoxSize.at(0)?.inlineSize ?? 0));
+  /** Observe changes to the child elements. */
+  #mutationObserver = new MutationObserver(() => this.#updateMapping());
+
+  /** Observe changes to the size of the element. */
+  #resizeObserver = new ResizeObserver(entries => this.#onResize(entries.at(0)?.contentBoxSize.at(0)?.inlineSize ?? 0));
 
   /**
    * The horizontal alignment within the tool-bar.
@@ -114,11 +117,18 @@ export class ToolBar extends ScopedElementsMixin(LitElement) {
 
     this.setAttribute('role', 'toolbar');
 
-    this.#observer.observe(this);
+    this.#mutationObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['disabled']
+    });
+    this.#resizeObserver.observe(this);
   }
 
   override disconnectedCallback(): void {
-    this.#observer.disconnect();
+    this.#resizeObserver.disconnect();
+    this.#mutationObserver.disconnect();
 
     super.disconnectedCallback();
   }
@@ -212,14 +222,19 @@ export class ToolBar extends ScopedElementsMixin(LitElement) {
       return;
     }
 
-    const elements = event.target.assignedElements({ flatten: true });
-
-    this.empty = elements.length === 0;
-
     if (typeof this.disabled === 'boolean') {
-      elements.forEach(el => el.toggleAttribute('disabled', this.disabled));
+      event.target.assignedElements({ flatten: true }).forEach(el => el.toggleAttribute('disabled', this.disabled));
     }
 
+    this.#updateMapping();
+  }
+
+  #updateMapping(): void {
+    const slot = this.renderRoot.querySelector('slot')!,
+      elements = slot.assignedElements({ flatten: true });
+
+    this.empty = elements.length === 0;
+
     this.items = elements
       .map(element => {
         if (element instanceof Button || element instanceof ToggleButton) {
@@ -235,6 +250,10 @@ export class ToolBar extends ScopedElementsMixin(LitElement) {
         return undefined;
       })
       .filter(item => item !== undefined) as ToolBarItem[];
+
+    // Reconnect the resize observer to ensure we measure the correct widths
+    this.#resizeObserver.disconnect();
+    this.#resizeObserver.observe(this);
   }
 
   #mapToggleGroupToItem(group: ToggleGroup): ToolBarItemGroup {
@@ -251,7 +270,7 @@ export class ToolBar extends ScopedElementsMixin(LitElement) {
   }
 
   #mapButtonToItem(button: HTMLElement): ToolBarItemButton {
-    let label = button.getAttribute('aria-label') || button.textContent?.trim();
+    let label: string | undefined = button.getAttribute('aria-label') || button.textContent?.trim();
 
     if (button.hasAttribute('aria-labelledby')) {
       const buttonLabelledby = button.getAttribute('aria-labelledby');