fix: implements some fixes from the PR comments and design review

acid-info · Oct 16, 2023 · d2b8ba7 · d2b8ba7
1 parent d5581c8
commit d2b8ba7
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 50 deletions.
diff --git a/packages/lsd-react/src/components/Calendar/Calendar.classes.ts b/packages/lsd-react/src/components/Calendar/Calendar.classes.ts
@@ -30,4 +30,7 @@ export const calendarClasses = {
   todayIndicator: 'lsd-calendar-day__today_indicator',
 
   monthTable: 'lsd-calendar__month-table',
+
+  nextMonthButton: 'lsd-calendar__next-month-button',
+  previousMonthButton: 'lsd-calendar__previous-month-button',
 }
diff --git a/packages/lsd-react/src/components/Calendar/Calendar.context.ts b/packages/lsd-react/src/components/Calendar/Calendar.context.ts
@@ -18,8 +18,6 @@ export type CalendarContextType = {
   goToNextMonths: () => void
   goToNextYear: () => void
   goToPreviousYear: () => void
-  changeYearMode: boolean
-  setChangeYearMode: (value: boolean) => void
 }
 
 export const CalendarContext = React.createContext<CalendarContextType>(

diff --git a/packages/lsd-react/src/components/Calendar/Calendar.styles.ts b/packages/lsd-react/src/components/Calendar/Calendar.styles.ts
@@ -14,12 +14,14 @@ export const CalendarStyles = css`
     padding: 0;
     box-sizing: border-box;
     background: rgb(var(--lsd-surface-primary));
+
+    user-select: none;
+    padding: 8px;
   }
 
   .${calendarClasses.container} {
     display: flex;
     flex-direction: column;
-    margin: 8px 2px 2px;
   }
 
   .${calendarClasses.open} {
@@ -29,17 +31,18 @@ export const CalendarStyles = css`
 
   .${calendarClasses.header} {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
-    padding-inline: 10px;
-    padding-bottom: 10px;
+    height: 32px;
+    margin-bottom: 8px;
   }
 
   .${calendarClasses.weekDay} {
     display: flex;
     justify-content: center;
     align-items: center;
     aspect-ratio: 1 / 1;
+    margin-bottom: 4px;
   }
 
   .${calendarClasses.row} {
@@ -72,12 +75,6 @@ export const CalendarStyles = css`
     margin-right: 8px;
   }
 
-  .${calendarClasses.year}:hover {
-    cursor: pointer;
-    text-decoration: underline;
-    text-decoration-color: rgb(var(--lsd-border-primary));
-  }
-
   .${calendarClasses.dayContainer} {
     cursor: pointer;
     background: transparent;
@@ -145,6 +142,18 @@ export const CalendarStyles = css`
     display: flex;
     align-items: center;
     justify-content: center;
+
+    position: absolute;
+  }
+
+  .${calendarClasses.nextMonthButton} {
+    top: 8px;
+    right: 8px;
+  }
+
+  .${calendarClasses.previousMonthButton} {
+    top: 8px;
+    left: 8px;
   }
 
   /* Using style double instead of solid. When collapsing borders, */

diff --git a/packages/lsd-react/src/components/Calendar/Calendar.tsx b/packages/lsd-react/src/components/Calendar/Calendar.tsx
@@ -67,7 +67,6 @@ export const Calendar: React.FC<CalendarProps> & {
   const [endDate, setEndDate] = useState<Date | null>(
     endDateProp ? safeConvertDate(endDateProp, minDate, maxDate).date : null,
   )
-  const [changeYearMode, setChangeYearMode] = useState(false)
 
   useClickAway(ref, (event) => {
     if (!open) return
@@ -183,8 +182,6 @@ export const Calendar: React.FC<CalendarProps> & {
         goToNextMonths,
         goToNextYear,
         goToPreviousYear,
-        changeYearMode,
-        setChangeYearMode,
       }}
     >
       <div

diff --git a/packages/lsd-react/src/components/Calendar/MonthHelpers.tsx b/packages/lsd-react/src/components/Calendar/MonthHelpers.tsx
@@ -18,16 +18,18 @@ import { useCalendarContext } from './Calendar.context'
 type CalendarNavigationButtonProps = {
   direction: 'previous' | 'next'
   onClick: () => void
+  className?: string
 }
 
 export const CalendarNavigationButton: FC<CalendarNavigationButtonProps> = ({
   direction,
   onClick,
+  className,
 }) => {
   const Icon = direction === 'previous' ? NavigateBeforeIcon : NavigateNextIcon
   return (
     <button
-      className={clsx(calendarClasses.button)}
+      className={clsx(calendarClasses.button, className)}
       type="button"
       onClick={onClick}
     >
@@ -39,21 +41,12 @@ export const CalendarNavigationButton: FC<CalendarNavigationButtonProps> = ({
 type YearControlProps = {
   year: string
   size: 'large' | 'medium' | 'small'
-  onClickAway: () => void
 }
 
-export const YearControl: FC<YearControlProps> = ({
-  year,
-  size,
-  onClickAway,
-}) => {
+export const YearControl: FC<YearControlProps> = ({ year, size }) => {
   const ref = useRef<HTMLDivElement>(null)
   const { goToNextYear, goToPreviousYear } = useCalendarContext()
 
-  useClickAway(ref, () => {
-    onClickAway()
-  })
-
   return (
     <div ref={ref} className={calendarClasses.changeYear}>
       <Typography
@@ -91,19 +84,15 @@ type MonthHeaderProps = {
 }
 
 export const MonthHeader: FC<MonthHeaderProps> = ({ monthLabel, size }) => {
-  const {
-    goToPreviousMonths,
-    goToNextMonths,
-    changeYearMode,
-    setChangeYearMode,
-  } = useCalendarContext()
+  const { goToPreviousMonths, goToNextMonths } = useCalendarContext()
   const [month, year] = monthLabel.split(' ')
 
   return (
     <div className={calendarClasses.header}>
       <CalendarNavigationButton
         direction="previous"
         onClick={goToPreviousMonths}
+        className={calendarClasses.previousMonthButton}
       />
       <div className={calendarClasses.row}>
         <Typography
@@ -113,25 +102,14 @@ export const MonthHeader: FC<MonthHeaderProps> = ({ monthLabel, size }) => {
         >
           {month}
         </Typography>
-        {changeYearMode ? (
-          <YearControl
-            year={year}
-            size={size}
-            onClickAway={() => {
-              setChangeYearMode(false)
-            }}
-          />
-        ) : (
-          <Typography
-            onClick={() => setChangeYearMode(true)}
-            variant={size === 'large' ? 'label1' : 'label2'}
-            className={calendarClasses.year}
-          >
-            {year}
-          </Typography>
-        )}
+
+        <YearControl year={year} size={size} />
       </div>
-      <CalendarNavigationButton direction="next" onClick={goToNextMonths} />
+      <CalendarNavigationButton
+        direction="next"
+        onClick={goToNextMonths}
+        className={calendarClasses.nextMonthButton}
+      />
     </div>
   )
 }