feat(dialog): descendent attribute support, responsive attribute added

adobe · May 12, 2020 · 568cedb · 568cedb
1 parent fddcf9d
commit 568cedb
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 10 deletions.
diff --git a/packages/dialog/src/dialog-wrapper.ts b/packages/dialog/src/dialog-wrapper.ts
@@ -72,6 +72,9 @@ export class DialogWrapper extends LitElement {
     @property()
     public headline = '';
 
+    @property({ type: Boolean })
+    public responsive = false;
+
     @property({ type: Boolean })
     public underlay = false;
 

diff --git a/packages/dialog/src/spectrum-config.js b/packages/dialog/src/spectrum-config.js
@@ -25,12 +25,21 @@ module.exports = {
                     name: 'open',
                 },
                 {
-                    type: 'enum',
-                    name: 'mode',
-                    values: [
-                        '.spectrum-Dialog--fullscreen',
-                        '.spectrum-Dialog--fullscreenTakeover',
-                    ],
+                    type: 'boolean',
+                    selector: '.spectrum-Dialog--responsive',
+                    name: 'responsive',
+                },
+            ],
+            descendantAttributes: [
+                {
+                    type: 'boolean',
+                    name: 'mode="fullscreen"',
+                    selector: '.spectrum-Dialog--fullscreen',
+                },
+                {
+                    type: 'boolean',
+                    name: 'mode="fullscreen"',
+                    selector: '.spectrum-Dialog--fullscreenTakeover',
                 },
             ],
             classes: [

diff --git a/packages/dialog/src/spectrum-dialog-wrapper.css b/packages/dialog/src/spectrum-dialog-wrapper.css
@@ -31,7 +31,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     /* .spectrum-Dialog-wrapper.is-open */
     visibility: visible;
 }
-.dialog:not(.spectrum-Dialog--fullscreen):not(.spectrum-Dialog--fullscreenTakeover) {
+.dialog:not([mode='fullscreen']):not([mode='fullscreen']) {
     /* .spectrum-Dialog-wrapper .spectrum-Dialog:not(.spectrum-Dialog--fullscreen):not(.spectrum-Dialog--fullscreenTakeover) */
     pointer-events: auto;
     position: relative;
@@ -45,12 +45,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
     margin-top: -2vh;
 }
-:host([open])
-    .dialog:not(.spectrum-Dialog--fullscreen):not(.spectrum-Dialog--fullscreenTakeover) {
+:host([open]) .dialog:not([mode='fullscreen']):not([mode='fullscreen']) {
     /* .spectrum-Dialog-wrapper .spectrum-Dialog:not(.spectrum-Dialog--fullscreen):not(.spectrum-Dialog--fullscreenTakeover).is-open */
     transform: translateY(0);
 }
-.spectrum-Dialog--responsive {
+:host([responsive]) {
     /* .spectrum-Dialog-wrapper .spectrum-Dialog--responsive */
     margin-top: 0;
 }
diff --git a/scripts/process-spectrum-postcss-plugin.js b/scripts/process-spectrum-postcss-plugin.js
@@ -318,6 +318,22 @@ class SpectrumProcessor {
             return result;
         });
 
+        // Map classes to descendent attributes
+        // e.g. ".spectrum-Dialog .spectrum-Button--cta" -> "[variant='cta']"
+        astTransforms.push((selector, rule) => {
+            const result = selector.clone();
+            let attributeFound = false;
+            result.walk((node) => {
+                const attribute = this.component.descendantAttributeForNode(
+                    node
+                );
+                if (!attribute) return;
+
+                node.replaceWith(attribute.shadowNode.clone());
+            });
+            return result;
+        });
+
         // Custom transformations provided in the component's config
         if (this.component.selectorTransforms) {
             for (const transform of this.component.selectorTransforms) {
@@ -617,6 +633,26 @@ class ComponentConfig {
         }
     }
 
+    /**
+     * Return the descendant attribute config or attribute values config for the given
+     * node, if there is one
+     * @param {Node} node The AST node that may represent an attribute
+     */
+    descendantAttributeForNode(node) {
+        for (const attribute of this.descendantAttributes) {
+            if (attribute.node && compareNodes(attribute.node, node)) {
+                return attribute;
+            }
+            if (attribute.type === 'enum') {
+                for (const value of attribute.values) {
+                    if (compareNodes(value.node, node)) {
+                        return value;
+                    }
+                }
+            }
+        }
+    }
+
     /**
      * Convert the configuration into a predicable format and flush it
      * out with some extra computed data that we will need
@@ -707,6 +743,55 @@ class ComponentConfig {
             }
         });
 
+        this.descendantAttributes = this.descendantAttributes || [];
+        this.descendantAttributes.forEach((attribute) => {
+            if (!attribute.name) {
+                const expr = re`/(?:${this.hostSelector}--?|:)(.*)$/`;
+                const match = expr.exec(attribute.selector);
+                if (match) {
+                    attribute.name = match[1];
+                } else {
+                    const message = `Unable to determine name for attribute ${attribute.selector}`;
+                    throw new Error(message);
+                }
+            }
+            let regex;
+            if (attribute.type === 'boolean') {
+                attribute.shadowSelector = `[${attribute.name}]`;
+                attribute.regex = re`(?:${attribute.selector}|${attribute.shadowSelector})`;
+                attribute.node = nodeFromSelector(attribute.selector);
+                attribute.shadowNode = nodeFromSelector(
+                    attribute.shadowSelector
+                );
+            } else if (attribute.type === 'enum') {
+                attribute.values = attribute.values.map((value) => {
+                    const selector = value.selector || value;
+                    let name = value.name;
+                    const basePortion = attribute.root
+                        ? re`/${attribute.root}?(.*)$/`
+                        : hostPortion;
+                    if (!name) {
+                        const match = basePortion.exec(selector);
+                        if (match) {
+                            name = match[1];
+                        } else {
+                            const message = `Unable to determine name for value ${value}`;
+                            throw new Error(message);
+                        }
+                    }
+                    const operator = attribute.wildcard ? '*=' : '=';
+                    return {
+                        name,
+                        selector,
+                        node: nodeFromSelector(selector),
+                        shadowNode: nodeFromSelector(
+                            `[${attribute.name}${operator}"${name}"]`
+                        ),
+                    };
+                });
+            }
+        });
+
         // Normalize the items that will map to slots in our web component
         this.slots = this.slots || [];
         this.slots = this.slots.map((slot) => {