Merge pull request #144 from strapi/fix/inputs-color

Fix/inputs color

Author: HichamELBSI

packages/buffetjs-core/src/components/DatePicker/tests/__snapshots__/index.test.js.snap

@@ -215,11 +215,13 @@ exports[`<DatePicker /> should match snapshot 1`] = `
 .c3:disabled {
   background-color: #FAFAFB;
   cursor: not-allowed;
+  color: #9ea7b8;
 }
 
 .c1 {
   position: relative;
   background-color: #ffffff;
+  border-radius: 2px;
 }
 
 .c1 button[type='button'] {

packages/buffetjs-core/src/components/TimePicker/index.js

@@ -4,7 +4,13 @@
  *
  */
 
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  useRef,
+  useMemo,
+} from 'react';
 import { isInteger, toNumber } from 'lodash';
 import PropTypes from 'prop-types';
 
@@ -232,6 +238,8 @@ function TimePicker(props) {
     updateTime(target.value);
   };
 
+  const handleChangeRadio = useCallback(() => {}, []);
+
   const formatInputValue = time => {
     if (!seconds) {
       setInputVal(short(time));
@@ -277,7 +285,8 @@ function TimePicker(props) {
             <li key={option.value} ref={listRefs[option.value]}>
               <input
                 type="radio"
-                onChange={handleClick}
+                onChange={handleChangeRadio}
+                onClick={handleClick}
                 value={option.value}
                 id={option.value}
                 name="time"

packages/buffetjs-styles/src/components/InputNumber/index.js

@@ -149,6 +149,8 @@ const InputNumber = styled.div`
       &:disabled {
         cursor: not-allowed;
         background-color: ${colors.greyIconBkgd};
+        color: ${colors.brightGrey};
+        opacity: 1;
       }
     }
     .rc-input-number-handler-wrap {

packages/buffetjs-styles/src/components/InputText/index.js

@@ -34,6 +34,7 @@ const InputText = styled.input`
   &:disabled {
     background-color: ${colors.greyIconBkgd};
     cursor: not-allowed;
+    color: ${colors.brightGrey};
   }
 
   ${props =>

packages/buffetjs-styles/src/components/InputWrapper/index.js

@@ -11,6 +11,7 @@ import sizes from '../../assets/styles/sizes';
 const InputWrapper = styled.div`
   position: relative;
   background-color: ${colors.white};
+  border-radius: ${sizes.borderRadius};
   button[type='button'] {
     width: ${sizes.input.height};
     height: ${sizes.input.height};

packages/buffetjs-styles/src/components/Select/index.js

@@ -38,6 +38,8 @@ const Select = styled.select`
   &:disabled {
     background-color: ${colors.greyIconBkgd};
     cursor: not-allowed;
+    color: ${colors.brightGrey};
+    opacity: 1;
   }
 `;
 

packages/buffetjs-styles/src/components/Textarea/index.js

@@ -30,6 +30,7 @@ const StyledTextarea = styled.textarea`
   &:disabled {
     background-color: ${colors.greyIconBkgd};
     cursor: not-allowed;
+    color: ${colors.brightGrey};
   }
 `;
 

packages/buffetjs-styles/src/components/Textarea/tests/__snapshots__/index.test.js.snap

@@ -27,6 +27,7 @@ exports[`<Textarea /> should match the snapshot when empty 1`] = `
 .c0:disabled {
   background-color: #FAFAFB;
   cursor: not-allowed;
+  color: #9ea7b8;
 }
 
 <textarea
@@ -62,6 +63,7 @@ exports[`<Textarea /> should match the snapshot when not empty 1`] = `
 .c0:disabled {
   background-color: #FAFAFB;
   cursor: not-allowed;
+  color: #9ea7b8;
 }
 
 <textarea

packages/buffetjs-styles/src/components/TimePicker/index.js

@@ -31,6 +31,7 @@ const TimePicker = styled.input`
   }
   &:disabled {
     cursor: not-allowed;
+    color: ${colors.brightGrey};
   }
 `;
 

packages/buffetjs-styles/src/components/TimePickerWrapper/index.js

@@ -12,6 +12,7 @@ const TimePickerWrapper = styled.div`
   max-width: 95px;
   position: relative;
   background-color: ${colors.white};
+  border-radius: ${sizes.borderRadius};
   span {
     z-index: 0;
     border-top-left-radius: ${sizes.borderRadius};