Surf it, scroll it, pause it, click it (#2772)

* Surf it, scroll it, pause it, click it

* Ignore disabled buttons

* Apply to more buttons

* Update CopyToClipboard.tsx

* Don't translate dropdown

* Make motion safe

---------

Co-authored-by: David Crespo <[email protected]>

Author: benjaminleonard

app/components/DocsPopover.tsx

@@ -46,11 +46,10 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
   const title = `Learn about ${heading}`
   return (
     <Popover>
-      <PopoverButton
-        className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}
-        title={title}
-      >
-        <Info16Icon aria-hidden className="shrink-0" />
+      <PopoverButton title={title}>
+        <div className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}>
+          <Info16Icon aria-hidden className="shrink-0" />
+        </div>
       </PopoverButton>
       <PopoverPanel
         // popover-panel needed for enter animation

app/components/MoreActionsMenu.tsx

@@ -27,14 +27,15 @@ export const MoreActionsMenu = ({
 }: MoreActionsMenuProps) => {
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        aria-label={label}
-        className={cn(
-          'flex items-center justify-center rounded border border-default hover:bg-tertiary',
-          isSmall ? 'h-6 w-6' : 'h-8 w-8'
-        )}
-      >
-        <More12Icon />
+      <DropdownMenu.Trigger aria-label={label}>
+        <div
+          className={cn(
+            'active-clicked flex items-center justify-center rounded border border-default hover:bg-tertiary',
+            isSmall ? 'h-6 w-6' : 'h-8 w-8'
+          )}
+        >
+          <More12Icon />
+        </div>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content className="mt-2">{children}</DropdownMenu.Content>
     </DropdownMenu.Root>

app/components/TopBar.tsx

@@ -132,17 +132,18 @@ function UserMenu() {
   const { me } = useCurrentUser()
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        className={cn(
-          buttonStyle({ size: 'sm', variant: 'ghost' }),
-          'flex items-center gap-1.5 !px-2 !border-secondary'
-        )}
-        aria-label="User menu"
-      >
-        <Profile16Icon className="text-tertiary" />
-        <span className="normal-case text-sans-md text-default">
-          {me.displayName || 'User'}
-        </span>
+      <DropdownMenu.Trigger aria-label="User menu">
+        <div
+          className={cn(
+            buttonStyle({ size: 'sm', variant: 'ghost' }),
+            'flex items-center gap-1.5 !px-2 !border-secondary'
+          )}
+        >
+          <Profile16Icon className="text-tertiary" />
+          <span className="normal-case text-sans-md text-default">
+            {me.displayName || 'User'}
+          </span>
+        </div>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content gap={8}>
         <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
@@ -160,16 +161,15 @@ function UserMenu() {
 function SiloSystemPicker({ level }: { level: 'silo' | 'system' }) {
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        className="flex items-center rounded border px-2 py-1.5 text-sans-md text-default border-secondary hover:bg-hover"
-        aria-label="Switch between system and silo"
-      >
-        <div className="flex items-center text-tertiary">
-          {level === 'system' ? <Servers16Icon /> : <Organization16Icon />}
+      <DropdownMenu.Trigger aria-label="Switch between system and silo">
+        <div className="active-clicked flex items-center rounded border px-2 py-1.5 text-sans-md text-default border-secondary hover:bg-hover">
+          <div className="flex items-center text-tertiary">
+            {level === 'system' ? <Servers16Icon /> : <Organization16Icon />}
+          </div>
+          <div className="ml-1.5 mr-3">{level === 'system' ? 'System' : 'Silo'}</div>
+          {/* aria-hidden is a tip from the Reach docs */}
+          <SelectArrows6Icon className="text-quaternary" aria-hidden />
         </div>
-        <div className="ml-1.5 mr-3">{level === 'system' ? 'System' : 'Silo'}</div>
-        {/* aria-hidden is a tip from the Reach docs */}
-        <SelectArrows6Icon className="text-quaternary" aria-hidden />
       </DropdownMenu.Trigger>
       <DropdownMenu.Content className="mt-2 max-h-80 overflow-y-auto" anchor="bottom start">
         <SystemSiloItem to={pb.silos()} label="System" isSelected={level === 'system'} />

app/ui/lib/Button.tsx

@@ -36,7 +36,7 @@ export const buttonStyle = ({
   variant = 'primary',
 }: ButtonStyleProps = {}) => {
   return cn(
-    'ox-button elevation-1 rounded inline-flex items-center justify-center align-top disabled:cursor-default shrink-0',
+    'ox-button active-clicked elevation-1 rounded inline-flex items-center justify-center align-top disabled:cursor-default shrink-0',
     `btn-${variant}`,
     sizeStyle[size],
     variant === 'danger'

app/ui/lib/CopyToClipboard.tsx

@@ -53,7 +53,7 @@ export const CopyToClipboard = ({
   return (
     <button
       className={cn(
-        'relative h-5 w-5 rounded',
+        'active-clicked relative h-5 w-5 rounded',
         hasCopied
           ? 'text-accent bg-accent-secondary'
           : 'text-tertiary hover:text-default hover:bg-hover',

app/ui/styles/components/button.css

@@ -9,6 +9,9 @@
 .ox-button {
   @apply relative;
 }
+.active-clicked:active:not(.visually-disabled) {
+  @apply motion-safe:translate-y-px;
+}
 .ox-button:after {
   content: '';
   @apply absolute bottom-0 left-0 right-0 top-0 rounded border border-current opacity-[0.05];