simplify and fix IconButton

packages/components/src/composer/composer.tsx

@@ -39,11 +39,11 @@ const Composer = (props: BaseProps) => {
       </YStack>
       <XStack alignItems="center" justifyContent="space-between" pt={8}>
         <Stack space={12} flexDirection="row">
-          <IconButton noBackground icon={<ImageIcon />} />
+          <IconButton icon={<ImageIcon />} transparent />
-          <IconButton noBackground icon={<ReactionIcon />} />
+          <IconButton icon={<ReactionIcon />} transparent />
-          <IconButton noBackground icon={<FormatIcon />} />
+          <IconButton icon={<FormatIcon />} transparent />
         </Stack>
-        <IconButton noBackground icon={<AudioIcon />} />
+        <IconButton icon={<AudioIcon />} transparent />
       </XStack>
     </YStack>
   )

packages/components/src/icon-button/icon-button.tsx

@@ -12,14 +12,12 @@ const Base = styled(Stack, {
   cursor: 'pointer',
   userSelect: 'none',
   borderRadius: 10,
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
   animation: 'fast',
 
   width: 30,
   height: 30,
   borderWidth: 1,
+  padding: 4,
   backgroundColor: '$neutral-10',
   borderColor: '$neutral-10',
 
@@ -32,7 +30,14 @@ const Base = styled(Stack, {
   },
 
   variants: {
-    noBackground: {
+    selected: {
+      true: {
+        backgroundColor: '$neutral-30',
+        borderColor: '$neutral-30',
+      },
+    },
+
+    transparent: {
       true: {
         backgroundColor: 'transparent',
         borderColor: '$neutral-20',
@@ -48,30 +53,6 @@ const Base = styled(Stack, {
         },
       },
     },
-    selected: {
-      true: {
-        backgroundColor: '$neutral-30',
-        borderColor: '$neutral-30',
-      },
-    },
-  } as const,
-})
-
-const Icon = styled(Text, {
-  color: '$neutral-50',
-  width: 20,
-  height: 20,
-
-  hoverStyle: {
-    color: '$neutral-100',
-  },
-
-  variants: {
-    selected: {
-      true: {
-        color: '$neutral-100',
-      },
-    },
   } as const,
 })
 
@@ -79,17 +60,21 @@ interface Props {
   icon: React.ReactElement
   onPress?: () => void
   selected?: boolean
-  noBackground?: boolean
+  transparent?: boolean
+  // FIXME: enforce aria-label for accessibility
+  // 'aria-label'?: string
 }
 
 const IconButton = (props: Props) => {
-  const { icon, noBackground, selected, onPress } = props
+  const { icon, transparent, selected, onPress } = props
 
   return (
-    <Base selected={selected} onPress={onPress} noBackground={noBackground}>
+    <Base selected={selected} onPress={onPress} transparent={transparent}>
-      <Icon selected={selected} pointerEvents="none">
+      {cloneElement(icon, {
-        {cloneElement(icon, { color: '$neutral-50' })}
+        color: selected ? '$neutral-100' : '$neutral-50',
-      </Icon>
+        size: 20,
+        pressEvents: 'none',
+      })}
     </Base>
   )
 }

yarn.lock

@@ -15680,16 +15680,7 @@ react-docgen@6.0.0-alpha.3:
     resolve "^1.17.0"
     strip-indent "^3.0.0"
 
-"react-dom@^16.8.0 || ^17.0.0", react-dom@^17.0.0:
+react-dom@18.1.0, "react-dom@^16.8.0 || ^17.0.0", react-dom@^17.0.0, react-dom@^18.1.0, react-dom@^18.2.0:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
-
-react-dom@^18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
   integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
@@ -15697,14 +15688,6 @@ react-dom@^18.1.0:
     loose-envify "^1.1.0"
     scheduler "^0.22.0"
 
-react-dom@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
-
 react-element-to-jsx-string@^15.0.0:
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6"
@@ -15959,28 +15942,13 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react@18.1.0:
+react@18.1.0, "react@^16.8.0 || ^17.0.0", react@^17.0.0, react@^18.2.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
   integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
   dependencies:
     loose-envify "^1.1.0"
 
-"react@^16.8.0 || ^17.0.0", react@^17.0.0:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-react@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 read-pkg-up@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@@ -16511,14 +16479,6 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 scheduler@^0.22.0:
   version "0.22.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
@@ -16526,13 +16486,6 @@ scheduler@^0.22.0:
   dependencies:
     loose-envify "^1.1.0"
 
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
-  dependencies:
-    loose-envify "^1.1.0"
-
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"