feat: exported icon button styling to reduce code duplication

Author: kristian-committed

src/components/IconButton/IconButton.tsx

@@ -26,7 +26,7 @@ export const disabled = {
   opacity: 0.4,
 }
 
-export const StyledIconButton = styled(DEFAULT_TAG, {
+export const IconButtonStyling = {
   $$main: '$colors$primary',
   $$mainHover: '$colors$primaryHighlight',
   $$contrast: '$colors$primaryContrast',
@@ -135,7 +135,9 @@ export const StyledIconButton = styled(DEFAULT_TAG, {
     destructive: 'false',
     size: 'default',
   },
-})
+}
+
+export const StyledIconButton = styled(DEFAULT_TAG, IconButtonStyling)
 
 type IconButtonVariants = VariantProps<typeof StyledIconButton>
 type ButtonProps = ComponentProps<typeof DEFAULT_TAG>

src/components/Toggle/Toggle.stories.tsx

@@ -11,7 +11,7 @@ export default {
 
 const Template: ComponentStory<typeof Toggle> = ({ ...args }) => {
   return (
-    <Toggle aria-label="Toggle italic">
+    <Toggle aria-label="Toggle italic" {...args}>
       <Italic />
     </Toggle>
   )

src/components/Toggle/Toggle.tsx

@@ -2,18 +2,18 @@ import * as TogglePrimitive from '@radix-ui/react-toggle'
 import React, { ComponentProps, ElementRef, forwardRef } from 'react'
 import type { AsProps, CSSProps, VariantProps } from '../../stitches.config'
 import { styled } from '../../stitches.config'
-import { disabled, hover } from '../IconButton'
+import { hover, IconButtonStyling } from '../IconButton'
 
 export const selected = {
   backgroundColor: '$$onBackgroundColor',
   color: '$$onColor',
-  $$focusColor: '$$onFocusColor',
 }
 
 const focus = hover
 
 // TODO: pressed + hover together not working as intended
 export const ToggleStyling = {
+  ...IconButtonStyling,
   $$main: '$colors$primary',
   $$mainHover: '$colors$primaryHighlight',
   $$contrast: '$colors$primaryContrast',
@@ -23,45 +23,7 @@ export const ToggleStyling = {
   $$lowlight: '$colors$defaultLowlight',
   $$onBackgroundColor: '$color$defaultHighlight',
   $$onColor: '$$main',
-  $$focusColor: '$$default',
 
-  // Reset
-  alignItems: 'center',
-  appearance: 'none',
-  boxSizing: 'border-box',
-  display: 'inline-flex',
-  flexShrink: 0,
-  justifyContent: 'center',
-  lineHeight: '$none',
-  margin: '0',
-  outline: 'none',
-  padding: '0',
-  textDecoration: 'none',
-  userSelect: 'none',
-  WebkitTapHighlightColor: 'rgba(0,0,0,0)',
-  '&::before': {
-    boxSizing: 'border-box',
-  },
-  '&::after': {
-    boxSizing: 'border-box',
-  },
-
-  // Defaults
-  fontSize: '$0',
-  borderRadius: '$default',
-  cursor: 'pointer',
-  backgroundColor: 'transparent',
-  border: 'none',
-
-  // Actions
-  '@motion': {
-    transition: 'background 0.5s',
-  },
-  backgroundPosition: 'center',
-
-  '&:hover': hover,
-  '&:focus': focus,
-  '&:disabled': disabled,
   '&[data-state=on]': selected,
 
   variants: {

src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -24,6 +24,7 @@ const Template: Story<typeof ToggleGroup> = ({ ...args }) => {
       type="single"
       defaultValue="center"
       aria-label="Text alignment"
+      {...args}
     >
       <ToggleGroupItem value="left" aria-label="Left aligned">
         <TextAlignLeft />