Merge pull request #549 from Atom-Learning/feat/remove-asWorkaround-uses

feat: remove uses of asWorkaround in favour of stitches withConfig
Atom-Learning · Jul 26, 2023 · 83e4a12 · 83e4a12
2 parents 60b2391 + 4fdaeb0
commit 83e4a12
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 16 deletions.
diff --git a/lib/src/components/chip-toggle-group/ChipToggleGroupItem.tsx b/lib/src/components/chip-toggle-group/ChipToggleGroupItem.tsx
@@ -11,7 +11,9 @@ const StyledChipToggleIcon = styled(Icon, {
   display: 'none'
 })
 
-const StyledChipToggleGroupItem = styled(Chip, {
+const StyledChipToggleGroupItem = styled.withConfig({
+  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)
+})(Chip, {
   '&:not([disabled])': {
     cursor: 'pointer',
     '&:hover': {
@@ -51,7 +53,7 @@ export const ChipToggleGroupItem: React.FC<TChipToggleGroupItem> = ({
 }) => {
   return (
     <ToggleGroup.Item {...rest} asChild>
-      <StyledChipToggleGroupItem asWorkaround="button">
+      <StyledChipToggleGroupItem as="button">
         <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />
         <Chip.Content>{children}</Chip.Content>
       </StyledChipToggleGroupItem>

diff --git a/lib/src/components/chip/Chip.tsx b/lib/src/components/chip/Chip.tsx
@@ -109,15 +109,13 @@ export const ChipRootProvider: React.FC<TChipRootProviderProps> = ({
   )
 }
 
-export type TChipRootProps = TChipRootProviderProps & {
-  asWorkaround?: React.ElementType // (!?) `asWorkaround` rather than `as` because, it seems, when we extend this via `styled()` stitches overrides this component from the first argument for the value in `as`
-}
+export type TChipRootProps = TChipRootProviderProps
 
 const ChipRoot: React.ForwardRefExoticComponent<TChipRootProps> =
-  React.forwardRef(({ asWorkaround, size = 'md', ...rest }, ref) => {
+  React.forwardRef(({ size = 'md', ...rest }, ref) => {
     return (
       <ChipRootProvider size={size}>
-        <StyledRoot ref={ref} as={asWorkaround} size={size} {...rest} />
+        <StyledRoot ref={ref} size={size} {...rest} />
       </ChipRootProvider>
     )
   })

diff --git a/lib/src/components/tile-interactive/TileInteractive.tsx b/lib/src/components/tile-interactive/TileInteractive.tsx
@@ -5,7 +5,9 @@ import { styled } from '~/stitches'
 import { NavigatorActions } from '~/types'
 import { focusVisibleStyleBlock } from '~/utilities'
 
-const StyledTileInteractive = styled(Tile, {
+const StyledTileInteractive = styled.withConfig({
+  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)
+})(Tile, {
   '&[data-disabled]': {
     opacity: 0.3,
     cursor: 'not-allowed'
@@ -49,11 +51,11 @@ export const TileInteractive = React.forwardRef<
   const isLink = !!href
   const elementSpecificProps = isLink
     ? {
-        asWorkaround: 'a' as React.ElementType,
+        as: 'a' as React.ElementType,
         href,
         onClick: undefined
       }
-    : { asWorkaround: 'button' as React.ElementType, type, onClick }
+    : { as: 'button' as React.ElementType, type, onClick }
 
   return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />
 })

diff --git a/lib/src/components/tile-toggle-group/TileToggleGroupItem.tsx b/lib/src/components/tile-toggle-group/TileToggleGroupItem.tsx
@@ -4,7 +4,9 @@ import * as React from 'react'
 import { TileInteractive } from '~/components/tile-interactive'
 import { styled } from '~/stitches'
 
-const StyledTileToggleGroupItem = styled(TileInteractive, {
+const StyledTileToggleGroupItem = styled.withConfig({
+  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)
+})(TileInteractive, {
   '&:not([disabled])': {
     '&[data-state="on"]': {
       '&:hover': {
@@ -38,7 +40,7 @@ export const TileToggleGroupItem: React.FC<TTileToggleGroupItem> = ({
 }) => {
   return (
     <ToggleGroup.Item {...rest} asChild>
-      <StyledTileToggleGroupItem asWorkaround="button">
+      <StyledTileToggleGroupItem as="button">
         {children}
       </StyledTileToggleGroupItem>
     </ToggleGroup.Item>

diff --git a/lib/src/components/tile/Tile.tsx b/lib/src/components/tile/Tile.tsx
@@ -26,20 +26,19 @@ export const StyledTile = styled('div', {
 })
 
 type TTileProps = React.ComponentProps<typeof StyledTile> & {
-  asWorkaround?: React.ElementType // (!?) `asWorkaround` rather than `as` because, it seems, when we extend this via `styled()` stitches overrides this component from the first argument for the value in `as`
   colorScheme?: TcolorScheme
 }
 
-export const Tile = React.forwardRef<HTMLButtonElement, TTileProps>(
-  ({ children, asWorkaround, colorScheme = {}, ...rest }, ref) => (
+export const Tile = React.forwardRef<HTMLDivElement, TTileProps>(
+  ({ children, colorScheme = {}, ...rest }, ref) => (
     <ColorScheme
       asChild
       base="grey1"
       accent="blue2"
       interactive="loContrast"
       {...colorScheme}
     >
-      <StyledTile ref={ref} as={asWorkaround} {...rest}>
+      <StyledTile ref={ref} {...rest}>
         {children}
       </StyledTile>
     </ColorScheme>