remove touch-target

irsyadadl · Oct 13, 2024 · c2c4364 · c2c4364
1 parent 485ab25
commit c2c4364
Show file tree

Hide file tree

Showing 18 changed files with 20 additions and 84 deletions.
diff --git a/components/ui/aside.tsx b/components/ui/aside.tsx
@@ -16,7 +16,6 @@ import { tv } from "tailwind-variants"
 import { Button, ButtonPrimitive } from "./button"
 import { cr, useMediaQuery } from "./primitive"
 import { Sheet } from "./sheet"
-import { TouchTarget } from "./touch-target"
 
 const aside = tv({
   slots: {
@@ -162,9 +161,7 @@ const Item = ({ isCurrent, children, className, icon: Icon, ...props }: ItemProp
         <>
           {Icon && <Icon data-slot="icon" />}
           <span className="col-start-2">
-            <TouchTarget>
-              {typeof children === "function" ? children(values) : children}
-            </TouchTarget>
+            {typeof children === "function" ? children(values) : children}
             {props.badge && (
               <div className="bdx h-[1.30rem] px-1 rounded-md text-muted-fg text-xs font-medium ring-1 ring-fg/20 grid place-content-center w-auto inset-y-1/2 -translate-y-1/2 absolute right-1.5 bg-fg/[0.02] dark:bg-fg/10">
                 {props.badge}

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -9,7 +9,6 @@ import {
 import { tv } from "tailwind-variants"
 
 import { cr, focusButtonStyles } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const buttonStyles = tv(
   {
@@ -119,9 +118,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         )}
       >
         {(values) => (
-          <TouchTarget>
-            {typeof props.children === "function" ? props.children(values) : props.children}
-          </TouchTarget>
+          <>{typeof props.children === "function" ? props.children(values) : props.children}</>
         )}
       </ButtonPrimitive>
     )

diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
@@ -18,7 +18,6 @@ import { tv } from "tailwind-variants"
 
 import { Button, type ButtonProps } from "./button"
 import { useMediaQuery } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const dialogStyles = tv({
   slots: {
@@ -53,9 +52,7 @@ type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
 const Trigger = (props: ButtonPrimitiveProps) => (
   <ButtonPrimitive {...props}>
     {(values) => (
-      <TouchTarget>
-        {typeof props.children === "function" ? props.children(values) : props.children}
-      </TouchTarget>
+      <>{typeof props.children === "function" ? props.children(values) : props.children}</>
     )}
   </ButtonPrimitive>
 )

diff --git a/components/ui/disclosure.tsx b/components/ui/disclosure.tsx
@@ -18,7 +18,6 @@ import {
 import { tv } from "tailwind-variants"
 
 import { cn, cr, tm } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 interface DisclosureGroupProps extends DisclosureGroupPrimitiveProps {
   hideBorder?: boolean
@@ -128,7 +127,7 @@ const Trigger = ({ className, ...props }: ButtonProps) => {
       )}
     >
       {(values) => (
-        <TouchTarget>
+        <>
           {typeof props.children === "function" ? props.children(values) : props.children}
           {!hideIndicator && (
             <IconChevronLeft
@@ -137,7 +136,7 @@ const Trigger = ({ className, ...props }: ButtonProps) => {
               )}
             />
           )}
-        </TouchTarget>
+        </>
       )}
     </Button>
   )

diff --git a/components/ui/index.ts b/components/ui/index.ts
@@ -1,6 +1,5 @@
 export * from './primitive';
 export * from './progress-circle';
-export * from './touch-target';
 export * from './aside';
 export * from './tree';
 export * from './chart';

diff --git a/components/ui/link.tsx b/components/ui/link.tsx
@@ -6,7 +6,6 @@ import { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from "rea
 import { tv } from "tailwind-variants"
 
 import { cr } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const linkStyles = tv({
   base: "forced-colors:outline-[Highlight] relative focus-visible:outline-2 outline outline-offset-2 disabled:focus-visible:outline-0 outline-0 outline-primary rounded disabled:opacity-60 forced-colors:disabled:text-[GrayText] border-transparent transition-colors disabled:cursor-default",
@@ -38,9 +37,7 @@ const Link = ({ className, ...props }: LinkProps) => {
       )}
     >
       {(values) => (
-        <TouchTarget>
-          {typeof props.children === "function" ? props.children(values) : props.children}
-        </TouchTarget>
+        <>{typeof props.children === "function" ? props.children(values) : props.children}</>
       )}
     </LinkPrimitive>
   )

diff --git a/components/ui/menu.tsx b/components/ui/menu.tsx
@@ -27,7 +27,6 @@ import { DropdownItemDetails, dropdownItemStyles, DropdownSection } from "./drop
 import { Keyboard } from "./keyboard"
 import { Popover } from "./popover"
 import { cn, cr, tm } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 interface MenuContextProps {
   respectScreen: boolean
@@ -72,9 +71,7 @@ interface MenuTriggerProps extends ButtonProps {
 const Trigger = ({ className, ...props }: MenuTriggerProps) => (
   <Button className={trigger({ className })} {...props}>
     {(values) => (
-      <TouchTarget>
-        {typeof props.children === "function" ? props.children(values) : props.children}
-      </TouchTarget>
+      <>{typeof props.children === "function" ? props.children(values) : props.children}</>
     )}
   </Button>
 )

diff --git a/components/ui/show-more.tsx b/components/ui/show-more.tsx
@@ -7,7 +7,6 @@ import { tv } from "tailwind-variants"
 
 import { buttonStyles } from "./button"
 import { cr } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const showMoreStyles = tv({
   base: "text-sm leading-6 after:border-muted before:border-muted",
@@ -55,7 +54,7 @@ const ShowMore = ({
           className={buttonStyles({ shape: "circle", appearance: "outline", size: "small" })}
         >
           {cr(props.children, (children) => (
-            <TouchTarget>{children}</TouchTarget>
+            <>{children}</>
           ))}
         </ToggleButton>
       ) : (

diff --git a/components/ui/table.tsx b/components/ui/table.tsx
@@ -29,7 +29,6 @@ import { tv } from "tailwind-variants"
 
 import { Checkbox } from "./checkbox"
 import { cn, cr } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const table = tv({
   slots: {
@@ -143,13 +142,13 @@ const TableColumn = ({ children, isResizable = false, className, ...props }: Tab
           <>
             {children}
             {allowsSorting && (
-              <TouchTarget>
+              <>
                 <span className={cellIcon({ className: isHovered ? "bg-secondary-fg/10" : "" })}>
                   <IconChevronLgDown
                     className={sortDirection === "ascending" ? "rotate-180" : ""}
                   />
                 </span>
-              </TouchTarget>
+              </>
             )}
             {isResizable && <ColumnResizer />}
           </>
@@ -204,9 +203,9 @@ const TableRow = <T extends object>({
             className="relative bg-transparent pl-3.5 py-1.5 text-muted-fg pressed:text-fg"
             slot="drag"
           >
-            <TouchTarget>
+            <>
               <IconHamburger />
-            </TouchTarget>
+            </>
           </Button>
         </Cell>
       )}

diff --git a/components/ui/text-field.tsx b/components/ui/text-field.tsx
@@ -13,7 +13,6 @@ import {
 import type { FieldProps } from "./field"
 import { Description, FieldError, FieldGroup, fieldGroupPrefixStyles, Input, Label } from "./field"
 import { ctr } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 type InputType = Exclude<TextInputDOMProps["type"], "password">
 
@@ -80,13 +79,13 @@ const TextField = ({
             onPress={handleTogglePasswordVisibility}
             className="atrs relative isSfx x2e2 [&_[data-slot=icon]]:text-muted-fg focus:outline-none focus-visible:ring-1 focus-visible:ring-primary rounded"
           >
-            <TouchTarget>
+            <>
               {isPasswordVisible ? (
                 <IconEyeClosed className="transition animate-in" />
               ) : (
                 <IconEye className="transition animate-in" />
               )}
-            </TouchTarget>
+            </>
           </ButtonPrimitive>
         ) : isLoading && indicatorPlace === "suffix" ? (
           <IconLoader className="animate-spin isSfx" />

diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
@@ -6,7 +6,6 @@ import { ToggleButton as ToggleButtonPrimitive, ToggleButtonProps } from "react-
 import { tv, VariantProps } from "tailwind-variants"
 
 import { cr, focusButtonStyles } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const toggleStyles = tv({
   extend: focusButtonStyles,
@@ -59,7 +58,7 @@ const Toggle = ({ className, ...props }: ToggleProps) => {
       )}
     >
       {cr(props.children, (children) => (
-        <TouchTarget>{children}</TouchTarget>
+        <>{children}</>
       ))}
     </ToggleButtonPrimitive>
   )

diff --git a/components/ui/touch-target.tsx b/components/ui/touch-target.tsx
diff --git a/components/ui/tree.tsx b/components/ui/tree.tsx
@@ -15,7 +15,6 @@ import { tv } from "tailwind-variants"
 
 import { Checkbox } from "./checkbox"
 import { cr } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const treeStyles = tv({
   base: "flex border max-h-96 min-w-72 [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] py-2 rounded-lg bg-bg cursor-default lg:text-sm flex-col overflow-auto forced-color-adjust-none outline-none",
@@ -90,9 +89,9 @@ const ItemContent = (props: React.ComponentProps<typeof TreeItemContent>) => {
 const Indicator = () => {
   return (
     <Button className="shrink-0 relative" slot="chevron">
-      <TouchTarget>
+      <>
         <IconChevronRight className="size-5" />
-      </TouchTarget>
+      </>
     </Button>
   )
 }

diff --git a/resources/content/docs/components/buttons/button.mdx b/resources/content/docs/components/buttons/button.mdx
@@ -15,9 +15,6 @@ A button lets peeps do stuff with clicks, presses, taps, and keystrokes.
 ## Installation
 <Installation options={{isComponent: true}} items={['button']}/>
 
-## Composed Components
-<Composed components={['touch-target']}/>
-
 ## Manual Installation
 
 <Installation options={{isManual: true}} items={['react-aria-components']}/>

diff --git a/resources/content/docs/components/buttons/toggle.mdx b/resources/content/docs/components/buttons/toggle.mdx
@@ -15,9 +15,6 @@ A toggle button lets folks flip a choice on or off, like switching between two v
 ## Installation
 <Installation options={{isComponent: true}} items={['toggle']}/>
 
-## Composed Components
-<Composed components={['touch-target']}/>
-
 ## Manual Installation
 <Installation options={{isManual: true}} items={['react-aria-components']}/>
 

diff --git a/resources/content/docs/components/buttons/touch-target.mdx b/resources/content/docs/components/buttons/touch-target.mdx
diff --git a/resources/content/docs/components/collections/tree.mdx b/resources/content/docs/components/collections/tree.mdx
@@ -15,7 +15,7 @@ A tree is a hierarchical list of items, allowing users to navigate through neste
 <Installation options={{ isComponent: true }} items={['tree']}/>
 
 ## Composed Components
-<Composed components={['checkbox', 'touch-target']}/>
+<Composed components={['checkbox']}/>
 
 ## Manual Installation
 <Installation options={{ isManual: true }} items={['react-aria-components', 'justd-icons']} />

diff --git a/resources/content/docs/prologue/release-notes.mdx b/resources/content/docs/prologue/release-notes.mdx
@@ -20,6 +20,8 @@ This all changes are made on the 2024 release.
 - Remove border from Badge
 - Remove light dan dark from Badge
 - Fix color on Badge
+- Touch Target is now removed from components since it's not needed anymore
+- Table now have resize props [Table](/docs/components/collections/table)
 
 ## 10 October
 - Sidebar now can be collapse [Aside](/docs/components/layouts/aside)