cb3 2

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+)
 

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,7 +319,7 @@ export const ClickableBox3 = (p: ClickableBox3Props & {ref?: React.Ref<MeasureRe
   const {onClick, onLongPress, hitSlop, ref, ...box2p} = p
 
   if (!isMobile) {
-    const {children, style: _style, onMouseOver, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, onContextMenu, testID, flex, title, tooltip} = 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 (
@@ -330,6 +331,7 @@ export const ClickableBox3 = (p: ClickableBox3Props & {ref?: React.Ref<MeasureRe
         onClick={onClick}
         onContextMenu={onContextMenu}
         onMouseDown={onMouseDown}
+        onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         onMouseMove={onMouseMove}
         onMouseOver={onMouseOver}

shared/menubar/index.desktop.tsx

@@ -118,53 +118,55 @@ const ChatRow = (p: {conv: Conversation; httpSrvAddress: string; httpSrvToken: s
   const timestamp = conv.timestamp ? TimestampUtil.formatTimeForConversationList(conv.timestamp) : ''
 
   return (
-    <Kb.ClickableBox
+    <Kb.ClickableBox3
       onClick={() => R.remoteDispatch(RemoteGen.createOpenChatFromWidget({conversationIDKey: conv.conversationIDKey}))}
-      style={styles.chatRow}
+      direction="horizontal"
+      fullWidth={true}
+      alignItems="center"
+      gap="tiny"
+      style={styles.chatRowInner}
     >
-      <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" gap="tiny" style={styles.chatRowInner}>
-        <HttpAvatar
-          name={avatarName}
-          isTeam={isTeam}
-          size={48}
-          httpSrvAddress={httpSrvAddress}
-          httpSrvToken={httpSrvToken}
-        />
-        <Kb.Box2 direction="vertical" flex={1} overflow="hidden" style={styles.chatRowText}>
-          <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" justifyContent="space-between">
-            <Kb.Box2 direction="horizontal" alignItems="center" gap="xtiny" overflow="hidden" style={styles.chatRowNameLeft}>
-              <Kb.Text type={conv.hasUnread ? 'BodyBold' : 'BodySemibold'} lineClamp={1} style={styles.chatRowName}>
-                {isTeam && conv.channelname ? `${name}#${conv.channelname}` : name}
-              </Kb.Text>
-              {conv.hasBadge && <Kb.Box2 direction="vertical" style={styles.chatBadge} />}
-            </Kb.Box2>
-            {!!timestamp && (
-              <Kb.Text
-                type="BodyTiny"
-                style={Kb.Styles.collapseStyles([
-                  styles.chatTimestamp,
-                  conv.hasUnread && Kb.Styles.globalStyles.fontBold,
-                ])}
-              >
-                {timestamp}
-              </Kb.Text>
-            )}
+      <HttpAvatar
+        name={avatarName}
+        isTeam={isTeam}
+        size={48}
+        httpSrvAddress={httpSrvAddress}
+        httpSrvToken={httpSrvToken}
+      />
+      <Kb.Box2 direction="vertical" flex={1} overflow="hidden" style={styles.chatRowText}>
+        <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" justifyContent="space-between">
+          <Kb.Box2 direction="horizontal" alignItems="center" gap="xtiny" overflow="hidden" style={styles.chatRowNameLeft}>
+            <Kb.Text type={conv.hasUnread ? 'BodyBold' : 'BodySemibold'} lineClamp={1} style={styles.chatRowName}>
+              {isTeam && conv.channelname ? `${name}#${conv.channelname}` : name}
+            </Kb.Text>
+            {conv.hasBadge && <Kb.Box2 direction="vertical" style={styles.chatBadge} />}
           </Kb.Box2>
-          {!!conv.snippetDecorated && (
+          {!!timestamp && (
             <Kb.Text
-              type="BodySmall"
-              lineClamp={1}
+              type="BodyTiny"
               style={Kb.Styles.collapseStyles([
-                conv.hasUnread ? styles.chatSnippetUnread : styles.chatSnippet,
+                styles.chatTimestamp,
                 conv.hasUnread && Kb.Styles.globalStyles.fontBold,
               ])}
             >
-              {conv.snippetDecorated}
+              {timestamp}
             </Kb.Text>
           )}
         </Kb.Box2>
+        {!!conv.snippetDecorated && (
+          <Kb.Text
+            type="BodySmall"
+            lineClamp={1}
+            style={Kb.Styles.collapseStyles([
+              conv.hasUnread ? styles.chatSnippetUnread : styles.chatSnippet,
+              conv.hasUnread && Kb.Styles.globalStyles.fontBold,
+            ])}
+          >
+            {conv.snippetDecorated}
+          </Kb.Text>
+        )}
       </Kb.Box2>
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }
 
@@ -191,17 +193,22 @@ const ChatPreview = (p: {conversationsToSend: ReadonlyArray<Conversation>; convL
 
 // Inline file updates (replaces FilesContainer + files.desktop.tsx with store-connected components)
 const FileUpdate = (p: {path: T.FS.Path; uploading: boolean; onClick: () => void}) => (
-  <Kb.ClickableBox className="hover-underline-container" onClick={p.onClick} style={styles.fileFullWidth}>
-    <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.fileUpdateRow} alignItems="flex-start">
-      <Kb.ImageIcon type="icon-file-16" style={styles.fileIcon} />
-      {p.uploading && (
-        <Kb.Box2 direction="vertical" style={styles.fileIconBadgeBox}>
-          <Kb.ImageIcon type="icon-addon-file-uploading" style={styles.fileIconBadge} />
-        </Kb.Box2>
-      )}
-      <Filename type="Body" path={p.path} />
-    </Kb.Box2>
-  </Kb.ClickableBox>
+  <Kb.ClickableBox3
+    className="hover-underline-container"
+    onClick={p.onClick}
+    direction="horizontal"
+    fullWidth={true}
+    alignItems="flex-start"
+    style={styles.fileUpdateRow}
+  >
+    <Kb.ImageIcon type="icon-file-16" style={styles.fileIcon} />
+    {p.uploading && (
+      <Kb.Box2 direction="vertical" style={styles.fileIconBadgeBox}>
+        <Kb.ImageIcon type="icon-addon-file-uploading" style={styles.fileIconBadge} />
+      </Kb.Box2>
+    )}
+    <Filename type="Body" path={p.path} />
+  </Kb.ClickableBox3>
 )
 
 const defaultNumFileOptionsShown = 3
@@ -642,11 +649,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     backgroundColor: Kb.Styles.globalColors.white,
     color: Kb.Styles.globalColors.black,
   },
-  chatRow: Kb.Styles.platformStyles({
-    isElectron: {
-      ...Kb.Styles.desktopStyles.clickable,
-    },
-  }),
   chatRowInner: Kb.Styles.padding(Kb.Styles.globalMargins.xtiny, Kb.Styles.globalMargins.xsmall),
   chatRowName: {flexShrink: 1},
 
@@ -655,7 +657,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   chatSnippet: {color: Kb.Styles.globalColors.black_50},
   chatSnippetUnread: {color: Kb.Styles.globalColors.black},
   chatTimestamp: {color: Kb.Styles.globalColors.black_50, flexShrink: 0, marginLeft: Kb.Styles.globalMargins.tiny},
-  fileFullWidth: {width: '100%'},
   fileIcon: {
     flexShrink: 0,
     ...Kb.Styles.size(16),

shared/profile/add-to-team.tsx

@@ -341,7 +341,7 @@ type RowProps = {
 
 const TeamRow = (props: RowProps) => {
   return (
-    <Kb.ClickableBox onClick={props.canAddThem ? () => props.onCheck(!props.checked) : undefined}>
+    <Kb.ClickableBox3 direction="vertical" fullWidth={true} onClick={props.canAddThem ? () => props.onCheck(!props.checked) : undefined}>
       <Kb.Box2 direction="horizontal" style={styles.teamRow}>
         <Kb.Checkbox disabled={!props.canAddThem} checked={props.checked} onCheck={props.onCheck} />
         <Kb.Box2 direction="vertical" relative={true} style={{display: 'flex'}}>
@@ -372,7 +372,7 @@ const TeamRow = (props: RowProps) => {
         </Kb.Box2>
       </Kb.Box2>
       {!isMobile && <Kb.Divider style={styles.divider} />}
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }
 

shared/profile/edit-avatar/index.tsx

@@ -159,7 +159,8 @@ const DesktopEditAvatar = (_p: Props) => {
           </Kb.Text>{' '}
           for one.
         </Kb.Text>
-        <Kb.ClickableBox
+        <Kb.ClickableBox3
+          direction="vertical"
           className={Kb.Styles.classNames('hoverbox', {filled: loading !== 'loaded'})}
           onClick={!loading ? filePickerOpen : undefined}
           style={{
@@ -191,7 +192,7 @@ const DesktopEditAvatar = (_p: Props) => {
               type="iconfont-camera"
             />
           )}
-        </Kb.ClickableBox>
+        </Kb.ClickableBox3>
         {loading === 'loaded' ? <Kb.Text type="Body">Click to select. Scroll to zoom.</Kb.Text> : null}
       </div>
       <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
@@ -311,12 +312,14 @@ const NativeAvatarUploadWrapper = (p: Props) => {
   const renderImageZoomer = () => {
     if (type === 'team' && !selectedImage) {
       return (
-        <Kb.ClickableBox
+        <Kb.ClickableBox3
+          direction="vertical"
+          centerChildren={true}
           style={Kb.Styles.collapseStyles([styles.placeholder, getImageStyle()])}
           onClick={onChooseNewAvatar}
         >
           <Kb.Icon type="iconfont-camera" sizeType="Huge" color={Kb.Styles.globalColors.black_10} />
-        </Kb.ClickableBox>
+        </Kb.ClickableBox3>
       )
     }
     return selectedImage ? (

shared/profile/generic/proofs-list.tsx

@@ -620,7 +620,10 @@ const ProviderPicker = ({
               renderItem={(_: unknown, provider: Provider) => (
                 <React.Fragment key={provider.name}>
                   <Kb.Divider />
-                  <Kb.ClickableBox
+                  <Kb.ClickableBox3
+                    direction="horizontal"
+                    alignItems="center"
+                    justifyContent="flex-start"
                     className="hover_background_color_blueLighter2"
                     onClick={() => onSelect(provider.key)}
                     style={styles.containerBox}
@@ -647,7 +650,7 @@ const ProviderPicker = ({
                       style={styles.iconArrow}
                       type="iconfont-arrow-right"
                     />
-                  </Kb.ClickableBox>
+                  </Kb.ClickableBox3>
                 </React.Fragment>
               )}
             />
@@ -1314,11 +1317,7 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       containerBox: {
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'row',
         height: isMobile ? 56 : 48,
-        justifyContent: 'flex-start',
       },
       description: {...rightColumnStyle},
       error: {

shared/profile/user/actions/index.tsx

@@ -208,14 +208,12 @@ const DropdownButton = (p: DropdownProps) => {
   const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup)
 
   return (
-    <Kb.ClickableBox onClick={showPopup} ref={popupAnchor}>
-      <Kb.Box2 direction="horizontal" fullWidth={true} gap="xsmall">
-        <Kb.Button onClick={undefined} mode="Secondary" style={styles.dropdownButton}>
-          <Kb.Icon color={Kb.Styles.globalColors.blue} type="iconfont-ellipsis" />
-        </Kb.Button>
-      </Kb.Box2>
+    <Kb.ClickableBox3 direction="horizontal" fullWidth={true} gap="xsmall" onClick={showPopup} ref={popupAnchor}>
+      <Kb.Button onClick={undefined} mode="Secondary" style={styles.dropdownButton}>
+        <Kb.Icon color={Kb.Styles.globalColors.blue} type="iconfont-ellipsis" />
+      </Kb.Button>
       {popup}
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }
 

shared/profile/user/friend.tsx

@@ -25,12 +25,12 @@ const Container = (ownProps: OwnProps) => {
     : followsYou ? ('icon-follow-me-21' as const) : ('icon-following-21' as const)
 
   return (
-    <Kb.ClickableBox onClick={onClick} style={{width: width}}>
-      <Kb.Box2
-        direction="vertical"
-        style={Kb.Styles.collapseStyles([styles.container, {width: width}])}
-        centerChildren={true}
-      >
+    <Kb.ClickableBox3
+      direction="vertical"
+      centerChildren={true}
+      style={Kb.Styles.collapseStyles([styles.container, {width: width}])}
+      onClick={onClick}
+    >
         <Kb.Avatar size={64} username={username} style={styles.avatar}>
           {!!followIconType && <Kb.ImageIcon type={followIconType} style={followSizeToStyle[64]} />}
         </Kb.Avatar>
@@ -45,8 +45,7 @@ const Container = (ownProps: OwnProps) => {
         <Kb.Text type="BodySmall" lineClamp={1} style={styles.fullname}>
           {fullname}
         </Kb.Text>
-      </Kb.Box2>
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }