Fix small fixes (#117)

* fix: select scroll * fix: better z-index * chore: skeleton animation
droztech · Feb 6, 2024 · 7736e42 · 7736e42
1 parent 19e5160
commit 7736e42
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 30 deletions.
diff --git a/package/src/App.tsx b/package/src/App.tsx
@@ -1,10 +1,10 @@
 import LayoutDefault from './layout/Default'
-import { Select } from './library'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Eraser } from 'phosphor-react'
 import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { z } from 'zod'
+import { Skeleton } from './library'
 
 const formSchema = z.object({
   data: z.string().nonempty('required'),
@@ -27,15 +27,11 @@ function App() {
     reset()
     setTest('')
   }
-
   return (
     <LayoutDefault asChild terminal={[watch(), test]} buttons={[{ icon: <Eraser />, onClick: clearState }]}>
       <form onSubmit={handleSubmit(onSubmit)}>
         {/* ================================= TEST AREA ================================= */}
-        <Select.Root placeholder="Selecione">
-          <Select.Item value="abc">abc</Select.Item>
-          <Select.Item value="xyz">xyz</Select.Item>
-        </Select.Root>
+        <Skeleton className="h-8 w-full" />
         {/* ================================= TEST AREA ================================= */}
       </form>
     </LayoutDefault>

diff --git a/package/src/library/Menu/Root.tsx b/package/src/library/Menu/Root.tsx
@@ -21,7 +21,7 @@ const MenuRoot: FC<MenuRootProps> = ({ children, className, expanded, side = 'le
     <div
       className={cn(
         className,
-        'fixed z-50 flex h-full w-full flex-col overflow-hidden bg-gray-100 px-4 transition-all',
+        'fixed z-30 flex h-full w-full flex-col overflow-hidden bg-gray-100 px-4 transition-all',
         sideClass,
       )}
       {...rest}

diff --git a/package/src/library/Select/Root.tsx b/package/src/library/Select/Root.tsx
@@ -1,6 +1,6 @@
 import { cn } from '@/src/utils/class-merge.helper'
 import * as RadixSelect from '@radix-ui/react-select'
-import { CaretDown } from 'phosphor-react'
+import { CaretDown, CaretUp } from 'phosphor-react'
 import { FC } from 'react'
 
 const statusClassVariants = {
@@ -16,7 +16,6 @@ export interface SelectRootProps extends RadixSelect.SelectProps {
   portalContainer?: HTMLElement | null
   position?: RadixSelect.SelectContentProps['position']
   status?: keyof typeof statusClassVariants
-
   onChange?: (value: string) => void
 }
 
@@ -57,17 +56,24 @@ const SelectRoot: FC<SelectRootProps> = ({
           position={position}
           align={align}
           sideOffset={5}
-          collisionPadding={10}
-          className="z-100 flex min-w-[220px] !max-w-[calc(100vw-20px)] flex-col gap-2 rounded-lg border border-gray bg-gray-100 shadow"
+          collisionPadding={32}
+          avoidCollisions
+          className="z-100 flex max-h-[--radix-select-content-available-height] min-w-56 max-w-[--radix-select-content-available-width] flex-col gap-2 rounded-lg border border-gray bg-gray-100 shadow"
         >
-          <RadixSelect.Viewport className="p-3">
+          <RadixSelect.ScrollUpButton className="flex items-center justify-center p-2">
+            <CaretUp />
+          </RadixSelect.ScrollUpButton>
+          <RadixSelect.Viewport className="p-4">
             {placeholder && (
               <RadixSelect.Item value="placeholder" className="pointer-events-none px-3 py-2 text-gray" disabled>
                 <RadixSelect.ItemText>{placeholder}</RadixSelect.ItemText>
               </RadixSelect.Item>
             )}
             {children}
           </RadixSelect.Viewport>
+          <RadixSelect.ScrollDownButton className="flex items-center justify-center p-2">
+            <CaretDown />
+          </RadixSelect.ScrollDownButton>
         </RadixSelect.Content>
       </RadixSelect.Portal>
     </RadixSelect.Root>

diff --git a/package/src/library/Skeleton/index.tsx b/package/src/library/Skeleton/index.tsx
@@ -7,7 +7,14 @@ export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
 
 const Skeleton: FC<SkeletonProps> = ({ repeat = 1, className, ...rest }) =>
   [...Array(repeat)].map((item, index) => (
-    <div key={index} className={cn('animate-pulse rounded bg-gray-300', className)} {...rest} />
+    <div
+      key={index}
+      className={cn(
+        'animate-wave rounded bg-gradient-to-r from-gray-300 from-30% via-gray-200 via-50% to-gray-300 to-80% bg-[length:300%_100%]',
+        className,
+      )}
+      {...rest}
+    />
   ))
 
 Skeleton.displayName = 'Skeleton.'

diff --git a/package/src/library/Tooltip/Close.tsx b/package/src/library/Tooltip/Close.tsx
@@ -56,16 +56,21 @@ const TooltipClose: FC<TooltipCloseProps> = ({
         <RadixPopover.Content
           side={side}
           sideOffset={16}
-          className="flex max-w-xs items-center gap-x-3 rounded-md bg-gray-100 p-3 shadow-sm focus:outline-none"
+          className="z-100 flex max-h-[--radix-tooltip-content-available-height] max-w-[--radix-tooltip-content-available-width] focus:outline-none"
         >
-          <span className={cn(className, 'flex-1 text-sm')} {...rest}>
-            {content || text}
-          </span>
-          {closeButton && (
-            <RadixPopover.Close className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-300 text-primary transition-all hover:bg-primary hover:text-gray-100 active:bg-primary-500 active:text-gray-100">
-              <X size={16} />
-            </RadixPopover.Close>
-          )}
+          <div
+            className={cn('flex max-w-xs gap-2 rounded-md bg-background p-3 text-sm shadow-sm', className)}
+            {...rest}
+          >
+            <div>{content || text}</div>
+            {closeButton && (
+              <div className="flex-1">
+                <RadixPopover.Close className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-300 text-primary transition-all hover:bg-primary hover:text-gray-100 active:bg-primary-500 active:text-gray-100">
+                  <X size={16} />
+                </RadixPopover.Close>
+              </div>
+            )}
+          </div>
           <RadixPopover.Arrow className="h-2 w-5 fill-gray-100" />
         </RadixPopover.Content>
       </RadixPopover.Portal>

diff --git a/package/src/library/Tooltip/Hover.tsx b/package/src/library/Tooltip/Hover.tsx
@@ -56,16 +56,16 @@ const TooltipHover: FC<TooltipHoverProps> = ({
         open={tooltipOpen}
         onOpenChange={(value) => handleOpenChange(value)}
       >
-        <RadixTooltip.Trigger className="z-10" asChild>
-          {children}
-        </RadixTooltip.Trigger>
+        <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
         <RadixTooltip.Portal>
-          <RadixTooltip.Content side={side} sideOffset={5}>
+          <RadixTooltip.Content
+            side={side}
+            sideOffset={5}
+            className="z-100 max-h-[--radix-tooltip-content-available-height] max-w-[--radix-tooltip-content-available-width]"
+          >
             <RadixTooltip.Arrow className="h-2 w-5 fill-background" />
-            <div className="max-w-xs rounded-md bg-background p-3 shadow-sm">
-              <span className={cn(className, 'text-sm')} {...rest}>
-                {content || text}
-              </span>
+            <div className={cn('max-w-xs rounded-md bg-background p-3 text-sm shadow-sm', className)} {...rest}>
+              {content || text}
             </div>
           </RadixTooltip.Content>
         </RadixTooltip.Portal>

diff --git a/package/src/theme/config.ts b/package/src/theme/config.ts
@@ -32,6 +32,10 @@ export const theme = {
       from: { height: 'var(--radix-accordion-content-height)' },
       to: { height: '0' },
     },
+    wave: {
+      from: { backgroundPosition: '300% 0' },
+      to: { backgroundPosition: '-300% 0' },
+    },
   },
 
   animation: {
@@ -42,6 +46,7 @@ export const theme = {
     swipeOut: 'swipeOut 100ms ease-out',
     slideDown: 'slideDown 200ms ease-in',
     slideUp: 'slideUp 200ms ease-out',
+    wave: 'wave 10000ms infinite linear',
   },
 
   boxShadow: {

diff --git a/package/src/theme/theme-plugin.js b/package/src/theme/theme-plugin.js
@@ -135,6 +135,10 @@ module.exports = plugin(
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: '0' },
         },
+        wave: {
+          from: { backgroundPosition: '300% 0' },
+          to: { backgroundPosition: '-300% 0' },
+        },
       },
 
       animation: {
@@ -145,6 +149,7 @@ module.exports = plugin(
         swipeOut: 'swipeOut 100ms ease-out',
         slideDown: 'slideDown 200ms ease-in',
         slideUp: 'slideUp 200ms ease-out',
+        wave: 'wave 10000ms infinite linear',
       },
 
       minHeight: {