add --padding to tab panel

shoelace-style · Oct 4, 2021 · e12ee97 · e12ee97
1 parent ebd8464
commit e12ee97
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
@@ -229,10 +229,6 @@ strong {
   margin-bottom: 0;
 }
 
-.markdown-section sl-tab-panel::part(base) {
-  padding: var(--sl-spacing-medium) 0;
-}
-
 .docsify-pagination-container {
   border-top-color: rgb(var(--sl-color-neutral-200)) !important;
 }

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
@@ -16,6 +16,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `--sl-surface-base` and `--sl-surface-base-alt` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
 - Added the `--sl-panel-border-width` design token
 - Added missing background color to `<sl-details>`
+- ADded the `--padding` custom property to `<sl-tab-panel>`
 - Added the `outline` variation to `<sl-button>` [#522](https://github.com/shoelace-style/shoelace/issues/522)
 - Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>` and supporting design tokens
 - Added the `control` part to `<sl-select>` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538)

diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts
@@ -93,6 +93,10 @@ export default css`
     order: 2;
   }
 
+  .tab-group--top ::slotted(sl-tab-panel) {
+    --padding: var(--sl-spacing-medium) 0;
+  }
+
   /*
    * Bottom
    */
@@ -135,6 +139,10 @@ export default css`
     order: 1;
   }
 
+  .tab-group--bottom ::slotted(sl-tab-panel) {
+    --padding: var(--sl-spacing-medium) 0;
+  }
+
   /*
    * Start
    */
@@ -163,6 +171,10 @@ export default css`
     order: 2;
   }
 
+  .tab-group--start ::slotted(sl-tab-panel) {
+    --padding: 0 var(--sl-spacing-medium);
+  }
+
   /*
    * End
    */
@@ -190,4 +202,8 @@ export default css`
     flex: 1 1 auto;
     order: 1;
   }
+
+  .tab-group--end ::slotted(sl-tab-panel) {
+    --padding: 0 var(--sl-spacing-medium);
+  }
 `;
diff --git a/src/components/tab-panel/tab-panel.styles.ts b/src/components/tab-panel/tab-panel.styles.ts
@@ -5,11 +5,13 @@ export default css`
   ${componentStyles}
 
   :host {
+    --padding: 0;
+
     display: block;
   }
 
   .tab-panel {
     border: solid 1px transparent;
-    padding: 20px 20px;
+    padding: var(--padding);
   }
 `;
diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts
@@ -11,6 +11,8 @@ let id = 0;
  * @slot - The tab panel's content.
  *
  * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
  */
 @customElement('sl-tab-panel')
 export default class SlTabPanel extends LitElement {