feat(ui): Introduce<LemonSegmentedSelect> (#26440)

frontend/src/lib/lemon-ui/LemonSegmentedSelect/LemonSegmentedSelect.stories.tsx

@@ -0,0 +1,50 @@
+import { IconBook, IconCalculator, IconCalendar, IconGear } from '@posthog/icons'
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { LemonSegmentedSelect, LemonSegmentedSelectProps } from './LemonSegmentedSelect'
+
+type Story = StoryObj<typeof LemonSegmentedSelect>
+const meta: Meta<typeof LemonSegmentedSelect> = {
+    title: 'Lemon UI/Lemon Segmented Select',
+    component: LemonSegmentedSelect,
+    argTypes: {
+        options: {
+            control: {
+                type: 'object',
+            },
+        },
+        shrinkOn: { control: { type: 'number' } },
+    },
+    args: {
+        options: [
+            { value: 'calendar', label: 'Calendar', icon: <IconCalendar /> },
+            { value: 'calculator', label: 'Calculator', icon: <IconCalculator /> },
+            {
+                value: 'banana',
+                label: 'Banana',
+                icon: <IconBook />,
+                disabledReason: 'Bananas are not allowed on these premises.',
+            },
+            { value: 'settings', label: 'Settings', icon: <IconGear /> },
+        ],
+    },
+    tags: ['autodocs'],
+}
+export default meta
+
+const Template: StoryFn<typeof LemonSegmentedSelect> = (props: Omit<LemonSegmentedSelectProps<any>, 'value'>) => {
+    return <LemonSegmentedSelect {...props} value={props.options[1]?.value} />
+}
+
+export const Default: Story = Template.bind({})
+Default.args = {}
+
+export const FullWidth: Story = Template.bind({})
+FullWidth.args = {
+    fullWidth: true,
+}
+
+export const Small: Story = Template.bind({})
+Small.args = {
+    size: 'small',
+}

frontend/src/lib/lemon-ui/LemonSegmentedSelect/LemonSegmentedSelect.tsx

@@ -0,0 +1,23 @@
+import { useWindowSize } from 'lib/hooks/useWindowSize'
+import React from 'react'
+
+import { LemonSegmentedButton, LemonSegmentedButtonProps } from '../LemonSegmentedButton'
+import { LemonSelect, LemonSelectProps } from '../LemonSelect'
+
+export type LemonSegmentedSelectProps<T extends React.Key> = LemonSegmentedButtonProps<T> &
+    LemonSelectProps<T> & {
+        shrinkOn: number
+    }
+
+export function LemonSegmentedSelect<T extends React.Key>({
+    shrinkOn,
+    ...props
+}: LemonSegmentedSelectProps<T>): JSX.Element {
+    const { width = 0 } = useWindowSize()
+
+    if (props.options.length >= shrinkOn || width < props.options.length * 100) {
+        return <LemonSelect {...props} />
+    }
+
+    return <LemonSegmentedButton {...props} />
+}

frontend/src/lib/lemon-ui/LemonSegmentedSelect/index.ts

@@ -0,0 +1 @@
+export * from './LemonSegmentedSelect'

frontend/src/scenes/web-analytics/WebDashboard.tsx

@@ -6,8 +6,7 @@ import { VersionCheckerBanner } from 'lib/components/VersionChecker/VersionCheck
 import { FEATURE_FLAGS } from 'lib/constants'
 import { IconOpenInNew } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { LemonSegmentedButton } from 'lib/lemon-ui/LemonSegmentedButton'
-import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
+import { LemonSegmentedSelect } from 'lib/lemon-ui/LemonSegmentedSelect/LemonSegmentedSelect'
 import { PostHogComDocsURL } from 'lib/lemon-ui/Link/Link'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -259,23 +258,15 @@ export const WebTabs = ({
                     )}
                 </h2>
 
-                {tabs.length > 4 ? (
-                    <LemonSelect
-                        size="small"
-                        disabled={false}
-                        value={activeTabId}
-                        dropdownMatchSelectWidth={false}
-                        onChange={setActiveTabId}
-                        options={tabs.map(({ id, linkText }) => ({ value: id, label: linkText }))}
-                    />
-                ) : (
-                    <LemonSegmentedButton
-                        size="small"
-                        options={tabs.map(({ id, linkText }) => ({ label: linkText, value: id }))}
-                        onChange={(value) => setActiveTabId(value)}
-                        value={activeTabId}
-                    />
-                )}
+                <LemonSegmentedSelect
+                    shrinkOn={7}
+                    size="small"
+                    disabled={false}
+                    value={activeTabId}
+                    dropdownMatchSelectWidth={false}
+                    onChange={setActiveTabId}
+                    options={tabs.map(({ id, linkText }) => ({ value: id, label: linkText }))}
+                />
             </div>
             <div className="flex-1 flex flex-col">{activeTab?.content}</div>
             {buttonsRow.length > 0 ? <div className="flex justify-end my-2 space-x-2">{buttonsRow}</div> : null}