clickablebox 3 - 1

plans/clickablebox3.md

@@ -24,7 +24,7 @@
 ## ✅ Done: ClickableBox3 implemented and devices/ migrated
 
 Committed in `3ac6c14b82`. Key points for future reference:
-- `ClickableBox3Props = Box2Props & {onClick?, onLongPress?, hitSlop?}` — `direction` required
+- `ClickableBox3Props = Box2Props & {onClick?, onLongPress?, hitSlop?}` — `direction` required; desktop mouse events (`onMouseDown/Up/Leave/Move/Over/Enter`, `onContextMenu`) are in `Box2Props` and passed through to the `<div>`
 - `box2ClassNames()` extracted from Box2 and shared; `box2SharedProps` exported from `box.tsx`
 - `devices/` pilot complete: 3 CB2 usages → CB3, inner Box2 wrappers eliminated, `mobileAddHeader` style simplified
 
@@ -38,19 +38,19 @@ Use `migrate-clickable-box` skill for each chunk. Run `yarn lint && yarn tsc` an
 - [x] `shared/devices/` (6 total)
 
 ### Round 1 — small
-- [ ] `shared/git/` (3)
-- [ ] `shared/incoming-share/` (2)
-- [ ] `shared/signup/` (2)
-- [ ] `shared/provision/` (4)
-- [ ] `shared/people/` (2)
-- [ ] `shared/settings/` (4)
-- [ ] `shared/profile/` (10)
+- [x] `shared/git/` (3)
+- [x] `shared/incoming-share/` (2)
+- [x] `shared/signup/` (2)
+- [x] `shared/provision/` (4)
+- [x] `shared/people/` (2)
+- [x] `shared/settings/` (4)
+- [x] `shared/profile/` (10)
 
 ### Round 2 — medium
-- [ ] `shared/tracker/` (4)
-- [ ] `shared/menubar/` (3)
-- [ ] `shared/app/` (4)
-- [ ] `shared/router-v2/` (9)
+- [x] `shared/tracker/` (4)
+- [x] `shared/menubar/` (3)
+- [x] `shared/app/` (4)
+- [x] `shared/router-v2/` (9)
 - [ ] `shared/teams/` (25+)
 - [ ] `shared/team-building/` (9+)
 

plans/todo.md

@@ -1,6 +1,7 @@
 go screen by screen and find cleanup
 legends to more desktop
 move to clickablebox3
+crypto screens button doesn't stick to keyboard well
 automated testing of all screens
 any leftover zustand store
 legend list for chat thread native

shared/.maestro/e2e/flows/crypto-subtabs.yaml

@@ -17,11 +17,6 @@ appId: keybase.ios
     visible:
       id: "crypto-encrypt-input"
     timeout: 3000
-- takeScreenshot: tests/results/ios-debug/crypto-subtabs-encrypt-keyboard
-- tapOn:
-    point: "5%,5%"
-- waitForAnimationToEnd:
-    timeout: 500
 - takeScreenshot: tests/results/ios-debug/crypto-subtabs-encrypt
 - tapOn:
     id: "backButton"
@@ -32,11 +27,6 @@ appId: keybase.ios
     visible:
       id: "crypto-decrypt-input"
     timeout: 3000
-- takeScreenshot: tests/results/ios-debug/crypto-subtabs-decrypt-keyboard
-- tapOn:
-    point: "5%,5%"
-- waitForAnimationToEnd:
-    timeout: 500
 - takeScreenshot: tests/results/ios-debug/crypto-subtabs-decrypt
 - tapOn:
     id: "backButton"
@@ -47,11 +37,6 @@ appId: keybase.ios
     visible:
       id: "crypto-sign-input"
     timeout: 3000
-- takeScreenshot: tests/results/ios-debug/crypto-subtabs-sign-keyboard
-- tapOn:
-    point: "5%,5%"
-- waitForAnimationToEnd:
-    timeout: 500
 - takeScreenshot: tests/results/ios-debug/crypto-subtabs-sign
 - tapOn:
     id: "backButton"
@@ -62,11 +47,6 @@ appId: keybase.ios
     visible:
       id: "crypto-verify-input"
     timeout: 3000
-- takeScreenshot: tests/results/ios-debug/crypto-subtabs-verify-keyboard
-- tapOn:
-    point: "5%,5%"
-- waitForAnimationToEnd:
-    timeout: 500
 - takeScreenshot: tests/results/ios-debug/crypto-subtabs-verify
 - tapOn:
     id: "backButton"

shared/.maestro/e2e/flows/devices-view.yaml

@@ -14,3 +14,4 @@ appId: keybase.ios
     visible:
       id: "devices-row"
     timeout: 3000
+- takeScreenshot: tests/results/ios-debug/devices-view

shared/.maestro/e2e/flows/files-browse.yaml

@@ -12,3 +12,4 @@ appId: keybase.ios
     visible:
       id: "files-browser"
     timeout: 3000
+- takeScreenshot: tests/results/ios-debug/files-browse

shared/.maestro/e2e/flows/settings-navigation.yaml

@@ -13,3 +13,4 @@ appId: keybase.ios
     visible:
       text: "Email & phone"
     timeout: 3000
+- takeScreenshot: tests/results/ios-debug/settings-navigation

shared/.maestro/e2e/flows/teams-browse.yaml

@@ -7,6 +7,7 @@ appId: keybase.ios
     visible:
       id: "teams-list"
     timeout: 3000
+- takeScreenshot: tests/results/ios-debug/teams-browse
 - runFlow:
     when:
       visible:

shared/app/global-errors.tsx

@@ -213,7 +213,7 @@ const GlobalError = () => {
   }
 
   return (
-    <Kb.ClickableBox style={stylesContainer} onClick={onExpandClick}>
+    <Kb.ClickableBox3 style={stylesContainer} onClick={onExpandClick} direction="vertical">
       <Kb.Box2 direction="horizontal" flex={1} style={styles.innerContainer}>
         <Kb.Text center={true} type="BodyBig" style={styles.summary}>
           {summary}
@@ -239,7 +239,7 @@ const GlobalError = () => {
           {details}
         </Kb.Text>
       </Kb.ScrollView>
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }
 

shared/app/runtime-stats.tsx

@@ -226,8 +226,7 @@ const RuntimeStatsDesktop = ({stats}: Props) => {
   return (
     <>
       <Kb.BoxGrow style={styles.boxGrow}>
-        <Kb.ClickableBox onClick={() => setMoreLogs(m => !m)}>
-          <Kb.Box2 direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}>
+        <Kb.ClickableBox3 onClick={() => setMoreLogs(m => !m)} direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}>
             {!moreLogs &&
               stats.processStats?.map((stat, i) => {
                 return (
@@ -303,8 +302,7 @@ const RuntimeStatsDesktop = ({stats}: Props) => {
               <Kb.Box style={styles.radarContainer} forwardedRef={refContainer} onClick={toggleRadar} />
             )*/}
             <LogStats num={moreLogs ? 25 : 5} />
-          </Kb.Box2>
-        </Kb.ClickableBox>
+        </Kb.ClickableBox3>
       </Kb.BoxGrow>
     </>
   )
@@ -333,9 +331,9 @@ const RuntimeStatsMobile = ({stats}: Props) => {
         style={showLogs ? styles.modalLogStats : styles.modalLogStatsHidden}
         gap="xtiny"
       >
-        <Kb.ClickableBox onClick={() => setShowLogs(s => !s)}>
+        <Kb.ClickableBox3 onClick={() => setShowLogs(s => !s)} direction="vertical">
           <LogStats />
-        </Kb.ClickableBox>
+        </Kb.ClickableBox3>
       </Kb.Box2>
       <Kb.Box2 direction="horizontal" style={styles.container} gap="xtiny" pointerEvents="none">
         {processStat && (

shared/common-adapters/box.tsx

@@ -24,6 +24,7 @@ export type Box2Props = {
   onDrop?: (syntheticDragEvent: React.DragEvent) => void
   onLayout?: (evt: LayoutEvent) => void
   onMouseDown?: (syntheticEvent: React.MouseEvent) => void
+  onMouseEnter?: (syntheticEvent: React.MouseEvent) => void
   onMouseMove?: (syntheticEvent: React.MouseEvent) => void
   onMouseLeave?: (syntheticEvent: React.MouseEvent) => void
   onMouseUp?: (syntheticEvent: React.MouseEvent) => void
@@ -318,31 +319,42 @@ export const ClickableBox3 = (p: ClickableBox3Props & {ref?: React.Ref<MeasureRe
   const {onClick, onLongPress, hitSlop, ref, ...box2p} = p
 
   if (!isMobile) {
-    const {children, style: _style, onMouseOver, testID, flex} = box2p
+    const {children, style: _style, onMouseOver, onMouseEnter, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, onContextMenu, testID, flex, title, tooltip} = box2p
     const cn = box2ClassNames(box2p, 'clickable-box2')
     const s = Styles.collapseStyles([flex != null && flex !== 1 ? {flex} : undefined, _style]) as React.CSSProperties
     return (
       <div
         ref={ref as React.Ref<HTMLDivElement>}
         className={cn}
+        data-testid={testID}
+        data-tooltip={tooltip}
         onClick={onClick}
+        onContextMenu={onContextMenu}
+        onMouseDown={onMouseDown}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onMouseMove={onMouseMove}
         onMouseOver={onMouseOver}
+        onMouseUp={onMouseUp}
         style={s}
-        data-testid={testID}
+        title={title}
       >
         {children}
       </div>
     )
   }
 
-  const {style: s, children: c} = box2SharedProps(box2p)
+  const {style: s, children: c, onLayout, collapsable, pointerEvents} = box2SharedProps(box2p)
   return (
     <Pressable
       ref={ref as React.Ref<View>}
-      onPress={onClick ? () => { onClick() } : undefined}
+      collapsable={collapsable}
+      hitSlop={hitSlop}
+      onLayout={onLayout}
       onLongPress={onLongPress}
+      onPress={onClick ? () => { onClick() } : undefined}
+      pointerEvents={pointerEvents}
       style={s}
-      hitSlop={hitSlop}
       testID={box2p.testID}
     >
       {c}

shared/git/index.tsx

@@ -194,15 +194,15 @@ const loading = C.Waiting.useAnyWaiting(C.waitingKeyGitLoading)
       <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} relative={true} testID={TestIDs.GIT_REPO_LIST}>
         {!!error && <Kb.Banner color="red">{error.message}</Kb.Banner>}
         {isMobile && (
-          <Kb.ClickableBox ref={popupAnchor} style={styles.header} onClick={showPopup}>
+          <Kb.ClickableBox3 ref={popupAnchor} direction="horizontal" centerChildren={true} style={styles.header} onClick={showPopup}>
             <Kb.Icon
               type="iconfont-new"
               style={{marginRight: Kb.Styles.globalMargins.tiny}}
               color={Kb.Styles.globalColors.blue}
               fontSize={20}
             />
             <Kb.Text type="BodyBigLink">New encrypted git repository...</Kb.Text>
-          </Kb.ClickableBox>
+          </Kb.ClickableBox3>
         )}
         <NewContext value={badged}>
           <Kb.SectionList
@@ -238,8 +238,6 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       header: {
-        ...Kb.Styles.globalStyles.flexBoxCenter,
-        ...Kb.Styles.globalStyles.flexBoxRow,
         flexShrink: 0,
         height: 48,
       },

shared/git/row.tsx

@@ -119,13 +119,16 @@ function ConnectedRow(ownProps: OwnProps) {
             expanded && {backgroundColor: Kb.Styles.globalColors.white},
           ])}
         >
-          <Kb.ClickableBox
+          <Kb.ClickableBox3
             onClick={onToggleExpand}
-            style={expanded ? styles.rowClickExpanded : styles.rowClick}
-            hoverColor={isMobile ? undefined : Kb.Styles.globalColors.transparent}
-            underlayColor={Kb.Styles.globalColors.transparent}
+            direction="horizontal"
+            fullWidth={true}
+            alignItems="center"
+            style={Kb.Styles.collapseStyles([
+              expanded ? styles.rowClickExpanded : styles.rowClick,
+              styles.rowTop,
+            ])}
           >
-            <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.rowTop}>
               <Kb.Icon
                 type={expanded ? 'iconfont-caret-down' : 'iconfont-caret-right'}
                 style={styles.iconCaret}
@@ -144,8 +147,7 @@ function ConnectedRow(ownProps: OwnProps) {
               {isNew && (
                 <Kb.Meta title="new" style={styles.meta} backgroundColor={Kb.Styles.globalColors.orange} />
               )}
-            </Kb.Box2>
-          </Kb.ClickableBox>
+          </Kb.ClickableBox3>
           {expanded && (
             <Kb.Box2 direction="vertical" fullWidth={true} style={styles.rowBottom}>
               <Kb.Box2
@@ -335,16 +337,12 @@ const styles = Kb.Styles.styleSheetCreate(
         paddingLeft: Kb.Styles.globalMargins.medium,
       },
       rowClick: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         paddingBottom: Kb.Styles.globalMargins.tiny,
         paddingTop: Kb.Styles.globalMargins.tiny,
-        width: '100%',
       },
       rowClickExpanded: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         paddingBottom: 0,
         paddingTop: Kb.Styles.globalMargins.tiny,
-        width: '100%',
       },
 
       rowStyle: {

shared/incoming-share/index.tsx

@@ -157,10 +157,10 @@ const useFooter = (incomingShareItems: ReadonlyArray<T.RPCGen.IncomingShareItem>
     ? undefined
     : {
         content: (
-          <Kb.ClickableBox style={styles.footer} onClick={saveInFiles}>
+          <Kb.ClickableBox3 direction="horizontal" centerChildren={true} fullWidth={true} onClick={saveInFiles}>
             <Kb.Icon type="iconfont-file" color={Kb.Styles.globalColors.blue} style={styles.footerIcon} />
             <Kb.Text type="BodyBigLink">Save in Files</Kb.Text>
-          </Kb.ClickableBox>
+          </Kb.ClickableBox3>
         ),
       }
 }
@@ -335,11 +335,6 @@ const IncomingShareMain = (props: IncomingShareMainProps) => {
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
-  footer: {
-    ...Kb.Styles.globalStyles.flexBoxRow,
-    ...Kb.Styles.centered(),
-    width: '100%',
-  },
   footerIcon: {
     marginRight: Kb.Styles.globalMargins.tiny,
   },