From 1d44ee2f45c239f8fc9fd027627ad86524717e18 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 13 Dec 2021 17:16:50 -0500
Subject: [PATCH] simplify divider API

---
 docs/resources/changelog.md              | 1 +
 src/components/divider/divider.styles.ts | 6 +-----
 src/components/divider/divider.ts        | 9 +--------
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 4f24708c8..f08686182 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- 🚨 BREAKING: removed `base` part from `<sl-divider>` to simplify the styling API
 - Fixed bug where setting `tooltipFormatter` on `<sl-range>` in JSX causes React@experimental to error out
 - Refactored `<sl-button>` to use Lit's static expressions to reduce code
 
diff --git a/src/components/divider/divider.styles.ts b/src/components/divider/divider.styles.ts
index 8dc40b2a1..f7d102469 100644
--- a/src/components/divider/divider.styles.ts
+++ b/src/components/divider/divider.styles.ts
@@ -10,17 +10,13 @@ export default css`
     --spacing: var(--sl-spacing-medium);
   }
 
-  :host(:not([vertical])) .menu-divider {
+  :host(:not([vertical])) {
     display: block;
     border-top: solid var(--width) var(--color);
     margin: var(--spacing) 0;
   }
 
   :host([vertical]) {
-    height: 100%;
-  }
-
-  :host([vertical]) .menu-divider {
     display: inline-block;
     height: 100%;
     border-left: solid var(--width) var(--color);
diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts
index b2fc98182..c9c72fd94 100644
--- a/src/components/divider/divider.ts
+++ b/src/components/divider/divider.ts
@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch';
 import styles from './divider.styles';
@@ -7,10 +7,7 @@ import styles from './divider.styles';
  * @since 2.0
  * @status stable
  *
- * @csspart base - The component's base wrapper.
- *
  * @cssproperty --color - The color of the divider.
- * @cssproperty --spacing - The spacing between the divider and neighboring elements.
  * @cssproperty --width - The width of the divider.
  */
 @customElement('sl-divider')
@@ -28,10 +25,6 @@ export default class SlDivider extends LitElement {
   handleVerticalChange() {
     this.setAttribute('aria-orientation', this.vertical ? 'vertical' : 'horizontal');
   }
-
-  render() {
-    return html` <div part="base" class="menu-divider"></div> `;
-  }
 }
 
 declare global {