feat: ensure that hover styles are not applied on mobile devices

uzh-bf · Jul 15, 2024 · e9573dc · e9573dc
1 parent 95a8564
commit e9573dc
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx
@@ -81,9 +81,9 @@ export function Dropdown({
           data-test={data?.test}
           className={twMerge(
             'inline-flex h-7 items-center justify-between gap-3 rounded-md border',
-            'bg-white py-1.5 pl-2 pr-2 shadow-sm hover:bg-primary-20 sm:hover:text-primary',
+            'bg-white py-1.5 pl-2 pr-2 shadow-sm hover:bg-primary-20 hover:text-primary',
             disabled &&
-              'hover:bg-none, sm:hover:text-none cursor-not-allowed bg-uzh-grey-20 opacity-70 shadow-sm',
+              'hover:bg-none, hover:text-none cursor-not-allowed bg-uzh-grey-20 opacity-70 shadow-sm',
             className?.trigger
           )}
           disabled={disabled}
@@ -110,7 +110,7 @@ export function Dropdown({
 
       <RadixDropdown.Content
         className={twMerge(
-          'rounded-lg border border-solid p-1 shadow-md',
+          'rounded-lg border border-solid bg-white p-1 shadow-md',
           className?.viewport
         )}
       >
@@ -203,7 +203,7 @@ const DropdownItem = ({
         data-test={data?.test}
         className={twMerge(
           className?.override,
-          `flex flex-row rounded px-2 py-0.5 hover:cursor-pointer hover:bg-primary-20 sm:hover:text-primary`,
+          `flex flex-row rounded px-2 py-0.5 hover:cursor-pointer hover:bg-primary-20 hover:text-primary`,
           active && twMerge('font-bold', className?.active),
           className?.root
         )}

diff --git a/src/Navigation.tsx b/src/Navigation.tsx
@@ -260,7 +260,7 @@ Navigation.DropdownItem = function DropdownItem({
       className={twMerge(
         className?.override,
         'w-full rounded-md px-4 py-3 text-black hover:bg-primary-60',
-        'focus:outline-none focus-visible:ring focus-visible:ring-opacity-75 sm:hover:text-white',
+        'hover:text-white focus:outline-none focus-visible:ring focus-visible:ring-opacity-75',
         className?.root
       )}
       style={style?.root}
@@ -367,7 +367,7 @@ Navigation.ButtonItem = function ButtonItem({
         onClick={!disabled ? onClick : undefined}
         className={twMerge(
           className?.override,
-          'cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-black sm:hover:text-white',
+          'cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-black hover:text-white',
           !disabled && 'hover:bg-primary-60',
           disabled && 'hover:text-none cursor-not-allowed text-gray-400',
           className?.root,
@@ -455,7 +455,7 @@ Navigation.IconItem = function IconItem({
         onClick={!disabled ? onClick : undefined}
         className={twMerge(
           className?.override,
-          'flex h-9 w-9 items-center justify-center rounded-md text-black sm:hover:text-white',
+          'flex h-9 w-9 items-center justify-center rounded-md text-black hover:text-white',
           !disabled && 'hover:bg-primary-60',
           disabled && 'hover:text-none cursor-not-allowed text-gray-400',
           className?.root,

diff --git a/src/Prose.tsx b/src/Prose.tsx
@@ -29,7 +29,7 @@ export function Prose({ id, data, className, children }: ProseProps) {
       data-cy={data?.cy}
       data-test={data?.test}
       className={twMerge(
-        'prose-h4:text-md prose prose-headings:font-sans prose-headings:font-bold prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg sm:hover:prose-a:text-primary',
+        'prose-h4:text-md prose prose-headings:font-sans prose-headings:font-bold prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg hover:prose-a:text-primary',
         className?.root
       )}
     >

diff --git a/src/Select.tsx b/src/Select.tsx
@@ -188,7 +188,7 @@ export function Select({
             className?.triggerOverride,
             'rounded-md px-2 py-1',
             !basic &&
-              'inline-flex h-7 items-center justify-between gap-2 border  bg-white p-4 shadow-sm hover:bg-primary-20 sm:hover:text-primary',
+              'inline-flex h-7 items-center justify-between gap-2 border  bg-white p-4 shadow-sm hover:bg-primary-20 hover:text-primary',
             disabled &&
               'hover:bg-none, hover:text-none cursor-not-allowed bg-uzh-grey-20 opacity-70 shadow-sm',
             size === 'sm' && '!text-sm',
@@ -261,7 +261,7 @@ const SelectItem = React.forwardRef(
         className={twMerge(
           className?.itemOverride,
           'relative flex select-none items-center rounded-md px-8 py-2 font-medium text-gray-700',
-          'hover:cursor-pointer hover:bg-primary-20 hover:outline-none focus:border-primary-40 sm:hover:text-primary',
+          'hover:cursor-pointer hover:bg-primary-20 hover:text-primary hover:outline-none focus:border-primary-40',
           disabled &&
             'cursor-not-allowed opacity-50 hover:bg-white hover:text-gray-700',
           size === 'sm' && 'px-7 text-sm',

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,6 +6,9 @@ const {
 
 module.exports = {
   content: ['src/**/**.tsx'],
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   theme: {
     extend: {
       ...TailwindAnimations,