Merge pull request #145 from glorious-codes/improve_input

Improve input component increasing the list of valid types accepted
glorious-codes · Mar 9, 2023 · 621f290 · 621f290
2 parents 9ef44de + a063347
commit 621f290
Show file tree

Hide file tree

Showing 15 changed files with 138 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@glorious/taslonic",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "A glorious UI library available for React and Vue",
   "files": [
     "react/**",

diff --git a/pitsby.conf.base.js b/pitsby.conf.base.js
@@ -40,6 +40,9 @@ module.exports = {
       .p-topbar .p-logo {
         max-height: 20px;
       }
+      input {
+        font-family: sans-serif;
+      }
     `,
     windowTitle: 'Taslonic',
   },

diff --git a/src/base/services/input/input.js b/src/base/services/input/input.js
@@ -5,7 +5,24 @@ _public.parseType = type => {
 };
 
 function isValidCustomType(type){
-  return ['email', 'number', 'password', 'search', 'tel', 'url'].includes(type);
+  return [
+    'color',
+    'date',
+    'datetime-local',
+    'email',
+    'file',
+    'hidden',
+    'month',
+    'number',
+    'password',
+    'range',
+    'search',
+    'tel',
+    'text',
+    'time',
+    'url',
+    'week'
+  ].includes(type);
 }
 
 export default _public;
diff --git a/src/base/styles/form-control.styl b/src/base/styles/form-control.styl
@@ -43,6 +43,21 @@ select-arrow()
       color $color-grey-darker
       border-color $color-grey-light
       pointer-events none
+  input
+    &[type='color'],
+    &[type='datetime-local'],
+    &[type='date'],
+    &[type='time'],
+    &[type='file']
+      height 42px
+    &[type='color']
+      padding 5px
+    &[type='file']
+      display flex
+      align-items center
+    &[type='range']
+      -webkit-appearance revert
+
   textarea
     font-family inherit
   .t-select-wrapper

diff --git a/src/react/components/button/button.doc.js b/src/react/components/button/button.doc.js
@@ -5,7 +5,7 @@ module.exports = {
     {
       name: 'block',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'tag',

diff --git a/src/react/components/field/field.doc.js b/src/react/components/field/field.doc.js
@@ -11,12 +11,12 @@ module.exports = {
     {
       name: 'required',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'block',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     }
   ],
   examples: [

diff --git a/src/react/components/input/input.doc.js b/src/react/components/input/input.doc.js
@@ -5,7 +5,7 @@ module.exports = {
     {
       name: 'type',
       type: 'String',
-      values: 'email, number, password, search, tel, text, url'
+      values: 'color, date, datetime-local, email, file, hidden, number, password, range, search, tel, text, time, url'
     },
     {
       name: 'name',
@@ -30,27 +30,27 @@ module.exports = {
     {
       name: 'autoFocus',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'readOnly',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'block',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'disabled',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'required',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     }
   ],
   examples: [
@@ -67,8 +67,8 @@ module.exports = {
       }
     },
     {
-      title: 'Input with custom type',
-      description: 'If you not pass a type, input type will be set as text by default.',
+      title: 'Input with type',
+      description: 'If you not pass a type, it will be set as text.',
       controller: function(){
         const { Input, Col, Row } = taslonicReact;
 
@@ -77,26 +77,51 @@ module.exports = {
             <>
               <Row>
                 <Col md="4">
-                  <Input type="email" placeholder="Email" block />
+                  <Input type="search" placeholder="Search" aria-label="search" block />
                 </Col>
                 <Col md="4">
-                  <Input type="number" placeholder="Number" block />
+                  <Input type="password" placeholder="Password" aria-label="password" block />
                 </Col>
                 <Col md="4">
-                  <Input type="password" placeholder="Password" block />
+                  <Input type="number" placeholder="Number" aria-label="number" block />
                 </Col>
               </Row>
               <Row>
                 <Col md="4">
-                  <Input type="search" placeholder="Search" block />
+                  <Input type="email" placeholder="Email" aria-label="email" block />
                 </Col>
                 <Col md="4">
-                  <Input type="tel" placeholder="Phone" block />
+                  <Input type="url" placeholder="URL" aria-label="url" block />
                 </Col>
                 <Col md="4">
-                  <Input type="url" placeholder="URL" block />
+                  <Input type="tel" placeholder="Phone" aria-label="phone" block />
                 </Col>
               </Row>
+              <Row>
+                <Col md="4">
+                  <Input type="file" aria-label="File" block />
+                </Col>
+                <Col md="4">
+                  <Input type="range" value="90" min="0" max="100" aria-label="range" block />
+                </Col>
+                <Col md="4">
+                  <Input type="color" value="#6772FF" aria-label="color" block />
+                </Col>
+              </Row>
+              <Row>
+                <Col md="4">
+                  <Input type="datetime-local" aria-label="date and time" block />
+                </Col>
+                <Col md="4">
+                  <Input type="date" aria-label="date" block />
+                </Col>
+                <Col md="4">
+                  <Input type="time" aria-label="time" block />
+                </Col>
+              </Row>
+              <div>
+                <Input type="hidden" />
+              </div>
             </>
           );
         }

diff --git a/src/react/components/select/select.doc.js b/src/react/components/select/select.doc.js
@@ -20,22 +20,22 @@ module.exports = {
     {
       name: 'block',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'autoFocus',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'disabled',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'required',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     }
   ],
   examples: [

diff --git a/src/react/components/textarea/textarea.doc.js b/src/react/components/textarea/textarea.doc.js
@@ -35,27 +35,27 @@ module.exports = {
     {
       name: 'block',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'autoFocus',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'readOnly',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'disabled',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'required',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     }
   ],
   examples: [

diff --git a/src/vue/components/button/button.doc.js b/src/vue/components/button/button.doc.js
@@ -5,7 +5,7 @@ module.exports = {
     {
       name: 'block',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'tag',

diff --git a/src/vue/components/field/field.doc.js b/src/vue/components/field/field.doc.js
@@ -11,12 +11,12 @@ module.exports = {
     {
       name: 'required',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     },
     {
       name: 'block',
       type: 'Boolean',
-      values: 'true, false'
+      values: 'any'
     }
   ],
   examples: [