fix(Label): label pos (#23)

pure-js · Oct 20, 2023 · 8ad61b9 · 8ad61b9
1 parent e696c43
commit 8ad61b9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 18 deletions.
diff --git a/src/components/input/Input.stories.ts b/src/components/input/Input.stories.ts
@@ -40,7 +40,7 @@ export const Secondary: Story = {
 export const Large: Story = {
   args: {
     size: 'large',
-    label: 'Button',
+    label: 'Large input label',
     placeholder: 'placeholder',
     id: 'button-label',
   },
@@ -49,7 +49,7 @@ export const Large: Story = {
 export const Medium: Story = {
   args: {
     size: 'medium',
-    label: 'Delete now',
+    label: 'Medium input label',
     id: 'button-label',
     placeholder: 'placeholder',
   },

diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
@@ -4,7 +4,7 @@ import classes from './input.module.scss';
 interface InputProps {
   type?: HTMLInputTypeAttribute;
   minLength?: number;
-  label?: string;
+  label: string;
   id?: string;
   autoFocus?: boolean;
   placeholder?: string;
@@ -23,7 +23,7 @@ export const Input = ({
 }: InputProps) => (
   <>
     <label htmlFor={id} className={`${classes.label} ${classes[size]}`}>
-      {label}
+      <span className={`${classes.labelText} ${classes[size]}`}>{label}</span>
       <input
         id={id}
         autoFocus={autoFocus}

diff --git a/src/components/input/input.module.scss b/src/components/input/input.module.scss
@@ -24,30 +24,33 @@
 }
 
 .label {
-  position: relative;
-  bottom: -0.4rem;
   transition: color 0.3s;
   box-sizing: border-box;
-  background: #fff;
-  padding: 0 10px 0 (24+1px);
   width: 100%;
   color: rgba(178, 176, 183, 0.8);
-  font-size: 0.9rem;
 
   &:focus-within {
     color: rgb(155, 161, 165);
   }
 
-  &.small {
-    bottom: -0.4rem;
-    padding: 0 10px 0 (18+1px);
-  }
-  &.medium {
+  &Text {
+    position: relative;
     bottom: -0.4rem;
+    background: #fff;
     padding: 0 10px 0 (24+1px);
-  }
-  &.large {
-    bottom: -0.4rem;
-    padding: 0 10px 0 (32+1px);
+    font-size: 0.9rem;
+
+    &.small {
+      bottom: -0.4rem;
+      padding: 0 10px 0 (18+1px);
+    }
+    &.medium {
+      bottom: -0.4rem;
+      padding: 0 10px 0 (24+1px);
+    }
+    &.large {
+      bottom: -0.4rem;
+      padding: 0 10px 0 (32+1px);
+    }
   }
 }