Merge pull request #1375 from Wizleap-Inc/chore/infomation-panel-clos…

…e-button Chore/infomation-panel-close-button
Wizleap-Inc · Sep 30, 2024 · d9eed0d · d9eed0d
2 parents dc87acb + ff7f539
commit d9eed0d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 25 deletions.
diff --git a/.changeset/lovely-cars-explode.md b/.changeset/lovely-cars-explode.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+Chore(infomation-panel): update close button position
diff --git a/packages/styles/bases/information-panel.css.ts b/packages/styles/bases/information-panel.css.ts
@@ -25,7 +25,3 @@ export const informationPanelFontStyle = styleVariants({
     color: THEME.color.red["800"],
   },
 });
-
-export const informationPanelIconStyle = style({
-  margin: "auto 0",
-});
diff --git a/packages/wiz-ui-next/src/components/base/information-panel/information-panel.vue b/packages/wiz-ui-next/src/components/base/information-panel/information-panel.vue
@@ -16,27 +16,24 @@
         </template>
       </div>
     </WizVStack>
-    <div :class="[informationPanelIconStyle]">
-      <WizVStack align="center">
-        <WizIconButton
-          variant="transparent"
-          :icon="WizIClose"
-          @click="close"
-          :ariaLabel="ARIA_LABELS.INFORMATION_PANEL.CLOSE"
-        />
-      </WizVStack>
-    </div>
+    <WizVStack>
+      <WizIconButton
+        variant="transparent"
+        :icon="WizIClose"
+        @click="close"
+        :ariaLabel="ARIA_LABELS.INFORMATION_PANEL.CLOSE"
+      />
+    </WizVStack>
   </div>
 </template>
 <script setup lang="ts">
 import { ARIA_LABELS, ComponentName } from "@wizleap-inc/wiz-ui-constants";
 import {
   informationPanelBorderStyle,
   informationPanelFontStyle,
-  informationPanelIconStyle,
   informationPanelStyle,
 } from "@wizleap-inc/wiz-ui-styles/bases/information-panel.css";
-import { PropType, computed, Component as ComponentType } from "vue"; // Componentの場合、<component>タグと競合するためエイリアスをつける
+import { Component as ComponentType, PropType, computed } from "vue"; // Componentの場合、<component>タグと競合するためエイリアスをつける
 
 import { WizIClose, WizIconButton } from "@/components";
 

diff --git a/packages/wiz-ui-react/src/components/base/information-panel/components/information-panel.tsx b/packages/wiz-ui-react/src/components/base/information-panel/components/information-panel.tsx
@@ -61,15 +61,13 @@ const InformationPanel: FC<Props> = ({
           )
         )}
       </WizVStack>
-      <div className={styles.informationPanelIconStyle}>
-        <WizVStack align="center">
-          <WizIconButton
-            variant="transparent"
-            icon={WizIClose}
-            onClick={onClose}
-          />
-        </WizVStack>
-      </div>
+      <WizVStack align="start">
+        <WizIconButton
+          variant="transparent"
+          icon={WizIClose}
+          onClick={onClose}
+        />
+      </WizVStack>
     </div>
   );
 };