Repository: Wizleap-Inc/wiz-ui
Pull request #1445: FormControlにborderLeftプロパティと、borderColorプロパティを追加
Author: login: BestTempuraJP
Labels: name: 🎨 story
description: ストーリーの追加・変更
Created: 2025-03-25T03:19:53Z | Merged: 2025-03-27T05:11:43Z

# タスク

resolve: #1443

## やったこと
1. borderLeftプロパティと、borderColorプロパティの追加を行いました。
2. Figmaのスタイルに準拠するため親要素gapをxs2からxsに変更しました。(BorderとTextの幅と揃える）
認)
![スクリーンショット 2025-03-25 12 14 39](https://github.com/user-attachments/assets/733a59ea-7535-463f-8639-e7eccbe1b19d)

## やらないこと
- h4タグの対応

## 特にレビューしてほしい箇所
- .changeset/sour-flies-smoke.md
- font-weightはコンポーネントの状態がわかりやすくなるようにWizTextのboldプロパティを用いましたが、lineHeightに関してはFontSizeによって柔軟に変更したいので `%`で指定したいと考えてlineHeightプロパティは使用しておりません。




Diff:
diff --git a/.changeset/sour-flies-smoke.md b/.changeset/sour-flies-smoke.md
new file mode 100644
index 000000000..9b7d244fc
--- /dev/null
+++ b/.changeset/sour-flies-smoke.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+Added borderLeft and borderColor props to FormControl.
diff --git a/packages/styles/customs/form-control.css.ts b/packages/styles/customs/form-control.css.ts
new file mode 100644
index 000000000..ad153467b
--- /dev/null
+++ b/packages/styles/customs/form-control.css.ts
@@ -0,0 +1,15 @@
+import { style } from "@vanilla-extract/css";
+import { THEME } from "@wizleap-inc/wiz-ui-constants";
+
+/**
+ * borderColorStyleと併用する前提のためborderColorは含まない
+ */
+export const borderLeftStyle = style({
+  borderLeftWidth: "3px",
+  borderLeftStyle: "solid",
+  paddingLeft: THEME.spacing.xs,
+});
+
+export const borderLeftTextStyle = style({
+  lineHeight: "140%",
+});
diff --git a/packages/wiz-ui-next/src/components/custom/form/control.stories.ts b/packages/wiz-ui-next/src/components/custom/form/control.stories.ts
index 02dbc0389..de862f15f 100644
--- a/packages/wiz-ui-next/src/components/custom/form/control.stories.ts
+++ b/packages/wiz-ui-next/src/components/custom/form/control.stories.ts
@@ -1,4 +1,5 @@
 import { Meta, StoryFn } from "@storybook/vue3";
+import { ColorKeys, COLOR_MAP_ACCESSORS } from "@wizleap-inc/wiz-ui-constants";
 import { ref } from "vue";
 
 import { WizTextInput } from "@/components";
@@ -23,6 +24,11 @@ export default {
     direction: {
       control: { type: "select", options: ["horizontal", "vertical"] },
     },
+    borderLeft: { control: { type: "boolean" } },
+    borderColor: {
+      control: { type: "select" },
+      options: COLOR_MAP_ACCESSORS,
+    },
   },
 } as Meta<typeof WizFormControl>;
 
@@ -44,6 +50,8 @@ interface Options {
   required: boolean;
   error: string;
   direction: "horizontal" | "vertical";
+  borderLeft: boolean;
+  borderColor: ColorKeys;
 }
 
 const CODE_TEMPLATE = ({
@@ -51,13 +59,17 @@ const CODE_TEMPLATE = ({
   required,
   error,
   direction,
+  borderLeft,
+  borderColor,
 }: Partial<Options>) => `
 <template>
   <WizFormControl${
     (label ? ` label="${label}"` : "") +
     (required ? ` required` : "") +
     (error ? ` error="${error}"` : "") +
-    (direction ? ` direction="${direction}"` : "")
+    (direction ? ` direction="${direction}"` : "") +
+    (borderLeft ? ` border-left` : "") +
+    (borderColor ? ` border-color="${borderColor}"` : "")
   }>
     <WizTextInput v-model="input" name="input" placeholder="入力してください" />
   </WizFormControl>
@@ -168,3 +180,25 @@ Error.parameters = {
     },
   },
 };
+
+export const BorderLeft = Template.bind({});
+BorderLeft.args = {
+  label: "Label",
+  borderLeft: true,
+  borderColor: "green.800",
+};
+BorderLeft.parameters = {
+  docs: {
+    description: {
+      story:
+        "borderLeft を指定すると左にラインが表示され、borderColor で色を変更できます。",
+    },
+    source: {
+      code: CODE_TEMPLATE({
+        label: "Label",
+        borderLeft: true,
+        borderColor: "green.800",
+      }),
+    },
+  },
+};
diff --git a/packages/wiz-ui-next/src/components/custom/form/control.vue b/packages/wiz-ui-next/src/components/custom/form/control.vue
index 359cde2ab..7ad25bbf1 100644
--- a/packages/wiz-ui-next/src/components/custom/form/control.vue
+++ b/packages/wiz-ui-next/src/components/custom/form/control.vue
@@ -10,12 +10,22 @@
       :align="direction === 'horizontal' ? 'center' : undefined"
       :wrap="false"
     >
-      <WizHStack :width="labelWidth" align="center" gap="xs2" py="xs2">
+      <WizHStack
+        :width="labelWidth"
+        align="center"
+        gap="xs"
+        my="xs2"
+        :class="[
+          borderLeft && [borderLeftStyle, borderColorStyle[borderColor]],
+        ]"
+      >
         <WizText
           as="label"
           :htmlFor="htmlFor"
           :color="labelColor"
           :font-size="labelFontSize"
+          :bold="borderLeft"
+          :class="[borderLeft && borderLeftTextStyle]"
         >
           {{ label }}
         </WizText>
@@ -35,7 +45,12 @@
 </template>
 
 <script setup lang="ts">
-import { THEME } from "@wizleap-inc/wiz-ui-constants";
+import { ColorKeys, THEME } from "@wizleap-inc/wiz-ui-constants";
+import { borderColorStyle } from "@wizleap-inc/wiz-ui-styles/commons/border-color.css";
+import {
+  borderLeftStyle,
+  borderLeftTextStyle,
+} from "@wizleap-inc/wiz-ui-styles/customs/form-control.css";
 import { PropType, computed, inject, onMounted, provide, watch } from "vue";
 
 import {
@@ -72,6 +87,14 @@ const props = defineProps({
     type: String as PropType<"horizontal" | "vertical">,
     default: "horizontal",
   },
+  borderLeft: {
+    type: Boolean,
+    default: false,
+  },
+  borderColor: {
+    type: String as PropType<ColorKeys>,
+    default: "green.800",
+  },
 });
 
 // Form Group
diff --git a/packages/wiz-ui-next/src/components/custom/form/group.stories.ts b/packages/wiz-ui-next/src/components/custom/form/group.stories.ts
index 3dea3a676..c34409bed 100644
--- a/packages/wiz-ui-next/src/components/custom/form/group.stories.ts
+++ b/packages/wiz-ui-next/src/components/custom/form/group.stories.ts
@@ -126,7 +126,7 @@ Default.parameters = {
 
 export const LabelWidth = Template.bind({});
 LabelWidth.args = {
-  labelWidth: "6rem",
+  labelWidth: "6.25rem",
 };
 LabelWidth.parameters = {
   docs: {
diff --git a/packages/wiz-ui-react/src/components/custom/form/components/form-control.tsx b/packages/wiz-ui-react/src/components/custom/form/components/form-control.tsx
index 9835742ad..7fb03160c 100644
--- a/packages/wiz-ui-react/src/components/custom/form/components/form-control.tsx
+++ b/packages/wiz-ui-react/src/components/custom/form/components/form-control.tsx
@@ -1,4 +1,7 @@
-import { ComponentName, THEME } from "@wizleap-inc/wiz-ui-constants";
+import { ComponentName, THEME, ColorKeys } from "@wizleap-inc/wiz-ui-constants";
+import { borderColorStyle } from "@wizleap-inc/wiz-ui-styles/commons/border-color.css";
+import * as styles from "@wizleap-inc/wiz-ui-styles/customs/form-control.css";
+import clsx from "clsx";
 import { FC, ReactNode, useContext, useMemo } from "react";
 
 import { WizHStack, WizStack, WizTag, WizText, WizVStack } from "@/components";
@@ -14,6 +17,8 @@ type Props = BaseProps & {
   error?: string;
   children: ReactNode;
   direction?: "horizontal" | "vertical";
+  borderLeft?: boolean;
+  borderColor?: ColorKeys;
 };
 
 const FormControl: FC<Props> = ({
@@ -25,6 +30,8 @@ const FormControl: FC<Props> = ({
   error,
   direction = "horizontal",
   children,
+  borderLeft = false,
+  borderColor = "green.800",
 }) => {
   const {
     labelWidth = "8rem",
@@ -51,12 +58,25 @@ const FormControl: FC<Props> = ({
           nowrap
           align={direction === "horizontal" ? "center" : undefined}
         >
-          <WizHStack width={labelWidth} align="center" gap="xs2" py="xs2">
+          <WizHStack
+            width={labelWidth}
+            align="center"
+            gap="xs"
+            my="xs2"
+            className={clsx({
+              [styles.borderLeftStyle]: borderLeft,
+              [borderColorStyle[borderColor]]: borderLeft,
+            })}
+          >
             <WizText
               as="label"
               htmlFor={htmlFor}
               color={labelColor}
               fontSize={labelFontSize}
+              bold={borderLeft}
+              className={clsx({
+                [styles.borderLeftTextStyle]: borderLeft,
+              })}
             >
               {label}
             </WizText>
diff --git a/packages/wiz-ui-react/src/components/custom/form/stories/form-control.stories.tsx b/packages/wiz-ui-react/src/components/custom/form/stories/form-control.stories.tsx
index 97cc1ecf7..d719876c5 100644
--- a/packages/wiz-ui-react/src/components/custom/form/stories/form-control.stories.tsx
+++ b/packages/wiz-ui-react/src/components/custom/form/stories/form-control.stories.tsx
@@ -75,3 +75,19 @@ export const Error: Story = {
     },
   },
 };
+
+export const BorderLeft: Story = {
+  args: {
+    label: "Label",
+    borderLeft: true,
+    children: <WizTextInput placeholder="入力してください" />,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "borderLeftを指定すると、labelの左側にボーダーが表示されます。`borderColor` で色を指定できます。default は `green.800` です。",
+      },
+    },
+  },
+};
diff --git a/packages/wiz-ui-react/src/components/custom/form/stories/form-group.stories.tsx b/packages/wiz-ui-react/src/components/custom/form/stories/form-group.stories.tsx
index 2ae9ef5a3..f35e4b0a6 100644
--- a/packages/wiz-ui-react/src/components/custom/form/stories/form-group.stories.tsx
+++ b/packages/wiz-ui-react/src/components/custom/form/stories/form-group.stories.tsx
@@ -49,7 +49,7 @@ export const Default: Story = {
 export const LabelWidth: Story = {
   ...Template,
   args: {
-    labelWidth: "6rem",
+    labelWidth: "6.25rem",
   },
   parameters: {
     docs: {


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR adds new border properties (borderLeft and borderColor) to the FormControl components for both React and Vue, along with corresponding updates in styles and stories to support a consistent design as per Figma guidelines.  
- Added borderLeft and borderColor properties and corresponding CSS styles.  
- Updated storybook examples for both Wiz UI React and Next components.  
- Modified the gap value in the Vue FormControl to align with the design specification.

### Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

<details>
<summary>Show a summary per file</summary>

| File | Description |
| ---- | ----------- |
| packages/styles/customs/form-control.css.ts | Added new style for borderLeft with solid border and padding adjustments. |
| packages/wiz-ui-next/src/components/custom/form/control.stories.ts | Updated story configuration to support borderLeft and borderColor props. |
| .changeset/sour-flies-smoke.md | Documented the version bump for the new borderLeft and borderColor props. |
| packages/wiz-ui-react/src/components/custom/form/stories/form-control.stories.tsx | Added a new story for the BorderLeft prop, referencing borderColor in the description. |
| packages/wiz-ui-react/src/components/custom/form/components/form-control.tsx | Integrated new props into the component with conditional styling using clsx. |
| packages/wiz-ui-next/src/components/custom/form/control.vue | Updated Vue component to include the new props and modified the layout gap for consistency. |
</details>



<details>
<summary>Comments suppressed due to low confidence (2)</summary>

**packages/wiz-ui-react/src/components/custom/form/stories/form-control.stories.tsx:79**
* [nitpick] Consider including an explicit borderColor prop in the BorderLeft story args to clearly demonstrate the customization, instead of relying solely on the default value.
```
export const BorderLeft: Story = {
```
**packages/wiz-ui-next/src/components/custom/form/control.vue:21**
* Passing a nested array to the class binding may lead to unexpected behavior. Consider flattening the array to ensure proper application of CSS classes.
```
:class="[  borderLeft && [textBorderLeftStyle, borderColorStyle[borderColor]] ]"
```
</details>


state: COMMENTED
author_association: NONE
submitted_at: 2025-03-25T03:20:44Z
user: login: ichi-h
body: 直接関係のないところをすみません、、、、 🙇 
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-25T04:57:28Z
user: login: BestTempuraJP
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-25T09:05:46Z
user: login: BestTempuraJP
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-25T09:05:54Z
user: login: ichi-h
body: 動作問題なさそうです！

gapを広げたことで、reactのform-groupの「Label Font Size」のstoryが崩れているようでした……！
form-groupにlabelWidthというプロパティがあるので、そちらをいじっていただければおそらく解決すると思います！

![image](https://github.com/user-attachments/assets/4991163a-b98f-4b3d-84c2-fa4e36a7675a)

state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-25T11:36:11Z
user: login: ichi-h
body: 本当に何度も申し訳ないです、、、、 🙇 🙇 🙇 
reactでも折り返しが発生していたみたいでして、、、こちらご確認いただいてもよろしいでしょうか、、、？ 🙇 🙇 🙇 

![image](https://github.com/user-attachments/assets/b7582951-d4ee-40ff-8b14-b1fae77db9bc)

（Squash Mergeは相談します！ありがとうございます！）
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T05:14:05Z
user: login: BestTempuraJP
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T03:50:10Z
user: login: ichi-h
body: ありがとうございます！！！
早速リリースします！！！！
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T05:11:36Z

Review comments:
diff_hunk: @@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+Added borderLeft and borderColor props to FormControl.
path: .changeset/sour-flies-smoke.md
user: login: ichi-h
body: （次回からで大丈夫です！）
ルールがあるわけではないのですが、changesetのメッセージは日本語になっていると助かります！
created_at: 2025-03-25T04:52:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -10,12 +10,16 @@
       :align="direction === 'horizontal' ? 'center' : undefined"
       :wrap="false"
     >
-      <WizHStack :width="labelWidth" align="center" gap="xs2" py="xs2">
+      <WizHStack :width="labelWidth" align="center" gap="xs" py="xs2">
         <WizText
path: packages/wiz-ui-next/src/components/custom/form/control.vue
user: login: ichi-h
body: このPRと直接関係のないところで申し訳ないのですが、こちらの変更をreactの方にも反映していただけると大変助かります、、、、、！ 🙇 
created_at: 2025-03-25T04:56:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -10,12 +10,16 @@
       :align="direction === 'horizontal' ? 'center' : undefined"
       :wrap="false"
     >
-      <WizHStack :width="labelWidth" align="center" gap="xs2" py="xs2">
+      <WizHStack :width="labelWidth" align="center" gap="xs" py="xs2">
         <WizText
path: packages/wiz-ui-next/src/components/custom/form/control.vue
user: login: BestTempuraJP
body: 大変失礼しました。
気づいて一旦アサイン外して対応したにも関わらず、何故かPushせずにアサインしなおしてました、、。
私の初PRが、、。

[475434a](https://github.com/Wizleap-Inc/wiz-ui/pull/1445/commits/475434a865d95275f2272b7a419319494146db60)
created_at: 2025-03-25T09:05:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+Added borderLeft and borderColor props to FormControl.
path: .changeset/sour-flies-smoke.md
user: login: BestTempuraJP
body: 承知しました！
created_at: 2025-03-25T09:05:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -10,12 +10,22 @@
       :align="direction === 'horizontal' ? 'center' : undefined"
       :wrap="false"
     >
-      <WizHStack :width="labelWidth" align="center" gap="xs2" py="xs2">
+      <WizHStack
+        :width="labelWidth"
+        align="center"
+        gap="xs"
+        my="xs2"
path: packages/wiz-ui-next/src/components/custom/form/control.vue
user: login: BestTempuraJP
body: @ichi-h 
https://github.com/Wizleap-Inc/wiz-ui/issues/1446
こちらのIssuesに対応するために親要素にBorderを付与するように変更しました。
また、その対応のために悩ましかったのですが親要素のpyをmyに変更しております。
created_at: 2025-03-27T03:48:59Z
author_association: CONTRIBUTOR

PR comments:
user: login: reg-suit[bot]
created_at: 2025-03-25T03:19:55Z
body: **reg-suit detected visual differences.**


Check [this report](https://visual-regression-test.wiz-ui.s3.amazonaws.com/e29707f418b0bff4a8b758b953866d065e17d2a3/index.html), and review them.

:red_circle::red_circle:
:white_circle::white_circle:

:large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle:

<details>
                <summary>What do the circles mean?</summary>
                The number of circles represent the number of changed images. <br />
                :red_circle: : Changed items,
                :white_circle: : New items,
                :black_circle: : Deleted items, and
                :large_blue_circle: Passed items
                <br />
             </details><br />
<details>
                <summary>How can I change the check status?</summary>
                If reviewers approve this PR, the reg context status will be green automatically.
                <br />
             </details><br />
author_association: NONE
user: login: notion-workspace[bot]
created_at: 2025-03-25T03:19:56Z
body: <a href="https://www.notion.so/wiz-ui-1bb150e1388f806ab7ebf413219368b1?pvs=8&n=github_linkback">wiz-ui対応</a>
author_association: NONE
user: login: vercel[bot]
created_at: 2025-03-25T03:19:58Z
body: [vc]: #EvvNQBqDf/D6dGAKnbUG0p7vt0D4uw5ybIsCBIdWhiY=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ3aXotdWktbmV4dCIsInJvb3REaXJlY3RvcnkiOiJwYWNrYWdlcy93aXotdWktbmV4dCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ3aXotdWktbmV4dC1naXQtZmVhdC1nZW4tMTE5NTdmb3JtLWNvbnRyb2xhZGRwcm8tY2UyODNjLXdpemxlYXAudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vd2l6bGVhcC93aXotdWktbmV4dC9GaU1UYWl0eko3SkU4MmtaQWIxVlBYWXBBRE1xIiwicHJldmlld1VybCI6Indpei11aS1uZXh0LWdpdC1mZWF0LWdlbi0xMTk1N2Zvcm0tY29udHJvbGFkZHByby1jZTI4M2Mtd2l6bGVhcC52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIn0seyJuYW1lIjoid2l6LXVpLXJlYWN0Iiwicm9vdERpcmVjdG9yeSI6InBhY2thZ2VzL3dpei11aS1yZWFjdCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ3aXotdWktcmVhY3QtZ2l0LWZlYXQtZ2VuLTExOTU3Zm9ybS1jb250cm9sYWRkcHItODg1NTM1LXdpemxlYXAudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vd2l6bGVhcC93aXotdWktcmVhY3QvSjdydWdSTkJWQVpIZmpONFlQUmpveGZYd3BKeiIsInByZXZpZXdVcmwiOiJ3aXotdWktcmVhY3QtZ2l0LWZlYXQtZ2VuLTExOTU3Zm9ybS1jb250cm9sYWRkcHItODg1NTM1LXdpemxlYXAudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCJ9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **wiz-ui-next** | ✅ Ready ([Inspect](https://vercel.com/wizleap/wiz-ui-next/FiMTaitzJ7JE82kZAb1VPXYpADMq)) | [Visit Preview](https://wiz-ui-next-git-feat-gen-11957form-controladdpro-ce283c-wizleap.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/wiz-ui-next-git-feat-gen-11957form-controladdpro-ce283c-wizleap.vercel.app?via=pr-comment-feedback-link) | Mar 27, 2025 5:04am |
| **wiz-ui-react** | ✅ Ready ([Inspect](https://vercel.com/wizleap/wiz-ui-react/J7rugRNBVAZHfjN4YPRjoxfXwpJz)) | [Visit Preview](https://wiz-ui-react-git-feat-gen-11957form-controladdpr-885535-wizleap.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/wiz-ui-react-git-feat-gen-11957form-controladdpr-885535-wizleap.vercel.app?via=pr-comment-feedback-link) | Mar 27, 2025 5:04am |



author_association: NONE
user: login: changeset-bot[bot]
created_at: 2025-03-25T03:19:58Z
body: ###  🦋  Changeset detected

Latest commit: e29707f418b0bff4a8b758b953866d065e17d2a3

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 3 packages</summary>

  | Name                       | Type  |
| -------------------------- | ----- |
| @wizleap-inc/wiz-ui-react  | Minor |
| @wizleap-inc/wiz-ui-next   | Minor |
| @wizleap-inc/wiz-ui-styles | Minor |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/Wizleap-Inc/wiz-ui/new/feat/GEN-11957_form-control_add_property_borderLeft_borderColor?filename=.changeset/tough-trains-exist.md&value=---%0A%22%40wizleap-inc%2Fwiz-ui-styles%22%3A%20patch%0A%22%40wizleap-inc%2Fwiz-ui-next%22%3A%20patch%0A%22%40wizleap-inc%2Fwiz-ui-react%22%3A%20patch%0A---%0A%0AFormControl%E3%81%ABborderLeft%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%A8%E3%80%81borderColor%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92%E8%BF%BD%E5%8A%A0%0A)


author_association: NONE
user: login: BestTempuraJP
created_at: 2025-03-25T03:24:42Z
body: Regression testing failedになっているが、他のPRもすべて落ちてそうなので一旦レビューに出します。
author_association: CONTRIBUTOR
user: login: BestTempuraJP
created_at: 2025-03-25T12:35:45Z
body: @ichi-h 
ありがとうございます！！
対応しました。
[8ff5f33](https://github.com/Wizleap-Inc/wiz-ui/pull/1445/commits/8ff5f3319a71a81ab8646328037b2fdb34398b3a)

すいません、1点質問なのですが、全プロジェクト共通でSquash MergeではなくそのままMergeするという認識で間違いないですかね？
author_association: CONTRIBUTOR
user: login: BestTempuraJP
created_at: 2025-03-27T03:47:16Z
body: @ichi-h
> Reactでも折り返しが発生していたようでして……こちらご確認いただいてもよろしいでしょうか？🙇‍♂️🙇‍♂️🙇‍♂️

とのことでしたが、私の環境では折り返しが確認できていません。
お手数ですが、再現方法を教えていただきたいです。

一応（[8ff5f33](https://github.com/Wizleap-Inc/wiz-ui/pull/1445/commits/8ff5f3319a71a81ab8646328037b2fdb34398b3a)）で
React側の width も調整済みです。

ちなみに、LabelFontSizeの項目では元々改行が発生していたようです。（今回で修正済み）
author_association: CONTRIBUTOR
user: login: BestTempuraJP
created_at: 2025-03-27T04:05:56Z
body: 伝えそこねておりました。
borderWidthの定義と、タグの位置を入れ替えるに関してはそれぞれ別PRで対応します。
author_association: CONTRIBUTOR
user: login: BestTempuraJP
created_at: 2025-03-27T05:07:17Z
body: @ichi-h 
すみません、、VRT全然活用できてませんでした。
バグを未然に防いでいただいてありがとうございます！！
author_association: CONTRIBUTOR