Merge pull request #1225 from Wizleap-Inc/feat/1220_text_area

Feat/1220 TextArea の Focus をデフォルトのものに修正
Wizleap-Inc · Feb 28, 2024 · ed1e58b · ed1e58b
2 parents 9886f68 + ea1ecdd
commit ed1e58b
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 26 deletions.
diff --git a/.changeset/lovely-chicken-wash.md b/.changeset/lovely-chicken-wash.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": patch
+"@wizleap-inc/wiz-ui-next": patch
+"@wizleap-inc/wiz-ui-styles": patch
+---
+
+[#1220] text_area の focus を default のものに修正
diff --git a/packages/styles/bases/text-area.css.ts b/packages/styles/bases/text-area.css.ts
@@ -12,10 +12,6 @@ export const textAreaStyle = style({
   "::placeholder": {
     color: THEME.color.gray[500],
   },
-
-  ":focus": {
-    outline: "none",
-  },
 });
 
 export const textAreaVariantStyle = styleVariants({

diff --git a/packages/wiz-ui-next/src/components/base/textarea/text-area.stories.ts b/packages/wiz-ui-next/src/components/base/textarea/text-area.stories.ts
@@ -1,7 +1,6 @@
 import { expect } from "@storybook/jest";
 import { userEvent, waitFor, within } from "@storybook/testing-library";
 import { Meta, StoryFn } from "@storybook/vue3";
-import { THEME } from "@wizleap-inc/wiz-ui-constants";
 import { ref } from "vue";
 
 import WizTextArea from "./text-area.vue";
@@ -101,9 +100,6 @@ Test.play = async ({ canvasElement }) => {
   const textarea = canvas.getByPlaceholderText("入力してください");
   await userEvent.click(textarea);
   await waitFor(() => expect(textarea).toHaveFocus());
-  await waitFor(() =>
-    expect(textarea).toHaveStyle(`border: 1px solid ${THEME.color.green[800]};`)
-  );
   await userEvent.type(textarea, "Hoge");
   await waitFor(() => expect(textarea).toHaveValue("Hoge"));
   await userEvent.clear(textarea);

diff --git a/packages/wiz-ui-next/src/components/base/textarea/text-area.vue b/packages/wiz-ui-next/src/components/base/textarea/text-area.vue
@@ -12,8 +12,6 @@
       inputBorderStyle[state],
     ]"
     :style="{ resize, maxWidth, minWidth, maxHeight, minHeight }"
-    @focusin="hasFocus = true"
-    @focusout="hasFocus = false"
   />
 </template>
 
@@ -25,7 +23,7 @@ import {
   textAreaVariantStyle,
 } from "@wizleap-inc/wiz-ui-styles/bases/text-area.css";
 import { inputBorderStyle } from "@wizleap-inc/wiz-ui-styles/commons";
-import { PropType, computed, inject, ref } from "vue";
+import { PropType, computed, inject } from "vue";
 
 import { formControlKey } from "@/hooks/use-form-control-provider";
 
@@ -95,11 +93,9 @@ const textValue = computed({
 // Form Control
 const form = inject(formControlKey);
 const isError = computed(() => (form ? form.isError.value : false));
-const hasFocus = ref(false);
 
 const state = computed(() => {
   if (isError.value) return "error";
-  if (hasFocus.value) return "active";
   return "default";
 });
 </script>
diff --git a/packages/wiz-ui-react/src/components/base/text-area/components/text-area.tsx b/packages/wiz-ui-react/src/components/base/text-area/components/text-area.tsx
@@ -2,13 +2,12 @@ import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
 import * as styles from "@wizleap-inc/wiz-ui-styles/bases/text-area.css";
 import { inputBorderStyle } from "@wizleap-inc/wiz-ui-styles/commons";
 import clsx from "clsx";
-import { forwardRef, useContext, useState } from "react";
+import { forwardRef, useContext } from "react";
 
 import { FormControlContext } from "@/components/custom/form/components/form-control-context";
 import { BaseProps } from "@/types";
-function getInputBorderStyleKey(isError?: boolean, hasFocus?: boolean) {
+function getInputBorderStyleKey(isError?: boolean) {
   if (isError) return "error";
-  if (hasFocus) return "active";
   return "default";
 }
 
@@ -49,7 +48,6 @@ const TextArea = forwardRef<HTMLTextAreaElement, Props>(
     },
     ref
   ) => {
-    const [hasFocus, setHasFocus] = useState(false);
     const formControl = useContext(FormControlContext);
 
     const isError = error || formControl.error;
@@ -75,10 +73,8 @@ const TextArea = forwardRef<HTMLTextAreaElement, Props>(
           styles.textAreaStyle,
           styles.textAreaVariantStyle[disabled ? "disabled" : "default"],
           expand && styles.textAreaExpandStyle,
-          inputBorderStyle[getInputBorderStyleKey(isError, hasFocus)]
+          inputBorderStyle[getInputBorderStyleKey(isError)]
         )}
-        onFocus={() => setHasFocus(true)}
-        onBlur={() => setHasFocus(false)}
         onChange={(e) => onChange(e.target.value)}
       />
     );

diff --git a/packages/wiz-ui-react/src/components/base/text-area/stories/text-area.stories.tsx b/packages/wiz-ui-react/src/components/base/text-area/stories/text-area.stories.tsx
@@ -1,7 +1,6 @@
 import { expect } from "@storybook/jest";
 import { Meta, StoryObj } from "@storybook/react";
 import { userEvent, waitFor, within } from "@storybook/testing-library";
-import { THEME } from "@wizleap-inc/wiz-ui-constants";
 import { useState } from "react";
 
 import { WizTextArea } from "..";
@@ -69,11 +68,6 @@ export const Test: Story = {
     const textarea = canvas.getByPlaceholderText("入力してください");
     userEvent.click(textarea);
     await waitFor(() => expect(textarea).toHaveFocus());
-    await waitFor(() =>
-      expect(textarea).toHaveStyle(
-        `border: 1px solid ${THEME.color.green[800]};`
-      )
-    );
     userEvent.type(textarea, "Hoge");
     await waitFor(() => expect(textarea).toHaveValue("Hoge"));
     userEvent.clear(textarea);