Skip to content

Commit

Permalink
feat: improve inspector tabs (#21639)
Browse files Browse the repository at this point in the history
daibhin authored Apr 19, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent b24c614 commit 50df39c
Showing 8 changed files with 171 additions and 149 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
.LemonTabs {
--lemon-tabs-margin-bottom: 1rem;
--lemon-tabs-gap: 2rem;
--lemon-tabs-margin-bottom: 1rem;
--lemon-tabs-content-padding: 0.75rem 0;

position: relative;
display: flex;
flex-direction: column;
align-self: stretch;

&--small {
--lemon-tabs-gap: 1rem;
--lemon-tabs-margin-bottom: 0.5rem;
--lemon-tabs-content-padding: 0.375rem 0;
}

.Navigation3000__scene > &:first-child,
.Navigation3000__scene > :first-child > &:first-child {
margin-top: -0.75rem;
7 changes: 5 additions & 2 deletions frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.stories.tsx
Original file line number Diff line number Diff line change
@@ -50,5 +50,8 @@ const Template: StoryFn<typeof LemonTabsComponent> = (props) => {
return <LemonTabsComponent {...props} activeKey={activeKey} onChange={(newValue) => setActiveKey(newValue)} />
}

export const LemonTabs: Story = Template.bind({})
LemonTabs.args = {}
export const Default: Story = Template.bind({})
Default.args = {}

export const Small: Story = Template.bind({})
Small.args = { size: 'small' }
4 changes: 3 additions & 1 deletion frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx
Original file line number Diff line number Diff line change
@@ -28,6 +28,7 @@ export interface LemonTabsProps<T extends string | number> {
onChange?: (key: T) => void
/** List of tabs. Falsy entries are ignored - they're there to make conditional tabs convenient. */
tabs: (LemonTab<T> | null | false)[]
size?: 'small' | 'medium'
'data-attr'?: string
}

@@ -40,6 +41,7 @@ export function LemonTabs<T extends string | number>({
activeKey,
onChange,
tabs,
size = 'medium',
'data-attr': dataAttr,
}: LemonTabsProps<T>): JSX.Element {
const { containerRef, selectionRef, sliderWidth, sliderOffset, transitioning } = useSliderPositioning<
@@ -53,7 +55,7 @@ export function LemonTabs<T extends string | number>({

return (
<div
className={clsx('LemonTabs', transitioning && 'LemonTabs--transitioning')}
className={clsx('LemonTabs', transitioning && 'LemonTabs--transitioning', `LemonTabs--${size}`)}
// eslint-disable-next-line react/forbid-dom-props
style={
{

Large diffs are not rendered by default.

0 comments on commit 50df39c

Please sign in to comment.