fix: restructure button styles to allow secondary to be transparent (#…

…18949)

* fix: re-add background to tertiary button

* final color

* Update UI snapshots for `chromium` (1)

* Fix button styles to allow secondary to be transparent

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* all styles in default state

* button active states

* fix full width

* remove custom nav styling as buttons now 3px shorter

* tertiary danger hover highlight

* muted stealth when not active

* button sizes

* move min-height to chrome

* side buttons in primary

* change sidepanel buttons to tertiary

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* fix border radius

* dark mode colors

* remove unused styles

* fix: set metadata when level change (#18899)

* set user analytics metadata when membership level is changed

* also set whenever user is updated since that includes updating current org

* fix tests

* fix other tests

* style(3000): Align border radius to 6px in 3000 (#18866)

* style: Align border radius to 6px in 3000

* Only affect .posthog-3000

* Also tune some non-4px radii

* Add radius comment

Co-authored-by: David Newell <[email protected]>

* Fix missing warehouse mocks and strictly prevent toasts

* Don't affect utility classes

---------

Co-authored-by: David Newell <[email protected]>

* fix(3000): various ui fixes (#18861)

* subtle links in the funnel legend

* tooltip styles

* funnel glyphs and line

* retention table

* gray lettermark

* breakdown tag

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

* consistent bg naming

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* fix retention table css

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

* fix(plugin-server): Remove Postgres-based plugin error logging in favor of existing ClickHouse-based approaches (#18764)

* fix: delay usage report sending on sunday (#18900)

delay usage report sending on sunday

* feat(hogql): run filter based insights via hogql (undo revert) (#17645)

* chore(data-warehouse): fix close button (#18918)

fix close button

* feat: Only show other recordings if there are no pinned ones by default (#18915)

* fix(trends): convert any missing property operators to the default of exact (#18895)

* Convert any missing property operators to the default of exact

* Handle undefined values

* Check for undefined values

* feat(3000): Make nav usable on mobile (#18912)

* chore(3000): updated tag colors (#18786)

* updated tag colors

* darkened warning text

* Enable 3000 snapshots

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Lint CSS

---------

Co-authored-by: Michael Matloka <[email protected]>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

* chore(plugin server): add OS version to person properties (#18924)

* feat: Concise titles for the top nav (#18856)

* fix(groups): add debounce to search (#18927)

* style(3000): Clean up segmented buttons (#18897)

* style(3000): Make segmented buttons feel like IRL radio buttons

* Fix font size

* Revert full press

* Update query snapshots

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

* chore: update es build (#18917)

* chore: update ESBuild

* chore: update ESBuild

* more logging collapsing

* Fix

* fiddling

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* end when finished if not --dev

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

* chore(plugin-server): add deprecated imports list, log if they are us… (#18726)

* chore(3000): More styling tweaks (#18923)

* Align more rounding

* Align switch. select, input sizing with buttons

* Resolve extra UI snags

* Fix 3000-dependency

* Fix one more stray divider

* Remove legacy `description` prop of `PageHeader`

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Make "New insight" button regular size

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

* feat(surveys): be able to drag and reorder questions (#18763)

* reorder questions wip

* reorder questions

* address comments and open question box to where it's dragged

* import linter fix

* key prop error

* rotate drag handle icon

* add back auto disappear

* chore(plugin-server): only inject imports that are used by the plugin and remove unused plugin imports (#18934)

* fix: Swap canvas state var and remove it on unmount (#18922)

* fix: Support modal url changes (#18937)

* feat(3000): Relabeled apps to data pipeline, re-ordered nav (#18919)

* relabeled apps to data pipeline, re-ordered nav

* Update UI snapshots for `chromium` (1)

* RIP connectors → apps

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

* chore(plugin-server): bump node-rdkafka to 2.18.0 (librdkafka 2.3.0) (#18420)

* revert(plugin-server): bump node-rdkafka to 2.18.0 (librdkafka 2.3.0) (#18420) (#18941)

* feat: Fixed up feature previews panel (#18931)

* fix: PersonDisplay links should be the new subtle style (#18932)

* fix: Added missing 3000 parts for exporter (#18913)

* fix: e2e tests flakiness with unit image (#18933)

* Change celery metrics port so it doesn't clash with webserver

* Change back to unit image

* chore(deps): bump aiohttp from 3.8.6 to 3.9.0 (#18920)

* chore(deps): bump aiohttp from 3.8.6 to 3.9.0

Bumps [aiohttp](https://github.com/aio-libs/aiohttp) from 3.8.6 to 3.9.0.
- [Release notes](https://github.com/aio-libs/aiohttp/releases)
- [Changelog](https://github.com/aio-libs/aiohttp/blob/master/CHANGES.rst)
- [Commits](aio-libs/aiohttp@v3.8.6...v3.9.0)

---
updated-dependencies:
- dependency-name: aiohttp
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>

* update properly

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Paul D'Ambra <[email protected]>

* reset snapshots

* reset button snapshots

* merge cleanup

* final merge

* remove old snapshots

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* reset snapshots

* change onboaring to primary-alt in 3000

* add back in upwards motion on hover

* fix segmented button styles

* restore button heights

* padding adjacent to icons in buttons

* side action hover state

* Update UI snapshots for `chromium` (1)

* reset snapshots

* danger colors and unused color cleanup

* darken icons on hover

* restore all chrome hover / press depths

* increase navbar padding

* fix clearable select

* fix inspector button in session replay

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* fix rebase issues

* retain legacy lemon select styles

* improve active / hover states on segmented button

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Avoid extra margin between 3D buttons

This allows for a slightly nicer overlaying effect

* Update UI snapshots for `chromium` (1)

* Update query snapshots

* Update query snapshots

* Update UI snapshots for `chromium` (1)

* Update query snapshots

* Update UI snapshots for `chromium` (1)

* Update query snapshots

* reset snapshots

* always show danger icon opacity as 1

* stop content overflow

* set full width horizontal padding

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* rotate shadows on sidepanel buttons

* Update UI snapshots for `chromium` (1)

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben White <[email protected]>
Co-authored-by: Raquel Smith <[email protected]>
Co-authored-by: Thomas Obermüller <[email protected]>
Co-authored-by: ted kaemming <[email protected]>
Co-authored-by: Eric Duong <[email protected]>
Co-authored-by: Tom Owers <[email protected]>
Co-authored-by: Michael Matloka <[email protected]>
Co-authored-by: Cory Watilo <[email protected]>
Co-authored-by: Michael Matloka <[email protected]>
Co-authored-by: Juraj Majerik <[email protected]>
Co-authored-by: Paul D'Ambra <[email protected]>
Co-authored-by: Brett Hoerner <[email protected]>
Co-authored-by: Li Yi Yu <[email protected]>
Co-authored-by: Frank Hamand <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

frontend/src/layout/navigation-3000/Navigation.scss

@@ -78,7 +78,7 @@
         background: var(--accent-3000);
 
         .LemonButton__chrome {
-            padding: 0.25rem !important;
+            --lemon-button-padding-horizontal: 0.25rem !important;
         }
 
         ul {
@@ -88,10 +88,6 @@
         ul + ul {
             border-top-width: 1px;
         }
-
-        li + li {
-            margin-top: -1px;
-        }
     }
 }
 

frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss

@@ -71,20 +71,39 @@
     .LemonButton {
         padding-right: 1px !important; // padding-bottom in regular buttons
         padding-bottom: 0 !important;
-    }
 
-    .LemonButton__chrome {
-        top: 0 !important;
-        left: -1px !important; // top in regular buttons
-        margin: -1px 0 !important; // x and y axes swapped from regular buttons
-        &:hover {
-            top: 0 !important;
-            left: -1.5px !important; // top in regular buttons
+        .LemonButton__chrome {
+            padding: 0.25rem
+                calc(
+                    var(--lemon-button-padding-right, var(--lemon-button-padding-horizontal)) +
+                        var(--lemon-button-chrome-depth) * 0.5
+                )
+                0.25rem
+                calc(
+                    var(--lemon-button-padding-left, var(--lemon-button-padding-horizontal)) -
+                        var(--lemon-button-chrome-depth) * 0.5
+                ) !important;
+
+            &::after {
+                inset: -1px calc(var(--lemon-button-chrome-depth) - 1px) -1px -1px !important;
+                box-shadow: var(--lemon-button-chrome-depth) 0 0 -1px var(--lemon-button-frame-bg-color) !important;
+            }
         }
 
-        &:active {
-            top: 0 !important;
-            left: -0.5px !important; // top in regular buttons
+        &:hover:not([aria-disabled='true']),
+        &:not([aria-disabled='true']):active {
+            .LemonButton__chrome {
+                transform: translateX(var(--lemon-button-depth)) !important;
+
+                &::after {
+                    box-shadow: calc(var(--lemon-button-chrome-depth) - var(--lemon-button-depth)) 0 0 -1px var(--lemon-button-frame-bg-color) !important;
+                }
+
+                &::before {
+                    right: calc(var(--lemon-button-depth) - 1px) !important;
+                    bottom: -1px !important;
+                }
+            }
         }
     }
 }

frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss

@@ -54,13 +54,6 @@
 
     &.LemonButton--full-width {
         width: 100%;
-        padding-right: 0.5rem;
-        padding-left: 0.5rem;
-
-        > span,
-        .LemonButton__content {
-            overflow: hidden;
-        }
     }
 
     &.LemonButton--centered {
@@ -153,26 +146,6 @@
             color: #fff !important;
         }
     }
-
-    @each $status in ('primary', 'danger', 'primary-alt', 'muted') {
-        &.LemonButton--status-#{$status} {
-            // Primary - blocked color style
-            &.LemonButton--onboarding,
-            &.LemonButton--primary {
-                color: #fff;
-                background: var(--#{$status}-3000, var(--#{$status}));
-
-                &:not([aria-disabled='true']):hover,
-                &.LemonButton--active {
-                    color: #fff;
-                }
-
-                &:not([aria-disabled='true']):active {
-                    color: #fff;
-                }
-            }
-        }
-    }
 }
 
 .LemonButtonWithSideAction {

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

@@ -18,7 +18,7 @@ import {
 import { More } from './More'
 
 const statuses: LemonButtonProps['status'][] = ['primary', 'danger', 'primary-alt', 'muted', 'stealth']
-const types: LemonButtonProps['type'][] = ['onboarding', 'primary', 'secondary', 'tertiary']
+const types: LemonButtonProps['type'][] = ['primary', 'secondary', 'tertiary']
 
 type Story = StoryObj<typeof LemonButton>
 const meta: Meta<typeof LemonButton> = {
@@ -74,6 +74,83 @@ const TypesAndStatusesTemplate: StoryFn<typeof LemonButton> = (props) => {
     )
 }
 
+export const Types3000: Story = () => {
+    return (
+        <div className="space-y-2">
+            <h5>type=BLOCK</h5>
+            <div className="border rounded">
+                <div className="flex gap-2 flex-wrap p-2">
+                    <LemonButton type={'primary'} icon={<IconCalculate />}>
+                        Primary
+                    </LemonButton>
+                    <LemonButton type={'primary'} status="primary-alt" icon={<IconCalculate />}>
+                        Primary Alt
+                    </LemonButton>
+                    <LemonButton type={'secondary'} icon={<IconCalculate />}>
+                        Secondary
+                    </LemonButton>
+                    <LemonButton type={'secondary'} status="danger" icon={<IconCalculate />}>
+                        Destroy
+                    </LemonButton>
+                    <LemonButton stealth type={'secondary'} status="primary" icon={<IconCalculate />}>
+                        Stealth
+                    </LemonButton>
+                </div>
+                <div className="p-2">
+                    <h5>Active</h5>
+                    <div className="flex gap-2 flex-wrap">
+                        <LemonButton active type={'primary'} icon={<IconCalculate />}>
+                            Primary
+                        </LemonButton>
+                        <LemonButton active type={'primary'} status="primary-alt" icon={<IconCalculate />}>
+                            Primary Alt
+                        </LemonButton>
+                        <LemonButton active type={'secondary'} icon={<IconCalculate />}>
+                            Secondary
+                        </LemonButton>
+                        <LemonButton active type={'secondary'} status="danger" icon={<IconCalculate />}>
+                            Destroy
+                        </LemonButton>
+                        <LemonButton active stealth type={'secondary'} status="primary" icon={<IconCalculate />}>
+                            Stealth
+                        </LemonButton>
+                    </div>
+                </div>
+                <div className="p-2 bg-bg-light rounded-b">
+                    <h5>Light background</h5>
+                    <div className="flex gap-2 flex-wrap">
+                        <LemonButton type={'primary'} icon={<IconCalculate />}>
+                            Primary
+                        </LemonButton>
+                        <LemonButton type={'primary'} status="primary-alt" icon={<IconCalculate />}>
+                            Primary Alt
+                        </LemonButton>
+                        <LemonButton type={'secondary'} icon={<IconCalculate />}>
+                            Secondary
+                        </LemonButton>
+                        <LemonButton type={'secondary'} status="danger" icon={<IconCalculate />}>
+                            Destroy
+                        </LemonButton>
+                        <LemonButton stealth type={'secondary'} status="primary" icon={<IconCalculate />}>
+                            Stealth
+                        </LemonButton>
+                    </div>
+                </div>
+            </div>
+            <h5>type=MENU</h5>
+            <div className="flex gap-2 border rourounded p-2 flex-wrap">
+                <LemonButton type="tertiary" icon={<IconCalculate />}>
+                    Primary
+                </LemonButton>
+                <LemonButton type="tertiary" status="danger" icon={<IconCalculate />}>
+                    Danger
+                </LemonButton>
+            </div>
+        </div>
+    )
+}
+Types3000.args = { ...Default.args }
+
 export const TypesAndStatuses: Story = TypesAndStatusesTemplate.bind({})
 TypesAndStatuses.args = { ...Default.args }
 

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

@@ -31,7 +31,7 @@ export interface LemonButtonPropsBase
         | 'aria-haspopup'
     > {
     children?: React.ReactNode
-    type?: 'onboarding' | 'primary' | 'secondary' | 'tertiary'
+    type?: 'primary' | 'secondary' | 'tertiary'
     /** Button color scheme. */
     status?: 'primary' | 'danger' | 'primary-alt' | 'muted' | 'stealth'
     /** Whether hover style should be applied, signaling that the button is held active in some way. */