Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: weird overflow of input in rolling date filter
Browse files Browse the repository at this point in the history
daibhin committed Dec 5, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 42f5a80 commit 7c421e6
Showing 3 changed files with 44 additions and 2 deletions.
40 changes: 40 additions & 0 deletions frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
Original file line number Diff line number Diff line change
@@ -11,6 +11,10 @@
cursor: pointer;
transition: background 0.3s ease;

.posthog-3000 & {
height: 1.6875rem;
}

&:hover {
background-color: var(--mid);
}
@@ -45,12 +49,21 @@
border: 1px solid var(--border);
border-radius: var(--radius);

.posthog-3000 & {
height: 1.6875rem;
line-height: 1.5rem;
}

.LemonInput {
width: 3rem;
min-height: 0;
padding: 0;
border: none;

.posthog-3000 & {
height: unset;
}

input {
text-align: center;
}
@@ -61,8 +74,35 @@
margin: 0 0.25rem;
border-radius: var(--radius);

&:first-child {
.posthog-3000 & {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}

&:last-child {
.posthog-3000 & {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}

.posthog-3000 & {
width: 1.25rem;
height: 100%;
padding: 0;
margin: 0;
text-align: center;
border-radius: calc(var(--radius) - 1px);
}

&:hover {
background-color: var(--primary-highlight);

.posthog-3000 & {
background-color: var(--accent-3000);
}
}
}
}
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import { LemonButton, LemonInput, LemonSelect, LemonSelectOptions } from '@posth
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { dayjs } from 'lib/dayjs'
import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
import { Tooltip } from 'lib/lemon-ui/Tooltip'

import { DateOption, rollingDateRangeFilterLogic } from './rollingDateRangeFilterLogic'
@@ -38,6 +39,7 @@ export function RollingDateRangeFilter({
const { increaseCounter, decreaseCounter, setCounter, setDateOption, toggleDateOptionsSelector, select } =
useActions(rollingDateRangeFilterLogic(logicProps))
const { counter, dateOption, formattedDate } = useValues(rollingDateRangeFilterLogic(logicProps))
const is3000 = useFeatureFlag('POSTHOG_3000')

return (
<Tooltip title={makeLabel ? makeLabel(formattedDate) : undefined}>
@@ -89,7 +91,7 @@ export function RollingDateRangeFilter({
...popover,
className: 'RollingDateRangeFilter__popover',
}}
size="small"
size={is3000 ? 'xsmall' : 'small'}
/>
</LemonButton>
</Tooltip>
2 changes: 1 addition & 1 deletion frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
Original file line number Diff line number Diff line change
@@ -74,7 +74,7 @@ export interface LemonSelectPropsBase<T>
dropdownPlacement?: PopoverProps['placement']
className?: string
placeholder?: string
size?: 'small' | 'medium'
size?: LemonButtonProps['size']
menu?: Pick<LemonMenuProps, 'className' | 'closeParentPopoverOnClickInside'>
}

0 comments on commit 7c421e6

Please sign in to comment.