From dbc2c6ad2a0d8a68764c562d26d196c18c5b9913 Mon Sep 17 00:00:00 2001 From: okakyo <0622okakyo@gmail.com> Date: Sat, 24 Feb 2024 14:35:59 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[#1220]=20textarea=20=E3=81=AE=20focus=20?= =?UTF-8?q?=E3=82=92=20default=20=E3=81=AE=E7=89=A9=E3=81=AB=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/styles/bases/text-area.css.ts | 4 ---- .../src/components/base/textarea/text-area.vue | 6 +----- .../components/base/text-area/components/text-area.tsx | 10 +++------- 3 files changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/styles/bases/text-area.css.ts b/packages/styles/bases/text-area.css.ts index 45567b0a6..ec7d296ea 100644 --- 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.vue b/packages/wiz-ui-next/src/components/base/textarea/text-area.vue index 143c563e7..5ea35368d 100644 --- 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" /> @@ -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"; }); 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 index f61e1da3b..651bb166b 100644 --- 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( }, ref ) => { - const [hasFocus, setHasFocus] = useState(false); const formControl = useContext(FormControlContext); const isError = error || formControl.error; @@ -75,10 +73,8 @@ const TextArea = forwardRef( 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)} /> ); From 4e04bd1126913c1b00734953390228190923989e Mon Sep 17 00:00:00 2001 From: okakyo <0622okakyo@gmail.com> Date: Sat, 24 Feb 2024 14:46:34 +0900 Subject: [PATCH 2/3] [#1220] add changeset --- .changeset/lovely-chicken-wash.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/lovely-chicken-wash.md diff --git a/.changeset/lovely-chicken-wash.md b/.changeset/lovely-chicken-wash.md new file mode 100644 index 000000000..6c70c6f55 --- /dev/null +++ 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 のものに修正 From ea1ecdd3624400038583f3b2ef8fd3a7c0f0b09c Mon Sep 17 00:00:00 2001 From: okakyo <0622okakyo@gmail.com> Date: Tue, 27 Feb 2024 21:49:28 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[#1220]=20test=20=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/base/textarea/text-area.stories.ts | 4 ---- .../components/base/text-area/stories/text-area.stories.tsx | 6 ------ 2 files changed, 10 deletions(-) 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 index 3b4575bce..415d22c5c 100644 --- 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-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 index 432b65a36..c2b23aeb2 100644 --- 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);