feat(3000): add 3000 styles for keyboard shortcut (#18766)

PostHog · Nov 21, 2023 · dfc9d31 · dfc9d31
1 parent f34d89c
commit dfc9d31
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 2 deletions.
diff --git a/frontend/__snapshots__/posthog-3000-keyboard-shortcut--default.png b/frontend/__snapshots__/posthog-3000-keyboard-shortcut--default.png
diff --git a/frontend/__snapshots__/posthog-3000-keyboard-shortcut--muted.png b/frontend/__snapshots__/posthog-3000-keyboard-shortcut--muted.png
diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
@@ -15,6 +15,18 @@
     color: var(--default);
     text-transform: capitalize;
 
+    .posthog-3000 & {
+        text-transform: uppercase;
+        border-radius: 0.25rem;
+        border-bottom-width: 2px;
+        font-size: 0.625rem;
+        padding: 0.125rem 0.25rem;
+    }
+
+    .posthog-3000[theme='dark'] & {
+        border-color: var(--muted-3000);
+    }
+
     .KeyboardShortcut--muted > & {
         background: none;
         color: var(--muted);

diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.stories.tsx b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/react'
+
+import { KeyboardShortcut } from './KeyboardShortcut'
+
+const meta: Meta<typeof KeyboardShortcut> = {
+    title: 'PostHog 3000/Keyboard Shortcut',
+    component: KeyboardShortcut,
+    tags: ['autodocs'],
+}
+export default meta
+
+export const Default = {
+    args: {
+        cmd: true,
+        shift: true,
+        k: true,
+    },
+}
+
+export const Muted = {
+    args: {
+        muted: true,
+        cmd: true,
+        shift: true,
+        k: true,
+    },
+}
diff --git a/frontend/src/lib/components/CommandBar/ActionInput.tsx b/frontend/src/lib/components/CommandBar/ActionInput.tsx
@@ -30,7 +30,7 @@ export const ActionInput = (): JSX.Element => {
                 className="CommandBar__input"
                 fullWidth
                 prefix={<PrefixIcon activeFlow={activeFlow} />}
-                suffix={<KeyboardShortcut escape muted />}
+                suffix={<KeyboardShortcut escape />}
                 placeholder={activeFlow?.instruction ?? 'What would you like to do? Try some suggestions…'}
                 autoFocus
                 value={input}

diff --git a/frontend/src/lib/components/CommandBar/SearchInput.tsx b/frontend/src/lib/components/CommandBar/SearchInput.tsx
@@ -20,7 +20,7 @@ export const SearchInput = forwardRef(function _SearchInput(_, ref: Ref<HTMLInpu
                 size="small"
                 className="CommandBar__input"
                 fullWidth
-                suffix={<KeyboardShortcut escape muted />}
+                suffix={<KeyboardShortcut escape />}
                 autoFocus
                 value={searchQuery}
                 onChange={setSearchQuery}