feat: add hover color in Timepicker component

affects: @medly-components/core, @medly-components/theme
medly · Jun 18, 2024 · 6efbb00 · 6efbb00
1 parent e537eac
commit 6efbb00
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 4 deletions.
diff --git a/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx b/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx
@@ -36,6 +36,9 @@ const getFontStyle = (style: 'selectedOption' | 'nonSelectedOption') => css`
     line-height: ${({ theme }) => theme.timePicker[style].lineHeight};
     letter-spacing: ${({ theme }) => theme.timePicker[style].LetterSpacing};
     color: ${({ theme }) => theme.timePicker[style].color};
+    &:hover {
+        color: ${({ theme }) => theme.timePicker[style].hoverColor};
+    }
 `;
 
 export const TimeItem = styled('li')<{ isSelected?: boolean }>`

diff --git a/packages/core/src/components/TimePicker/TimePicker.tsx b/packages/core/src/components/TimePicker/TimePicker.tsx
@@ -9,7 +9,6 @@ import { TimePickerProps } from './types';
 const Component: FC<TimePickerProps> = memo(
     forwardRef((props, ref) => {
         const [textFieldKey, setTextfieldKey] = useState(0);
-        const isMobile = navigator?.userAgent?.indexOf('Mobi') > -1;
         const wrapperRef = useRef<HTMLDivElement>(null);
         const inputRef = useCombinedRefs<HTMLInputElement>(ref, useRef(null));
         const id = props.id || props.label?.toLowerCase().replace(/\s/g, '') || 'medly-timepicker';
@@ -39,7 +38,7 @@ const Component: FC<TimePickerProps> = memo(
                     key={textFieldKey.toString()}
                     {...restProps}
                 />
-                {!disabled && !isMobile && (
+                {!disabled && (
                     <TimePickerPopup
                         key={value.toString()}
                         value={value}

diff --git a/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx b/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx
@@ -35,7 +35,7 @@ export const Component: FC<TimePickerPopupProps> = ({ value, onChange, onReset,
     };
 
     useEffect(() => {
-        if (value) {
+        if (!!value) {
             const time = value.split(':');
             const hour = Number(time[0]);
             const minutes = Number(time[1]);

diff --git a/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap b/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
@@ -677,6 +677,10 @@ exports[`TimePicker should render properly 1`] = `
   color: #546A7F;
 }
 
+.c19:hover {
+  color: #546A7F;
+}
+
 .c19:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -709,6 +713,10 @@ exports[`TimePicker should render properly 1`] = `
   color: #3872D2;
 }
 
+.c20:hover {
+  color: #3872D2;
+}
+
 .c20:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;

diff --git a/packages/theme/src/core/timePicker/index.ts b/packages/theme/src/core/timePicker/index.ts
@@ -14,11 +14,13 @@ const timePickerTheme: TimePickerTheme = {
         ...variants.body1,
         fontWeight: 'Medium',
         color: colors.blue[500],
+        hoverColor: colors.blue[500],
         backgroundColor: colors.grey[100]
     },
     nonSelectedOption: {
         ...variants.body2,
-        color: colors.grey[700]
+        color: colors.grey[700],
+        hoverColor: colors.grey[700]
     }
 };
 

diff --git a/packages/theme/src/core/timePicker/types.ts b/packages/theme/src/core/timePicker/types.ts
@@ -18,12 +18,14 @@ export interface TimePickerTheme {
         lineHeight: string;
         letterSpacing: string;
         backgroundColor: string;
+        hoverColor: string;
     };
     nonSelectedOption: {
         color: string;
         fontSize: string;
         fontWeight: FontWeights;
         lineHeight: string;
         letterSpacing: string;
+        hoverColor: string;
     };
 }