Merge pull request #105 from vuejs-jp/fix/css-form

fix: css of form
vuejs-jp · Apr 5, 2024 · f40ab39 · f40ab39
2 parents b962174 + bc2bf24
commit f40ab39
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 119 deletions.
diff --git a/apps/web/app/components/FormPageSection.vue b/apps/web/app/components/FormPageSection.vue
@@ -36,51 +36,23 @@ const updateDetail = (e: any) => {
       <VFTitle id="form" class="title">
         {{ $t('form.title') }}
       </VFTitle>
-      <div
-        class="subtitle"
-        :style="{
+      <div class="subtitle" :style="{
           fontWeight: fontWeight('body/300'),
           fontSize: fontSize('body/300'),
           color: color('vue-blue'),
-        }"
-      >
+        }">
         <MarkDownText path="form" />
       </div>
       <div class="form">
         <form @submit="onSubmit">
-          <VFInputField
-            id="name"
-            v-model="name"
-            name="name"
-            :label="$t('form.form_name_label')"
-            :placeholder="$t('form.form_name_placeholder')"
-            required
-            :error="nameError"
-            @input="updateName"
-            @blur="validateName"
-          />
-          <VFInputField
-            id="email"
-            v-model="email"
-            name="email"
-            :label="$t('form.form_email_label')"
-            placeholder="[email protected]"
-            required
-            :error="emailError"
-            @input="updateEmail"
-            @blur="validateEmail"
-          />
-          <VFTextAreaField
-            id="detail"
-            v-model="detail"
-            name="detail"
-            :label="$t('form.form_text_label')"
-            :rows="3"
-            required
-            :error="detailError"
-            @input="updateDetail"
-            @blur="validateDetail"
-          />
+          <VFInputField id="name" v-model="name" name="name" :label="$t('form.form_name_label')"
+            :placeholder="$t('form.form_name_placeholder')" required :error="nameError" @input="updateName"
+            @blur="validateName" />
+          <VFInputField id="email" v-model="email" name="email" :label="$t('form.form_email_label')"
+            placeholder="[email protected]" required :error="emailError" @input="updateEmail" @blur="validateEmail" />
+          <VFTextAreaField id="detail" v-model="detail" name="detail" placeholder="お問い合わせ"
+            :label="$t('form.form_text_label')" :rows="3" required :error="detailError" @input="updateDetail"
+            @blur="validateDetail" />
           <div class="form-button">
             <VFSubmitButton :disabled="!isSubmitting">
               {{ $t('form.submit') }}
@@ -103,6 +75,7 @@ section {
   background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(235, 240, 245, 0.8));
   background-blend-mode: soft-light;
 }
+
 .form-root {
   display: grid;
   gap: 40px;
@@ -111,27 +84,33 @@ section {
   width: 100%;
   grid-template-columns: minmax(0, 1fr);
 }
+
 .title {
   text-align: center;
 }
+
 .subtitle {
   display: grid;
   place-items: center;
   gap: 40px;
   line-height: 1.8;
+
   &::v-deep a {
     color: var(--color-vue-green);
     text-decoration: underline;
   }
+
   &::v-deep a:hover {
     opacity: 0.4;
     transition: .2s;
   }
 }
+
 form {
   display: grid;
   gap: 40px;
 }
+
 .form-button {
   margin: 0 auto;
   width: 260px;

diff --git a/packages/css/base.css b/packages/css/base.css
@@ -6,14 +6,14 @@
   --color-white: #fff;
   --color-vue-blue: #35495e;
   --color-vue-green: #42b983;
-
   --color-disabled: #c6cacf;
 
   /* gradation */
   --color-vue-green-gradation: linear-gradient(to right, #42b883, #41b8aa);
 
   /* box-shadow */
   --box-shadow: 0 2px 10px rgb(53, 73, 95, 0.14);
+  --box-shadow-input: 0 1px 10px 0 rgb(53, 73, 94, 0.12);
 
   /* font */
   --font-size-heading800: 5.625rem;

diff --git a/packages/ui/components/forms/InputField.stories.ts b/packages/ui/components/forms/InputField.stories.ts
@@ -8,9 +8,9 @@ const meta: Meta<typeof InputField> = {
   argTypes: {
     id: { control: 'text' },
     name: { control: 'text' },
-    type: { 
+    type: {
       control: 'radio',
-      options: ['button', 'checkbox', 'text', 'radio']
+      options: ['button', 'checkbox', 'text', 'radio'],
     },
     placeholder: { control: 'text' },
     required: { control: 'boolean' },
@@ -30,6 +30,7 @@ export const Default: Story = {
     id: 'default',
     name: 'default',
     label: 'お名前',
+    placeholder: '山田太郎',
   },
 }
 
@@ -39,6 +40,7 @@ export const Error: Story = {
     id: 'error',
     name: 'error',
     label: 'お名前',
+    placeholder: '山田太郎',
     errorMessage: 'エラーメッセージが表示されます',
   },
 }

diff --git a/packages/ui/components/forms/InputField.vue b/packages/ui/components/forms/InputField.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import { InputHTMLAttributes, InputTypeHTMLAttribute } from 'vue'
-import { useColor, useTypography } from '@vuejs-jp/composable'
+import { useTypography } from '@vuejs-jp/composable'
 import Typography from '../common/Typography.vue'
 
 type _InputFieldProps = Omit<InputHTMLAttributes, 'onInput' | 'onBlur'>;
@@ -42,53 +42,52 @@ const handleBlur = (e: Event) => {
 }
 
 const { fontWeight, fontSize } = useTypography()
-const { color } = useColor()
 </script>
 
 <template>
-  <label
-    :for="id"
-    :style="{
-      fontWeight: fontWeight('heading/100'),
-      fontSize: fontSize('heading/100'),
-      color: color('vue-blue'),
-    }"
-    class="input-root"
-  >
+  <label :for="id" :style="{
+    fontWeight: fontWeight('heading/100'),
+    fontSize: fontSize('heading/100'),
+  }" class="input-root" :class="{ '-error': errorMessage }">
     {{ label }}
-    <input
-      :id="id"
-      v-model.trim="modelValue"
-      :style="{
-        fontWeight: fontWeight('heading/100'),
-        fontSize: fontSize('heading/100'),
-        color: color('vue-blue'),
-        boxShadow: errorMessage ? `0 0 2px ${color('sangosyo/200')}` : `0 0 2px ${color('vue-blue')}`,
-      }"
-      class="form-input"
-      :name="name"
-      :type="type"
-      :placeholder="placeholder"
-      :required="required"
-      :disabled="disabled"
-      @blur="handleBlur"
-    />
-    <Typography
-      v-if="errorMessage"
-      variant="body/200"
-      color="sangosyo/200"
-    >{{ errorMessage }}</Typography>
+    <input :id="id" v-model.trim="modelValue" :style="{
+    fontSize: fontSize('heading/100'),
+  }" class="form-input" :name="name" :type="type" :placeholder="placeholder" :required="required" :disabled="disabled"
+      @blur="handleBlur" />
+    <Typography v-if="errorMessage" variant="body/200" color="sangosyo/200">{{ errorMessage }}</Typography>
   </label>
 </template>
 
 <style scoped>
 .input-root {
+  --color-placeholder: #c6cacf;
+  --border: solid 2px transparent;
+
   display: grid;
   gap: 10px;
-  .form-input {
-    padding: 24px;
-    border: none;
-    border-radius: 6px;
-  }
+  color: var(--color-vue-blue);
+}
+
+.input-root.-error .form-input {
+  --border: solid 2px #CC4F39;
+}
+
+.form-input {
+  padding: 22px 24px;
+  border-radius: 6px;
+  box-shadow: var(--box-shadow-input);
+  border: var(--border);
+  outline: none;
+  color: var(--color-vue-blue);
+  font-weight: normal;
+}
+
+.form-input:focus {
+  --border: solid 2px var(--color-vue-blue);
+}
+
+.form-input::placeholder {
+  color: var(--color-placeholder);
+  font-weight: normal;
 }
 </style>
diff --git a/packages/ui/components/forms/TextAreaField.vue b/packages/ui/components/forms/TextAreaField.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useColor, useTypography } from '@vuejs-jp/composable'
+import { useTypography } from '@vuejs-jp/composable'
 import Typography from '../common/Typography.vue'
 
 type Props = {
@@ -40,55 +40,53 @@ function handleBlur(e: Event) {
 const inputtedText = defineModel<string>('inputtedText')
 
 const { fontWeight, fontSize } = useTypography()
-const { color } = useColor()
 </script>
 <template>
-  <label
-    :for="id"
-    :style="{
-      fontWeight: fontWeight('heading/100'),
-      fontSize: fontSize('heading/100'),
-      color: color('vue-blue'),
-    }"
-    class="textarea-root"
-  >
+  <label :for="id" :style="{
+    fontWeight: fontWeight('heading/100'),
+    fontSize: fontSize('heading/100'),
+  }" class="textarea-root" :class="{ '-error': errorMessage }">
     {{ label }}
-    <textarea
-      :id="id"
-      v-model.trim="inputtedText"
-      :name="name"
-      :style="{
-        fontWeight: fontWeight('heading/100'),
-        fontSize: fontSize('heading/100'),
-        color: color('vue-blue'),
-        boxShadow: errorMessage ? `0 0 2px ${color('sangosyo/200')}` : `0 0 2px ${color('vue-blue')}`,
-      }"
-      class="form-textarea"
-      :rows="rows"
-      :placeholder="placeholder"
-      :required="required"
-      @blur="handleBlur"
-    />
-    <Typography
-      v-if="errorMessage"
-      variant="body/200"
-      color="sangosyo/200"
-    >{{ errorMessage }}</Typography>
+    <textarea :id="id" v-model.trim="inputtedText" :name="name" :style="{
+    fontSize: fontSize('heading/100'),
+
+  }" class="form-textarea" :rows="rows" :placeholder="placeholder" :required="required" @blur="handleBlur" />
+    <Typography v-if="errorMessage" variant="body/200" color="sangosyo/200">{{ errorMessage }}</Typography>
   </label>
 </template>
 
 
 <style scoped>
 .textarea-root {
+  --color-placeholder: #c6cacf;
+  --border: solid 2px transparent;
+
   display: grid;
   gap: 10px;
-  .form-textarea {
-    padding: 24px;
-    border: none;
-    border-radius: 6px;
-  }
-  .form-textarea:focus {
-    box-shadow: 0 0 2px #35495e;
-  }
+  color: var(--color-vue-blue);
+}
+
+.textarea-root.-error .form-textarea {
+  --border: solid 2px #CC4F39;
+}
+
+.form-textarea {
+  padding: 22px 24px;
+  border-radius: 6px;
+  box-shadow: var(--box-shadow-input);
+  border: var(--border);
+  outline: none;
+  color: var(--color-vue-blue);
+  font-weight: normal;
+  min-height: 192px;
+}
+
+.form-textarea:focus {
+  --border: solid 2px var(--color-vue-blue);
+}
+
+.form-textarea::placeholder {
+  color: var(--color-placeholder);
+  font-weight: normal;
 }
 </style>