feat(material): add shadow parts for styling

hypermedia-app · Oct 25, 2020 · 942f153 · 942f153
1 parent cad1d5d
commit 942f153
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 14 deletions.
diff --git a/.changeset/short-bottles-switch.md b/.changeset/short-bottles-switch.md
@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc-material": patch
+---
+
+Add CSS Shadow Parts
diff --git a/demos/lit-html/src/shaperone-playground-lit.ts b/demos/lit-html/src/shaperone-playground-lit.ts
@@ -47,6 +47,23 @@ export class ShaperonePlayground extends connect(store(), LitElement) {
 
     rdf-editor {
       height: 100%;
+    }
+
+    shaperone-form::part(property) {
+      flex: 1;
+      min-width: 250px;
+      border: solid 1px black;
+      border-radius: 3px;
+      margin: 4px;
+    }
+
+    shaperone-form::part(property):nth-child(0) {
+      flex-basis: 100%;
+    }
+
+    shaperone-form::part(focus-node) {
+      display: flex;
+      flex-wrap: wrap;
     }`
   }
 
@@ -113,15 +130,15 @@ export class ShaperonePlayground extends connect(store(), LitElement) {
                      @quads-changed="${this.__setShape}"></rdf-editor>
         </div>
 
-        <vaadin-split-layout style="width: 67%">
+        <vaadin-split-layout style="width: 80%">
           <div>
             <vaadin-menu-bar .items="${this.formMenu}" @item-selected="${this.__formMenuSelected}"></vaadin-menu-bar>
             <shaperone-form id="form"
                            .shapes="${this.shape.dataset}"
                            .resource="${this.resource.pointer}"
                            ?no-editor-switches="${this.noEditorSwitches}"></shaperone-form>
           </div>
-          <div style="max-width: 50%">
+          <div style="min-width: 50%; max-width: 80%">
             <vaadin-menu-bar .items="${this.resource.menu}" @item-selected="${this.__editorMenuSelected(store().dispatch.resource, this.resourceEditor)}"></vaadin-menu-bar>
             <rdf-editor id="resourceEditor" prefixes="${this.resource.prefixes}"
                        .format="${this.resource.format}"

diff --git a/packages/wc-material/renderer/index.ts b/packages/wc-material/renderer/index.ts
@@ -12,7 +12,7 @@ export const focusNode = (currentStrategy: FocusNodeRenderStrategy): FocusNodeRe
 
     const shapes = focusNode.matchingShapes.length ? focusNode.matchingShapes : focusNode.shapes
 
-    return html`<mwc-list>
+    return html`<mwc-list part="focus-node-header">
       <mwc-list-item ?hasmeta="${shapes.length > 1}" twoline>
           ${focusNode.label}
           <span slot="secondary">${focusNode.shape?.label}</span>
@@ -38,29 +38,33 @@ export const focusNode = (currentStrategy: FocusNodeRenderStrategy): FocusNodeRe
 }
 
 export const property: PropertyRenderStrategy = ({ property, actions, renderObject, renderMultiEditor }) => {
-  const menuElement = property.editors.length ? html`<mwc-property-menu slot="meta"
-                         .property="${property}"
+  const menuElement = property.editors.length
+    ? html`<mwc-property-menu slot="meta"
+                         .property="${property}" part="property-options"
                          @multi-editor-selected="${actions.selectMultiEditor}"
-                         @single-editors-selected="${actions.selectSingleEditors}"></mwc-property-menu>` : html``
+                         @single-editors-selected="${actions.selectSingleEditors}"></mwc-property-menu>`
+    : html``
 
   const editors = () => {
     if (property.selectedEditor) {
-      return html`<mwc-item-lite>${renderMultiEditor()}</mwc-item-lite>`
+      return html`<mwc-item-lite part="editor">${renderMultiEditor()}</mwc-item-lite>`
     }
 
-    const addRow = !property.selectedEditor && property.canAdd ? html`<mwc-item-lite>
+    const addRow = !property.selectedEditor && property.canAdd
+      ? html`<mwc-item-lite part="property-options">
               <i @click="${actions.addObject}">Click to add value</i>
               <mwc-icon slot="options" @click="${actions.addObject}" title="Add value">add_circle</mwc-icon>
-          </mwc-item-lite>` : html``
+          </mwc-item-lite>`
+      : html``
 
     return html`
           ${repeat(property.objects, renderObject)}
           ${addRow}
         `
   }
 
-  return html`<mwc-list>
-    <mwc-list-item hasmeta><b>${property.name}</b> ${menuElement}</mwc-list-item>
+  return html`<mwc-list part="property">
+    <mwc-list-item hasmeta part="property-header"><b>${property.name}</b> ${menuElement}</mwc-list-item>
     ${editors()}
   </mwc-list>`
 }
@@ -85,18 +89,22 @@ export const object: ObjectRenderStrategy = ({ object, actions, renderEditor, pr
   }
 
   let metaSlot = html``
+  let hasOptions = false
   if (object.editors.length > 1 && !object.editorSwitchDisabled) {
+    hasOptions = true
     metaSlot = html`<mwc-editor-toggle .editors="${object.editors}" slot="options"
                                        @editor-selected="${onEditorSelected}"
                                        .removeEnabled="${property.canRemove}"
                                        @object-removed="${actions.remove}"
                                        .selected="${object.selectedEditor}"
+                                       part="editor-options"
                                        title="Select editor"></mwc-editor-toggle>`
   } else if (property.canRemove) {
-    metaSlot = html`<mwc-icon slot="options" @click="${actions.remove}" title="Remove value">remove_circle</mwc-icon>`
+    hasOptions = true
+    metaSlot = html`<mwc-icon slot="options" part="editor-options" @click="${actions.remove}" title="Remove value">remove_circle</mwc-icon>`
   }
 
-  return html`<mwc-item-lite>
+  return html`<mwc-item-lite part="editor" ?has-options="${hasOptions}">
     ${renderEditor()}
     ${metaSlot}
   </mwc-item-lite>`

diff --git a/packages/wc/lib/renderer.ts b/packages/wc/lib/renderer.ts
@@ -113,7 +113,7 @@ export const defaultFormRenderer: FormRenderStrategy = ({ form, renderFocusNode
 }
 
 export const defaultFocusNodeRenderer: FocusNodeRenderStrategy = ({ focusNode, renderGroup }) => html`<form>
-    <div class="fieldset">
+    <div class="fieldset" part="focus-node">
         ${repeat(focusNode.groups, renderGroup)}
     </div>
 </form>`