fix(tags): support distant sibling selectors

adobe · Aug 29, 2020 · a8dcf7f · a8dcf7f
1 parent 4833a59
commit a8dcf7f
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 9 deletions.
diff --git a/packages/split-button/package.json b/packages/split-button/package.json
@@ -44,7 +44,8 @@
         "lit-html": "^1.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/splitbutton": "^3.0.0-beta.3"
+        "@spectrum-css/splitbutton": "^3.0.0-beta.3",
+        "@spectrum-web-components/menu": "^0.3.0"
     },
     "dependencies": {
         "@spectrum-web-components/button": "^0.8.0",

diff --git a/packages/split-button/stories/split-button.stories.ts b/packages/split-button/stories/split-button.stories.ts
@@ -14,6 +14,8 @@ import { TemplateResult } from 'lit-html';
 import { html, action } from '@open-wc/demoing-storybook';
 
 import '../sp-split-button.js';
+import '@spectrum-web-components/menu/sp-menu.js';
+import '@spectrum-web-components/menu/sp-menu-item.js';
 
 export default {
     title: 'Split Button',
@@ -117,7 +119,7 @@ moreCta.story = {
 export const moreCtaOpen = (options = {}): TemplateResult => {
     return html`
         <div>
-            <sp-split-button open>
+            <sp-split-button type="more" open>
                 ${menu(options)}
             </sp-split-button>
         </div>

diff --git a/packages/tags/src/Tag.ts b/packages/tags/src/Tag.ts
@@ -37,6 +37,14 @@ export class Tag extends LitElement {
     @property({ type: Boolean, reflect: true })
     public disabled = false;
 
+    private get hasIcon(): boolean {
+        return !!this.querySelector('[slot="icon"]');
+    }
+
+    private get hasAvatar(): boolean {
+        return !!this.querySelector('[slot="avatar"]');
+    }
+
     constructor() {
         super();
         this.addEventListener('focusin', this.handleFocusin);
@@ -77,9 +85,23 @@ export class Tag extends LitElement {
     }
 
     protected render(): TemplateResult {
+        const slots = [];
+        if (this.hasAvatar) {
+            slots.push(
+                html`
+                    <slot name="avatar"></slot>
+                `
+            );
+        }
+        if (this.hasIcon) {
+            slots.push(
+                html`
+                    <slot name="icon"></slot>
+                `
+            );
+        }
         return html`
-            <slot name="avatar"></slot>
-            <slot name="icon"></slot>
+            ${slots}
             <span class="label"><slot></slot></span>
             ${this.deletable
                 ? html`

diff --git a/packages/tags/src/spectrum-tag.css b/packages/tags/src/spectrum-tag.css
@@ -108,6 +108,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
             )
     );
 }
+:host > slot[name='avatar'] ~ .label,
+:host > slot[name='icon'] ~ .label {
+    /* .spectrum-Tags-item>.spectrum-Avatar~.spectrum-Tags-itemLabel,
+   * .spectrum-Tags-item>.spectrum-Icon~.spectrum-Tags-itemLabel */
+    margin-right: calc(
+        var(
+                --spectrum-tag-avatar-padding-x,
+                var(--spectrum-global-dimension-size-100)
+            ) -
+            var(
+                --spectrum-tag-padding-x,
+                var(--spectrum-global-dimension-size-125)
+            )
+    );
+}
 .clear-button {
     /* .spectrum-Tags-item .spectrum-ClearButton */
     margin-right: calc(

diff --git a/scripts/process-spectrum-postcss-plugin.js b/scripts/process-spectrum-postcss-plugin.js
@@ -195,7 +195,8 @@ class SpectrumProcessor {
                 if (!slot) return;
                 const isLastNode = index === result.length - 1;
                 const isSiblingSelector =
-                    !isLastNode && node.next().value === '+';
+                    !isLastNode &&
+                    (node.next().value === '+' || node.next().value === '~');
 
                 if (isSiblingSelector && !isLastNode) {
                     // If a sibling selector is used, and the slot is not the last

diff --git a/test/visual/stories.js b/test/visual/stories.js
@@ -147,9 +147,9 @@ module.exports = [
     'split-button--cta',
     'split-button--primary',
     'split-button--primary',
-    'more-button--cta',
-    'more-button--primary',
-    'more-button--primary',
+    'split-button--more-cta',
+    'split-button--more-primary',
+    'split-button--more-primary',
     'statuslight--all-variants',
     'statuslight--disabled-true',
     'switch--default',

diff --git a/test/visual/visual.js b/test/visual/visual.js
@@ -78,7 +78,7 @@ module.exports = {
                     const config = createConfig({
                         port: 4444,
                         nodeResolve: true,
-                        appIndex: 'index.hml',
+                        appIndex: 'index.html',
                         rootDir: path.resolve(
                             process.cwd(),
                             'documentation',