themed added tokens

Esri · May 17, 2024 · 282d267 · 282d267
1 parent ec534e2
commit 282d267
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -483,8 +483,19 @@ export const theming_TestOnly = (): string => html`
       --calcite-panel-heading-text-color: orange;
       --calcite-panel-header-z-index: 999;
       --calcite-panel-fab-z-index: 998;
+      --calcite-panel-spacing-block-end: 24px;
+      --calcite-panel-spacing-block-start: 24px;
+      --calcite-panel-height: 500px;
+      --calcite-panel-width: 500px;
     "
     >
+      <div slot="header-content">Header!</div>
+      <calcite-action-bar slot="action-bar">
+        <calcite-action-group>
+          <calcite-action text="Add" icon="plus"> </calcite-action>
+        </calcite-action-group>
+      </calcite-action-bar>
+      <div slot="content-top">Slot for a content-top.</div>
       <calcite-list>
         <calcite-list-item label="My list item" description="My description"></calcite-list-item>
         <calcite-list-item label="My list item" description="My description"></calcite-list-item>
@@ -499,6 +510,7 @@ export const theming_TestOnly = (): string => html`
         <calcite-list-item label="My list item" description="My description"></calcite-list-item>
       </calcite-list>
       <calcite-fab slot="fab"></calcite-fab>
+      <div slot="content-bottom">Slot for a content-bottom.</div>
       ${footerHTML}
     </calcite-panel>
   </div>