feat: revise icon button

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## Added
+
+- Revise `IconButton` to have a more consistent look with the rest of the components.
+
+## Changed
+
+- Tweak `CloseButton` to visually align with the `IconButton` component.
+
 ## [0.7.1] - 2023-06-29
 
 ## Fixed
@@ -208,5 +216,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [0.5.0]: https://github.com/chakra-ui/pro-theme/releases/tag/0.5.0
 [0.6.0]: https://github.com/chakra-ui/pro-theme/releases/tag/0.6.0
 [0.7.0]: https://github.com/chakra-ui/pro-theme/releases/tag/0.7.0
-
 [0.7.1]: https://github.com/chakra-ui/pro-theme/releases/tag/0.7.1

src/components/button.ts

@@ -7,7 +7,7 @@ const sizes = {
     minW: '6',
     fontSize: '2xs',
     px: '2',
-    '& .chakra-button__icon': {
+    '& svg': {
       fontSize: 'sm',
     },
   }),
@@ -25,7 +25,7 @@ const sizes = {
     minW: '9',
     fontSize: 'sm',
     px: '3.5',
-    '& .chakra-button__icon': {
+    '& svg': {
       fontSize: 'xl',
     },
   }),
@@ -34,7 +34,7 @@ const sizes = {
     minW: '10',
     fontSize: 'sm',
     px: '4',
-    '& .chakra-button__icon': {
+    '& svg': {
       fontSize: 'xl',
     },
   }),
@@ -43,7 +43,7 @@ const sizes = {
     minW: '11',
     fontSize: 'md',
     px: '4.5',
-    '& .chakra-button__icon': {
+    '& svg': {
       fontSize: 'xl',
     },
   }),
@@ -52,7 +52,7 @@ const sizes = {
     minW: '12',
     fontSize: 'md',
     px: '5',
-    '& .chakra-button__icon': {
+    '& svg': {
       fontSize: 'xl',
     },
   }),
@@ -61,7 +61,7 @@ const sizes = {
     minW: '15',
     fontSize: 'lg',
     px: '7',
-    '& .chakra-button__icon': {
+    '& svg': {
       fontSize: '2xl',
     },
   }),
@@ -121,6 +121,9 @@ const variants = {
     bg: vars.bg.reference,
     color: vars.color.reference,
     [vars.color.variable]: `colors.gray.700`,
+    '> svg': {
+      color: 'fg.muted',
+    },
     _dark: {
       [vars.color.variable]: `colors.gray.200`,
     },
@@ -158,6 +161,9 @@ const variants = {
       opacity: 1,
       borderColor: 'border.default',
       [vars.color.variable]: `colors.gray.400`,
+      '> svg': {
+        color: 'unset',
+      },
       _dark: {
         [vars.color.variable]: `colors.gray.600`,
       },

src/components/close-button.ts

@@ -36,19 +36,19 @@ const baseStyle = defineStyle({
 const sizes = {
   '2xs': defineStyle({
     [vars.size.variable]: 'sizes.6',
-    fontSize: '2xs',
+    fontSize: 'xs',
   }),
   xs: defineStyle({
     [vars.size.variable]: 'sizes.8',
-    fontSize: 'xs',
+    fontSize: 'sm',
   }),
   sm: defineStyle({
     [vars.size.variable]: 'sizes.9',
-    fontSize: 'xs',
+    fontSize: 'md',
   }),
   md: defineStyle({
     [vars.size.variable]: 'sizes.10',
-    fontSize: 'sm',
+    fontSize: 'md',
   }),
   lg: defineStyle({
     [vars.size.variable]: 'sizes.11',

src/components/link.ts

@@ -18,7 +18,7 @@ export default defineStyleConfig({
         height: '1.5px',
         borderRadius: 'sm',
         backgroundColor: 'accent',
-        bottom: '-1px',
+        bottom: '0',
         left: '0',
         transformOrigin: 'right',
         transform: 'scaleX(0)',

src/stories/icon-button.stories.tsx

@@ -0,0 +1,57 @@
+import { IconButton, Stack, Text } from '@chakra-ui/react'
+import type { Meta } from '@storybook/react'
+import { FiCircle } from 'react-icons/fi'
+
+const meta: Meta = {
+  title: 'Components / Icon Button',
+}
+
+export default meta
+
+export const WithSizes = () => {
+  const sizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl']
+  return (
+    <Stack spacing="8" align="start">
+      {sizes.map((size) => (
+        <Stack key={size}>
+          <Text textStyle="xs" color="fg.muted">
+            {size}
+          </Text>
+          <IconButton variant="primary" size={size} icon={<FiCircle />} aria-label="icon button" />
+        </Stack>
+      ))}
+    </Stack>
+  )
+}
+
+export const WithVariants = () => {
+  const variants = [
+    { variant: 'primary', colorScheme: 'brand' },
+    { variant: 'secondary', colorScheme: 'gray' },
+    { variant: 'tertiary', colorScheme: 'gray' },
+  ]
+  return (
+    <Stack spacing="8" align="start">
+      {variants.map(({ variant, colorScheme }) => (
+        <Stack key={variant} spacing="3">
+          <Text textStyle="xs" color="fg.muted">
+            {variant}
+          </Text>
+          <IconButton
+            variant={variant}
+            colorScheme={colorScheme}
+            icon={<FiCircle />}
+            aria-label="Circle"
+          />
+          <IconButton
+            variant={variant}
+            colorScheme={colorScheme}
+            icon={<FiCircle />}
+            aria-label="Circle"
+            isDisabled
+          />
+        </Stack>
+      ))}
+    </Stack>
+  )
+}