From 9f42a698c4833110416e16f788fea96c5845e445 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 12 Apr 2021 10:00:07 -0400
Subject: [PATCH] fixes #409

---
 docs/resources/changelog.md       |  1 +
 src/components/dialog/dialog.scss | 14 ++++++++++----
 src/components/drawer/drawer.scss | 15 +++++++++++----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 5c310beeb..f4f56d344 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - 🚨 BREAKING: `sl-radio` components must be located inside an `sl-radio-group` for proper accessibility [#218](https://github.com/shoelace-style/shoelace/issues/218)
 - Added `sl-radio-group` component [#218](https://github.com/shoelace-style/shoelace/issues/218)
+- Added `--header-spacing`, `--body-spacing`, and `--footer-spacing` custom properties to `sl-drawer` and `sl-dialog` [#409](https://github.com/shoelace-style/shoelace/issues/409)
 - Fixed a bug where `sl-menu-item` prefix and suffix slots wouldn't always receive the correct spacing
 - Improved a11y in `sl-radio` with Windows high contrast mode [#215](https://github.com/shoelace-style/shoelace/issues/215)
 - Improved a11y in `sl-select` by preventing the chevron icon from being announced
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index dbf5d0eb3..382fed327 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -3,9 +3,15 @@
 
 /**
  * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
+ * @prop --header-spacing: The amount of padding to use for the header.
+ * @prop --body-spacing: The amount of padding to use for the body.
+ * @prop --footer-spacing: The amount of padding to use for the footer.
  */
 :host {
   --width: 31rem;
+  --header-spacing: var(--sl-spacing-large);
+  --body-spacing: var(--sl-spacing-large);
+  --footer-spacing: var(--sl-spacing-large);
 
   display: contents;
 }
@@ -67,7 +73,7 @@
   flex: 1 1 auto;
   font-size: var(--sl-font-size-large);
   line-height: var(--sl-line-height-dense);
-  padding: var(--sl-spacing-large);
+  padding: var(--header-spacing);
 }
 
 .dialog__close {
@@ -75,12 +81,12 @@
   display: flex;
   align-items: center;
   font-size: var(--sl-font-size-x-large);
-  padding: 0 var(--sl-spacing-large);
+  padding: 0 var(--header-spacing);
 }
 
 .dialog__body {
   flex: 1 1 auto;
-  padding: var(--sl-spacing-large);
+  padding: var(--body-spacing);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
@@ -88,7 +94,7 @@
 .dialog__footer {
   flex: 0 0 auto;
   text-align: right;
-  padding: var(--sl-spacing-large);
+  padding: var(--footer-spacing);
 
   ::slotted(sl-button:not(:first-of-type)) {
     margin-left: var(--sl-spacing-x-small);
diff --git a/src/components/drawer/drawer.scss b/src/components/drawer/drawer.scss
index fa4b25646..8cec85fb1 100644
--- a/src/components/drawer/drawer.scss
+++ b/src/components/drawer/drawer.scss
@@ -4,9 +4,16 @@
 /**
  * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its
  *   `placement`. Note that the drawer will shrink to accommodate smaller screens.
+ * @prop --header-spacing: The amount of padding to use for the header.
+ * @prop --body-spacing: The amount of padding to use for the body.
+ * @prop --footer-spacing: The amount of padding to use for the footer.
+ *
  */
 :host {
   --size: 25rem;
+  --header-spacing: var(--sl-spacing-large);
+  --body-spacing: var(--sl-spacing-large);
+  --footer-spacing: var(--sl-spacing-large);
 
   display: contents;
 }
@@ -104,7 +111,7 @@
   flex: 1 1 auto;
   font-size: var(--sl-font-size-large);
   line-height: var(--sl-line-height-dense);
-  padding: var(--sl-spacing-large);
+  padding: var(--header-spacing);
 }
 
 .drawer__close {
@@ -112,19 +119,19 @@
   display: flex;
   align-items: center;
   font-size: var(--sl-font-size-x-large);
-  padding: 0 var(--sl-spacing-large);
+  padding: 0 var(--header-spacing);
 }
 
 .drawer__body {
   flex: 1 1 auto;
-  padding: var(--sl-spacing-large);
+  padding: var(--body-spacing);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 .drawer__footer {
   text-align: right;
-  padding: var(--sl-spacing-large);
+  padding: var(--footer-spacing);
 
   ::slotted(sl-button:not(:last-of-type)) {
     margin-right: var(--sl-spacing-x-small);