fix(core): fix display of nested buttons in button groups

haiilo · Dec 16, 2024 · 97cb183 · 97cb183
1 parent b2f4557
commit 97cb183
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 87 deletions.
diff --git a/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts b/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts
@@ -22,6 +22,7 @@ export class BooleanValueAccessor extends ValueAccessor {
     super(el);
   }
   writeValue(value: any) {
-    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+    this.el.nativeElement.checked = this.lastValue =
+      this.el.nativeElement.value == null ? value : this.el.nativeElement.value === value;
   }
 }
diff --git a/core/src/components/cat-button-group/cat-button-group.scss b/core/src/components/cat-button-group/cat-button-group.scss
@@ -3,13 +3,3 @@
   display: inline-flex;
   vertical-align: middle;
 }
-
-::slotted(cat-button[variant='outlined']),
-::slotted(cat-button:not([variant])) {
-  margin-right: -1px;
-}
-
-::slotted(cat-button[variant='outlined']:last-child),
-::slotted(cat-button:not([variant]):last-child) {
-  margin-right: 0;
-}
diff --git a/core/src/components/cat-button-group/cat-button-group.tsx b/core/src/components/cat-button-group/cat-button-group.tsx
@@ -10,7 +10,7 @@ import { Component, Element, h, Host, Prop } from '@stencil/core';
   shadow: true
 })
 export class CatButtonGroup {
-  private formElements: HTMLCatButtonElement[] = [];
+  private buttonElements: HTMLCatButtonElement[] = [];
 
   @Element() hostElement!: HTMLElement;
 
@@ -29,9 +29,14 @@ export class CatButtonGroup {
   }
 
   private onSlotChange(): void {
-    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-button'));
-    this.formElements.forEach((element, index) => {
-      element.buttonGroupPosition = index === 0 ? 'first' : index === this.formElements.length - 1 ? 'last' : 'middle';
+    this.buttonElements = Array.from(
+      this.hostElement.querySelectorAll(
+        ':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot="trigger"]'
+      )
+    );
+    this.buttonElements.forEach((element, index) => {
+      element.buttonGroupPosition =
+        index === 0 ? 'first' : index === this.buttonElements.length - 1 ? 'last' : 'middle';
     });
   }
 }
diff --git a/core/src/components/cat-button/cat-button.scss b/core/src/components/cat-button/cat-button.scss
@@ -21,6 +21,11 @@ $button-sizes: (
   display: none;
 }
 
+:host([data-button-group='middle']),
+:host([data-button-group='last']) {
+  margin-left: -1px;
+}
+
 .cat-button {
   position: relative;
   font: inherit;
@@ -93,7 +98,7 @@ $button-sizes: (
 
 // ----- group button
 
-.cat-group-button {
+.cat-button-group {
   &-first {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -133,7 +138,7 @@ $button-sizes: (
 
 .cat-button-outlined {
   background-color: cat-token('color.ui.background.surface');
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, cat-token-wrap(var(--base)) 20%, #ffffff);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, cat-token-wrap(var(--base)) 20%, #fff);
   color: cat-token-wrap(var(--text));
 
   &.cat-button-disabled {
@@ -142,15 +147,15 @@ $button-sizes: (
   }
 
   &:hover:not(.cat-button-disabled):not(.cat-button-loading) {
-    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #ffffff);
+    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);
   }
 
   &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {
-    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #ffffff);
+    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);
   }
 
   &:active:not(.cat-button-disabled):not(.cat-button-loading) {
-    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #ffffff);
+    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);
   }
 }
 

diff --git a/core/src/components/cat-button/cat-button.tsx b/core/src/components/cat-button/cat-button.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';
 import { MediaMatcher } from '../../utils/media-matcher';
 import { findClosest } from '../../utils/find-closest';
@@ -238,71 +238,75 @@ export class CatButton {
   render() {
     if (this.url) {
       return (
-        <a
-          {...this.nativeAttributes}
-          ref={el => (this.button = el as HTMLAnchorElement)}
-          href={this.disabled ? undefined : this.url}
-          target={this.urlTarget}
-          aria-disabled={this.disabled ? 'true' : null}
-          aria-label={this.a11yLabel}
-          aria-current={this.a11yCurrent}
-          id={this.buttonId}
-          part="button"
-          class={{
-            'cat-button': true,
-            'cat-button-empty': !this.hasSlottedContent,
-            'cat-button-active': this.active,
-            'cat-button-icon': this.isIconButton,
-            'cat-button-round': this.round,
-            'cat-button-loading': this.loading,
-            'cat-button-disabled': this.disabled,
-            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
-            [`cat-button-${this.variant}`]: Boolean(this.variant),
-            [`cat-button-${this.color}`]: Boolean(this.color),
-            [`cat-button-${this.size}`]: Boolean(this.size)
-          }}
-          onClick={this.onClick.bind(this)}
-          onFocus={this.onFocus.bind(this)}
-          onBlur={this.onBlur.bind(this)}
-        >
-          {this.content}
-        </a>
+        <Host data-button-group={this.buttonGroupPosition}>
+          <a
+            {...this.nativeAttributes}
+            ref={el => (this.button = el as HTMLAnchorElement)}
+            href={this.disabled ? undefined : this.url}
+            target={this.urlTarget}
+            aria-disabled={this.disabled ? 'true' : null}
+            aria-label={this.a11yLabel}
+            aria-current={this.a11yCurrent}
+            id={this.buttonId}
+            part="button"
+            class={{
+              'cat-button': true,
+              'cat-button-empty': !this.hasSlottedContent,
+              'cat-button-active': this.active,
+              'cat-button-icon': this.isIconButton,
+              'cat-button-round': this.round,
+              'cat-button-loading': this.loading,
+              'cat-button-disabled': this.disabled,
+              'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
+              [`cat-button-${this.variant}`]: Boolean(this.variant),
+              [`cat-button-${this.color}`]: Boolean(this.color),
+              [`cat-button-${this.size}`]: Boolean(this.size),
+              [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)
+            }}
+            onClick={this.onClick.bind(this)}
+            onFocus={this.onFocus.bind(this)}
+            onBlur={this.onBlur.bind(this)}
+          >
+            {this.content}
+          </a>
+        </Host>
       );
     } else {
       return (
-        <button
-          {...this.nativeAttributes}
-          ref={el => (this.button = el as HTMLButtonElement)}
-          type={this.submit ? 'submit' : 'button'}
-          name={this.name}
-          value={this.value}
-          disabled={this.disabled}
-          aria-disabled={this.disabled ? 'true' : null}
-          aria-label={this.a11yLabel}
-          aria-current={this.a11yCurrent}
-          id={this.buttonId}
-          part="button"
-          class={{
-            'cat-button': true,
-            'cat-button-empty': !this.hasSlottedContent,
-            'cat-button-active': this.active,
-            'cat-button-icon': this.isIconButton,
-            'cat-button-round': this.round ?? this.isIconButton,
-            'cat-button-loading': this.loading,
-            'cat-button-disabled': this.disabled,
-            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
-            [`cat-button-${this.variant}`]: Boolean(this.variant),
-            [`cat-button-${this.color}`]: Boolean(this.color),
-            [`cat-button-${this.size}`]: Boolean(this.size),
-            [`cat-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),
-            'cat-group-button': Boolean(this.buttonGroupPosition)
-          }}
-          onClick={this.onClick.bind(this)}
-          onFocus={this.onFocus.bind(this)}
-          onBlur={this.onBlur.bind(this)}
-        >
-          {this.content}
-        </button>
+        <Host data-button-group={this.buttonGroupPosition}>
+          <button
+            {...this.nativeAttributes}
+            ref={el => (this.button = el as HTMLButtonElement)}
+            type={this.submit ? 'submit' : 'button'}
+            name={this.name}
+            value={this.value}
+            disabled={this.disabled}
+            aria-disabled={this.disabled ? 'true' : null}
+            aria-label={this.a11yLabel}
+            aria-current={this.a11yCurrent}
+            id={this.buttonId}
+            part="button"
+            class={{
+              'cat-button': true,
+              'cat-button-empty': !this.hasSlottedContent,
+              'cat-button-active': this.active,
+              'cat-button-icon': this.isIconButton,
+              'cat-button-round': this.round ?? this.isIconButton,
+              'cat-button-loading': this.loading,
+              'cat-button-disabled': this.disabled,
+              'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
+              [`cat-button-${this.variant}`]: Boolean(this.variant),
+              [`cat-button-${this.color}`]: Boolean(this.color),
+              [`cat-button-${this.size}`]: Boolean(this.size),
+              [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)
+            }}
+            onClick={this.onClick.bind(this)}
+            onFocus={this.onFocus.bind(this)}
+            onBlur={this.onBlur.bind(this)}
+          >
+            {this.content}
+          </button>
+        </Host>
       );
     }
   }

diff --git a/core/src/components/cat-checkbox/cat-checkbox.tsx b/core/src/components/cat-checkbox/cat-checkbox.tsx
@@ -245,6 +245,6 @@ export class CatCheckbox {
   }
 
   private updateResolved() {
-    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;
+    this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);
   }
 }
diff --git a/core/src/components/cat-date-inline/cat-date-inline.tsx b/core/src/components/cat-date-inline/cat-date-inline.tsx
@@ -450,7 +450,7 @@ export class CatDateInline {
     } else if (isSameMonth(this.viewDate, now) && (!minDate || minDate <= now)) {
       return isSameMonth(this.viewDate, date) && isSameDay(now, date);
     }
-    const minDay = isSameMonth(date, minDate) ? minDate?.getDate() ?? 1 : 1;
+    const minDay = isSameMonth(date, minDate) ? (minDate?.getDate() ?? 1) : 1;
     return isSameMonth(this.viewDate, date) && date.getDate() === minDay;
   }
 

diff --git a/core/src/components/cat-dropdown/cat-dropdown.tsx b/core/src/components/cat-dropdown/cat-dropdown.tsx
@@ -243,7 +243,7 @@ export class CatDropdown {
       const elem = elems.shift();
       trigger = elem?.hasAttribute('data-trigger')
         ? (elem as HTMLElement)
-        : elem?.querySelector('[data-trigger]') ?? undefined;
+        : (elem?.querySelector('[data-trigger]') ?? undefined);
     }
     if (!trigger) {
       trigger = firstTabbable(this.triggerSlot);

diff --git a/core/src/components/cat-toggle/cat-toggle.tsx b/core/src/components/cat-toggle/cat-toggle.tsx
@@ -215,6 +215,6 @@ export class CatToggle {
   }
 
   private updateResolved() {
-    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;
+    this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);
   }
 }