fix: enlarge calendar day hover area (#7750)

* fix(Calendar): fix hover/active calendar day states

* fix(CalendarDay): fix calendar days hover

* fix: fix lint error

* test(CalendarDay): fix tests

---------

Co-authored-by: Victoria Zhizhonkova <indarklight@gmail.com>

packages/vkui/src/components/CalendarDay/CalendarDay.module.css

@@ -1,18 +1,23 @@
-.host {
+.content {
   border-radius: 0;
   font-size: 14px;
   color: var(--vkui--color_text_primary);
   font-family: var(--vkui--font_family_base);
+  block-size: 100%;
 }
 
-.hidden,
-.host {
-  block-size: 36px;
+.host,
+.hidden {
+  border-radius: 0;
   flex-basis: calc(100% / 7);
   flex-grow: 0;
 }
 
-.hiddenSizeS,
+.hidden,
+.content {
+  block-size: 36px;
+}
+
 .sizeS {
   block-size: 34px;
 }

packages/vkui/src/components/CalendarDay/CalendarDay.test.tsx

@@ -26,7 +26,7 @@ describe('CalendarDay', () => {
   });
   it('check hinted className', () => {
     render(<CalendarDayTest hinted data-testid="day" />);
-    const calendarDay = screen.getByTestId('day').firstElementChild!;
+    const calendarDay = screen.getByTestId('day').firstElementChild!.firstElementChild!;
     expect(calendarDay).toHaveClass(styles.hintedActive);
   });
 

packages/vkui/src/components/CalendarDay/CalendarDay.tsx

@@ -92,22 +92,12 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
     }, [renderDayContent, day, children, label]);
 
     if (hidden) {
-      return <div className={styles.hidden} />;
+      return <div className={classNames(styles.hidden, size === 's' && styles.sizeS)} />;
     }
 
     return (
       <Tappable
-        className={classNames(
-          styles.host,
-          size === 's' && styles.sizeS,
-          today && styles.today,
-          selected && !disabled && styles.selected,
-          selectionStart && styles.selectionStart,
-          selectionEnd && styles.selectionEnd,
-          disabled && styles.disabled,
-          !sameMonth && styles.notSameMonth,
-          className,
-        )}
+        className={classNames(styles.host, size === 's' && styles.sizeS, className)}
         hoverMode={styles.hostHovered}
         activeMode={styles.hostActivated}
         hasActive={false}
@@ -122,14 +112,27 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
       >
         <div
           className={classNames(
-            styles.hinted,
-            hinted && styles.hintedActive,
-            hintedSelectionStart && styles.hintedSelectionStart,
-            hintedSelectionEnd && styles.hintedSelectionEnd,
+            styles.content,
+            size === 's' && styles.sizeS,
+            today && styles.today,
+            selected && !disabled && styles.selected,
+            selectionStart && styles.selectionStart,
+            selectionEnd && styles.selectionEnd,
+            disabled && styles.disabled,
+            !sameMonth && styles.notSameMonth,
           )}
         >
-          <div className={classNames(styles.inner, active && !disabled && styles.innerActive)}>
-            {content}
+          <div
+            className={classNames(
+              styles.hinted,
+              hinted && styles.hintedActive,
+              hintedSelectionStart && styles.hintedSelectionStart,
+              hintedSelectionEnd && styles.hintedSelectionEnd,
+            )}
+          >
+            <div className={classNames(styles.inner, active && !disabled && styles.innerActive)}>
+              {content}
+            </div>
           </div>
         </div>
       </Tappable>

packages/vkui/src/components/CalendarDays/CalendarDays.module.css

@@ -11,12 +11,16 @@
   flex-grow: 1;
 }
 
-.row:not(:last-child) {
+.row:first-child:not(.rowSizeS) {
   margin-block-end: 4px;
 }
 
-.rowSizeS:not(:last-child) {
-  margin-block-end: 0;
+.row:not(:last-child):not(.rowSizeS) .rowDay {
+  padding-block-end: 2px;
+}
+
+.row:not(:nth-child(2)):not(.rowSizeS) .rowDay {
+  padding-block-start: 2px;
 }
 
 .weekday {

packages/vkui/src/components/CalendarDays/CalendarDays.tsx

@@ -121,6 +121,7 @@ export const CalendarDays = ({
                 size={size}
                 renderDayContent={renderDayContent}
                 {...dayProps}
+                className={classNames(dayProps?.className, styles.rowDay)}
               />
             );
           })}

packages/vkui/src/components/CalendarRange/CalendarRange.test.tsx

@@ -21,7 +21,7 @@ describe('CalendarRange', () => {
   };
 
   const getCalendarDayBlock = (part: HTMLElement, date: string) => {
-    return getByText(part, date).closest(`.${dayStyles.host}`) as HTMLElement;
+    return getByText(part, date).closest(`.${dayStyles.content}`) as HTMLElement;
   };
 
   const getLeftPart = () => {