From 07943a72bbb28220378f48e5a3cb506d5d11349e Mon Sep 17 00:00:00 2001
From: okakyo <0622okakyo@gmail.com>
Date: Wed, 14 Feb 2024 01:02:23 +0900
Subject: [PATCH 1/3] =?UTF-8?q?[#1188]=20expand=20=E3=82=92=E9=81=A9?=
 =?UTF-8?q?=E7=94=A8=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E5=AE=9F?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/tooltip/tooltip.stories.ts           | 33 ++++++++++++++++
 .../src/components/base/tooltip/tooltip.vue   |  1 +
 .../base/tooltip/components/tooltip.tsx       |  7 +++-
 .../base/tooltip/stories/tooltip.stories.tsx  | 38 +++++++++++++++++++
 4 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/packages/wiz-ui-next/src/components/base/tooltip/tooltip.stories.ts b/packages/wiz-ui-next/src/components/base/tooltip/tooltip.stories.ts
index 8d0e88188..9adf97d56 100644
--- a/packages/wiz-ui-next/src/components/base/tooltip/tooltip.stories.ts
+++ b/packages/wiz-ui-next/src/components/base/tooltip/tooltip.stories.ts
@@ -84,6 +84,39 @@ Open.parameters = {
   },
 };
 
+const ExpandTemplate: StoryFn<typeof WizTooltip> = (args) => ({
+  setup: () => ({ args }),
+  components: { WizTooltip, WizText },
+  template: `
+    <div style="width: 700px; height: 500px; background-color: #eee; display: flex; justify-content: center; align-items: center;padding: 10px; ">
+      <WizTooltip v-bind="args">
+          <div style="width: 100%; background-color:white; text-align: center;">保険見直し、つみ...</div>
+        <template #content>保険見直し、つみたて・投資、ライフプラン</template>
+      </WizTooltip>
+    </div>`,
+});
+
+export const Expand = ExpandTemplate.bind({});
+Expand.args = {
+  isOpen: true,
+  expand: true,
+};
+Expand.parameters = {
+  docs: {
+    description: {
+      story: `Expand をtrueにすると、Tooltip が親コンポーネントの幅100%で表示されます。`,
+    },
+    source: {
+      code: `
+<WizTooltip isOpen expand>
+  保険見直し、つみ...
+  <template #content>保険見直し、つみたて・投資、ライフプラン</template>
+</WizTooltip>
+`,
+    },
+  },
+};
+
 export const Direction = Template.bind({});
 Direction.args = {
   direction: "right",
diff --git a/packages/wiz-ui-next/src/components/base/tooltip/tooltip.vue b/packages/wiz-ui-next/src/components/base/tooltip/tooltip.vue
index 76dc3e46f..94813555d 100644
--- a/packages/wiz-ui-next/src/components/base/tooltip/tooltip.vue
+++ b/packages/wiz-ui-next/src/components/base/tooltip/tooltip.vue
@@ -3,6 +3,7 @@
     :class="tooltipStyle"
     @mouseenter="isHover = true"
     @mouseleave="isHover = false"
+    :style="{ width: expand ? '100%' : 'initial' }"
   >
     <WizPopupContainer :expand="expand">
       <slot />
diff --git a/packages/wiz-ui-react/src/components/base/tooltip/components/tooltip.tsx b/packages/wiz-ui-react/src/components/base/tooltip/components/tooltip.tsx
index 67a990a3d..36b181727 100644
--- a/packages/wiz-ui-react/src/components/base/tooltip/components/tooltip.tsx
+++ b/packages/wiz-ui-react/src/components/base/tooltip/components/tooltip.tsx
@@ -18,6 +18,7 @@ type Props = BaseProps & {
   isDirectionFixed?: boolean;
   children: ReactNode;
   content: ReactNode;
+  expand: boolean;
 };
 
 const Tooltip: FC<Props> = ({
@@ -28,6 +29,7 @@ const Tooltip: FC<Props> = ({
   isDirectionFixed = false,
   children,
   content,
+  expand,
 }) => {
   const [isHover, setIsHover] = useState(false);
   const anchor = useRef<HTMLDivElement | null>(null);
@@ -36,7 +38,10 @@ const Tooltip: FC<Props> = ({
     <>
       <div
         className={clsx(className, tooltipStyle)}
-        style={style}
+        style={{
+          ...style,
+          width: expand ? "100%" : "initial",
+        }}
         onMouseEnter={() => setIsHover(true)}
         onMouseLeave={() => setIsHover(false)}
         ref={anchor}
diff --git a/packages/wiz-ui-react/src/components/base/tooltip/stories/tooltip.stories.tsx b/packages/wiz-ui-react/src/components/base/tooltip/stories/tooltip.stories.tsx
index e8dfc7f5c..5133d2f14 100644
--- a/packages/wiz-ui-react/src/components/base/tooltip/stories/tooltip.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/tooltip/stories/tooltip.stories.tsx
@@ -62,6 +62,44 @@ export const Open: Story = {
   },
 };
 
+const ExpandTemplate: Story = {
+  render: (args) => (
+    <div
+      style={{
+        width: "700px",
+        height: "500px",
+        backgroundColor: "#eee",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: "10px",
+      }}
+    >
+      <WizTooltip {...args}>
+        <WizText textAlign="center" style={{ backgroundColor: "white" }}>
+          保険見直し、つみ...
+        </WizText>
+      </WizTooltip>
+    </div>
+  ),
+};
+
+export const Expand: Story = {
+  ...ExpandTemplate,
+  args: {
+    content,
+    isOpen: true,
+    expand: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "expandをtrueにすると、幅100%で表示されます。",
+      },
+    },
+  },
+};
+
 export const Direction: Story = {
   ...Template,
   args: {

From bdbe4a7eed8ad66657c6983593f2f921b56e47be Mon Sep 17 00:00:00 2001
From: okakyo <0622okakyo@gmail.com>
Date: Sun, 18 Feb 2024 16:45:05 +0900
Subject: [PATCH 2/3] [#1188] add changeset

---
 .changeset/quiet-turtles-tap.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/quiet-turtles-tap.md

diff --git a/.changeset/quiet-turtles-tap.md b/.changeset/quiet-turtles-tap.md
new file mode 100644
index 000000000..399efe0e3
--- /dev/null
+++ b/.changeset/quiet-turtles-tap.md
@@ -0,0 +1,6 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+---
+
+[#1188] Tooltip に expand の有効化

From 3c6f2702b0abd653f9018c4a699dc1dd9ba207f7 Mon Sep 17 00:00:00 2001
From: okakyo <0622okakyo@gmail.com>
Date: Fri, 23 Feb 2024 01:05:51 +0900
Subject: [PATCH 3/3] =?UTF-8?q?[#1188]=20react=20=E3=81=AE=E3=83=93?=
 =?UTF-8?q?=E3=83=AB=E3=83=89=E3=82=A8=E3=83=A9=E3=83=BC=E3=81=AE=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/base/tooltip/components/tooltip.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/wiz-ui-react/src/components/base/tooltip/components/tooltip.tsx b/packages/wiz-ui-react/src/components/base/tooltip/components/tooltip.tsx
index 36b181727..b159cdc4b 100644
--- a/packages/wiz-ui-react/src/components/base/tooltip/components/tooltip.tsx
+++ b/packages/wiz-ui-react/src/components/base/tooltip/components/tooltip.tsx
@@ -18,7 +18,7 @@ type Props = BaseProps & {
   isDirectionFixed?: boolean;
   children: ReactNode;
   content: ReactNode;
-  expand: boolean;
+  expand?: boolean;
 };
 
 const Tooltip: FC<Props> = ({
@@ -29,7 +29,7 @@ const Tooltip: FC<Props> = ({
   isDirectionFixed = false,
   children,
   content,
-  expand,
+  expand = false,
 }) => {
   const [isHover, setIsHover] = useState(false);
   const anchor = useRef<HTMLDivElement | null>(null);