2017 - fix ic-toggle-button-group props not getting passed down to ic-toggle-buttons

packages/web-components/src/components.d.ts

@@ -1393,7 +1393,7 @@ export namespace Components {
         /**
           * @param setFocusToAnchor when true return focus to anchor element when menu is closed
          */
-        "closeMenu": (setFocusToAnchor?: boolean, element?: HTMLIcMenuItemElement) => Promise<void>;
+        "closeMenu": (setFocusToAnchor?: boolean, menuElement?: HTMLIcMenuItemElement) => Promise<void>;
         /**
           * If `true`, the popover menu will be displayed.
          */

packages/web-components/src/components/ic-toggle-button-group/ic-toggle-button-group.tsx

@@ -8,6 +8,8 @@ import {
   Event,
   EventEmitter,
   State,
+  Watch,
+  forceUpdate,
 } from "@stencil/core";
 import {
   IcSizes,
@@ -87,6 +89,24 @@ export class ToggleButtonGroup {
    */
   @Prop({ reflect: true }) variant: "default" | "icon" = "default";
 
+  @Watch("variant")
+  watchVariantHandler(newValue: "default" | "icon"): void {
+    this.getAllToggleButtons().forEach(
+      (toggleButton) => (toggleButton.variant = newValue)
+    );
+  }
+
+  @Watch("loading")
+  @Watch("size")
+  @Watch("appearance")
+  @Watch("disabled")
+  @Watch("iconPlacement")
+  watchPropsHandler(): void {
+    this.getAllToggleButtons().forEach((toggleButton) =>
+      forceUpdate(toggleButton)
+    );
+  }
+
   /**
    * Emitted when a toggle button is selected.
    */

packages/web-components/src/components/ic-toggle-button/ic-toggle-button.css

@@ -28,9 +28,8 @@
 
 :host(.expand-toggle-group-child) ::part(button) {
   width: 100%;
-  min-height: inherit;
+  min-height: max-content;
   white-space: inherit;
-  height: inherit;
 }
 
 :host ic-button {

packages/web-components/src/components/ic-toggle-button/ic-toggle-button.tsx

@@ -31,6 +31,7 @@ import { IcSizes, IcThemeForeground } from "../../utils/types";
 export class ToggleButton {
   private iconPosition: "left" | "right" | "top";
   private hostMutationObserver: MutationObserver = null;
+  private parentGroup?: HTMLIcToggleButtonGroupElement;
 
   @Element() el: HTMLIcToggleButtonElement;
 
@@ -94,10 +95,9 @@ export class ToggleButton {
   componentWillLoad(): void {
     removeDisabledFalse(this.disabled, this.el);
 
-    const parentIconPlacement = (
-      this.el.parentElement as HTMLIcToggleButtonGroupElement
-    ).iconPlacement;
-    this.iconPosition = this.iconPlacement || parentIconPlacement;
+    this.parentGroup = this.getParentToggleGroup();
+
+    this.iconPosition = this.iconPlacement ?? this.parentGroup?.iconPlacement;
   }
 
   componentDidLoad(): void {
@@ -135,9 +135,9 @@ export class ToggleButton {
 
   @Listen("click", { capture: true })
   handleHostClick(e: Event): void {
-    if (this.disabled) {
+    if (this.disabled || this.parentGroup?.disabled) {
       e.stopImmediatePropagation();
-    } else if (!this.loading) {
+    } else if (!(this.loading || this.parentGroup?.loading)) {
       this.toggleChecked = !this.toggleChecked;
     }
   }
@@ -146,9 +146,16 @@ export class ToggleButton {
     ev.stopImmediatePropagation();
   };
 
+  private getParentToggleGroup = (): HTMLIcToggleButtonGroupElement | null => {
+    if (this.el.parentElement.nodeName === "IC-TOGGLE-BUTTON-GROUP") {
+      return this.el.parentElement as HTMLIcToggleButtonGroupElement;
+    }
+    return null;
+  };
+
   private handleClick = (): void => {
-    !this.loading &&
-      !this.disabled &&
+    !(this.loading || this.parentGroup?.loading) &&
+      !(this.disabled || this.parentGroup?.disabled) &&
       this.icToggleChecked.emit({
         checked: this.toggleChecked,
       });
@@ -158,12 +165,12 @@ export class ToggleButton {
     return (
       <Host
         class={{
-          ["disabled"]: this.disabled,
+          ["disabled"]: this.disabled || this.parentGroup?.disabled,
           ["checked"]: this.toggleChecked,
-          [`${this.appearance}`]: true,
+          [`${this.parentGroup?.appearance ?? this.appearance}`]: true,
           ["icon"]: this.variant === "icon",
-          [`${this.size}`]: true,
-          ["loading"]: this.loading,
+          [`${this.parentGroup?.size ?? this.size}`]: true,
+          ["loading"]: this.loading || this.parentGroup?.loading,
         }}
         onFocus={this.handleFocus}
       >
@@ -175,11 +182,11 @@ export class ToggleButton {
           aria-label={`${
             this.accessibleLabel ? this.accessibleLabel : this.label
           }, ${this.toggleChecked ? "ticked" : "unticked"}`}
-          disabled={this.disabled}
-          appearance={this.appearance}
-          size={this.size}
+          disabled={this.disabled || this.parentGroup?.disabled}
+          appearance={this.parentGroup?.appearance ?? this.appearance}
+          size={this.parentGroup?.size ?? this.size}
           fullWidth={this.fullWidth}
-          loading={this.loading}
+          loading={this.loading || this.parentGroup?.loading}
           aria-disabled={`${this.disabled}`}
         >
           {this.variant !== "icon" && this.label}