Skip to content

move from box to box2 #28919

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrisnojima merged 6 commits into from
Feb 18, 2026
Merged

move from box to box2 #28919

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4262883
move from box to box2
chrisnojima Feb 18, 2026
4cf4984
WIP
chrisnojima Feb 18, 2026
01c4111
WIP
chrisnojima Feb 18, 2026
749395c
WIP
chrisnojima Feb 18, 2026
ee9f2e4
WIP
chrisnojima Feb 18, 2026
984f31c
WIP
chrisnojima Feb 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions shared/chat/audio/audio-send.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ const AudioSend = (props: Props) => {
<Portal hostName="audioSend" useFullScreenOverlay={false}>
<Kb.Box2 direction="horizontal" style={styles.container} fullWidth={true}>
<Kb.Box2 direction="horizontal" alignItems="center">
<Kb.Box style={styles.icon}>
<Kb.Box2 direction="vertical" centerChildren={true} style={styles.icon}>
<Kb.Icon type="iconfont-remove" onClick={cancelRecording} />
</Kb.Box>
</Kb.Box2>
{player}
</Kb.Box2>
<Kb.Button type="Default" small={true} style={styles.send} onClick={sendRecording} label="Send" />
Expand All @@ -63,9 +63,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
paddingRight: Kb.Styles.globalMargins.tiny,
},
icon: {
alignItems: 'center',
height: 32,
justifyContent: 'center',
marginRight: Kb.Styles.globalMargins.tiny,
width: 32,
},
Expand Down
16 changes: 8 additions & 8 deletions shared/chat/avatars.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const OverlayIcon = React.memo(function OverlayIcon(p: {
if (!type) return null

return (
<Kb.Box style={styles.mutedIcon}>
<Kb.Box2 direction="vertical" style={styles.mutedIcon}>
<Kb.Icon
className={Kb.Styles.classNames('overlay-icon', 'stroked', {
hovered: isHovered,
Expand All @@ -49,7 +49,7 @@ const OverlayIcon = React.memo(function OverlayIcon(p: {
type={type}
fontSize={16}
/>
</Kb.Box>
</Kb.Box2>
)
})

Expand Down Expand Up @@ -102,12 +102,12 @@ const Avatars = React.memo(function Avatars(p: Props) {

if (!participantTwo) {
return (
<Kb.Box style={containerStyle}>
<Kb.Box style={styles.outerBox}>
<Kb.Box2 direction="vertical" style={containerStyle}>
<Kb.Box2 direction="vertical" style={styles.outerBox}>
<Kb.Avatar username={participantOne} size={singleSize} style={{opacity}} />
<OverlayIcon isHovered={isHovered} isSelected={isSelected} isMuted={isMuted} isLocked={isLocked} />
</Kb.Box>
</Kb.Box>
</Kb.Box2>
</Kb.Box2>
)
}

Expand Down Expand Up @@ -144,10 +144,10 @@ const TeamAvatar = React.memo(function TeamAvatar(p: {
}) {
const {teamname, size, isSelected, isMuted, isHovered} = p
return (
<Kb.Box style={styles.container}>
<Kb.Box2 direction="vertical" style={styles.container}>
<Kb.Avatar teamname={teamname} size={size || 48} />
<OverlayIcon isSelected={isSelected} isMuted={isMuted} isHovered={isHovered} isLocked={false} />
</Kb.Box>
</Kb.Box2>
)
})

Expand Down
12 changes: 7 additions & 5 deletions shared/chat/blocking/block-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const CheckboxRow = (props: CheckboxRowProps) => (
onClick={() => props.onCheck(!props.checked)}
style={styles.shrink}
/>
<Kb.Box style={styles.iconBox} />
<Kb.Box2 direction="vertical" style={styles.iconBox} />
{props.info && (
<Kb.WithTooltip
tooltip={props.info}
Expand Down Expand Up @@ -94,7 +94,9 @@ const ReportOptions = (props: ReportOptionsProps) => {
style={styles.radioButton}
/>
))}
<Kb.Box
<Kb.Box2
direction="vertical"
fullWidth={true}
style={Kb.Styles.collapseStyles([
styles.feedback,
!showIncludeTranscript && styles.feedbackPaddingBottom,
Expand All @@ -109,7 +111,7 @@ const ReportOptions = (props: ReportOptionsProps) => {
onChangeText={props.setExtraNotes}
value={props.extraNotes}
/>
</Kb.Box>
</Kb.Box2>
{showIncludeTranscript && (
<CheckboxRow
text="Include the transcript of this chat"
Expand Down Expand Up @@ -421,9 +423,9 @@ const Container = React.memo(function BlockModal(ownProps: OwnProps) {
if (loadingWaiting) {
return (
<Kb.Modal mode="Default" header={header}>
<Kb.Box style={styles.loadingAnimationBox}>
<Kb.Box2 direction="vertical" style={styles.loadingAnimationBox}>
<Kb.Animation animationType="spinner" style={styles.loadingAnimation} />
</Kb.Box>
</Kb.Box2>
</Kb.Modal>
)
}
Expand Down
20 changes: 8 additions & 12 deletions shared/chat/conversation/attachment-fullscreen/index.desktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ type ArrowProps = {
const Arrow = (props: ArrowProps) => {
const {left, onClick} = props
return (
<Kb.Box
<Kb.ClickableBox
className="hover_background_color_black background_color_black_50 fade-background-color"
onClick={e => {
e.stopPropagation()
Expand All @@ -26,7 +26,7 @@ const Arrow = (props: ArrowProps) => {
color={Kb.Styles.globalColors.white}
style={Kb.Styles.collapseStyles([styles.arrow, left && styles.arrowLeft, !left && styles.arrowRight])}
/>
</Kb.Box>
</Kb.ClickableBox>
)
}

Expand Down Expand Up @@ -80,8 +80,8 @@ const Fullscreen = React.memo(function Fullscreen(p: Props) {

return (
<Kb.PopupDialog onClose={onClose} fill={true}>
<Kb.Box style={styles.container}>
<Kb.Box style={styles.headerFooter}>
<Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
<Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.headerFooter}>
<Kb.Markdown lineClamp={2} style={Kb.Styles.globalStyles.flexOne} styleOverride={titleOverride}>
{title}
</Kb.Markdown>
Expand All @@ -96,7 +96,7 @@ const Fullscreen = React.memo(function Fullscreen(p: Props) {
onClick={showPopup}
/>
{popup}
</Kb.Box>
</Kb.Box2>
{path && (
<Kb.BoxGrow>
<Kb.ClickableBox style={styles.contentsFit} key={path}>
Expand Down Expand Up @@ -126,7 +126,7 @@ const Fullscreen = React.memo(function Fullscreen(p: Props) {
</Kb.ClickableBox>
</Kb.BoxGrow>
)}
<Kb.Box style={styles.headerFooter}>
<Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.headerFooter}>
{!!progressLabel && (
<Kb.Text
type="BodySmall"
Expand Down Expand Up @@ -154,8 +154,8 @@ const Fullscreen = React.memo(function Fullscreen(p: Props) {
Show in {Kb.Styles.fileUIName}
</Kb.Text>
)}
</Kb.Box>
</Kb.Box>
</Kb.Box2>
</Kb.Box2>
</Kb.PopupDialog>
)
})
Expand Down Expand Up @@ -183,7 +183,6 @@ const styles = Kb.Styles.styleSheetCreate(
width: 36,
},
}),
container: {...Kb.Styles.globalStyles.flexBoxColumn, height: '100%', width: '100%'},
contentsFit: {
...Kb.Styles.globalStyles.flexBoxRow,
flex: 1,
Expand All @@ -192,12 +191,9 @@ const styles = Kb.Styles.styleSheetCreate(
},
error: {color: Kb.Styles.globalColors.redDark},
headerFooter: {
...Kb.Styles.globalStyles.flexBoxRow,
alignItems: 'center',
height: 32,
paddingLeft: Kb.Styles.globalMargins.tiny,
paddingRight: Kb.Styles.globalMargins.tiny,
width: '100%',
},
link: Kb.Styles.platformStyles({
isElectron: {color: Kb.Styles.globalColors.black_50, cursor: 'pointer'},
Expand Down
4 changes: 2 additions & 2 deletions shared/chat/conversation/command-markdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const CommandMarkdown = () => {
const body = md?.body ?? ''
const title = md?.title ?? undefined
return (
<Kb.Box style={styles.container}>
<Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
{!!title && (
<Kb.Box2 direction="horizontal" fullWidth={true} style={styles.title}>
<Kb.Markdown>{title}</Kb.Markdown>
Expand All @@ -17,7 +17,7 @@ const CommandMarkdown = () => {
<Kb.Markdown selectable={true}>{body}</Kb.Markdown>
</Kb.Box2>
</Kb.ScrollView>
</Kb.Box>
</Kb.Box2>
)
}

Expand Down
4 changes: 2 additions & 2 deletions shared/chat/conversation/command-status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const Container = () => {
}

return (
<Kb.Box style={styles.outerContainer}>
<Kb.Box2 direction="vertical" fullWidth={true} style={styles.outerContainer}>
<Kb.Box2
direction="horizontal"
fullWidth={true}
Expand Down Expand Up @@ -73,7 +73,7 @@ const Container = () => {
})}
</Kb.Box2>
</Kb.Box2>
</Kb.Box>
</Kb.Box2>
)
}

Expand Down
11 changes: 4 additions & 7 deletions shared/chat/conversation/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import * as Kb from '@/common-adapters'
const ConversationError = () => {
const text = Chat.useChatContext(s => s.meta.snippet ?? '')
return (
<Kb.Box style={styles.container}>
<Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
<Kb.Text type="Header">There was an error loading this conversation.</Kb.Text>
<Kb.Text style={styles.body} type="Body">
The error is:
</Kb.Text>
<Kb.Box style={styles.errorBox}>
<Kb.Box2 direction="horizontal" fullWidth={true} style={styles.errorBox}>
<Kb.CopyableText style={styles.errorText} value={text} />
</Kb.Box>
</Kb.Box>
</Kb.Box2>
</Kb.Box2>
)
}

Expand All @@ -21,12 +21,9 @@ const styles = Kb.Styles.styleSheetCreate(
({
body: {marginTop: Kb.Styles.globalMargins.small},
container: {
...Kb.Styles.globalStyles.flexBoxColumn,
padding: Kb.Styles.globalMargins.medium,
width: '100%',
},
errorBox: {
...Kb.Styles.globalStyles.flexBoxRow,
marginTop: Kb.Styles.globalMargins.small,
},
errorText: {flexGrow: 1},
Expand Down
8 changes: 4 additions & 4 deletions shared/chat/conversation/giphy/index.desktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const GiphySearch = () => {
)
}
return (
<Kb.Box style={styles.outerContainer}>
<Kb.Box2 direction="vertical" style={styles.outerContainer}>
<Kb.Box2Div
direction="vertical"
ref={divRef}
Expand Down Expand Up @@ -56,7 +56,7 @@ const GiphySearch = () => {
const margin = -margins[index]! / 2 - 1
return p.targetUrl ? (
<Kb.Box2 key={String(index)} direction="horizontal" style={styles.imageContainer}>
<Kb.Box style={Kb.Styles.collapseStyles([{marginLeft: margin, marginRight: margin}])}>
<Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([{marginLeft: margin, marginRight: margin}])}>
<UnfurlImage
autoplayVideo={true}
height={gridHeight}
Expand All @@ -66,7 +66,7 @@ const GiphySearch = () => {
url={p.previewUrl}
width={scaledWidth(p.previewWidth)}
/>
</Kb.Box>
</Kb.Box2>
</Kb.Box2>
) : null
})}
Expand All @@ -84,7 +84,7 @@ const GiphySearch = () => {
))}
</Kb.Box2Div>
<Kb.Icon type="icon-powered-by-giphy-120-26" style={styles.poweredBy} />
</Kb.Box>
</Kb.Box2>
)
}

Expand Down
29 changes: 13 additions & 16 deletions shared/chat/conversation/input-area/normal2/platform-input.desktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,9 +137,9 @@ const GiphyButton = React.memo(function GiphyButton() {
const onGiphyToggle = toggleGiphyPrefill

return (
<Kb.Box style={styles.icon} tooltip="GIF" className="tooltip-top-left">
<Kb.Box2 direction="vertical" style={styles.icon} tooltip="GIF" className="tooltip-top-left">
<Kb.Icon onClick={onGiphyToggle} type="iconfont-gif" />
</Kb.Box>
</Kb.Box2>
)
})

Expand Down Expand Up @@ -184,21 +184,21 @@ const FileButton = React.memo(function FileButton(p: {
)

return (
<Kb.Box style={styles.icon} tooltip="Attachment" className="tooltip-top-left">
<Kb.Box2 direction="vertical" style={styles.icon} tooltip="Attachment" className="tooltip-top-left">
<Kb.Icon onClick={filePickerOpen} type="iconfont-attachment" />
<input type="file" style={styles.hidden} ref={setRef} onChange={pickFile} multiple={true} />
</Kb.Box>
</Kb.Box2>
)
})

const Footer = () => {
return (
<Kb.Box style={styles.footerContainer}>
<Kb.Box2 direction="horizontal" fullWidth={true} alignItems="flex-start" style={styles.footerContainer}>
<Typing />
<Kb.Text lineClamp={1} type="BodyTiny" style={styles.footer} selectable={true}>
{`*bold*, _italics_, \`code\`, >quote, !>spoiler<!, @user, @team, #channel`}
</Kb.Text>
</Kb.Box>
</Kb.Box2>
)
}

Expand Down Expand Up @@ -418,8 +418,10 @@ const PlatformInput = React.memo(function PlatformInput(p: Props) {
<>
{popup}
<KeyEventHandler onKeyDown={globalKeyDownPressHandler} onKeyPress={globalKeyDownPressHandler}>
<Kb.Box style={styles.container}>
<Kb.Box
<Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
<Kb.Box2
direction="horizontal"
alignItems="flex-end"
style={Kb.Styles.collapseStyles([
styles.inputWrapper,
isEditing && styles.inputWrapperEditing,
Expand Down Expand Up @@ -458,9 +460,9 @@ const PlatformInput = React.memo(function PlatformInput(p: Props) {
/>
</Kb.Box2>
<SideButtons cannotWrite={cannotWrite} setHtmlInputRef={setHtmlInputRef} inputRef={inputRef} />
</Kb.Box>
</Kb.Box2>
<Footer />
</Kb.Box>
</Kb.Box2>
</KeyEventHandler>
</>
)
Expand All @@ -471,9 +473,7 @@ const styles = Kb.Styles.styleSheetCreate(
({
cancelEditingBtn: {margin: Kb.Styles.globalMargins.xtiny},
container: {
...Kb.Styles.globalStyles.flexBoxColumn,
backgroundColor: Kb.Styles.globalColors.white,
width: '100%',
},
explodingIconContainer: Kb.Styles.platformStyles({
common: {
Expand Down Expand Up @@ -501,8 +501,6 @@ const styles = Kb.Styles.styleSheetCreate(
textAlign: 'right',
},
footerContainer: {
...Kb.Styles.globalStyles.flexBoxRow,
alignItems: 'flex-start',
justifyContent: 'space-between',
},
hidden: {display: 'none'},
Expand Down Expand Up @@ -533,8 +531,7 @@ const styles = Kb.Styles.styleSheetCreate(
},
inputEditing: {color: Kb.Styles.globalColors.blackOrBlack},
inputWrapper: {
...Kb.Styles.globalStyles.flexBoxRow,
alignItems: 'flex-end',
alignSelf: 'stretch',
backgroundColor: Kb.Styles.globalColors.white,
borderColor: Kb.Styles.globalColors.black_20,
borderRadius: 4,
Expand Down
Loading