From 90bed057e35fd1186a78c0b60e4c3e14173f59c3 Mon Sep 17 00:00:00 2001
From: oki07 <takashi.oki@uzabase.com>
Date: Sat, 23 Nov 2024 14:51:37 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E3=83=95=E3=82=A9?=
 =?UTF-8?q?=E3=83=BC=E3=83=9E=E3=83=83=E3=83=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dropdownAction/dropdown-action.css        |  2 +-
 .../sp-dropdown-action-button.ts              |  8 ++++--
 .../dropdownAction/sp-dropdown-action.ts      | 28 ++++++++++++-------
 .../sp-dropdown-action.story.ts               | 16 ++++++++---
 4 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/components/dropdownAction/dropdown-action.css b/src/components/dropdownAction/dropdown-action.css
index 2c65e02..f223270 100644
--- a/src/components/dropdownAction/dropdown-action.css
+++ b/src/components/dropdownAction/dropdown-action.css
@@ -11,5 +11,5 @@
   background: var(--color-semantic-surface-regular-1);
   border: 1px solid var(--color-semantic-border-regular);
   border-radius: 5px;
-  box-shadow: 0px 3px 12px 0px var(--color-semantic-elevation-regular);
+  box-shadow: 0 3px 12px 0 var(--color-semantic-elevation-regular);
 }
diff --git a/src/components/dropdownAction/sp-dropdown-action-button.ts b/src/components/dropdownAction/sp-dropdown-action-button.ts
index 32182b3..5820d60 100644
--- a/src/components/dropdownAction/sp-dropdown-action-button.ts
+++ b/src/components/dropdownAction/sp-dropdown-action-button.ts
@@ -8,7 +8,9 @@ import dropdownActionButtonStyle from "./dropdown-action-button.css?inline" asse
 import "../icon/sp-icon";
 
 const styles = new CSSStyleSheet();
-styles.replaceSync(`${foundationStyle} ${buttonStyle} ${dropdownActionButtonStyle}`);
+styles.replaceSync(
+  `${foundationStyle} ${buttonStyle} ${dropdownActionButtonStyle}`,
+);
 
 export class SpDropdownActionButton extends UbButton {
   constructor() {
@@ -34,11 +36,11 @@ export class SpDropdownActionButton extends UbButton {
     iconElement.size = "small";
     this.buttonElement.insertBefore(iconElement, this.textElement.nextSibling);
   }
-  
+
   setAriaHasPopup(value: string) {
     this.buttonElement.setAttribute("aria-haspopup", value);
   }
-  
+
   setAriaExpanded(value: string) {
     this.buttonElement.setAttribute("aria-expanded", value);
   }
diff --git a/src/components/dropdownAction/sp-dropdown-action.ts b/src/components/dropdownAction/sp-dropdown-action.ts
index c10cd7f..7ff647d 100644
--- a/src/components/dropdownAction/sp-dropdown-action.ts
+++ b/src/components/dropdownAction/sp-dropdown-action.ts
@@ -25,7 +25,7 @@ export class SpDropdownAction extends HTMLElement {
   #buttonElement = document.createElement("sp-dropdown-action-button");
   #menuElement = document.createElement("div");
   #menuSlotElement = document.createElement("slot");
-  
+
   #menuId = createMenuId();
 
   #open: boolean = false;
@@ -42,7 +42,7 @@ export class SpDropdownAction extends HTMLElement {
   }
   set open(value: boolean) {
     this.#open = value;
-    
+
     if (value) {
       this.#buttonElement.setAttribute("selected", "");
     } else {
@@ -60,7 +60,7 @@ export class SpDropdownAction extends HTMLElement {
     this.#buttonElement.disabled = value;
     this.#updateMenuDisplay();
   }
-  
+
   get position() {
     return this.#position;
   }
@@ -92,6 +92,7 @@ export class SpDropdownAction extends HTMLElement {
   }
 
   connectedCallback() {
+    this.#buttonElement.setAttribute("part", "button");
     this.#buttonElement.addEventListener(
       "click",
       this.#handleClickButton.bind(this),
@@ -103,7 +104,10 @@ export class SpDropdownAction extends HTMLElement {
     this.#menuElement.role = "menu";
     this.#menuElement.appendChild(this.#menuSlotElement);
 
-    this.#menuSlotElement.addEventListener("click", this.#handleClickMenu.bind(this));
+    this.#menuSlotElement.addEventListener(
+      "click",
+      this.#handleClickMenu.bind(this),
+    );
     window.addEventListener("click", this.#handleClickOutside.bind(this));
 
     this.#baseElement.appendChild(this.#menuElement);
@@ -116,7 +120,10 @@ export class SpDropdownAction extends HTMLElement {
   }
 
   disconnectedCallback() {
-    this.#menuSlotElement.removeEventListener("click", this.#handleClickMenu.bind(this));
+    this.#menuSlotElement.removeEventListener(
+      "click",
+      this.#handleClickMenu.bind(this),
+    );
     window.removeEventListener("click", this.#handleClickOutside.bind(this));
   }
 
@@ -155,7 +162,7 @@ export class SpDropdownAction extends HTMLElement {
     this.open = false;
     this.#updateAriaExpandedAttribute();
   }
-  
+
   #handleClickOutside(event: MouseEvent) {
     event.stopPropagation();
 
@@ -164,9 +171,10 @@ export class SpDropdownAction extends HTMLElement {
       this.#updateAriaExpandedAttribute();
     }
   }
-  
+
   #updateMenuDisplay() {
-    this.#menuElement.style.display = this.open && !this.disabled ? "block" : "none";
+    this.#menuElement.style.display =
+      this.open && !this.disabled ? "block" : "none";
   }
 
   #setupAccessibilityAttributes() {
@@ -175,11 +183,11 @@ export class SpDropdownAction extends HTMLElement {
     this.#menuElement.setAttribute("id", this.#menuId);
     this.#updateAriaExpandedAttribute();
   }
-  
+
   #updateAriaExpandedAttribute() {
     this.#buttonElement.setAriaExpanded(this.open ? "true" : "false");
   }
-  
+
   #syncMenuMinWidthWithButtonWidth() {
     const buttonWidth = this.#buttonElement.offsetWidth;
     this.#menuElement.style.minWidth = `${buttonWidth}px`;
diff --git a/stories/dropdownAction/sp-dropdown-action.story.ts b/stories/dropdownAction/sp-dropdown-action.story.ts
index 2f87881..1a155c1 100644
--- a/stories/dropdownAction/sp-dropdown-action.story.ts
+++ b/stories/dropdownAction/sp-dropdown-action.story.ts
@@ -15,8 +15,12 @@ type Story = StoryObj;
 export const Basic: Story = {
   render: () => html`
     <sp-dropdown-action label="ダッシュボード新規作成">
-      <sp-dropdown-action-item @click=${() => alert("企業を作成")}>企業を作成</sp-dropdown-action-item>
-      <sp-dropdown-action-item @click=${() => alert("業界を作成")}>業界を作成</sp-dropdown-action-item>
+      <sp-dropdown-action-item @click=${() => alert("企業を作成")}
+        >企業を作成</sp-dropdown-action-item
+      >
+      <sp-dropdown-action-item @click=${() => alert("業界を作成")}
+        >業界を作成</sp-dropdown-action-item
+      >
     </sp-dropdown-action>
   `,
 };
@@ -24,7 +28,9 @@ export const Basic: Story = {
 export const LongText: Story = {
   render: () => html`
     <sp-dropdown-action label="ダッシュボード新規作成">
-      <sp-dropdown-action-item>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</sp-dropdown-action-item>
+      <sp-dropdown-action-item
+        >AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</sp-dropdown-action-item
+      >
     </sp-dropdown-action>
   `,
 };
@@ -33,7 +39,9 @@ export const RightPosition: Story = {
   render: () => html`
     <div style="display: flex; justify-content: end">
       <sp-dropdown-action label="ダッシュボード新規作成" open position="right">
-        <sp-dropdown-action-item>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</sp-dropdown-action-item>
+        <sp-dropdown-action-item
+          >AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</sp-dropdown-action-item
+        >
       </sp-dropdown-action>
     </div>
   `,