From 349aa45d2b3f465fcf1a2dec1fefb067db3cc9a5 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 6 Dec 2023 17:18:12 -0500
Subject: [PATCH] backport

---
 docs/pages/components/menu-item.md            | 87 ++++++++++++-------
 docs/pages/resources/changelog.md             |  1 +
 .../menu-item/menu-item.component.ts          | 12 ++-
 src/components/menu-item/menu-item.styles.ts  | 19 ++++
 src/components/menu-item/menu-item.test.ts    |  8 ++
 5 files changed, 96 insertions(+), 31 deletions(-)

diff --git a/docs/pages/components/menu-item.md b/docs/pages/components/menu-item.md
index 5bc1f23cf..c1e1f3f0b 100644
--- a/docs/pages/components/menu-item.md
+++ b/docs/pages/components/menu-item.md
@@ -60,35 +60,6 @@ const App = () => (
 
 ## Examples
 
-### Disabled
-
-Add the `disabled` attribute to disable the menu item so it cannot be selected.
-
-```html:preview
-<wa-menu style="max-width: 200px;">
-  <wa-menu-item>Option 1</wa-menu-item>
-  <wa-menu-item disabled>Option 2</wa-menu-item>
-  <wa-menu-item>Option 3</wa-menu-item>
-</wa-menu>
-```
-
-{% raw %}
-
-```jsx:react
-import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
-import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
-
-const App = () => (
-  <WaMenu style={{ maxWidth: '200px' }}>
-    <WaMenuItem>Option 1</WaMenuItem>
-    <WaMenuItem disabled>Option 2</WaMenuItem>
-    <WaMenuItem>Option 3</WaMenuItem>
-  </WaMenu>
-);
-```
-
-{% endraw %}
-
 ### Prefix & Suffix
 
 Add content to the start and end of menu items using the `prefix` and `suffix` slots.
@@ -151,6 +122,64 @@ const App = () => (
 
 {% endraw %}
 
+### Disabled
+
+Add the `disabled` attribute to disable the menu item so it cannot be selected.
+
+```html:preview
+<wa-menu style="max-width: 200px;">
+  <wa-menu-item>Option 1</wa-menu-item>
+  <wa-menu-item disabled>Option 2</wa-menu-item>
+  <wa-menu-item>Option 3</wa-menu-item>
+</wa-menu>
+```
+
+{% raw %}
+
+```jsx:react
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+
+const App = () => (
+  <WaMenu style={{ maxWidth: '200px' }}>
+    <WaMenuItem>Option 1</WaMenuItem>
+    <WaMenuItem disabled>Option 2</WaMenuItem>
+    <WaMenuItem>Option 3</WaMenuItem>
+  </WaMenu>
+);
+```
+
+{% endraw %}
+
+### Loading
+
+Use the `loading` attribute to indicate that a menu item is busy. Like a disabled menu item, clicks will be suppressed until the loading state is removed.
+
+```html:preview
+<wa-menu style="max-width: 200px;">
+  <wa-menu-item>Option 1</wa-menu-item>
+  <wa-menu-item loading>Option 2</wa-menu-item>
+  <wa-menu-item>Option 3</wa-menu-item>
+</wa-menu>
+```
+
+{% raw %}
+
+```jsx:react
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+
+const App = () => (
+  <WaMenu style={{ maxWidth: '200px' }}>
+    <WaMenuItem>Option 1</WaMenuItem>
+    <WaMenuItem loading>Option 2</WaMenuItem>
+    <WaMenuItem>Option 3</WaMenuItem>
+  </WaMenu>
+);
+```
+
+{% endraw %}
+
 ### Checkbox Menu Items
 
 Set the `type` attribute to `checkbox` to create a menu item that will toggle on and off when selected. You can use the `checked` attribute to set the initial state.
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index a9fc72a0d..8a63eabf5 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -22,6 +22,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 ## Next
 
+- Added the `loading` attribute and the `spinner` and `spinner__base` part to `<sl-menu-item>` [#1700]
 - Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
 - Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
 - Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
diff --git a/src/components/menu-item/menu-item.component.ts b/src/components/menu-item/menu-item.component.ts
index 67e6a3fc3..9b9d6f7c2 100644
--- a/src/components/menu-item/menu-item.component.ts
+++ b/src/components/menu-item/menu-item.component.ts
@@ -8,6 +8,7 @@ import { watch } from '../../internal/watch.js';
 import styles from './menu-item.styles.js';
 import WaIcon from '../icon/icon.component.js';
 import WaPopup from '../popup/popup.component.js';
+import WaSpinner from '../spinner/spinner.component.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import type { CSSResultGroup } from 'lit';
 
@@ -30,6 +31,8 @@ import type { CSSResultGroup } from 'lit';
  * @csspart prefix - The prefix container.
  * @csspart label - The menu item label.
  * @csspart suffix - The suffix container.
+ * @csspart spinner - The spinner that shows when the menu item is in the loading state.
+ * @csspart spinner__base - The spinner's base part.
  * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
  *
  * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
@@ -38,7 +41,8 @@ export default class WaMenuItem extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;
   static dependencies = {
     'wa-icon': WaIcon,
-    'wa-popup': WaPopup
+    'wa-popup': WaPopup,
+    'wa-spinner': WaSpinner
   };
 
   private cachedTextLabel: string;
@@ -55,6 +59,9 @@ export default class WaMenuItem extends WebAwesomeElement {
   /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
   @property() value = '';
 
+  /** Draws the menu item in a loading state. */
+  @property({ type: Boolean, reflect: true }) loading = false;
+
   /** Draws the menu item in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
@@ -158,6 +165,7 @@ export default class WaMenuItem extends WebAwesomeElement {
           'menu-item--rtl': isRtl,
           'menu-item--checked': this.checked,
           'menu-item--disabled': this.disabled,
+          'menu-item--loading': this.loading,
           'menu-item--has-submenu': this.isSubmenu(),
           'menu-item--submenu-expanded': isSubmenuExpanded
         })}
@@ -178,7 +186,7 @@ export default class WaMenuItem extends WebAwesomeElement {
           <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" aria-hidden="true"></wa-icon>
         </span>
 
-        ${this.submenuController.renderSubmenu()}
+        ${this.submenuController.renderSubmenu()} ${this.loading ? html`<sl-spinner part="spinner"></sl-spinner>` : ''}
       </div>
     `;
   }
diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts
index 3479f5502..e386dc904 100644
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -34,6 +34,25 @@ export default css`
     cursor: not-allowed;
   }
 
+  .menu-item.menu-item--loading {
+    outline: none;
+    cursor: wait;
+  }
+
+  .menu-item.menu-item--loading *:not(wa-spinner) {
+    opacity: 0.5;
+  }
+
+  .menu-item--loading wa-spinner {
+    --indicator-color: currentColor;
+    --track-width: 1px;
+    position: absolute;
+    font-size: 0.75em;
+    top: calc(50% - 0.5em);
+    left: 0.65rem;
+    opacity: 1;
+  }
+
   .menu-item .menu-item__label {
     flex: 1 1 auto;
     display: inline-block;
diff --git a/src/components/menu-item/menu-item.test.ts b/src/components/menu-item/menu-item.test.ts
index 43a915c8f..cbf115ff5 100644
--- a/src/components/menu-item/menu-item.test.ts
+++ b/src/components/menu-item/menu-item.test.ts
@@ -40,6 +40,7 @@ describe('<wa-menu-item>', () => {
 
     expect(el.value).to.equal('');
     expect(el.disabled).to.be.false;
+    expect(el.loading).to.equal(false);
     expect(el.getAttribute('aria-disabled')).to.equal('false');
   });
 
@@ -48,6 +49,13 @@ describe('<wa-menu-item>', () => {
     expect(el.getAttribute('aria-disabled')).to.equal('true');
   });
 
+  describe('when loading', () => {
+    it('should have a spinner present', async () => {
+      const el = await fixture<WaMenuItem>(html` <wa-menu-item loading>Menu Item Label</wa-menu-item> `);
+      expect(el.shadowRoot!.querySelector('wa-spinner')).to.exist;
+    });
+  });
+
   it('should return a text label when calling getTextLabel()', async () => {
     const el = await fixture<WaMenuItem>(html` <wa-menu-item>Test</wa-menu-item> `);
     expect(el.getTextLabel()).to.equal('Test');