fixes #602 - extend css-parts to nested components

mrin9 · mrin9 · commit 5798712a5e99 · 2022-02-21T16:17:12.000-08:00
diff --git a/docs/css-parts.html b/docs/css-parts.html
@@ -191,23 +191,41 @@ <h2>CSS Parts</h2>
         </code>
       </pre>
     </p>
-    <h2>Limitation</h2>
-    <p>RapiDoc web Component is made up of smaller web components, below is RapiDoc component composition structure 
-      <br/>
-      At the moment CSS Parts can target only those HTML content which directly fall under <span class="mono bold blue"> &lt;rapi-doc&gt;</span> element.
-      <br/>
-      HTML elements under <span class="mono bold"> &lt;api-request&gt;, &lt;api-response&gt; &lt;schema-tree&gt; and &lt;schema-table&gt; cannot be targeted for styling</span>
-    </p>
-    <pre>
-      - rapi-doc
-        - api-request
-          - schema-tree 
-          - schema-table
-        - api-response
-          - schema-tree 
-          - schema-table
-    </pre>
 
+    <p>
+      <span>
+        Another Example to change the button styles
+        | <a href="./examples-theme/cssparts-btn.html" target="_blank"> Demo</a>
+      </span>
+      <pre class="shadow1 code-block" style="width:730px">
+        <code class="language-html">
+          &lt;html&gt;
+            ...
+            &lt;style&gt;
+              rapi-doc::part(btn){ border-radius: 15px; }
+              rapi-doc::part(btn-try) { 
+                background-color: yellow;
+                color: #333;
+                border-color: yellow;
+              }
+              rapi-doc::part(btn-selected-response-status) {
+                background-color: yellow;
+                color: #333;
+                border-color: yellow;
+              }
+            &lt;/style&gt;
+            &lt;rapi-doc  spec-url = "https://petstore.swagger.io/v2/swagger.json" 
+              show-header = "false"
+              nav-bg-color = "#423368"
+              primary-color ="#df75c4"
+              bg-color = "#fae4f5"    
+            &gt; &lt;/rapi-doc&gt;
+            ...
+          &lt;/html&gt;
+        </code>
+      </pre>
+
+    </p>
     <p>
       Following are the list of <span class="mono bold blue">css ::part</span> provided by rapidoc. The names of these parts should be self explenatory
       <table class="m-table">
@@ -230,7 +248,7 @@ <h2>Limitation</h2>
         <tr> <td class="blue" style="border:none">Buttons</td></tr>
         <tr>
           <td class="mono">
-            btn, btn-fill, btn-outline, btn-search
+            btn, btn-fill, btn-outline, btn-search, btn-try, btn-fill, btn-clear, btn-copy, btn-clear-resp, 
           </td>
         </tr>
 
@@ -241,10 +259,17 @@ <h2>Limitation</h2>
           </td>
         </tr>
 
+        <tr> <td class="blue" style="border:none">Inputs</td></tr>
+        <tr>
+          <td class="mono">
+            textbox, textbox-param, textarea, textarea-param, file-input
+          </td>
+        </tr>
+
         <tr><td class="blue" style="border:none">Anchors</td></tr>
         <tr>
           <td class="mono">
-            anchor, anchor-overview
+            anchor, anchor-overview, anchor-param-example
           </td>
         </tr>
       </table>
diff --git a/docs/examples-theme/cssparts-btn.html b/docs/examples-theme/cssparts-btn.html
@@ -16,6 +16,16 @@
     <script type="module" src="../rapidoc-min.js"></script>
     <style>
       rapi-doc::part(btn){ border-radius: 15px; }
+      rapi-doc::part(btn-try) { 
+        background-color: yellow;
+        color: #333;
+        border-color: yellow;
+      }
+      rapi-doc::part(btn-selected-response-status) {
+        background-color: yellow;
+        color: #333;
+        border-color: yellow;
+      }
     </style>
   </head>
   <body>
diff --git a/src/components/api-request.js b/src/components/api-request.js
@@ -912,7 +912,7 @@ export default class ApiRequest extends LitElement {
       <div class="row" style="font-size:var(--font-size-small); margin:5px 0">
         <div class="response-message ${this.responseStatus}">Response Status: ${this.responseMessage}</div>
         <div style="flex:1"></div>
-        <button class="m-btn" part="btn btn-outline" @click="${this.clearResponseData}">CLEAR RESPONSE</button>
+        <button class="m-btn" part="btn btn-outline btn-clear-response" @click="${this.clearResponseData}">CLEAR RESPONSE</button>
       </div>
       <div class="tab-panel col" style="border-width:0 0 1px 0;">
         <div id="tab_buttons" class="tab-buttons row" @click="${(e) => {
@@ -1005,15 +1005,15 @@ export default class ApiRequest extends LitElement {
       ${
         this.parameters.length > 0 || this.request_body
           ? html`
-            <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px;" @click="${this.onFillRequestData}" title="Fills with example data (if provided)">
+            <button class="m-btn thin-border" part="btn btn-outline btn-fill" style="margin-right:5px;" @click="${this.onFillRequestData}" title="Fills with example data (if provided)">
               FILL EXAMPLE
             </button>
-            <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px;" @click="${this.onClearRequestData}">
+            <button class="m-btn thin-border" part="btn btn-outline btn-clear" style="margin-right:5px;" @click="${this.onClearRequestData}">
               CLEAR
             </button>`
           : ''
       }
-      <button class="m-btn primary thin-border" part="btn btn-fill btn-try" @click="${this.onTryClick}">TRY</button>
+      <button class="m-btn primary thin-border" part="btn btn-try" @click="${this.onTryClick}">TRY</button>
     </div>
     ${this.responseMessage === '' ? '' : this.apiResponseTabTemplate()}
     `;
diff --git a/src/components/api-response.js b/src/components/api-response.js
@@ -154,7 +154,7 @@ export default class ApiResponse extends LitElement {
                     }
                   }}"
                   class='m-btn small ${this.selectedStatus === respStatus ? 'primary' : ''}'
-                  part="btn--resp ${this.selectedStatus === respStatus ? 'btn-fill--resp' : 'btn-outline--resp'} btn-response-status"
+                  part="btn ${this.selectedStatus === respStatus ? 'btn-response-status btn-selected-response-status' : ' btn-response-status'}"
                   style='margin: 8px 4px 0 0'
                 > 
                   ${respStatus} 
@@ -258,6 +258,7 @@ export default class ApiResponse extends LitElement {
                 render-style = '${this.renderStyle}'
                 .data="${mimeRespDetails.examples[0].exampleValue}"
                 class = 'example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}'
+                exportparts = "btn:btn, btn-fill:btn-fill, btn-copy:btn-copy" 
               ></json-tree>`
             : html`
               ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding: 4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''}
@@ -281,6 +282,7 @@ export default class ApiResponse extends LitElement {
                     <json-tree 
                       render-style = '${this.renderStyle}'
                       .data = '${v.exampleValue}'
+                      exportparts = "btn:btn, btn-fill:btn-fill, btn-copy:btn-copy" 
                     ></json-tree>`
                   : html`<pre>${v.exampleValue}</pre>`
                 }
diff --git a/src/components/json-tree.js b/src/components/json-tree.js
@@ -78,7 +78,7 @@ export default class JsonTree extends LitElement {
     return html`
       <div class = "json-tree" >
         <div class='toolbar'> 
-          <button class="toolbar-btn" part="btn btn-fill" @click='${(e) => { copyToClipboard(JSON.stringify(this.data, null, 2), e); }}'> Copy </button>
+          <button class="toolbar-btn" part="btn btn-fill btn-copy" @click='${(e) => { copyToClipboard(JSON.stringify(this.data, null, 2), e); }}'> Copy </button>
         </div>
         ${this.generateTree(this.data, true)}
       </div>  
diff --git a/src/templates/callback-template.js b/src/templates/callback-template.js
@@ -38,7 +38,9 @@ export default function callbackTemplate(callbacks) {
                       allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
                       schema-hide-read-only = "${this.schemaHideReadOnly}"
                       fetch-credentials = "${this.fetchCredentials}"
-                      exportparts="btn btn-fill btn-outline btn-try"
+                      exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+                        file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
+                        anchor:anchor, anchor-param-example:anchor-param-example"
                     > </api-request>
 
                     <api-response
@@ -52,7 +54,7 @@ export default function callbackTemplate(callbacks) {
                       schema-expand-level = "${this.schemaExpandLevel}"
                       schema-description-expanded = "${this.schemaDescriptionExpanded}"
                       allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-                      exportparts = "btn--resp btn-fill--resp btn-outline--resp"
+                      exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy"
                     > </api-response>
                   </div>
                 </div>  
diff --git a/src/templates/endpoint-template.js b/src/templates/endpoint-template.js
@@ -137,7 +137,9 @@ function endpointBodyTemplate(path) {
           allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
           schema-hide-read-only = "${this.schemaHideReadOnly}"
           fetch-credentials = "${this.fetchCredentials}"
-          exportparts="btn btn-fill btn-outline btn-try"
+          exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+            file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
+            anchor:anchor, anchor-param-example:anchor-param-example"
         > </api-request>
 
           ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
@@ -155,7 +157,8 @@ function endpointBodyTemplate(path) {
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
         schema-hide-write-only = "${this.schemaHideWriteOnly}"
         selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-        exportparts = "btn--resp btn-fill--resp btn-outline--resp"
+        exportparts = 
+        "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp"
       > </api-response>
     </div>
   </div>`;
diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js
@@ -89,7 +89,9 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
         schema-hide-read-only = "${this.schemaHideReadOnly}"
         fetch-credentials = "${this.fetchCredentials}"
-        exportparts = "btn btn-fill btn-outline btn-try"
+        exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+          file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
+          anchor:anchor, anchor-param-example:anchor-param-example"
       > </api-request>
 
       ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
@@ -106,7 +108,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
         schema-hide-write-only = "${this.schemaHideWriteOnly}"
         selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-        exportparts = "btn--resp btn-fill--resp btn-outline--resp"
+        exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy"
       > </api-response>
     </div>
   </div>
