fix: ensure 'as' cannot be used

Atom-Learning · Aug 22, 2023 · b1c77a7 · b1c77a7
1 parent 83f214b
commit b1c77a7
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 26 deletions.
diff --git a/lib/src/components/alert-dialog/alert-context/AlertDialog.tsx b/lib/src/components/alert-dialog/alert-context/AlertDialog.tsx
@@ -41,19 +41,15 @@ export const Alert: React.FC<AlertDialogContentProps> = ({
         {cancelActionText && (
           <Button
             appearance="outline"
-            as={AlertDialog.Cancel}
             onClick={() => onAction(false)}
             size="sm"
+            asChild
           >
-            {cancelActionText}
+            <AlertDialog.Cancel>{cancelActionText}</AlertDialog.Cancel>
           </Button>
         )}
-        <Button
-          as={AlertDialog.Action}
-          onClick={() => onAction(true)}
-          size="sm"
-        >
-          {confirmActionText}
+        <Button onClick={() => onAction(true)} size="sm" asChild>
+          <AlertDialog.Action>{confirmActionText}</AlertDialog.Action>
         </Button>
       </Stack>
     </AlertDialog.Content>

diff --git a/lib/src/components/button/Button.tsx b/lib/src/components/button/Button.tsx
@@ -1,3 +1,4 @@
+import { Slot } from '@radix-ui/react-slot'
 import type { VariantProps } from '@stitches/react'
 import { darken, opacify } from 'color2k'
 import * as React from 'react'
@@ -7,7 +8,6 @@ import { Icon, StyledIcon } from '~/components/icon'
 import { Loader } from '~/components/loader'
 import { styled, theme } from '~/stitches'
 import { Override } from '~/utilities'
-import { Slot } from '@radix-ui/react-slot'
 
 const getButtonOutlineVariant = (
   base: string,
@@ -196,17 +196,18 @@ export const StyledButton = styled('button', {
 type ButtonProps = Override<
   React.ComponentProps<typeof StyledButton>,
   VariantProps<typeof StyledButton> & {
-    as?: React.ComponentType | React.ElementType
+    as?: never
+    asChild?: boolean
     children: React.ReactNode
     isLoading?: boolean
-    asChild?: boolean
   }
 >
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       children,
+      as,
       asChild,
       isLoading,
       onClick,
@@ -227,7 +228,14 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     }
 
     if (asChild) {
-      return <StyledButton {...props} as={Slot} />
+      return (
+        <StyledButton
+          isLoading={isLoading || false}
+          onClick={!isLoading ? onClick : undefined}
+          {...props}
+          as={Slot}
+        />
+      )
     }
 
     return (

diff --git a/lib/src/components/file-input/FileInput.tsx b/lib/src/components/file-input/FileInput.tsx
@@ -24,16 +24,18 @@ export const FileInput: React.FC<FileInputProps> = ({
   }
 
   return (
-    <Button as="label" {...rest}>
-      <Icon is={Upload} />
-      {children}
-      <input
-        type="file"
-        onChange={handleFileSelect}
-        accept={accept}
-        multiple={multiple}
-        hidden
-      />
+    <Button {...rest} asChild>
+      <label>
+        <Icon is={Upload} />
+        {children}
+        <input
+          type="file"
+          onChange={handleFileSelect}
+          accept={accept}
+          multiple={multiple}
+          hidden
+        />
+      </label>
     </Button>
   )
 }

diff --git a/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap b/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap
@@ -77,7 +77,6 @@ exports[`FileInput component renders 1`] = `
 <div>
   <label
     class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-gsycxF-cv"
-    type="button"
   >
     <svg
       aria-hidden="true"

diff --git a/lib/src/components/link/Link.tsx b/lib/src/components/link/Link.tsx
@@ -1,3 +1,4 @@
+import { Slot } from '@radix-ui/react-slot'
 import * as React from 'react'
 
 import { styled } from '~/stitches'
@@ -7,7 +8,6 @@ import { StyledHeading } from '../heading/Heading'
 import { StyledLi } from '../list/List'
 import { StyledMarkdownEmphasis } from '../markdown-content/components'
 import { StyledText, textVariants } from '../text/Text'
-import { Slot } from '@radix-ui/react-slot'
 
 export const StyledLink = styled('a', {
   bg: 'unset',
@@ -37,8 +37,11 @@ export const StyledLink = styled('a', {
 
 export const Link = React.forwardRef<
   HTMLAnchorElement,
-  React.ComponentProps<typeof StyledLink> & { asChild?: boolean }
->(({ asChild, size = 'md', href, ...rest }, ref) => {
+  React.ComponentProps<typeof StyledLink> & {
+    asChild?: boolean
+    as?: never
+  }
+>(({ as, asChild, size = 'md', href, ...rest }, ref) => {
   if (asChild) {
     return <StyledLink {...rest} as={Slot} noCapsize size={size} ref={ref} />
   }