fix(lemon-ui): Fix calendar month being clickable (#19294)

PostHog · Dec 14, 2023 · a86a31a · a86a31a
1 parent 82d22cc
commit a86a31a
Show file tree

Hide file tree

Showing 43 changed files with 22 additions and 10 deletions.
diff --git a/...d/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--custom-styles--dark.png b/...d/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--custom-styles--dark.png
diff --git a/.../__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--custom-styles--light.png b/.../__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--custom-styles--light.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--custom-styles.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--custom-styles.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--default--dark.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--default--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--default--light.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--default--light.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--default.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--default.png
diff --git a/...nd/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--friday-first--dark.png b/...nd/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--friday-first--dark.png
diff --git a/...d/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--friday-first--light.png b/...d/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--friday-first--light.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--friday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--friday-first.png
diff --git a/...nd/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--monday-first--dark.png b/...nd/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--monday-first--dark.png
diff --git a/...d/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--monday-first--light.png b/...d/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--monday-first--light.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--monday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--monday-first.png
diff --git a/...__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--multiple-months--dark.png b/...__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--multiple-months--dark.png
diff --git a/..._snapshots__/lemon-ui-lemon-calendar-lemon-calendar--multiple-months--light.png b/..._snapshots__/lemon-ui-lemon-calendar-lemon-calendar--multiple-months--light.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--multiple-months.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--multiple-months.png
diff --git a/.../__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--saturday-first--dark.png b/.../__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--saturday-first--dark.png
diff --git a/...__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--saturday-first--light.png b/...__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--saturday-first--light.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--saturday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--saturday-first.png
diff --git a/...nd/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--sunday-first--dark.png b/...nd/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--sunday-first--dark.png
diff --git a/...d/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--sunday-first--light.png b/...d/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--sunday-first--light.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--sunday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--sunday-first.png
diff --git a/.../__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--thursday-first--dark.png b/.../__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--thursday-first--dark.png
diff --git a/...__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--thursday-first--light.png b/...__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--thursday-first--light.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--thursday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--thursday-first.png
diff --git a/...d/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--tuesday-first--dark.png b/...d/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--tuesday-first--dark.png
diff --git a/.../__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--tuesday-first--light.png b/.../__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--tuesday-first--light.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--tuesday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--tuesday-first.png
diff --git a/...__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--wednesday-first--dark.png b/...__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--wednesday-first--dark.png
diff --git a/..._snapshots__/lemon-ui-lemon-calendar-lemon-calendar--wednesday-first--light.png b/..._snapshots__/lemon-ui-lemon-calendar-lemon-calendar--wednesday-first--light.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--wednesday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--wednesday-first.png
diff --git a/...__/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range--dark.png b/...__/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range--dark.png
diff --git a/..._/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range--light.png b/..._/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range--light.png
diff --git a/...mon-calendar-lemon-calendar-range-inline--lemon-calendar-range-inline--dark.png b/...mon-calendar-lemon-calendar-range-inline--lemon-calendar-range-inline--dark.png
diff --git a/...on-calendar-lemon-calendar-range-inline--lemon-calendar-range-inline--light.png b/...on-calendar-lemon-calendar-range-inline--lemon-calendar-range-inline--light.png
diff --git a/...-ui-lemon-calendar-lemon-calendar-range-inline--lemon-calendar-range-inline.png b/...-ui-lemon-calendar-lemon-calendar-range-inline--lemon-calendar-range-inline.png
diff --git a/.../lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select--dark.png b/.../lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select--dark.png
diff --git a/...lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select--light.png b/...lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select--light.png
diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.stories.tsx b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.stories.tsx
@@ -15,6 +15,9 @@ const meta: Meta<typeof LemonCalendar> = {
     },
     parameters: {
         mockDate: '2023-01-26',
+        testOptions: {
+            include3000: true,
+        },
     },
     tags: ['autodocs'],
 }

diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.tsx b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.tsx
@@ -77,16 +77,12 @@ export function LemonCalendar(props: LemonCalendarProps): JSX.Element {
                                         />
                                     )}
                                 </th>
-                                <th className="relative" colSpan={5}>
-                                    <LemonButton
-                                        status="muted"
-                                        fullWidth
-                                        center
-                                        data-attr={`lemon-calendar-month-title-${month}`}
-                                        className="text-xs font-bold text-muted uppercase cursor-default"
-                                    >
-                                        {startOfMonth.format('MMMM')} {startOfMonth.year()}
-                                    </LemonButton>
+                                <th
+                                    className="relative font-title font-semibold text-muted-alt uppercase cursor-default text-center"
+                                    data-attr={`lemon-calendar-month-title-${month}`}
+                                    colSpan={5}
+                                >
+                                    {startOfMonth.format('MMMM')} {startOfMonth.year()}
                                 </th>
                                 <th className="relative">
                                     {showRightMonth && (

diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.stories.tsx b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.stories.tsx
@@ -12,6 +12,9 @@ const meta: Meta<typeof LemonCalendarSelect> = {
     component: LemonCalendarSelect,
     parameters: {
         mockDate: '2023-01-26',
+        testOptions: {
+            include3000: true,
+        },
     },
     tags: ['autodocs'],
 }

diff --git a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.stories.tsx b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.stories.tsx
@@ -12,6 +12,9 @@ const meta: Meta<typeof LemonCalendarRange> = {
     component: LemonCalendarRange,
     parameters: {
         mockDate: '2023-01-26',
+        testOptions: {
+            include3000: true,
+        },
     },
     tags: ['autodocs'],
 }

diff --git a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.stories.tsx b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.stories.tsx
@@ -12,6 +12,9 @@ const meta: Meta<typeof LemonCalendarRangeInline> = {
     component: LemonCalendarRangeInline,
     parameters: {
         mockDate: '2023-01-26',
+        testOptions: {
+            include3000: true,
+        },
     },
     tags: ['autodocs'],
 }

diff --git a/frontend/src/styles/utilities.scss b/frontend/src/styles/utilities.scss
@@ -1125,6 +1125,10 @@ $decorations: underline, overline, line-through, no-underline;
     font-family: var(--font-sans);
 }
 
+.font-title {
+    font-family: var(--font-title);
+}
+
 .font-mono {
     font-family: var(--font-mono);
 }