Merge pull request #24 from unicef-polymer/develop

Develop
unicef-polymer · Feb 17, 2021 · fe7c4ee · fe7c4ee
2 parents bb4bcb2 + efa37a7
commit fe7c4ee
Show file tree

Hide file tree

Showing 5 changed files with 4,170 additions and 764 deletions.
diff --git a/README.md b/README.md
@@ -51,14 +51,14 @@ Custom property | Description | Default
 `--ecp-header-height` | Header height | `48px`
 `--ecp-header-bg` | Header background color | `#0099ff`
 `--epc-header-color` | Header color | `#ffffff`
-`--epc-header` | Mixin applied to header | `{}`
+`etools-content-panel::part(epc-header)` | Mixin applied to header | `{}`
 `--ecp-title-white-space` | Header title white space | `nowrap`
-`--ecp-toggle-btn` | Mixin applied to expand content button | `{}`
-`--ecp-header-title` | Mixin applied to the header title | `{}`
-`--ecp-header-btns-wrapper` | Mixin appplied to panel header right btns container | `{}`
-`--ecp-content` | Mixin applied to content | `{}`
+`etools-content-panel::part(ecp-toggle-btn)` | Mixin applied to expand content button | `{}`
+`etools-content-panel::part(ecp-header-title)` | Mixin applied to the header title | `{}`
+`etools-content-panel::part(ecp-header-btns-wrapper)` | Mixin appplied to panel header right btns container | `{}`
+`etools-content-panel::part(ecp-content)` | Mixin applied to content | `{}`
 `--ecp-content-bg-color` | Content Header color | `#ffffff`
-`--ecp-disabled` | Mixin applied in disabled state | `{}`
+`etools-content-panel::part(epc-header):disabled` | Mixin applied in disabled state | `{}`
 
 ## Install
 ```bash

diff --git a/etools-content-panel.d.ts b/etools-content-panel.d.ts
@@ -20,19 +20,19 @@ import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
  *
  * ### Styling
  *
- * You can use defined variables and mixins to change panel style.
+ * You can use defined variables and css shadow parts to change panel style.
  *
  * Custom property | Description | Default
  * ----------------|-------------|----------
  * `--ecp-header-height` | Header height | `48px`
  * `--ecp-header-bg` | Header background color | `#1e86bf`
  * `--ecp-header-color` | Header color | `#ffffff`
- * `--ecp-header` | Mixin applied to header | `{}`
- * `--ecp-toggle-btn` | Mixin applied to expand content button | `{}`
- * `--ecp-header-title` | Mixin applied to the header title | `{}`
- * `--ecp-header-btns-wrapper` | Mixin appplied to panel header right btns container | `{}`
- * `--ecp-content` | Mixin applied to content | `{}`
- * `--ecp-disabled` | Mixin applied in disabled state | `{}`
+ * `--ecp-header` | CSS shadow part applied to header | `{}`
+ * `--ecp-toggle-btn` | CSS shadow part applied to expand content button | `{}`
+ * `--ecp-header-title` | CSS shadow part applied to the header title | `{}`
+ * `--ecp-header-btns-wrapper` | CSS shadow part appplied to panel header right btns container | `{}`
+ * `--ecp-content` | CSS shadow part applied to content | `{}`
+ * `--ecp-disabled` | CSS shadow part applied in disabled state | `{}`
  */
 declare class EtoolsContentPanel extends PolymerElement {
   panelTitle: string|null|undefined;

diff --git a/etools-content-panel.js b/etools-content-panel.js
@@ -11,21 +11,21 @@ import '@polymer/paper-icon-button/paper-icon-button.js';
  *
  * ### Styling
  *
- * You can use defined variables and mixins to change panel style.
+ * You can use defined variables and css shadow parts to change panel style.
  *
  * Custom property | Description | Default
  * ----------------|-------------|----------
  * `--ecp-header-height` | Header height | `48px`
  * `--ecp-header-bg` | Header background color | `#0099ff`
- * `--epc-header-color` | Header color | `#ffffff`
- * `--epc-header` | Mixin applied to header | `{}`
- * `--ecp-toggle-btn` | Mixin applied to expand content button | `{}`
- * `--ecp-header-title` | Mixin applied to the header title | `{}`
- * `--ecp-header-btns-wrapper` | Mixin appplied to panel header right btns container | `{}`
- * `--ecp-content` | Mixin applied to content | `{}`
+ * `--ecp-header-color` | Header color | `#ffffff`
+ * `etools-content-panel::part(ecp-header)` | CSS Shadow Part applied to header | `{}`
+ * `etools-content-panel::part(ecp-toggle-btn)` | CSS Shadow Part applied to expand content button | `{}`
+ * `etools-content-panel::part(ecp-header-title)` | CSS Shadow Part applied to the header title | `{}`
+ * `etools-content-panel::part(ecp-header-btns-wrapper)` | CSS Shadow Part appplied to panel header right btns container | `{}`
+ * `etools-content-panel::part(ecp-content)` | CSS Shadow Part applied to content | `{}`
  * `--ecp-content-bg-color` | Content Header color | `#ffffff`
- * `--ecp-disabled` | Mixin applied in disabled state | `{}`
- * `--ecp-content-padding` | Mixin applied to content |  `8px 24px 16px 24px`
+ * `etools-content-panel::part(ecp-header):disabled` | CSS Shadow Part applied in disabled state | `{}`
+ * `--ecp-content-padding` | CSS Shadow Part applied to content |  `8px 24px 16px 24px`
  *
  * @customElement
  * @polymer
@@ -53,7 +53,6 @@ class EtoolsContentPanel extends PolymerElement {
           background-color: var(--ecp-header-bg, #0099ff);
           height: var(--ecp-header-height, 48px);
           padding: 4px 16px;
-          @apply --epc-header;
         }
 
         :host(:not([show-expand-btn])) .panel-header {
@@ -63,18 +62,14 @@ class EtoolsContentPanel extends PolymerElement {
         h2.title,
         .toggle-btn,
         .panel-btns-wrapper ::slotted(*) {
-          color: var(--epc-header-color, #ffffff);
+          color: var(--ecp-header-color, #ffffff);
         }
 
         .toggle-btn,
         .panel-btns-wrapper ::slotted(*) {
           opacity: 0.8;
         }
 
-        .toggle-btn {
-          @apply --ecp-toggle-btn;
-        }
-
         h2.title {
           @apply --layout;
           @apply --layout-flex;
@@ -84,7 +79,6 @@ class EtoolsContentPanel extends PolymerElement {
           font-size: 21px;
           font-weight: bold;
           min-width: 0;
-          @apply --ecp-header-title;
         }
 
         h2.title span {
@@ -95,15 +89,10 @@ class EtoolsContentPanel extends PolymerElement {
           text-overflow: ellipsis;
         }
 
-        .panel-btns-wrapper ::slotted(*) {
-          @apply --ecp-header-btns-wrapper;
-        }
-
         .content-wrapper {
           background-color: var(--ecp-content-bg-color, #ffffff);
           box-sizing: border-box;
           padding: var(--ecp-content-padding, 8px 24px 16px 24px);
-          @apply --ecp-content;
         }
 
         :host([disabled]) .panel-header,
@@ -115,20 +104,20 @@ class EtoolsContentPanel extends PolymerElement {
       </style>
 
       <div class="paper-material" elevation\$="[[elevation]]">
-        <div class="panel-header" hidden\$="[[noHeader]]">
+        <div class="panel-header" part="ecp-header" hidden\$="[[noHeader]]">
 
-          <paper-icon-button class="toggle-btn" on-click="_toggle" icon="[[_getExpandBtnIcon(open)]]"
+          <paper-icon-button class="toggle-btn" part="ecp-toggle-btn" on-click="_toggle" icon="[[_getExpandBtnIcon(open)]]"
                              hidden\$="[[!showExpandBtn]]" disabled\$="[[disabled]]"></paper-icon-button>
 
-          <h2 class="title"><span>[[panelTitle]]</span></h2>
+          <h2 class="title" part="ecp-header-title"><span>[[panelTitle]]</span></h2>
 
-          <div class="panel-btns-wrapper">
+          <div class="panel-btns-wrapper" part="ecp-header-btns-wrapper">
             <slot name="panel-btns"></slot>
           </div>
 
         </div>
         <iron-collapse opened="{{open}}">
-          <div class="content-wrapper">
+          <div class="content-wrapper" part="ecp-content">
             <slot></slot>
           </div>
         </iron-collapse>