From 9de7998826bd869dfd74140b256e3a01283533f5 Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos Date: Fri, 18 Sep 2026 15:10:46 -0700 Subject: [PATCH] refactor(emcn): centralize product icon-button padding --- .../components/trace-view/trace-view.tsx | 12 ++++---- .../components/log-details/log-details.tsx | 14 ++++----- .../workflow-mcp-servers.tsx | 3 +- .../column-config-sidebar.tsx | 3 +- .../enrichment-details/enrichment-details.tsx | 2 +- .../enrichments-sidebar/enrichment-config.tsx | 6 ++-- .../enrichments-sidebar.tsx | 6 ++-- .../select-field/select-options-editor.tsx | 3 +- .../components/table-filter/table-filter.tsx | 3 +- .../workflow-sidebar/workflow-sidebar.tsx | 6 ++-- .../w/[workflowId]/components/chat/chat.tsx | 6 ++-- .../deploy-modal/components/api/api.tsx | 9 ++++-- .../general/components/versions.tsx | 4 +-- .../components/output-panel/output-panel.tsx | 30 ++++++++++++------- .../toggle-button/toggle-button.tsx | 3 +- .../components/terminal/terminal.tsx | 15 ++++++---- .../[workflowId]/components/terminal/types.ts | 1 - .../components/variables/variables.tsx | 6 ++-- .../preview-editor/preview-editor.tsx | 12 ++++---- .../ui/generated-password-input.tsx | 6 ++-- .../emcn/src/components/button/button.tsx | 22 ++++++++++++-- 21 files changed, 111 insertions(+), 61 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx index 6d00dd552ce..c75ef9c2457 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx @@ -567,7 +567,7 @@ function DetailCodeSection({ - diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx index 38e12407418..8e60c534209 100644 --- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx +++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx @@ -586,7 +586,8 @@ function ServerDetailView({ variant='ghost' aria-label={copiedConfig ? 'Configuration copied' : 'Copy configuration'} onClick={() => handleCopyConfig(server.isPublic, server.name)} - className='-my-1.5 p-1.5!' + iconPadding='md' + className='-my-1.5' > {copiedConfig ? ( diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx index c2d80f94d36..abf3f9391a0 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx @@ -269,7 +269,8 @@ function ColumnConfigBody({ variant='ghost' size='sm' onClick={onClose} - className='size-7 p-1!' + iconPadding='sm' + className='size-7' aria-label='Close' > diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichment-details/enrichment-details.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichment-details/enrichment-details.tsx index 9c6a247c30a..e2227fb5be1 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichment-details/enrichment-details.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichment-details/enrichment-details.tsx @@ -364,7 +364,7 @@ export function EnrichmentDetails({

Enrichment Details

-
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx index 9b7d34e3e11..f411281d21e 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx @@ -238,7 +238,8 @@ export function EnrichmentConfig({ variant='ghost' size='sm' onClick={onBack} - className='size-7 flex-none p-1!' + iconPadding='sm' + className='size-7 flex-none' aria-label='Back to enrichments' > @@ -249,7 +250,8 @@ export function EnrichmentConfig({ variant='ghost' size='sm' onClick={onClose} - className='size-7 flex-none p-1!' + iconPadding='sm' + className='size-7 flex-none' aria-label='Close' > diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx index 64cd19f1134..0aebd34cb4c 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx @@ -77,7 +77,8 @@ function EnrichmentsSidebarBody({ variant='ghost' size='sm' onClick={onClose} - className='size-7 flex-none p-1!' + iconPadding='sm' + className='size-7 flex-none' aria-label='Close' > @@ -123,7 +124,8 @@ function EnrichmentsSidebarBody({ variant='ghost' size='sm' onClick={onClose} - className='size-7 flex-none p-1!' + iconPadding='sm' + className='size-7 flex-none' aria-label='Close' > diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx index 31b308b7309..f15e2c82ef6 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx @@ -78,7 +78,8 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr variant='ghost' size='sm' onClick={() => remove(option.id)} - className='size-7 shrink-0 p-1!' + iconPadding='sm' + className='size-7 shrink-0' aria-label={`Remove ${option.name || 'option'}`} > diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx index 166ced1e915..8fe52025569 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx @@ -382,7 +382,8 @@ const FilterRuleRow = memo(function FilterRuleRow({ variant='ghost' size='sm' onClick={() => onRemove(rule.id)} - className='size-7 shrink-0 p-1!' + iconPadding='sm' + className='size-7 shrink-0' aria-label='Remove filter' > diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx index dc601cc599e..18b04cfd5b2 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx @@ -637,7 +637,8 @@ export function WorkflowSidebarBody({ variant='ghost' size='sm' onClick={onBack} - className='size-7 flex-none p-1!' + iconPadding='sm' + className='size-7 flex-none' aria-label='Back to enrichments' > @@ -651,7 +652,8 @@ export function WorkflowSidebarBody({ variant='ghost' size='sm' onClick={onClose} - className='size-7 flex-none p-1!' + iconPadding='sm' + className='size-7 flex-none' aria-label='Close' > diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx index 804e7b570f5..d6a91f24477 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx @@ -954,7 +954,8 @@ export function Chat() { @@ -508,7 +509,8 @@ console.log(limits);` variant='ghost' onClick={() => handleCopy('stream', getStreamCommand())} aria-label='Copy command' - className='-my-1.5 p-1.5!' + iconPadding='md' + className='-my-1.5' > {copied.stream ? : } @@ -548,7 +550,8 @@ console.log(limits);` variant='ghost' onClick={() => handleCopy('async', getAsyncCommand())} aria-label='Copy command' - className='-my-1.5 p-1.5!' + iconPadding='md' + className='-my-1.5' > {copied.async ? : } diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx index 262b23e208b..2245b6a3647 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx @@ -330,8 +330,8 @@ export function Versions({ @@ -357,7 +358,8 @@ export const OutputPanel = React.memo(function OutputPanel({ variant='ghost' onClick={handleSearchClick} aria-label='Search in output' - className='-m-1.5 p-1.5!' + iconPadding='md' + className='-m-1.5' > @@ -375,7 +377,8 @@ export const OutputPanel = React.memo(function OutputPanel({ @@ -393,7 +396,8 @@ export const OutputPanel = React.memo(function OutputPanel({ variant='ghost' onClick={handleCopyClick} aria-label='Copy output' - className='-m-1.5 p-1.5!' + iconPadding='md' + className='-m-1.5' > {showCopySuccess ? ( @@ -414,7 +418,8 @@ export const OutputPanel = React.memo(function OutputPanel({ variant='ghost' onClick={handleExportConsole} aria-label='Export console CSV' - className='-m-1.5 p-1.5!' + iconPadding='md' + className='-m-1.5' > @@ -429,7 +434,8 @@ export const OutputPanel = React.memo(function OutputPanel({ variant='ghost' onClick={handleClearConsole} aria-label='Clear console' - className='-m-1.5 p-1.5!' + iconPadding='md' + className='-m-1.5' > @@ -446,7 +452,8 @@ export const OutputPanel = React.memo(function OutputPanel({ variant='ghost' onClick={(e) => e.stopPropagation()} aria-label='Terminal options' - className='-m-1.5 p-1.5!' + iconPadding='md' + className='-m-1.5' > @@ -511,7 +518,8 @@ export const OutputPanel = React.memo(function OutputPanel({ variant='ghost' onClick={goToPreviousMatch} aria-label='Previous match' - className='-m-1.5 p-1.5!' + iconPadding='md' + className='-m-1.5' disabled={matchCount === 0} > @@ -520,7 +528,8 @@ export const OutputPanel = React.memo(function OutputPanel({ variant='ghost' onClick={goToNextMatch} aria-label='Next match' - className='-m-1.5 p-1.5!' + iconPadding='md' + className='-m-1.5' disabled={matchCount === 0} > @@ -529,7 +538,8 @@ export const OutputPanel = React.memo(function OutputPanel({ variant='ghost' onClick={closeOutputSearch} aria-label='Close search' - className='-m-1.5 p-1.5!' + iconPadding='md' + className='-m-1.5' > diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx index 84265672062..e23a97cb40b 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx @@ -17,7 +17,8 @@ export const ToggleButton = memo(function ToggleButton({ isExpanded, onClick }: return ( @@ -1290,7 +1292,8 @@ export const Terminal = memo(function Terminal() { variant='ghost' onClick={handleExportConsole} aria-label='Export console CSV' - className='-m-1.5 p-1.5!' + iconPadding='md' + className='-m-1.5' > @@ -1305,7 +1308,8 @@ export const Terminal = memo(function Terminal() { variant='ghost' onClick={handleClearConsole} aria-label='Clear console' - className='-m-1.5 p-1.5!' + iconPadding='md' + className='-m-1.5' > @@ -1325,7 +1329,8 @@ export const Terminal = memo(function Terminal() { e.stopPropagation() }} aria-label='Terminal options' - className='-m-1.5 p-1.5!' + iconPadding='md' + className='-m-1.5' > diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts index 6285e7ac407..2bafb623824 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts @@ -51,7 +51,6 @@ export const ROW_STYLES = { status: 'shrink-0 text-sm', statusIdle: 'text-[var(--text-muted)]', nested: 'mt-0.5 ml-[3px] flex min-w-0 flex-col gap-0.5 border-[var(--border)] border-l pl-[9px]', - iconButton: 'p-1.5! -m-1.5', } as const /** diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx index 7505fcf6720..0baf5e457a5 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx @@ -458,7 +458,8 @@ export function Variables({ readOnly = false }: VariablesProps) {
-
diff --git a/apps/sim/components/ui/generated-password-input.tsx b/apps/sim/components/ui/generated-password-input.tsx index 451c9d4a6fe..1508614d35a 100644 --- a/apps/sim/components/ui/generated-password-input.tsx +++ b/apps/sim/components/ui/generated-password-input.tsx @@ -106,7 +106,7 @@ export function GeneratedPasswordInput({ onClick={handleGeneratePassword} disabled={disabled} aria-label='Generate password' - className='p-1.5!' + iconPadding='md' > @@ -124,7 +124,7 @@ export function GeneratedPasswordInput({ onClick={() => copy(displayValue)} disabled={!displayValue || disabled} aria-label='Copy password' - className='p-1.5!' + iconPadding='md' > {copied ? : } @@ -141,7 +141,7 @@ export function GeneratedPasswordInput({ onClick={toggleShowPassword} disabled={disabled || isFetchingCurrent} aria-label={showPassword ? 'Hide password' : 'Show password'} - className='p-1.5!' + iconPadding='md' > {isFetchingCurrent ? ( diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx index 523aa73ef58..4ad21bc4a37 100644 --- a/packages/emcn/src/components/button/button.tsx +++ b/packages/emcn/src/components/button/button.tsx @@ -50,6 +50,10 @@ const buttonVariants = cva( md: 'px-2 py-1.5 text-[length:12px]', icon: 'size-[20px] rounded-sm p-0 [&_svg]:[stroke-width:1.25]', }, + iconPadding: { + sm: 'p-1', + md: 'p-1.5', + }, }, compoundVariants: [ /** @@ -70,12 +74,24 @@ const buttonVariants = cva( export interface ButtonProps extends ButtonHTMLAttributes, - VariantProps {} + VariantProps { + /** + * Symmetric padding for icon actions whose content or layout determines their size. + * Preserves the selected size's typography, corner radius and icon stroke. + * Omit for the standard size padding, including the fixed `size='icon'` treatment. + * @example + */ + iconPadding?: VariantProps['iconPadding'] +} const Button = forwardRef( - ({ className, variant, size, ...props }, ref) => { + ({ className, variant, size, iconPadding, ...props }, ref) => { return ( -