Merge pull request #1212 from Wizleap-Inc/bug/1188_tooltip

Bug(tooltip): Expandを指定しても横幅が横いっぱいまで広がらない
Wizleap-Inc · Feb 26, 2024 · 736839e · 736839e
2 parents 17414b3 + 3c6f270
commit 736839e
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 1 deletion.
diff --git a/.changeset/quiet-turtles-tap.md 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 の有効化
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
@@ -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
@@ -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
@@ -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 = false,
 }) => {
   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
@@ -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: {