Add body css part to Collapsible

vscode-elements · Oct 8, 2024 · b0c2b92 · b0c2b92
1 parent 8d56f86
commit b0c2b92
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - **Button**: Add the ability to modify the icon animation parameters.
 - **Button**: Align and arrange any content added through the main slot.
 - **SingleSelect**, **MultiSelect**: Add the ability to control the position of the select dropdown.
+- **Collapsible**: Add `body` css part.
 
 ## [1.6.2] - 2024-10-07
 

diff --git a/dev/vscode-collapsible.html b/dev/vscode-collapsible.html
@@ -6,20 +6,26 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>VSCode Webview Elements demo page</title>
-  <link rel="stylesheet" href="../dev-assets/default-webview-styles.css" />
   <link rel="stylesheet" href="../node_modules/@vscode/codicons/dist/codicon.css" id="vscode-codicon-stylesheet" />
-  <script type="module" src="../dev-assets/component-preview.js"></script>
+  <script type="module" src="/node_modules/@vscode-elements/webview-playground/dist/index.js"></script>
   <script type="module" src="../dist/vscode-icon/index.js"></script>
   <script type="module" src="../dist/vscode-badge/index.js"></script>
   <script type="module" src="../dist/vscode-collapsible/index.js"></script>
+  <script type="module" src="../dist/vscode-single-select/index.js"></script>
+  <script type="module" src="../dist/vscode-option/index.js"></script>
 </head>
 
 <body class="vscode-light">
   <div class="story">
     <h2 class="story-title">Basic example</h2>
     <div class="story-content">
-      <component-preview>
-        <vscode-collapsible title="Lorem" description="Ipsum Dolor sit" open>
+      <style>
+        .collapsible1::part(body) {
+          overflow: visible;
+        }
+      </style>
+      <vscode-demo>
+        <vscode-collapsible title="Lorem" description="Ipsum Dolor sit" open class="collapsible1">
           <vscode-icon name="account" action-icon title="Account" tabindex="0" slot="actions"></vscode-icon>
           <vscode-icon name="git-compare" action-icon title="Git compare" tabindex="0" slot="actions"></vscode-icon>
           <vscode-icon name="add" action-icon title="Add" tabindex="0" slot="actions"></vscode-icon>
@@ -31,6 +37,26 @@ <h2 class="story-title">Basic example</h2>
           <p>lorem ipsum dolor sit</p>
           <p>lorem ipsum dolor sit</p>
           <p>lorem ipsum dolor sit</p>
+          <vscode-single-select position="above">
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+            <vscode-option>Lorem Ipsum</vscode-option>
+          </vscode-single-select>
+          <p>lorem ipsum dolor sit</p>
         </vscode-collapsible>
         <vscode-collapsible title="Ipsum">
           <div slot="actions">
@@ -46,7 +72,8 @@ <h2 class="story-title">Basic example</h2>
           <p>lorem ipsum dolor sit</p>
           <p>lorem ipsum dolor sit</p>
         </vscode-collapsible>
-      </component-preview>
+        <vscode-collapsible title="Dolor"></vscode-collapsible>
+      </vscode-demo>
       <script type="module">
         const icons = document.querySelectorAll('vscode-icon[action-icon]');
 

diff --git a/src/vscode-collapsible/vscode-collapsible.ts b/src/vscode-collapsible/vscode-collapsible.ts
@@ -15,6 +15,8 @@ import styles from './vscode-collapsible.styles.js';
  * @cssprop --vscode-sideBarSectionHeader-background - Header background
  * @cssprop --vscode-icon-foreground - Arrow icon color
  * @cssprop --vscode-sideBarTitle-foreground - Header font color
+ *
+ * @csspart body - Container for the toggleable content of the component. The container's overflow content is hidden by default. This can serve as an escape hatch to modify this feature.
  */
 @customElement('vscode-collapsible')
 export class VscodeCollapsible extends VscElement {
@@ -79,10 +81,8 @@ export class VscodeCollapsible extends VscElement {
             <div class="decorations"><slot name="decorations"></slot></div>
           </div>
         </div>
-        <div class="collapsible-body">
-          <div>
-            <slot></slot>
-          </div>
+        <div class="collapsible-body" part="body">
+          <slot></slot>
         </div>
       </div>
     `;