From 4fdaeb034d97e6f88e2150453fe38a9314810114 Mon Sep 17 00:00:00 2001
From: Myrto Kontouli <myrto.kontouli@atomlearning.co.uk>
Date: Tue, 25 Jul 2023 20:07:32 +0100
Subject: [PATCH] feat: remove uses of asWorkaround in favour of stitches
 withConfig

---
 .../components/chip-toggle-group/ChipToggleGroupItem.tsx  | 6 ++++--
 lib/src/components/chip/Chip.tsx                          | 8 +++-----
 lib/src/components/tile-interactive/TileInteractive.tsx   | 8 +++++---
 .../components/tile-toggle-group/TileToggleGroupItem.tsx  | 6 ++++--
 lib/src/components/tile/Tile.tsx                          | 7 +++----
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/lib/src/components/chip-toggle-group/ChipToggleGroupItem.tsx b/lib/src/components/chip-toggle-group/ChipToggleGroupItem.tsx
index f5f7a56ca..948c7037d 100644
--- 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
index f4d3032f0..41d356fa5 100644
--- 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
index 8e1026d91..e41861511 100644
--- 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
index f113750dd..3081f1e9e 100644
--- 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
index cf6f3a57b..78557b58f 100644
--- a/lib/src/components/tile/Tile.tsx
+++ b/lib/src/components/tile/Tile.tsx
@@ -26,12 +26,11 @@ 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"
@@ -39,7 +38,7 @@ export const Tile = React.forwardRef<HTMLButtonElement, TTileProps>(
       interactive="loContrast"
       {...colorScheme}
     >
-      <StyledTile ref={ref} as={asWorkaround} {...rest}>
+      <StyledTile ref={ref} {...rest}>
         {children}
       </StyledTile>
     </ColorScheme>