UI bug fix: padding-inline logic regression (#3967)

* Add failing component regression tests for padding-inline logic

* Fix tests by fixing swapped logic, add comments

src/components/ActionButton.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { ActionButton } from './ActionButton'
+
+describe('ActionButton tests', () => {
+  it('ActionButton with no iconStart or iconEnd should have even left and right padding', () => {
+    render(<ActionButton Element="button">No icons</ActionButton>)
+    expect(screen.getByRole('button')).toHaveClass('px-2')
+  })
+
+  it('ActionButton with iconStart should have no padding on the left', () => {
+    render(
+      <ActionButton Element="button" iconStart={{ icon: 'trash' }}>
+        Start icon only
+      </ActionButton>
+    )
+    expect(screen.getByRole('button')).toHaveClass('pr-2')
+  })
+
+  it('ActionButton with iconEnd should have no padding on the right', () => {
+    render(
+      <ActionButton Element="button" iconEnd={{ icon: 'trash' }}>
+        End icon only
+      </ActionButton>
+    )
+    expect(screen.getByRole('button')).toHaveClass('pl-2')
+  })
+
+  it('ActionButton with both icons should have no padding on either side', () => {
+    render(
+      <ActionButton
+        Element="button"
+        iconStart={{ icon: 'trash' }}
+        iconEnd={{ icon: 'trash' }}
+      >
+        Both icons
+      </ActionButton>
+    )
+    expect(screen.getByRole('button')).not.toHaveClass('px-2')
+    expect(screen.getByRole('button')).toHaveClass('px-0')
+  })
+})

src/components/ActionButton.tsx

@@ -44,11 +44,11 @@ export const ActionButton = forwardRef((props: ActionButtonProps, ref) => {
   const classNames = `action-button p-0 m-0 group mono text-xs leading-none flex items-center gap-2 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 enabled:dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10 ${
     props.iconStart
       ? props.iconEnd
-        ? 'px-0'
-        : 'pr-2'
+        ? 'px-0' // No padding if both icons are present
+        : 'pr-2' // Padding on the right if only the start icon is present
       : props.iconEnd
-      ? 'px-2'
-      : 'pl-2'
+      ? 'pl-2' // Padding on the left if only the end icon is present
+      : 'px-2' // Padding on both sides if no icons are present
   } ${props.className ? props.className : ''}`
 
   switch (props.Element) {