fix(block): Fix content spacing. #5898 (#5918)

fix(block): Fix content spacing. #5898
Esri · Dec 6, 2022 · f32ddaa · f32ddaa
1 parent 0cbd7d1
commit f32ddaa
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/components/block/block.scss b/src/components/block/block.scss
@@ -135,6 +135,8 @@ calcite-handle {
 
 .content {
   @apply animate-in flex-1 relative;
+  padding-block: var(--calcite-block-padding, theme("spacing.2"));
+  padding-inline: var(--calcite-block-padding, theme("spacing[2.5]"));
 }
 
 .control-container {

diff --git a/src/components/block/block.stories.ts b/src/components/block/block.stories.ts
@@ -213,3 +213,10 @@ export const contentCanTakeFullHeight_TestOnly = (): string =>
   html`<calcite-block open heading="Heading" description="description" style="height: 250px">
     <div style="background: red; height: 100%;">should take full width of the content area</div>
   </calcite-block>`;
+
+export const contentSpacing_TestOnly = (): string =>
+  html`
+    <calcite-block heading="Block heading" open>
+      <div>Some text that has padding built in</div>
+    </calcite-block>
+  `;