Fix style of DatePicker and DateRangePicker (#1395)

voyagegroup · Aug 29, 2023 · 50eca92 · 50eca92
1 parent 531572b
commit 50eca92
Show file tree

Hide file tree

Showing 13 changed files with 92 additions and 43 deletions.
diff --git a/.changeset/six-carrots-visit.md b/.changeset/six-carrots-visit.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+fix style of DatePicker and DateRangePicker
diff --git a/src/components/Calendar/Calendar/Calendar.tsx b/src/components/Calendar/Calendar/Calendar.tsx
@@ -1,10 +1,11 @@
 import { Dayjs } from "dayjs";
-import { Card, Icon, Slide } from "../..";
+import { Icon, Slide } from "../..";
 import React, { forwardRef, memo, useEffect } from "react";
-import { Container, IconContainer } from "../styled";
+import { Container, IconContainer, Card } from "../styled";
 import { Action, Actions } from "../internal/Actions";
 import { YearMonths } from "../internal/YearMonths";
 import { InnerCalendar } from "../internal/InnerCalendar";
+import { useTheme } from "../../../themes";
 
 export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
@@ -44,6 +45,7 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
   },
   ref,
 ) {
+  const theme = useTheme();
   const [current, setCurrent] = React.useState<Dayjs>(date);
   const [yearIsOpen, setYearIsOpen] = React.useState(false);
 
@@ -57,12 +59,7 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
   }, [date]);
 
   return (
-    <Card
-      ref={ref}
-      display="flex"
-      style={{ width: "fit-content", overflow: "hidden" }}
-      {...rest}
-    >
+    <Card ref={ref} {...rest}>
       <Actions actions={actions} />
       <Container>
         <Slide unmountOnExit in={yearIsOpen} direction="up">
@@ -85,7 +82,7 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
       </Container>
       {onClickCloseButton && (
         <IconContainer expanded={yearIsOpen} onClick={onClickCloseButton}>
-          <Icon name="close" />
+          <Icon name="close" color={theme.palette.black} />
         </IconContainer>
       )}
     </Card>

diff --git a/src/components/Calendar/Calendar/internal/Day/styled.ts b/src/components/Calendar/Calendar/internal/Day/styled.ts
@@ -23,6 +23,7 @@ export const DisableDayContainer = styled(DayContainerBase)`
   color: ${({ theme }) => theme.palette.gray.main};
   cursor: not-allowed;
   &:hover {
-    background-color: ${({ theme }) => theme.palette.gray.light};
+    background-color: transparent;
+    color: ${({ theme }) => theme.palette.gray.main};
   }
 `;
diff --git a/src/components/Calendar/CalendarRange/CalendarRange.tsx b/src/components/Calendar/CalendarRange/CalendarRange.tsx
@@ -1,17 +1,18 @@
 import { Dayjs } from "dayjs";
-import { Card, Icon, DateRange, Slide } from "../..";
+import { Icon, DateRange, Slide } from "../..";
 import React, {
   forwardRef,
   memo,
   useCallback,
   useEffect,
   useState,
 } from "react";
-import { Container, IconContainer } from "../styled";
+import { Container, IconContainer, Card } from "../styled";
 import { Action, Actions } from "../internal/Actions";
 import { ClickState, ClickStateType } from "./constants";
 import { InnerCalendarRange } from "../internal/InnerCalendarRange/InnerCalendarRange";
 import { YearMonths } from "../internal/YearMonths";
+import { useTheme } from "../../../themes";
 
 export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
@@ -68,6 +69,7 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
     },
     ref,
   ) {
+    const theme = useTheme();
     const [current, setCurrent] = React.useState<Dayjs>(startDate);
     const [yearIsOpen, setYearIsOpen] = React.useState(false);
 
@@ -111,13 +113,7 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
     );
 
     return (
-      <Card
-        ref={ref}
-        display="flex"
-        width="fit-content"
-        style={{ overflow: "hidden" }}
-        {...rest}
-      >
+      <Card ref={ref} {...rest}>
         <Actions actions={actions} />
         <Container>
           <div style={{ position: "relative", zIndex: 1 }}>
@@ -145,7 +141,7 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
         </Container>
         {onClickCloseButton && (
           <IconContainer expanded={yearIsOpen} onClick={onClickCloseButton}>
-            <Icon name="close" />
+            <Icon name="close" color={theme.palette.black} />
           </IconContainer>
         )}
       </Card>

diff --git a/src/components/Calendar/CalendarRange/internal/Day/styled.ts b/src/components/Calendar/CalendarRange/internal/Day/styled.ts
@@ -17,8 +17,7 @@ export const DayStyle = styled.button`
 
   &:hover {
     transition: 0.3s;
-    background-color: ${({ theme }) => theme.palette.primary.main};
-    color: ${({ theme }) => theme.palette.white};
+    background-color: ${({ theme }) => theme.palette.primary.highlight};
   }
 `;
 
@@ -54,16 +53,24 @@ export const DayStart = styled(EdgeDate)`
   &::before {
     transform: translateX(100%);
   }
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.primary.main};
+  }
 `;
 
-export const DayEnd = styled(EdgeDate)``;
+export const DayEnd = styled(EdgeDate)`
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
 
 export const DayBetween = styled(SelectedDate)``;
 
 export const DisableDayContainer = styled(DayStyle)`
   color: ${({ theme }) => theme.palette.gray.main};
   cursor: not-allowed;
   &:hover {
-    background-color: ${({ theme }) => theme.palette.gray.light};
+    background-color: transparent;
+    color: ${({ theme }) => theme.palette.gray.main};
   }
 `;
diff --git a/src/components/Calendar/internal/Actions/styled.ts b/src/components/Calendar/internal/Actions/styled.ts
@@ -11,7 +11,7 @@ export const Action = styled.button<{ clicked: boolean }>`
     clicked ? theme.palette.primary.main : theme.palette.black};
 
   &:hover {
-    background-color: ${({ theme }) => theme.palette.gray.light};
+    background-color: ${({ theme }) => theme.palette.primary.highlight};
     border-radius: ${({ theme }) => theme.radius}px;
   }
 `;

diff --git a/src/components/Calendar/internal/YearMonths/styled.ts b/src/components/Calendar/internal/YearMonths/styled.ts
@@ -7,12 +7,12 @@ export const YearMonthsContainer = styled(Flex)`
   width: fit-content;
   position: absolute;
   z-index: 100;
-  background-color: ${({ theme }) => theme.palette.white};
+  background-color: ${({ theme }) => theme.palette.background.default};
 `;
 
 export const YearMonthTitleContainer = styled.div`
   top: 0;
-  background-color: ${({ theme }) => theme.palette.white};
+  background-color: ${({ theme }) => theme.palette.background.default};
   display: flex;
   justify-content: center;
   padding: ${({ theme }) => theme.spacing * 2}px 0;
@@ -36,6 +36,11 @@ export const Month = styled.button`
   border: none;
   color: ${({ theme }) => theme.palette.black};
   background: white;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.primary.highlight};
+    border-radius: ${({ theme }) => theme.radius}px;
+  }
 `;
 
 const hideAnimation = keyframes`

diff --git a/src/components/Calendar/styled.ts b/src/components/Calendar/styled.ts
@@ -1,5 +1,21 @@
 import styled from "styled-components";
 import { Flex, Typography } from "..";
+import { getShadow } from "../../utils/getShadow";
+
+export const Card = styled(Flex)`
+  box-shadow: ${({ theme }) =>
+    getShadow(
+      5,
+      theme.palette.action.shadowOpacity,
+      theme.palette.action.shadowBase,
+    )};
+  border-radius: ${({ theme }) => theme.radius}px;
+  background-color: ${({ theme }) => theme.palette.white};
+  width: fit-content;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+`;
 
 export const Container = styled.div`
   padding: 0 ${({ theme }) => theme.spacing * 3}px;
@@ -31,7 +47,7 @@ export const CalendarContainer = styled(Flex)`
 export const DayStyle = styled.span`
   padding: ${({ theme }) => theme.spacing}px 0;
   text-align: center;
-  color: ${({ theme }) => theme.palette.gray.dark};
+  color: ${({ theme }) => theme.palette.gray.deepDark};
 `;
 
 export const TitleContainer = styled(Typography)<{ expanded: boolean }>`
@@ -43,21 +59,21 @@ export const TitleContainer = styled(Typography)<{ expanded: boolean }>`
 export const CalendarMonth = styled.div<{ expanded: boolean }>`
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 2;
   display: flex;
   justify-content: center;
   padding: ${({ theme }) => theme.spacing * 2}px 0;
   align-items: center;
   background-color: ${({ theme, expanded }) =>
-    expanded ? "transparent" : theme.palette.white};
+    expanded ? "transparent" : theme.palette.background.default};
   transition: background-color 300ms;
 `;
 
 export const IconContainer = styled.button<{ expanded: boolean }>`
   cursor: pointer;
   position: absolute;
-  top: ${({ theme }) => theme.spacing}px;
-  right: ${({ theme }) => theme.spacing}px;
+  top: ${({ theme }) => theme.spacing * 2}px;
+  right: ${({ theme }) => theme.spacing * 2}px;
   border: none;
   background: none;
   opacity: ${({ expanded }) => (expanded ? 0 : 1)};

diff --git a/src/components/DateField/DateField/DateField.tsx b/src/components/DateField/DateField/DateField.tsx
@@ -4,6 +4,7 @@ import { useDateField } from "../useDateField";
 import { useMergeRefs } from "../../../hooks/useMergeRefs";
 import { CalendarIcon, InputContainer } from "./styled";
 import { Dayjs } from "dayjs";
+import { useTheme } from "../../../themes";
 
 export type DateFieldProps = {
   /**
@@ -40,6 +41,7 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
     { errorText, disabled = false, onClick, ...rest },
     propRef,
   ) {
+    const theme = useTheme();
     const { ref: inputRef, ...props } = useDateField({ ...rest });
     const ref = useMergeRefs<HTMLInputElement>(propRef, inputRef);
 
@@ -54,8 +56,13 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
             disabled={disabled}
             {...props}
           />
-          <CalendarIcon onClick={onClick}>
-            <Icon name="date_range" />
+          <CalendarIcon disabled={disabled} onClick={onClick}>
+            <Icon
+              name="date_range"
+              color={
+                disabled ? theme.palette.gray.dark : theme.palette.text.primary
+              }
+            />
           </CalendarIcon>
         </InputContainer>
         {errorText && (

diff --git a/src/components/DateField/DateField/styled.ts b/src/components/DateField/DateField/styled.ts
@@ -47,4 +47,8 @@ export const CalendarIcon = styled.button`
   background: none;
   outline: none;
   cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 `;
diff --git a/src/components/DateField/DateRangeField/DateRangeField.tsx b/src/components/DateField/DateRangeField/DateRangeField.tsx
@@ -8,6 +8,7 @@ import {
   ClickState,
   ClickStateType,
 } from "../../Calendar/CalendarRange/constants";
+import { useTheme } from "../../../themes";
 
 export type DateRangeFieldProps = {
   /**
@@ -50,6 +51,7 @@ const DateRangeField = forwardRef<HTMLInputElement, DateRangeFieldProps>(
     },
     propRef,
   ) {
+    const theme = useTheme();
     const width = useMemo(() => format.length * 12, [format]);
 
     const handleChange = (t: ClickStateType) => (date: Dayjs) => {
@@ -106,8 +108,13 @@ const DateRangeField = forwardRef<HTMLInputElement, DateRangeFieldProps>(
             style={{ border: "none", textAlign: "center" }}
             {...endProps}
           />
-          <CalendarIcon onClick={onClickCalendarIcon}>
-            <Icon name="date_range" />
+          <CalendarIcon disabled={disabled} onClick={onClickCalendarIcon}>
+            <Icon
+              name="date_range"
+              color={
+                disabled ? theme.palette.gray.dark : theme.palette.text.primary
+              }
+            />
           </CalendarIcon>
         </InputContainer>
         {errorText && (

diff --git a/src/components/DateField/DateRangeField/styled.ts b/src/components/DateField/DateRangeField/styled.ts
@@ -47,4 +47,8 @@ export const CalendarIcon = styled.button`
   background: none;
   outline: none;
   cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 `;
diff --git a/src/components/NewDateRangePicker/NewDateRangePicker.stories.tsx b/src/components/NewDateRangePicker/NewDateRangePicker.stories.tsx
@@ -39,29 +39,29 @@ export const WithActions: StoryObj<NewDateRangePickerProps> = {
     });
     const actions = [
       {
-        text: "今日",
+        text: "明日",
         onClick: () => {
           setDate({
             startDate: dayjs(),
-            endDate: dayjs(),
+            endDate: dayjs().add(1, "day"),
           });
         },
       },
       {
-        text: "明日",
+        text: "来週",
         onClick: () => {
           setDate({
             startDate: dayjs(),
-            endDate: dayjs().add(1, "day"),
+            endDate: dayjs().add(1, "week"),
           });
         },
       },
       {
-        text: "来週",
+        text: "先月",
         onClick: () => {
           setDate({
-            startDate: dayjs(),
-            endDate: dayjs().add(1, "week"),
+            startDate: dayjs().subtract(1, "month"),
+            endDate: dayjs(),
           });
         },
       },