fix: (overlay): Changing getAssignedElementsFromSlot to return just t…

…he first element
adobe · Dec 16, 2024 · 38d3f0e · 38d3f0e
1 parent eda5a4a
commit 38d3f0e
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 70 deletions.
diff --git a/packages/overlay/src/OverlayTrigger.ts b/packages/overlay/src/OverlayTrigger.ts
@@ -74,22 +74,22 @@ export class OverlayTrigger extends SpectrumElement {
     public receivesFocus: 'true' | 'false' | 'auto' = 'auto';
 
     @state()
-    private clickContent: HTMLElement[] = [];
+    private clickContent: HTMLElement | null = null;
 
     private clickPlacement?: Placement;
 
     @state()
-    private longpressContent: HTMLElement[] = [];
+    private longpressContent: HTMLElement | null = null;
 
     private longpressPlacement?: Placement;
 
     @state()
-    private hoverContent: HTMLElement[] = [];
+    private hoverContent: HTMLElement | null = null;
 
     private hoverPlacement?: Placement;
 
     @state()
-    private targetContent: HTMLElement[] = [];
+    private targetContent: HTMLElement | null = null;
 
     @query('#click-overlay', true)
     clickOverlayElement!: Overlay;
@@ -100,11 +100,14 @@ export class OverlayTrigger extends SpectrumElement {
     @query('#hover-overlay', true)
     hoverOverlayElement!: Overlay;
 
-    private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {
+    private getAssignedElementsFromSlot(
+        slot: HTMLSlotElement
+    ): HTMLElement | null {
         const nodes = slot.assignedNodes({ flatten: true });
-        return [
-            nodes.find((node) => node instanceof HTMLElement),
-        ] as HTMLElement[];
+        const element = nodes.find(
+            (node) => node instanceof HTMLElement
+        ) as HTMLElement;
+        return element ? element : null;
     }
 
     private handleTriggerContent(
@@ -158,22 +161,22 @@ export class OverlayTrigger extends SpectrumElement {
     protected override update(changes: PropertyValues): void {
         if (changes.has('clickContent')) {
             this.clickPlacement =
-                ((this.clickContent[0]?.getAttribute('placement') ||
-                    this.clickContent[0]?.getAttribute(
+                ((this.clickContent?.getAttribute('placement') ||
+                    this.clickContent?.getAttribute(
                         'direction'
                     )) as Placement) || undefined;
         }
         if (changes.has('hoverContent')) {
             this.hoverPlacement =
-                ((this.hoverContent[0]?.getAttribute('placement') ||
-                    this.hoverContent[0]?.getAttribute(
+                ((this.hoverContent?.getAttribute('placement') ||
+                    this.hoverContent?.getAttribute(
                         'direction'
                     )) as Placement) || undefined;
         }
         if (changes.has('longpressContent')) {
             this.longpressPlacement =
-                ((this.longpressContent[0]?.getAttribute('placement') ||
-                    this.longpressContent[0]?.getAttribute(
+                ((this.longpressContent?.getAttribute('placement') ||
+                    this.longpressContent?.getAttribute(
                         'direction'
                     )) as Placement) || undefined;
         }
@@ -189,17 +192,17 @@ export class OverlayTrigger extends SpectrumElement {
     protected renderClickOverlay(): TemplateResult {
         import('@spectrum-web-components/overlay/sp-overlay.js');
         const slot = this.renderSlot('click-content');
-        if (!this.clickContent.length) {
+        if (!this.clickContent) {
             return slot;
         }
         return html`
             <sp-overlay
                 id="click-overlay"
-                ?disabled=${this.disabled || !this.clickContent.length}
-                ?open=${this.open === 'click' && !!this.clickContent.length}
+                ?disabled=${this.disabled || !this.clickContent}
+                ?open=${this.open === 'click' && !!this.clickContent}
                 .offset=${this.offset}
                 .placement=${this.clickPlacement || this.placement}
-                .triggerElement=${this.targetContent[0]}
+                .triggerElement=${this.targetContent}
                 .triggerInteraction=${'click'}
                 .type=${this.type !== 'modal' ? 'auto' : 'modal'}
                 @beforetoggle=${this.handleBeforetoggle}
@@ -213,19 +216,19 @@ export class OverlayTrigger extends SpectrumElement {
     protected renderHoverOverlay(): TemplateResult {
         import('@spectrum-web-components/overlay/sp-overlay.js');
         const slot = this.renderSlot('hover-content');
-        if (!this.hoverContent.length) {
+        if (!this.hoverContent) {
             return slot;
         }
         return html`
             <sp-overlay
                 id="hover-overlay"
-                ?open=${this.open === 'hover' && !!this.hoverContent.length}
+                ?open=${this.open === 'hover' && !!this.hoverContent}
                 ?disabled=${this.disabled ||
-                !this.hoverContent.length ||
+                !this.hoverContent ||
                 (!!this.open && this.open !== 'hover')}
                 .offset=${this.offset}
                 .placement=${this.hoverPlacement || this.placement}
-                .triggerElement=${this.targetContent[0]}
+                .triggerElement=${this.targetContent}
                 .triggerInteraction=${'hover'}
                 .type=${'hint'}
                 @beforetoggle=${this.handleBeforetoggle}
@@ -239,18 +242,17 @@ export class OverlayTrigger extends SpectrumElement {
     protected renderLongpressOverlay(): TemplateResult {
         import('@spectrum-web-components/overlay/sp-overlay.js');
         const slot = this.renderSlot('longpress-content');
-        if (!this.longpressContent.length) {
+        if (!this.longpressContent) {
             return slot;
         }
         return html`
             <sp-overlay
                 id="longpress-overlay"
-                ?disabled=${this.disabled || !this.longpressContent.length}
-                ?open=${this.open === 'longpress' &&
-                !!this.longpressContent.length}
+                ?disabled=${this.disabled || !this.longpressContent}
+                ?open=${this.open === 'longpress' && !!this.longpressContent}
                 .offset=${this.offset}
                 .placement=${this.longpressPlacement || this.placement}
-                .triggerElement=${this.targetContent[0]}
+                .triggerElement=${this.targetContent}
                 .triggerInteraction=${'longpress'}
                 .type=${'auto'}
                 @beforetoggle=${this.handleBeforetoggle}

diff --git a/packages/radio/src/radio-overrides.css b/packages/radio/src/radio-overrides.css
@@ -79,21 +79,21 @@
     --spectrum-radio-button-checked-border-color-focus: var(
         --system-radio-button-checked-border-color-focus
     );
+    --spectrum-radio-text-to-control: var(--system-radio-text-to-control);
+    --spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text);
+    --spectrum-radio-label-bottom-to-text: var(
+        --system-radio-label-bottom-to-text
+    );
+    --spectrum-radio-font-size: var(--system-radio-font-size);
     --spectrum-radio-line-height: var(--system-radio-line-height);
     --spectrum-radio-animation-duration: var(--system-radio-animation-duration);
     --spectrum-radio-height: var(--system-radio-height);
     --spectrum-radio-button-control-size: var(
         --system-radio-button-control-size
     );
-    --spectrum-radio-text-to-control: var(--system-radio-text-to-control);
-    --spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text);
-    --spectrum-radio-label-bottom-to-text: var(
-        --system-radio-label-bottom-to-text
-    );
     --spectrum-radio-button-top-to-control: var(
         --system-radio-button-top-to-control
     );
-    --spectrum-radio-font-size: var(--system-radio-font-size);
 }
 
 :host(:lang(ja)) {
@@ -114,44 +114,44 @@
     );
 }
 
-:host {
-    --spectrum-radio-height: var(--system-radio-size-m-height);
+:host([size='s']) {
+    --spectrum-radio-height: var(--system-radio-size-s-height);
     --spectrum-radio-button-control-size: var(
-        --system-radio-size-m-button-control-size
+        --system-radio-size-s-button-control-size
     );
     --spectrum-radio-text-to-control: var(
-        --system-radio-size-m-text-to-control
+        --system-radio-size-s-text-to-control
     );
     --spectrum-radio-label-top-to-text: var(
-        --system-radio-size-m-label-top-to-text
+        --system-radio-size-s-label-top-to-text
     );
     --spectrum-radio-label-bottom-to-text: var(
-        --system-radio-size-m-label-bottom-to-text
+        --system-radio-size-s-label-bottom-to-text
     );
     --spectrum-radio-button-top-to-control: var(
-        --system-radio-size-m-button-top-to-control
+        --system-radio-size-s-button-top-to-control
     );
-    --spectrum-radio-font-size: var(--system-radio-size-m-font-size);
+    --spectrum-radio-font-size: var(--system-radio-size-s-font-size);
 }
 
-:host([size='s']) {
-    --spectrum-radio-height: var(--system-radio-size-s-height);
+:host {
+    --spectrum-radio-height: var(--system-radio-size-m-height);
     --spectrum-radio-button-control-size: var(
-        --system-radio-size-s-button-control-size
+        --system-radio-size-m-button-control-size
     );
     --spectrum-radio-text-to-control: var(
-        --system-radio-size-s-text-to-control
+        --system-radio-size-m-text-to-control
     );
     --spectrum-radio-label-top-to-text: var(
-        --system-radio-size-s-label-top-to-text
+        --system-radio-size-m-label-top-to-text
     );
     --spectrum-radio-label-bottom-to-text: var(
-        --system-radio-size-s-label-bottom-to-text
+        --system-radio-size-m-label-bottom-to-text
     );
     --spectrum-radio-button-top-to-control: var(
-        --system-radio-size-s-button-top-to-control
+        --system-radio-size-m-button-top-to-control
     );
-    --spectrum-radio-font-size: var(--system-radio-size-s-font-size);
+    --spectrum-radio-font-size: var(--system-radio-size-m-font-size);
 }
 
 :host([size='l']) {

diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css
@@ -153,7 +153,7 @@ governing permissions and limitations under the License.
             var(--spectrum-radio-neutral-content-color)
         )
     );
-    margin-inline-start: 0;
+    margin-inline-start: auto;
 }
 
 :host([emphasized][checked]) #input + #button:before {

diff --git a/packages/search/src/search-overrides.css b/packages/search/src/search-overrides.css
@@ -68,16 +68,6 @@
     --spectrum-search-text-to-icon: var(--system-search-text-to-icon);
 }
 
-:host([size='m']) #textfield {
-    --spectrum-search-border-radius: var(--system-search-size-m-border-radius);
-    --spectrum-search-edge-to-visual: var(
-        --system-search-size-m-edge-to-visual
-    );
-    --spectrum-search-block-size: var(--system-search-size-m-block-size);
-    --spectrum-search-icon-size: var(--system-search-size-m-icon-size);
-    --spectrum-search-text-to-icon: var(--system-search-size-m-text-to-icon);
-}
-
 :host([size='s']) #textfield {
     --spectrum-search-border-radius: var(--system-search-size-s-border-radius);
     --spectrum-search-edge-to-visual: var(
@@ -88,6 +78,16 @@
     --spectrum-search-text-to-icon: var(--system-search-size-s-text-to-icon);
 }
 
+:host([size='m']) #textfield {
+    --spectrum-search-border-radius: var(--system-search-size-m-border-radius);
+    --spectrum-search-edge-to-visual: var(
+        --system-search-size-m-edge-to-visual
+    );
+    --spectrum-search-block-size: var(--system-search-size-m-block-size);
+    --spectrum-search-icon-size: var(--system-search-size-m-icon-size);
+    --spectrum-search-text-to-icon: var(--system-search-size-m-text-to-icon);
+}
+
 :host([size='l']) #textfield {
     --spectrum-search-border-radius: var(--system-search-size-l-border-radius);
     --spectrum-search-edge-to-visual: var(

diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css
@@ -269,18 +269,19 @@ governing permissions and limitations under the License.
 }
 
 :host([quiet]) {
-    --spectrum-search-quiet-button-offset: var(
-        --mod-search-quiet-button-offset,
-        calc(
-            var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2 -
-                var(--mod-search-icon-size, var(--spectrum-search-icon-size)) /
-                2
-        )
+    --spectrum-search-quiet-button-offset: calc(
+        var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2 -
+            var(--mod-search-icon-size, var(--spectrum-search-icon-size)) / 2
     );
 }
 
-:host([quiet]) #button .spectrum-ClearButton-icon {
-    transform: translateX(var(--spectrum-search-quiet-button-offset));
+:host([quiet]) #button {
+    transform: translateX(
+        var(
+            --mod-search-quiet-button-offset,
+            var(--spectrum-search-quiet-button-offset)
+        )
+    );
 }
 
 :host([quiet]) #textfield .input {
@@ -301,6 +302,10 @@ governing permissions and limitations under the License.
         var(
                 --mod-search-button-inline-size,
                 var(--spectrum-search-button-inline-size)
-            ) - var(--spectrum-search-quiet-button-offset)
+            ) -
+            var(
+                --mod-search-quiet-button-offset,
+                var(--spectrum-search-quiet-button-offset)
+            )
     );
 }