From 5c65f9e7f5d99a8775b5fbcaa974445dc71f8df6 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 3 Jun 2022 19:46:28 +0800
Subject: [PATCH] feat: IconButton & RoundIconButton

---
 src/components/IconButton.tsx      | 49 ++++++++++++++++++++++++++++++
 src/components/RoundIconButton.tsx | 16 ++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/components/IconButton.tsx
 create mode 100644 src/components/RoundIconButton.tsx

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
new file mode 100644
index 0000000..8f22a3a
--- /dev/null
+++ b/src/components/IconButton.tsx
@@ -0,0 +1,49 @@
+import { IconProps } from '@primer/octicons-react'
+import { Box, merge, SxProp, useTheme } from '@primer/react'
+import { getBaseStyles, getSizeStyles, getVariantStyles } from '@primer/react/lib/Button/styles'
+import {
+  IconButtonProps as PrimerIconButtonProps,
+  StyledButton
+} from '@primer/react/lib/Button/types'
+import React from 'react'
+import { is } from 'utils/is'
+
+export type IconButtonProps = PrimerIconButtonProps & {
+  iconSize?: IconProps['size']
+  iconColor?: string
+}
+
+// Modified version of @primer/react/lib/Button/Button.tsx
+// Added better support of colors & size
+
+export function IconButton(props: IconButtonProps) {
+  const {
+    variant = 'default',
+    size = 'medium',
+    iconSize, // grow the icon to the same size as the button
+    iconColor, // extra control of icon color
+    sx: sxProp = {},
+    icon: Icon,
+    ...rest
+  } = props
+  const { theme } = useTheme()
+  const sxStyles = merge.all(
+    [
+      getBaseStyles(theme),
+      getSizeStyles(size, variant, true),
+      getVariantStyles(variant, theme),
+      // Unsatisfied with preset color of the `invisible` variant
+      {
+        color: iconColor || (variant === 'invisible' ? 'fg.subtle' : undefined),
+      },
+      sxProp as SxProp,
+    ].filter(is.not.undefined),
+  )
+  return (
+    <StyledButton sx={sxStyles} {...rest}>
+      <Box as="span" sx={{ display: 'inline-block' }}>
+        <Icon size={iconSize} />
+      </Box>
+    </StyledButton>
+  )
+}
diff --git a/src/components/RoundIconButton.tsx b/src/components/RoundIconButton.tsx
new file mode 100644
index 0000000..ddc2178
--- /dev/null
+++ b/src/components/RoundIconButton.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { IconButton, IconButtonProps } from './IconButton'
+
+export function RoundIconButton(props: IconButtonProps) {
+  return (
+    <IconButton
+      variant="invisible"
+      title={props['aria-label']}
+      {...props}
+      sx={{
+        borderRadius: '20px',
+        ...props.sx,
+      }}
+    />
+  )
+}