From 2ea1142cc6541a113fb689a00a43f95b3e1b2446 Mon Sep 17 00:00:00 2001
From: Hideaki Takahashi <hi_takahashi@yumemi.co.jp>
Date: Wed, 13 Dec 2023 00:09:06 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20red?=
 =?UTF-8?q?=E3=81=AE=E5=80=A4=E3=82=92=E4=BF=AE=E6=AD=A3=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/themes.css.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/themes.css.ts b/src/styles/themes.css.ts
index 61cce0f8..c0b99710 100644
--- a/src/styles/themes.css.ts
+++ b/src/styles/themes.css.ts
@@ -10,7 +10,7 @@ export const colors = {
   lightBlue: '#0080FF',
   hoverBlue: 'rgba(30, 26, 222, 0.8)',
   purple: '#B01CF6',
-  red: '#E6002F',
+  red: '#FF4747',
   lightRed: '#FBD4D4',
 } as const;
 

From e77fb3ca9b6612ab08431903ab697422eac702c4 Mon Sep 17 00:00:00 2001
From: Hideaki Takahashi <hi_takahashi@yumemi.co.jp>
Date: Wed, 13 Dec 2023 01:29:50 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Label=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/Label/index.tsx     | 14 +++++++++++--
 src/components/base/Label/styles.css.ts | 27 +++++++++----------------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/components/base/Label/index.tsx b/src/components/base/Label/index.tsx
index 57a9980d..5ef2c3dc 100644
--- a/src/components/base/Label/index.tsx
+++ b/src/components/base/Label/index.tsx
@@ -5,6 +5,10 @@ import { styles } from './styles.css';
 import type { ComponentPropsWithoutRef, FC } from 'react';
 
 type BaseProps = {
+  /**
+   * ラベルのテキスト
+   */
+  text?: string;
   /**
    * 必須かどうか
    */
@@ -13,9 +17,15 @@ type BaseProps = {
 
 type Props = BaseProps & Omit<ComponentPropsWithoutRef<'label'>, keyof BaseProps>;
 
-const Label: FC<Props> = ({ isRequired = true, htmlFor, children }) => {
+const Label: FC<Props> = ({ text, isRequired = true, className, children, ...props }) => {
   return (
-    <label className={clsx(styles.label, isRequired && styles.requiredMark)} htmlFor={htmlFor}>
+    <label className={clsx(styles.label, className)} {...props}>
+      {text}
+      {isRequired && (
+        <span aria-hidden className={styles.requiredMark}>
+          *
+        </span>
+      )}
       {children}
     </label>
   );
diff --git a/src/components/base/Label/styles.css.ts b/src/components/base/Label/styles.css.ts
index 662af190..f65af0eb 100644
--- a/src/components/base/Label/styles.css.ts
+++ b/src/components/base/Label/styles.css.ts
@@ -1,25 +1,18 @@
-import { style } from '@vanilla-extract/css';
-
 import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/themes.css';
 
 const styles = {
   label: sprinkles({
-    fontSize: {
-      mobile: 14,
-      desktop: 16,
-    },
-    color: 'black',
+    display: 'inline-flex',
+    fontSize: 16,
+    color: 'white',
+    lineHeight: 1,
   }),
-  requiredMark: style({
-    position: 'relative',
-    '::after': {
-      content: '*',
-      position: 'absolute',
-      top: '-75%',
-      color: vars.colors.red,
-      paddingLeft: vars.spacing['0.5'],
-    },
+  requiredMark: sprinkles({
+    display: 'inline-block',
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: 'red',
+    paddingLeft: 0.5,
   }),
 };
 

From e84a63296f7974492bda365b805b3da9fa22a605 Mon Sep 17 00:00:00 2001
From: Hideaki Takahashi <hi_takahashi@yumemi.co.jp>
Date: Wed, 13 Dec 2023 01:56:49 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Label=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E3=81=AB=E4=BC=B4=E3=81=84=E3=80=81Storybook?=
 =?UTF-8?q?=E4=B8=8A=E3=81=A7=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=82=82=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/Label/index.stories.tsx | 22 +++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/base/Label/index.stories.tsx b/src/components/base/Label/index.stories.tsx
index 3873f2b1..e46810b6 100644
--- a/src/components/base/Label/index.stories.tsx
+++ b/src/components/base/Label/index.stories.tsx
@@ -12,13 +12,23 @@ type Story = StoryObj<typeof BaseLabel>;
 export const Label: Story = {
   render: () => (
     <dl>
-      <dt style={{ marginBottom: '8px' }}>Default</dt>
-      <dd style={{ marginBottom: '24px' }}>
-        <BaseLabel>Required label</BaseLabel>
+      <dt style={{ color: 'white', marginBottom: '8px' }}>Default</dt>
+      <dd style={{ color: 'white', marginBottom: '24px' }}>
+        <BaseLabel text="Required label" />
       </dd>
-      <dt style={{ marginBottom: '8px' }}>Not required</dt>
-      <dd style={{ marginBottom: '24px' }}>
-        <BaseLabel isRequired={false}>Not required label</BaseLabel>
+      <dt style={{ color: 'white', marginBottom: '8px' }}>Not required</dt>
+      <dd style={{ color: 'white', marginBottom: '24px' }}>
+        <BaseLabel isRequired={false} text="Not required label" />
+      </dd>
+      <dt style={{ color: 'white', marginBottom: '8px' }}>Form</dt>
+      <dd style={{ color: 'white', marginBottom: '24px' }}>
+        <BaseLabel text="textbox 1">
+          <input aria-required style={{ marginLeft: '16px' }} type="text" />
+        </BaseLabel>
+        <div style={{ display: 'flex', flexDirection: 'column', marginTop: '16px' }}>
+          <BaseLabel htmlFor="textbox2" text="textbox 2" />
+          <input aria-required id="textbox2" type="text" />
+        </div>
       </dd>
     </dl>
   ),

From dad9776cca10df7b1ea6be88ed5391ac87f36a48 Mon Sep 17 00:00:00 2001
From: Hideaki Takahashi <hi_takahashi@yumemi.co.jp>
Date: Wed, 13 Dec 2023 02:07:23 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=E2=9C=A8=20feat:=20children=E3=82=92?=
 =?UTF-8?q?=E5=8F=97=E3=81=91=E4=BB=98=E3=81=91=E3=81=AA=E3=81=84=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/Label/index.stories.tsx | 9 +++------
 src/components/base/Label/index.tsx         | 5 ++---
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/base/Label/index.stories.tsx b/src/components/base/Label/index.stories.tsx
index e46810b6..2a51483f 100644
--- a/src/components/base/Label/index.stories.tsx
+++ b/src/components/base/Label/index.stories.tsx
@@ -22,12 +22,9 @@ export const Label: Story = {
       </dd>
       <dt style={{ color: 'white', marginBottom: '8px' }}>Form</dt>
       <dd style={{ color: 'white', marginBottom: '24px' }}>
-        <BaseLabel text="textbox 1">
-          <input aria-required style={{ marginLeft: '16px' }} type="text" />
-        </BaseLabel>
-        <div style={{ display: 'flex', flexDirection: 'column', marginTop: '16px' }}>
-          <BaseLabel htmlFor="textbox2" text="textbox 2" />
-          <input aria-required id="textbox2" type="text" />
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <BaseLabel htmlFor="textbox" text="textbox" />
+          <input aria-required id="textbox" type="text" />
         </div>
       </dd>
     </dl>
diff --git a/src/components/base/Label/index.tsx b/src/components/base/Label/index.tsx
index 5ef2c3dc..c10f0ada 100644
--- a/src/components/base/Label/index.tsx
+++ b/src/components/base/Label/index.tsx
@@ -8,7 +8,7 @@ type BaseProps = {
   /**
    * ラベルのテキスト
    */
-  text?: string;
+  text: string;
   /**
    * 必須かどうか
    */
@@ -17,7 +17,7 @@ type BaseProps = {
 
 type Props = BaseProps & Omit<ComponentPropsWithoutRef<'label'>, keyof BaseProps>;
 
-const Label: FC<Props> = ({ text, isRequired = true, className, children, ...props }) => {
+const Label: FC<Props> = ({ text, isRequired = true, className, ...props }) => {
   return (
     <label className={clsx(styles.label, className)} {...props}>
       {text}
@@ -26,7 +26,6 @@ const Label: FC<Props> = ({ text, isRequired = true, className, children, ...pro
           *
         </span>
       )}
-      {children}
     </label>
   );
 };