style helpers. style skill#29248
Merged
chrisnojima merged 30 commits intoMay 27, 2026
Merged
Conversation
…H/V, size helpers
…paddingH/V, marginH/V, size
…m size gap detector
There was a problem hiding this comment.
Pull request overview
This PR introduces new shared style helpers (borders/dividers/ellipsis/spacing/size), adds a style-auditing script + skill doc, and refactors many TSX style objects to use the helpers for consistency and easier future migrations.
Changes:
- Added new style helpers in
shared/styles/index.tsx(e.g.border,topDivider,roundedBottom,textEllipsis,paddingH/V,marginH/V,size). - Added
shared/scripts/analyze-styles.mtsplusskill/keybase-style-analysis/SKILL.mdto extract/analyze style patterns and helper opportunities. - Updated a large set of UI components to replace repeated
paddingLeft/paddingRight,height/width, border boilerplate, etc. with the new helpers.
Reviewed changes
Copilot reviewed 210 out of 210 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| skill/keybase-style-analysis/SKILL.md | Documents workflow for extracting/analyzing style helper opportunities. |
| shared/styles/index.tsx | Adds new reusable style helper functions/constants. |
| shared/scripts/analyze-styles.mts | New extractor/analyzer/report generator for style objects and helper “gap” detection. |
| shared/wallets/wallet-popup.tsx | Refactors padding/size usage to helpers. |
| shared/wallets/remove-account.tsx | Refactors horizontal padding to paddingH. |
| shared/wallets/really-remove-account.tsx | Refactors horizontal padding to paddingH. |
| shared/wallets/markdown-memo.tsx | Refactors vertical margin to marginV. |
| shared/unlock-folders/success.desktop.tsx | Refactors inline padding to paddingH. |
| shared/unlock-folders/device-list.desktop.tsx | Refactors vertical padding to paddingV. |
| shared/tracker/main2.desktop.tsx | Refactors full-size height/width to size('100%'). |
| shared/tracker/index.desktop.tsx | Refactors padding and icon sizing to helpers. |
| shared/tracker/bio.tsx | Refactors repeated padding to paddingH. |
| shared/teams/team/team-info.tsx | Refactors border/footer styling to border, topDivider, roundedBottom. |
| shared/teams/team/tabs.tsx | Refactors horizontal padding to paddingH. |
| shared/teams/team/settings-tab/retention/index.tsx | Refactors border boilerplate to border. |
| shared/teams/team/settings-tab/channel-popup.tsx | Refactors horizontal padding to paddingH. |
| shared/teams/team/rows/emoji-row/header.tsx | Refactors horizontal margin to marginH. |
| shared/teams/team/new-header.tsx | Refactors border boilerplate to border. |
| shared/teams/team/member/edit-channel.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/teams/team/member/add-to-channels.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/teams/role-picker.tsx | Refactors padding to padding/paddingV. |
| shared/teams/rename-team.tsx | Refactors horizontal padding to paddingH. |
| shared/teams/new-team/wizard/new-team-info.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/teams/new-team/wizard/create-subteams.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/teams/new-team/wizard/create-channels.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/teams/new-team/wizard/add-subteam-members.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/teams/new-team/index.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/teams/main/team-row.tsx | Refactors fixed square sizing to size. |
| shared/teams/main/index.tsx | Refactors border boilerplate to border. |
| shared/teams/main/banner.tsx | Refactors sizing/margins/padding to helpers. |
| shared/teams/join-team/join-from-invite.tsx | Refactors horizontal margin to marginH. |
| shared/teams/join-team/container.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/teams/invite-by-email.tsx | Refactors inline padding to paddingH. |
| shared/teams/external-team.tsx | Refactors horizontal margin to marginH. |
| shared/teams/emojis/common.tsx | Refactors padding and full-size sizing to helpers. |
| shared/teams/emojis/add-emoji.tsx | Refactors border boilerplate and sizing to helpers. |
| shared/teams/emojis/add-alias.tsx | Refactors fixed sizing to size. |
| shared/teams/edit-team-description.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/teams/confirm-modals/really-leave-team/last-owner.tsx | Refactors sizing and modal footer to helpers. |
| shared/teams/confirm-modals/really-leave-team/index.tsx | Refactors horizontal margin to marginH. |
| shared/teams/confirm-modals/confirm-remove-from-channel.tsx | Refactors border boilerplate to border. |
| shared/teams/confirm-modals/confirm-kick-out.tsx | Refactors border boilerplate and sizing to helpers. |
| shared/teams/common/contacts-list.native.tsx | Refactors sizing and margin to helpers. |
| shared/teams/common/channels-widget.tsx | Refactors padding and border boilerplate to helpers. |
| shared/teams/channel/tabs.tsx | Refactors horizontal padding to paddingH. |
| shared/teams/add-members-wizard/confirm.tsx | Refactors padding and modal footer to helpers. |
| shared/teams/add-members-wizard/add-phone.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/teams/add-members-wizard/add-email.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/team-building/user-bubble.tsx | Refactors margin/sizing to helpers. |
| shared/team-building/team-box.tsx | Refactors vertical padding to paddingV. |
| shared/team-building/search-result/user-result.tsx | Refactors sizing to size. |
| shared/team-building/search-result/common-result.tsx | Refactors icon sizing to size. |
| shared/team-building/phone-search.tsx | Refactors vertical padding to paddingV. |
| shared/team-building/list-body.tsx | Refactors vertical padding and sizing to helpers. |
| shared/team-building/index.tsx | Refactors progress sizing to size. |
| shared/team-building/go-button.tsx | Refactors padding/margins to helpers. |
| shared/team-building/email-search.tsx | Refactors vertical padding to paddingV. |
| shared/team-building/contact-restricted.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/settings/typography.tsx | Refactors margins/padding to helpers. |
| shared/settings/sub-nav/settings-item.tsx | Refactors horizontal padding to paddingH. |
| shared/settings/root-phone.tsx | Refactors padding to padding shorthand. |
| shared/settings/password.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/settings/notifications/push-prompt.tsx | Refactors rounded bottom to roundedBottom. |
| shared/settings/logout.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/settings/icons.tsx | Refactors fixed sizing to size. |
| shared/settings/delete-confirm/check-passphrase.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/settings/chat.tsx | Refactors padding/margins to helpers. |
| shared/settings/archive/modal.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/settings/archive/index.tsx | Refactors full-size scroll styling to size('100%'). |
| shared/settings/account/index.tsx | Refactors progress sizing to size. |
| shared/settings/account/add-modals.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/router-v2/screen-layout.tsx | Refactors modal footer to topDivider. |
| shared/router-v2/screen-layout-modal.desktop.tsx | Refactors header padding and modal footer to helpers. |
| shared/router-v2/header/index.desktop.tsx | Refactors icon sizing to size. |
| shared/router-v2/account-switcher/index.tsx | Refactors horizontal padding to paddingH. |
| shared/provision/username-or-email.tsx | Refactors padding/full-size sizing to helpers. |
| shared/provision/troubleshooting.tsx | Refactors border boilerplate, margins, padding, sizing to helpers. |
| shared/provision/select-other-device.tsx | Refactors padding to paddingH/V. |
| shared/provision/password.tsx | Refactors padding/full-size sizing to helpers. |
| shared/provision/code-page/container.tsx | Refactors padding and modal footer to helpers. |
| shared/profile/user/index.tsx | Refactors padding/margins/full-size sizing to helpers. |
| shared/profile/showcase-team-offer.tsx | Refactors padding shorthand usage. |
| shared/profile/search.tsx | Refactors margin and padding to helpers. |
| shared/profile/generic/shared.tsx | Refactors repeated sizing to size. |
| shared/profile/generic/proofs-list.tsx | Refactors desktop ellipsis styling to textEllipsis. |
| shared/profile/edit-avatar/index.tsx | Refactors sizing/margins/padding and modal footer to helpers. |
| shared/profile/add-to-team.tsx | Refactors full-size sizing, padding/margins, modal footer to helpers. |
| shared/pinentry/index.desktop.tsx | Refactors inline padding to paddingH. |
| shared/people/item.tsx | Refactors vertical padding to paddingV (and moves borderStyle). |
| shared/people/index.tsx | Refactors progress sizing to size. |
| shared/people/follow-suggestions.tsx | Refactors inline padding to paddingH. |
| shared/menubar/out-of-date.tsx | Refactors horizontal padding to paddingH. |
| shared/menubar/index.desktop.tsx | Refactors size/padding/margins/full-size sizing to helpers. |
| shared/login/reset/modal.tsx | Refactors modal footer, sizing, and padding to helpers. |
| shared/login/reset/confirm.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/login/reset/confirm.test.tsx | Updates mocked Styles exports for new helpers used by reset components. |
| shared/login/recover-password/error-modal.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/login/forms/container.tsx | Refactors padding and full-size sizing to helpers. |
| shared/incoming-share/index.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/git/select-channel.tsx | Refactors padding to paddingH/V. |
| shared/git/row.tsx | Refactors horizontal padding to paddingH. |
| shared/git/delete-repo.tsx | Refactors vertical margin to marginV. |
| shared/fs/nav-header/mobile-header.tsx | Refactors padding shorthand usage. |
| shared/fs/nav-header/actions.tsx | Refactors horizontal margin to marginH. |
| shared/fs/footer/upload.tsx | Refactors padding and desktop ellipsis styling to textEllipsis. |
| shared/fs/footer/download.tsx | Refactors desktop ellipsis styling to textEllipsis. |
| shared/fs/filepreview/pdf-view.tsx | Refactors full-size sizing to size('100%'). |
| shared/fs/filepreview/default-view.tsx | Refactors horizontal padding to paddingH. |
| shared/fs/filepreview/av-view.tsx | Refactors vertical margin to marginV. |
| shared/fs/common/tlf-info-line.tsx | Refactors desktop ellipsis styling to textEllipsis. |
| shared/fs/common/sfmi-popup.tsx | Refactors padding shorthand usage. |
| shared/fs/common/path-status-icon.tsx | Refactors padding/margins/sizing to helpers. |
| shared/fs/common/item-icon.tsx | Refactors badge sizing to size. |
| shared/fs/banner/system-file-manager-integration-banner/kext-permission-popup.tsx | Refactors sizing to size. |
| shared/devices/index.tsx | Refactors header padding and border boilerplate to helpers. |
| shared/devices/device-revoke.tsx | Refactors border boilerplate and vertical margin to helpers. |
| shared/devices/add-device.tsx | Refactors border boilerplate to border. |
| shared/desktop/remote/drag-header.desktop.tsx | Refactors horizontal padding to paddingH. |
| shared/desktop/remote/component-loader.desktop.tsx | Refactors full-size sizing to size('100%'). |
| shared/crypto/sub-nav/left-nav.desktop.tsx | Removes redundant borderStyle assignment. |
| shared/crypto/output.tsx | Refactors horizontal padding to paddingH. |
| shared/crypto/input.tsx | Refactors padding shorthand usage. |
| shared/common-adapters/web-view.tsx | Refactors full-size sizing to size('100%'). |
| shared/common-adapters/video.tsx | Refactors full-size sizing to size('100%'). |
| shared/common-adapters/usernames.tsx | Refactors desktop ellipsis styling to textEllipsis. |
| shared/common-adapters/toast.tsx | Refactors sizing and padding shorthand usage. |
| shared/common-adapters/timeline-marker.tsx | Refactors sizing and border boilerplate to helpers. |
| shared/common-adapters/team-with-popup.tsx | Refactors desktop ellipsis styling to textEllipsis. |
| shared/common-adapters/tabs.tsx | Refactors sizing and padding shorthand usage. |
| shared/common-adapters/switch-toggle.tsx | Refactors sizing to size. |
| shared/common-adapters/section-divider.tsx | Refactors sizing to size. |
| shared/common-adapters/search-filter.tsx | Refactors padding and sizing to helpers. |
| shared/common-adapters/rich-button.tsx | Refactors border boilerplate to border. |
| shared/common-adapters/progress-indicator.tsx | Refactors sizing to size. |
| shared/common-adapters/profile-card.tsx | Refactors border boilerplate to border. |
| shared/common-adapters/popup/index.tsx | Refactors padding shorthand usage. |
| shared/common-adapters/phone-input.tsx | Refactors padding to paddingV(0). |
| shared/common-adapters/name-with-icon.tsx | Refactors border boilerplate and sizing to helpers. |
| shared/common-adapters/meta.tsx | Refactors padding and vertical margin to helpers. |
| shared/common-adapters/mention.tsx | Refactors padding to paddingH. |
| shared/common-adapters/markdown/spoiler.tsx | Refactors padding to paddingH. |
| shared/common-adapters/markdown/react.tsx | Refactors padding/margins to helpers. |
| shared/common-adapters/markdown/maybe-mention/unknown.tsx | Refactors padding to paddingH. |
| shared/common-adapters/markdown/maybe-mention/team.tsx | Refactors padding to paddingH. |
| shared/common-adapters/input3.tsx | Refactors border boilerplate and paddingV to helpers. |
| shared/common-adapters/header-buttons.tsx | Refactors padding shorthand usage. |
| shared/common-adapters/emoji/native-emoji.tsx | Refactors sizing to size. |
| shared/common-adapters/dropdown.tsx | Refactors padding and full-size sizing to helpers. |
| shared/common-adapters/copy-text.tsx | Refactors padding to paddingH/V. |
| shared/common-adapters/confirm-modal.tsx | Refactors icon margin and modal footer to helpers. |
| shared/common-adapters/choice-list.tsx | Refactors sizing to size. |
| shared/common-adapters/checkbox.tsx | Refactors border boilerplate, sizing, paddingV to helpers. |
| shared/common-adapters/button.tsx | Refactors horizontal padding to paddingH. |
| shared/common-adapters/banner.tsx | Refactors padding to paddingH/V. |
| shared/chat/selectable-small-team.tsx | Refactors sizing and padding to helpers. |
| shared/chat/selectable-big-team-channel.tsx | Refactors ellipsis and padding to helpers. |
| shared/chat/pdf/index.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/chat/inbox/unread-shortcut.tsx | Refactors paddingV to helper. |
| shared/chat/inbox/row/teams-divider.tsx | Refactors paddingV to helper. |
| shared/chat/inbox/row/start-new-chat.tsx | Refactors marginH to helper. |
| shared/chat/inbox/row/small-team/index.tsx | Refactors ellipsis and paddingH to helpers. |
| shared/chat/inbox/row/big-teams-divider.tsx | Refactors full-size sizing and paddingH to helpers. |
| shared/chat/inbox/row/big-team-header.tsx | Refactors paddingH to helper. |
| shared/chat/inbox/row/big-team-channel.tsx | Refactors sizing to size. |
| shared/chat/inbox/index.tsx | Refactors sizing to size. |
| shared/chat/inbox/filter-row.tsx | Refactors marginH/padding to helpers. |
| shared/chat/inbox-search/index.tsx | Refactors full-size sizing and paddingH to helpers. |
| shared/chat/inbox-and-conversation-header.tsx | Refactors paddingH to helper. |
| shared/chat/emoji-picker/skin-tone-picker.tsx | Refactors sizing and border boilerplate to helpers. |
| shared/chat/emoji-picker/container.tsx | Refactors paddingH to helper. |
| shared/chat/create-channel/index.tsx | Refactors marginV to helper. |
| shared/chat/conversation/search.tsx | Refactors ellipsis, border boilerplate, padding shorthand to helpers. |
| shared/chat/conversation/reply-preview.tsx | Refactors ellipsis to textEllipsis. |
| shared/chat/conversation/rekey/you-rekey.tsx | Refactors padding/marginV to helpers. |
| shared/chat/conversation/rekey/participant-rekey.tsx | Refactors padding shorthand usage. |
| shared/chat/conversation/messages/wrapper/wrapper.tsx | Refactors marginV(0) and paddingH to helpers. |
| shared/chat/conversation/messages/wrapper/send-indicator.tsx | Refactors sizing to size. |
| shared/chat/conversation/messages/text/unfurl/unfurl-list/map-popup.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/chat/conversation/messages/text/unfurl/unfurl-list/index.tsx | Refactors marginV to helper. |
| shared/chat/conversation/messages/text/unfurl/unfurl-list/generic.tsx | Refactors sizing to size. |
| shared/chat/conversation/messages/text/unfurl/prompt-list/prompt.tsx | Refactors paddingV/marginH to helpers. |
| shared/chat/conversation/messages/text/coinflip/results.tsx | Refactors border boilerplate and sizing to helpers. |
| shared/chat/conversation/messages/text/coinflip/participants.tsx | Refactors paddingV to helper. |
| shared/chat/conversation/messages/reset-user.tsx | Refactors sizing and paddingH to helpers. |
| shared/chat/conversation/messages/react-button.tsx | Refactors paddingH to helper. |
| shared/chat/conversation/messages/message-popup/header.tsx | Refactors marginV to helper. |
| shared/chat/conversation/messages/message-popup/exploding-header.tsx | Refactors progress indicator sizing to size. |
| shared/chat/conversation/messages/attachment/file.tsx | Refactors icon sizing to size. |
| shared/chat/conversation/messages/account-payment/container.tsx | Refactors progress indicator sizing to size. |
| shared/chat/conversation/list-area/jump-to-recent.tsx | Refactors paddingV to helper. |
| shared/chat/conversation/list-area/index.tsx | Refactors full-size sizing to size('100%'). |
| shared/chat/conversation/input-area/suggestors/users.tsx | Refactors border boilerplate and sizing to helpers. |
| shared/chat/conversation/input-area/suggestors/shared.tsx | Refactors paddingH to helper. |
| shared/chat/conversation/input-area/normal/typing.tsx | Refactors sizing and paddingH to helpers. |
| shared/chat/conversation/input-area/normal/input.tsx | Refactors paddingV(0) to helper. |
| shared/chat/conversation/input-area/location-popup.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/chat/conversation/info-panel/settings/min-writer-role.tsx | Refactors border boilerplate to border. |
| shared/chat/conversation/info-panel/header.tsx | Refactors paddingH to helper. |
| shared/chat/conversation/info-panel/add-to-channel.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/chat/conversation/giphy/index.tsx | Refactors paddingV to helper. |
| shared/chat/conversation/fwd-msg.tsx | Refactors paddingH/marginH to helpers. |
| shared/chat/conversation/bottom-banner.tsx | Refactors padding shorthand usage. |
| shared/chat/conversation/bot/team-picker.tsx | Refactors paddingH/marginH to helpers. |
| shared/chat/conversation/bot/install.tsx | Refactors modal footer to topDivider/roundedBottom. |
| shared/chat/conversation/bot/channel-picker.tsx | Refactors marginH to helper. |
| shared/chat/conversation/attachment-get-titles.tsx | Refactors paddingH and border boilerplate to helpers. |
| shared/chat/conversation/attachment-fullscreen/index.tsx | Refactors sizing/padding to helpers. |
| shared/chat/blocking/block-modal.tsx | Refactors sizing and modal footer to helpers. |
| shared/chat/audio/audio-send.native.tsx | Refactors paddingH, sizing, marginV to helpers. |
| shared/chat/audio/audio-player.tsx | Refactors border boilerplate to border. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+847
to
+852
| <select id="gh" onchange="rG()"> | ||
| <option value="">All helpers</option> | ||
| <option value="border">border()</option> | ||
| <option value="padding">padding()</option> | ||
| </select> | ||
| <span class="lbl" id="gc"></span> |
Comment on lines
+910
to
+912
| var pb=ks.slice(0,5).map(bd).join('')+(ks.length>5?'<span style="color:#94a3b8;font-size:10px"> +'+(ks.length-5)+' more</span>':''); | ||
| var hb=g.helper==='border'?'<span class="bdg" style="background:#dbeafe;color:#1d4ed8">border()</span>':'<span class="bdg" style="background:#dcfce7;color:#15803d">padding()</span>'; | ||
| return '<tr><td><code>'+h(g.file)+':'+g.line+'</code></td><td>'+hb+'</td><td>'+(g.name?'<code>'+h(g.name)+'</code>':'<span style="color:#94a3b8">—</span>')+'</td><td>'+pb+'</td><td><span class="sg">'+h(g.call)+'</span>'+cpBtn(g.call)+'</td></tr>'; |
Comment on lines
+1037
to
+1039
| console.error('Usage: node scripts/analyze-styles.mts extract [--output /tmp/keybase-styles.json]') | ||
| console.error(' node scripts/analyze-styles.mts analyze [--input /tmp/keybase-styles.json] [--helper border|padding] [--min-count 3]') | ||
| console.error(' node scripts/analyze-styles.mts report [--input /tmp/keybase-styles.json] [--output /tmp/keybase-styles.html]') |
| paddingRight: Styles.globalMargins.tiny, | ||
| paddingTop: Styles.globalMargins.xtiny, | ||
| ...Styles.padding(Styles.globalMargins.xtiny, Styles.globalMargins.tiny), | ||
| width: 140, |
…ut (#29249) * fix LegendList deadlock when cached thread data arrives before onLayout When initialScrollAtEnd=true and a cached RPC response arrives before LegendList's ResizeObserver fires, handleInitialScrollDataChange returns early (queuedInitialLayout=false), leaving didFinishInitialScroll=false permanently and rendering nothing. Gate data delivery with a rAF so layout always fires before data arrives. * fix lint: derive layoutReady from key comparison, avoid synchronous setState in effect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.