diff --git a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default.png b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default.png index 566d9894b1b2c..b5eb2fe4d0ab4 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default.png and b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width.png b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width.png index 566d9894b1b2c..b5eb2fe4d0ab4 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width.png and b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small.png b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small.png index 3212e72c53825..8ef1ffe9b510e 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small.png and b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small.png differ diff --git a/frontend/__snapshots__/scenes-app-saved-insights--card-view.png b/frontend/__snapshots__/scenes-app-saved-insights--card-view.png index acbf6d7ff1972..df6c09ca18009 100644 Binary files a/frontend/__snapshots__/scenes-app-saved-insights--card-view.png and b/frontend/__snapshots__/scenes-app-saved-insights--card-view.png differ diff --git a/frontend/__snapshots__/scenes-app-saved-insights--empty-state.png b/frontend/__snapshots__/scenes-app-saved-insights--empty-state.png index 86a13a05a8926..7757d243d548c 100644 Binary files a/frontend/__snapshots__/scenes-app-saved-insights--empty-state.png and b/frontend/__snapshots__/scenes-app-saved-insights--empty-state.png differ diff --git a/frontend/__snapshots__/scenes-app-saved-insights--list-view.png b/frontend/__snapshots__/scenes-app-saved-insights--list-view.png index 68b73d4906ad2..520f2c041c0a8 100644 Binary files a/frontend/__snapshots__/scenes-app-saved-insights--list-view.png and b/frontend/__snapshots__/scenes-app-saved-insights--list-view.png differ diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx index 3411db82b1465..d011a0a6561de 100644 --- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx +++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx @@ -6,7 +6,7 @@ import clsx from 'clsx' import { Resizer } from 'lib/components/Resizer/Resizer' import { useRef } from 'react' import { ResizerLogicProps, resizerLogic } from 'lib/components/Resizer/resizerLogic' -import { IconNotebook, IconQuestion, IconInfo, IconGear } from '@posthog/icons' +import { IconNotebook, IconInfo, IconSupport, IconGear } from '@posthog/icons' import { SidePanelDocs } from './panels/SidePanelDocs' import { SidePanelSupport } from './panels/SidePanelSupport' import { NotebookPanel } from 'scenes/notebooks/NotebookPanel/NotebookPanel' @@ -21,9 +21,9 @@ export const SidePanelTabs: Record { const { closeSidePanel } = useActions(sidePanelStateLogic) const { selectedTab } = useValues(sidePanelStateLogic) - const theLogic = supportLogic({ onClose: () => closeSidePanel(SidePanelTab.Feedback) }) + const theLogic = supportLogic({ onClose: () => closeSidePanel(SidePanelTab.Support) }) const { title } = useValues(theLogic) const { closeSupportForm } = useActions(theLogic) @@ -19,11 +20,10 @@ export const SidePanelSupport = (): JSX.Element => { return (
-

{title}

- +

{title}

+ - -
+
closeSidePanel()} />
diff --git a/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx b/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx index aef21253e546f..b0c46bb1056c5 100644 --- a/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx +++ b/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx @@ -32,7 +32,7 @@ export const sidePanelLogic = kea([ } if (isCloudOrDev) { - tabs.push(SidePanelTab.Feedback) + tabs.push(SidePanelTab.Support) } if (featureFlags[FEATURE_FLAGS.SIDE_PANEL_DOCS]) { diff --git a/frontend/src/lib/components/Support/SupportForm.tsx b/frontend/src/lib/components/Support/SupportForm.tsx index cae99acd1aa03..fa09fd9f1eaa7 100644 --- a/frontend/src/lib/components/Support/SupportForm.tsx +++ b/frontend/src/lib/components/Support/SupportForm.tsx @@ -2,21 +2,27 @@ import { useActions, useValues } from 'kea' import { SupportTicketKind, TARGET_AREA_TO_NAME, supportLogic } from './supportLogic' import { Form } from 'kea-forms' import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea' -import { LemonSelect, LemonSelectOptions } from 'lib/lemon-ui/LemonSelect/LemonSelect' +import { LemonSelect } from 'lib/lemon-ui/LemonSelect/LemonSelect' import { Field } from 'lib/forms/Field' -import { IconBugReport, IconFeedback, IconSupport } from 'lib/lemon-ui/icons' +import { IconBugReport, IconFeedback, IconHelpOutline } from 'lib/lemon-ui/icons' import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic' import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput/LemonFileInput' import { useRef } from 'react' -import { LemonButton, LemonInput, lemonToast } from '@posthog/lemon-ui' +import { + LemonButton, + LemonInput, + LemonSegmentedButton, + LemonSegmentedButtonOption, + lemonToast, +} from '@posthog/lemon-ui' import { useUploadFiles } from 'lib/hooks/useUploadFiles' import { userLogic } from 'scenes/userLogic' -const SUPPORT_TICKET_OPTIONS: LemonSelectOptions = [ +const SUPPORT_TICKET_OPTIONS: LemonSegmentedButtonOption[] = [ { - value: 'bug', - label: 'Bug', - icon: , + value: 'support', + label: 'Question', + icon: , }, { value: 'feedback', @@ -24,9 +30,9 @@ const SUPPORT_TICKET_OPTIONS: LemonSelectOptions = [ icon: , }, { - value: 'support', - label: 'Support', - icon: , + value: 'bug', + label: 'Bug', + icon: , }, ] @@ -73,7 +79,7 @@ export function SupportForm({ loggedIn = true }: { loggedIn?: boolean }): JSX.El )} - + = { - bug: 'Report a bug', + support: 'Ask a question', feedback: 'Give feedback', - support: 'Get support', + bug: 'Report a bug', } export const TARGET_AREA_TO_NAME = { @@ -115,10 +115,7 @@ export const supportLogic = kea([ })), actions(() => ({ closeSupportForm: () => true, - openSupportForm: ( - kind: SupportTicketKind | null = null, - target_area: SupportTicketTargetArea | null = null - ) => ({ + openSupportForm: (kind: SupportTicketKind = 'support', target_area: SupportTicketTargetArea | null = null) => ({ kind, target_area, }), @@ -154,10 +151,10 @@ export const supportLogic = kea([ })), forms(({ actions }) => ({ sendSupportRequest: { - defaults: {} as unknown as { - kind: SupportTicketKind | null - target_area: SupportTicketTargetArea | null - message: string + defaults: { + kind: 'support' as SupportTicketKind, + target_area: null as SupportTicketTargetArea | null, + message: '', }, errors: ({ message, kind, target_area }) => { return { @@ -215,7 +212,7 @@ export const supportLogic = kea([ message: '', }) - actions.openSidePanel(SidePanelTab.Feedback) + actions.openSidePanel(SidePanelTab.Support) }, openSupportLoggedOutForm: async ({ name, email, kind, target_area }) => { actions.resetSendSupportLoggedOutRequest({ diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss index 1f49b28943c5b..d287ee457a1a5 100644 --- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss +++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss @@ -1,4 +1,5 @@ .LemonButton { + --lemon-button-height: 2.5rem; position: relative; transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease, transform 100ms ease; @@ -7,7 +8,7 @@ flex-shrink: 0; align-items: center; justify-content: flex-start; - min-height: 2.5rem; + min-height: var(--lemon-button-height); padding: 0.25rem 0.75rem; gap: 0.5rem; background: none; @@ -69,7 +70,7 @@ } &.LemonButton--xsmall { - min-height: 1.5rem; + --lemon-button-height: 1.5rem; padding: 0.125rem 0.375rem; gap: 0.25rem; font-size: 0.75rem; @@ -90,7 +91,7 @@ } &.LemonButton--small { - min-height: 2rem; + --lemon-button-height: 2rem; padding: 0.125rem 0.5rem; gap: 0.25rem; @@ -110,7 +111,7 @@ } &.LemonButton--large { - min-height: 3.5rem; + --lemon-button-height: 3.5rem; padding: 0.5rem 1rem; gap: 0.75rem; font-size: 1rem; diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx index 4a9c211e2b2e3..07a04ab3b0751 100644 --- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx +++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx @@ -112,6 +112,7 @@ function LemonCollapsePanel({ header, content, isExpanded, onChange }: LemonColl } : undefined } + aria-busy={status.endsWith('ing')} >
{content} diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss index bedd306d2c4ef..84f6613726909 100644 --- a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss +++ b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss @@ -47,6 +47,7 @@ outline 200ms ease; outline: 1px solid transparent; border-radius: 0; + min-height: calc(var(--lemon-button-height) - 2px); } &:first-child, &:first-child .LemonButton { diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx index 1c9913aaf20c1..2fd4a2adb0a57 100644 --- a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx +++ b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx @@ -89,6 +89,7 @@ export function LemonSegmentedButton({ }} icon={option.icon} data-attr={option['data-attr']} + center > {option.label} diff --git a/frontend/src/lib/lemon-ui/hooks.ts b/frontend/src/lib/lemon-ui/hooks.ts index 32625c2d499bd..00a54ef235dc2 100644 --- a/frontend/src/lib/lemon-ui/hooks.ts +++ b/frontend/src/lib/lemon-ui/hooks.ts @@ -35,7 +35,7 @@ export function useSliderPositioning { return ( - // eslint-disable-next-line react/forbid-dom-props
> export enum SidePanelTab { Notebooks = 'notebook', - Feedback = 'feedback', + Support = 'support', Docs = 'docs', Activation = 'activation', Settings = 'settings', diff --git a/package.json b/package.json index cc767861a8339..fd372120f3534 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "@medv/finder": "^2.1.0", "@microlink/react-json-view": "^1.21.3", "@monaco-editor/react": "4.4.6", - "@posthog/icons": "^0.1.31", + "@posthog/icons": "0.2.0", "@posthog/plugin-scaffold": "^1.4.4", "@react-hook/size": "^2.1.2", "@rrweb/types": "^2.0.0-alpha.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6b34bdf8e03a9..539bb9a7ad90d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,8 +36,8 @@ dependencies: specifier: 4.4.6 version: 4.4.6(monaco-editor@0.39.0)(react-dom@18.2.0)(react@18.2.0) '@posthog/icons': - specifier: ^0.1.31 - version: 0.1.33(react-dom@18.2.0)(react@18.2.0) + specifier: 0.2.0 + version: 0.2.0(react-dom@18.2.0)(react@18.2.0) '@posthog/plugin-scaffold': specifier: ^1.4.4 version: 1.4.4 @@ -3374,8 +3374,8 @@ packages: resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==} dev: false - /@posthog/icons@0.1.33(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-VjQXuy48kcBXhgNN7vAuvEiM/fQULTIzWs4ntGZ6PqAbL95GGsGJAcDWZ+aoHLPOGqhfE+gM7vpWm8MUNduq1A==} + /@posthog/icons@0.2.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-ftFoIropSJaFbxzzt1eGOgJCsbK0+L5KDdxKcpbhl4nMbmCEI/awzj98l+0pp/JAJzDrAsqEou7MvdJrntOGbw==} peerDependencies: react: '>=16.14.0' react-dom: '>=16.14.0'