feat: update the icon that can be used to clear the value of the input

Author: foryuki

examples/stories/example.tsx

@@ -54,7 +54,7 @@ export default class Example extends PureComponent<{}, {}> {
           />
         </div>
         <div className="">
-          <h1>input value can be cleared:</h1>
+          <h1>input value can't be cleared:</h1>
           <Input
             canClear={false}
             numericInput={true}

package.json

@@ -65,6 +65,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
+    "or-icons": "^1.2.1",
     "or-theme": "^1.2.0"
   },
   "peerDependencies": {

src/Input.tsx

@@ -1,6 +1,8 @@
 import clx from 'classnames'
 import React, { PureComponent } from 'react'
 
+import { SvgBorderedClose } from 'or-icons'
+
 interface Props {
   /**
    * additional classname
@@ -59,9 +61,14 @@ export class Input extends PureComponent<Props, {}> {
           maxLength={maxlength}
           onChange={this.handleChange}
         />
-        {canClear && (
-          <div className="or-clear-icon" onClick={this.handleClear} />
-        )}
+        {canClear &&
+          this.props.value !== '' && (
+            <SvgBorderedClose
+              className="or-clear-icon"
+              size="18"
+              onClick={this.handleClear}
+            />
+          )}
       </div>
     )
   }

src/styles.scss

@@ -3,6 +3,7 @@
 .or-input {
   position: relative;
   display: inline-block;
+  border: 1px solid $gray2;
 
   input{
     width: 100%;
@@ -11,6 +12,7 @@
     height: 38px;
     padding: 0 30px 0 5px;
     font-size: 14px;
+    border: none;
     box-sizing: border-box;
   }
 
@@ -26,11 +28,11 @@
     top: 50%;
     right: 10px;
     transform: translateY(-50%);
-    width: 15px;
-    height: 15px;
-    background-color: #aaa;
-    border-radius: 50%;
+    width: 18px;
+    height: 18px;
     cursor: pointer;
+    fill: $gray2;
+    color: $gray2;
   }
 }
 

tests/Input.test.tsx

@@ -11,7 +11,7 @@ describe('src/index', () => {
       expect(wrapper.find('.or-input').length).toBe(1)
       expect(wrapper.find('.or-input input').prop('placeholder')).toBe('')
       expect(wrapper.find('.or-input input').prop('value')).toBe('')
-      expect(wrapper.find('.or-input .or-clear-icon').length).toBe(1)
+      expect(wrapper.find('.or-input .or-clear-icon').length).toBe(0)
     })
 
     it('should render basicly #placeholder', () => {
@@ -28,8 +28,17 @@ describe('src/index', () => {
       wrapper = mount(<RenderInput />)
       const input = wrapper.find('.or-input input')
       input.simulate('change', { target: { value: 'Changed' } })
-
       expect(wrapper.find('.or-input input').prop('value')).toBe('Changed')
+      expect(wrapper.find('.or-input .or-clear-icon').length).toBe(2)
+    })
+  })
+
+  describe('simulate clear input events', () => {
+    let wrapper
+    it('onchange event', () => {
+      wrapper = mount(<RenderInput value="Dan" />)
+      expect(wrapper.find('.or-input input').prop('value')).toBe('Dan')
+      expect(wrapper.find('.or-input .or-clear-icon').length).toBe(2)
     })
   })
 })
@@ -38,11 +47,12 @@ interface Props {
   numericInput?: boolean
   maxlength?: number
   placeholder?: string
+  value?: string
 }
 
 class RenderInput extends React.Component<Props, {}> {
   state = {
-    name: ''
+    name: this.props.value || ''
   }
 
   render() {