From dfc9d3125917c9ea67fea40c2a0e2123a071272b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Oberm=C3=BCller?= Date: Tue, 21 Nov 2023 14:57:10 +0100 Subject: [PATCH] feat(3000): add 3000 styles for keyboard shortcut (#18766) --- ...osthog-3000-keyboard-shortcut--default.png | Bin 0 -> 1243 bytes .../posthog-3000-keyboard-shortcut--muted.png | Bin 0 -> 1120 bytes .../components/KeyboardShortcut.scss | 12 ++++++++ .../components/KeyboardShortcut.stories.tsx | 27 ++++++++++++++++++ .../lib/components/CommandBar/ActionInput.tsx | 2 +- .../lib/components/CommandBar/SearchInput.tsx | 2 +- 6 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 frontend/__snapshots__/posthog-3000-keyboard-shortcut--default.png create mode 100644 frontend/__snapshots__/posthog-3000-keyboard-shortcut--muted.png create mode 100644 frontend/src/layout/navigation-3000/components/KeyboardShortcut.stories.tsx diff --git a/frontend/__snapshots__/posthog-3000-keyboard-shortcut--default.png b/frontend/__snapshots__/posthog-3000-keyboard-shortcut--default.png new file mode 100644 index 0000000000000000000000000000000000000000..1f8990c3a32c8046faa00b079fe02eecd2020c10 GIT binary patch literal 1243 zcmV<11SI>3P)Px(l}SWFRA_Jq>_SUuSFz=s z$`bwEw0Yj=`Jey!=k)E{!Ux_7D#x3lp`jc}S~w4UEK}2>QVAzxV`G0_T2xS9DSYkI zN#Ea5m86BbO`A4t4h{~Mr7nu%=JE0I^MKP0D5b9yzV_*=FDzM8B!t%*?w*GKO~~MT zpRW4Cn_J!U^yyRCCf-N93VLE$E8a@v3~t}OePc6)iu~`f1}kF$i9XzF&GS(&1PC#TL=jWS+>{Xphrh7 z#KpxC6cj{kY%HUr7Pf5JEX!zfb2Dq!tl`?Vdi?!gS&52@A~G_Pqes6bCnuY=YuC!U zhOfAJ^Cm`PH%(2AsMYGX_Itc_)Ya8eP@v`Bz2DGkzv9Z3I$1^~NusCcR}LOLxEQj7 zq@*N@i%(*=+cBHXq@?VkyStm+yFVj4JBQ)nVXj|qBsDdSy?ggEI5_Au-`Uwoc6JWQ z$)8eCpv7VtljYTw{{DUphFZ$X%7}@H@o2{5pzG`FsjRF7puD_{t5>hC%;jsIKYxzR zW+NftBe&~$d3i)eMglN5H^+kqCYqa@Nk~ZG_;DSg_zxW&?Zm~!Q&VGDoNH}uqot*l z;^Ja%-RdGgUqekzjV!NAu~^0^Dbb_T=}1dU^?1(fQ-@O6?b85+g@wJfcYc1JBS*er z>((vg=WCdln4qYrh^VM2^7A!3e*Ac`udS^Oyr zMy*y;QBgr{ZJk$J(y9d=5fOn}t>)pwLAUE&U0qnMRi z`sbvlr*rn~Szf+;>CxP(1+7x4$jZv3rKRORW(NiasH&eTm4O-<3z(BRSBss#;DSXhWCis*DF7#JA9YPDiC8aaKsgrcIN z#hdaJKR-XTS}m28m$`qxk0(!_aQpUcdU}3Q+-_0UnzX;(^Y?Q z>rknL6ISc^1(k{fnb#N-1mS{fQ9*sB@U>63`XBHy{{jUD&3`pWo16du002ovPDHLk FV1f#8ViN!W literal 0 HcmV?d00001 diff --git a/frontend/__snapshots__/posthog-3000-keyboard-shortcut--muted.png b/frontend/__snapshots__/posthog-3000-keyboard-shortcut--muted.png new file mode 100644 index 0000000000000000000000000000000000000000..091bda66799ec2c23090fd1b2b8c93d0d6a3fe1d GIT binary patch literal 1120 zcmV-m1fTnfP)Px(8c9S!RA_-OS59Bi#E$vro(y zwl*n_6^&h0#-q}Y3a$28p>LHH;s9<(Fu`q9zZ;^`j|#2!S)p&;rLigo2M4<&FtOnf zYovK#VBo=cJbun`oI^nn{1%0QbUM8)nM}SVA}Ih}0IrZ6*IIuZg+2f{j`IY`%eh>x zq3d0%VOiFXTI+xJwRAddClZMn01wAvvEFPpd+Sd8hVJN&j*isA!oo`=Q|mQc4##n} zBoc|Q0PM9aYtR_;B*_m&WWsgbu_)$fB@&6m8IpU$Fg$R#kbwq*_B?M7$!`mV!ruVC z^E_`)vqmk;dIP}X+}zx=zVBbm=kwRJ)*p#TisY%`;o&8 zYW3IsQ!>V!Ci$G_c`u5{=OQu#;Q1!JQbZifvPNfTXDg0CK@fbYlsZ}}mAV|qd4%L8 z0I!l92XJ#`nRx-gYb1Xq>H5BZX_fD~?kLG4BC->}Ws>iTNE22o;kxdA0B1xbozLgL zuZL6j9i7YN4v0t^07wpKt(yrMLqkK`N$w!|O|`n#`hBhSPb**VA-T^O(+l8hk{1AM zHO4$8BA1LY@2&D&*Bv8y+!%AzvaBAG696Wf@mh{dCeuT*0N_{<1n2AJHGJxb3Sk&_ z0YE$+zger7WUN#wy%_|-6)cDLP-kc7iF`hPO++RDJPs^xP5_PpI2;7QdEfVc)>=;k zI2)C3+qN$NxK~7$8sW7qXxp~`0)S$%cwasJtLvaKW=TZC$;ruumC_=B1OUY2@f{?$ z8)LpG=ZeT|bk6aMG3Fr2@k}PuQ!lA)K~GIh{UIVZ!Z3WgTHSTsSCmq_8`13O=pX+7r7lpV+EC3#LnYA!3~ zn4h1&4&e7>GTFbTw7*%itH|YYe*%DQ+eZLAu(Y&vvL0SLgN8BY6o4(=-Q6>e(j=VlO)d?W3B=?WQ>VCXaMki|00%;c|kgz z-c~Q~v04qT>!y@a;(6Y|b!gSpZv$HGv#M6BC)m(Iw{_{*NGK1wi0J; & { 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 new file mode 100644 index 0000000000000..435e87ebfbdce --- /dev/null +++ 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 = { + 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 index 879b699ad1930..7ed1dd64d1392 100644 --- 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={} - suffix={} + suffix={} 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 index ce03cc5af4cc7..d73baa2dd4cc7 100644 --- 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} + suffix={} autoFocus value={searchQuery} onChange={setSearchQuery}