From a5ab18748b0115396e0c05acf340288cc063e1a3 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Sun, 10 Jan 2021 12:30:27 -0500
Subject: [PATCH] Export icon button parts so they can be customized

---
 docs/getting-started/changelog.md      | 2 ++
 src/components/alert/alert.tsx         | 2 +-
 src/components/dialog/dialog.tsx       | 7 ++++++-
 src/components/drawer/drawer.tsx       | 7 ++++++-
 src/components/select/select.tsx       | 2 +-
 src/components/tab-group/tab-group.tsx | 3 +++
 src/components/tag/tag.tsx             | 2 +-
 7 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index 9e2b37c38..abca5fc02 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -16,9 +16,11 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the `FocusOptions` argument to all components that have a `setFocus()` method
 - Added `sl-initial-focus` event to `sl-dialog` and `sl-drawer` so focus can be customized to a specific element
 - Added `close-button` part to `sl-tab` so the close button can be customized
+- Added `scroll-button` part to `sl-tab-group` so the scroll buttons can be customized
 - Fixed a bug where `sl-hide` would be emitted twice when closing an alert with `hide()`
 - Fixed a bug in `sl-color-picker` where the toggle button was smaller than the preview button in Safari
 - Fixed a bug in `sl-tab-group` where activating a nested tab group didn't work properly [#299](https://github.com/shoelace-style/shoelace/issues/299)
+- Fixed a bug in `sl-alert`, `sl-dialog`, `sl-drawer`, `sl-select`, and `sl-tag` where the close button's base wasn't exported so it couldn't be styled
 - Updated the docs to show dependencies instead of dependents which is much more useful when working with the custom elements bundle
 - Updated to Bootstrap Icons 1.3.0
 
diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx
index 59cbc1f18..822bccad0 100644
--- a/src/components/alert/alert.tsx
+++ b/src/components/alert/alert.tsx
@@ -208,7 +208,7 @@ export class Alert {
 
         {this.closable && (
           <span class="alert__close">
-            <sl-icon-button part="close-button" name="x" onClick={this.handleCloseClick} />
+            <sl-icon-button exportparts="base:close-button" name="x" onClick={this.handleCloseClick} />
           </span>
         )}
       </div>
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index 06bce13e3..2901dc948 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -246,7 +246,12 @@ export class Dialog {
                   {this.label || String.fromCharCode(65279)}
                 </slot>
               </span>
-              <sl-icon-button part="close-button" class="dialog__close" name="x" onClick={this.handleCloseClick} />
+              <sl-icon-button
+                exportparts="base:close-button"
+                class="dialog__close"
+                name="x"
+                onClick={this.handleCloseClick}
+              />
             </header>
           )}
 
diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx
index 9d460b29a..97249eef8 100644
--- a/src/components/drawer/drawer.tsx
+++ b/src/components/drawer/drawer.tsx
@@ -263,7 +263,12 @@ export class Drawer {
                   {this.label || String.fromCharCode(65279)}
                 </slot>
               </span>
-              <sl-icon-button part="close-button" class="drawer__close" name="x" onClick={this.handleCloseClick} />
+              <sl-icon-button
+                exportparts="base:close-button"
+                class="drawer__close"
+                name="x"
+                onClick={this.handleCloseClick}
+              />
             </header>
           )}
 
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 423541331..a2e8d9b2a 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -455,7 +455,7 @@ export class Select {
 
             {this.clearable && hasSelection && (
               <sl-icon-button
-                part="clear-button"
+                exportparts="base:clear-button"
                 class="select__clear"
                 name="x-circle"
                 onClick={this.handleClearClick}
diff --git a/src/components/tab-group/tab-group.tsx b/src/components/tab-group/tab-group.tsx
index b5dc42667..020ca1afe 100644
--- a/src/components/tab-group/tab-group.tsx
+++ b/src/components/tab-group/tab-group.tsx
@@ -15,6 +15,7 @@ import { focusVisible } from '../../utilities/focus-visible';
  * @part tabs - The container that wraps the slotted tabs.
  * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tabs container.
  * @part body - The tab group body where tab panels are slotted in.
+ * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.
  */
 
 @Component({
@@ -305,6 +306,7 @@ export class TabGroup {
           {this.hasScrollControls && (
             <sl-icon-button
               class="tab-group__scroll-button tab-group__scroll-button--left"
+              exportparts="base:scroll-button"
               name="chevron-left"
               onClick={this.handleScrollLeft}
             />
@@ -322,6 +324,7 @@ export class TabGroup {
           {this.hasScrollControls && (
             <sl-icon-button
               class="tab-group__scroll-button tab-group__scroll-button--right"
+              exportparts="base:scroll-button"
               name="chevron-right"
               onClick={this.handleScrollRight}
             />
diff --git a/src/components/tag/tag.tsx b/src/components/tag/tag.tsx
index e04aca4fa..016f403c0 100644
--- a/src/components/tag/tag.tsx
+++ b/src/components/tag/tag.tsx
@@ -73,7 +73,7 @@ export class Tag {
         </span>
 
         {this.clearable && (
-          <sl-icon-button part="clear-button" name="x" class="tag__clear" onClick={this.handleClearClick} />
+          <sl-icon-button exportparts="base:clear-button" name="x" class="tag__clear" onClick={this.handleClearClick} />
         )}
       </span>
     );