Merge pull request #80 from vector-im/hover-touch

Disable hover styles on touchscreen devices
element-hq · Sep 19, 2023 · e2e29f8 · e2e29f8
2 parents b5249f2 + bca8ee5
commit e2e29f8
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 35 deletions.
diff --git a/src/components/Alert/Alert.module.css b/src/components/Alert/Alert.module.css
@@ -72,8 +72,15 @@ limitations under the License.
   cursor: pointer;
 }
 
-.close:hover {
+@media (hover) {
+  .close:hover {
+    color: var(--cpd-color-icon-primary);
+    background: var(--cpd-color-alpha-gray-300);
+    cursor: pointer;
+  }
+}
+
+.close:active {
   color: var(--cpd-color-icon-primary);
   background: var(--cpd-color-alpha-gray-300);
-  cursor: pointer;
 }
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -66,8 +66,10 @@ limitations under the License.
   border-width: 0;
 }
 
-.button[data-kind="primary"]:hover {
-  background: var(--cpd-color-bg-action-primary-hovered);
+@media (hover) {
+  .button[data-kind="primary"]:hover {
+    background: var(--cpd-color-bg-action-primary-hovered);
+  }
 }
 
 .button[data-kind="primary"]:active {
@@ -85,9 +87,11 @@ limitations under the License.
   background: var(--cpd-color-bg-canvas-default);
 }
 
-.button[data-kind="secondary"]:hover {
-  border-color: var(--cpd-color-border-interactive-hovered);
-  background: var(--cpd-color-bg-subtle-secondary);
+@media (hover) {
+  .button[data-kind="secondary"]:hover {
+    border-color: var(--cpd-color-border-interactive-hovered);
+    background: var(--cpd-color-bg-subtle-secondary);
+  }
 }
 
 .button[data-kind="secondary"]:active {
@@ -108,8 +112,10 @@ limitations under the License.
   background: transparent;
 }
 
-.button[data-kind="tertiary"]:hover {
-  background: var(--cpd-color-bg-subtle-secondary);
+@media (hover) {
+  .button[data-kind="tertiary"]:hover {
+    background: var(--cpd-color-bg-subtle-secondary);
+  }
 }
 
 .button[data-kind="tertiary"]:active {
@@ -126,9 +132,11 @@ limitations under the License.
   background: var(--cpd-color-bg-canvas-default);
 }
 
-.button[data-kind="destructive"]:hover {
-  border-color: var(--cpd-color-border-critical-hovered);
-  background: var(--cpd-color-bg-critical-subtle);
+@media (hover) {
+  .button[data-kind="destructive"]:hover {
+    border-color: var(--cpd-color-border-critical-hovered);
+    background: var(--cpd-color-bg-critical-subtle);
+  }
 }
 
 .button[data-kind="destructive"]:active {

diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
@@ -83,12 +83,26 @@ limitations under the License.
   border-color: var(--cpd-color-bg-critical-primary);
 }
 
-.checkbox[data-kind="primary"] [type="checkbox"]:hover + .checkbox-ui {
+@media (hover) {
+  .checkbox[data-kind="primary"] [type="checkbox"]:hover + .checkbox-ui {
+    color: var(--cpd-color-icon-quaternary);
+    border-color: var(--cpd-color-border-interactive-hovered);
+  }
+}
+
+.checkbox[data-kind="primary"] [type="checkbox"]:active + .checkbox-ui {
   color: var(--cpd-color-icon-quaternary);
   border-color: var(--cpd-color-border-interactive-hovered);
 }
 
-.checkbox[data-kind="critical"] [type="checkbox"]:hover + .checkbox-ui {
+@media (hover) {
+  .checkbox[data-kind="critical"] [type="checkbox"]:hover + .checkbox-ui {
+    color: var(--cpd-color-icon-quaternary);
+    border-color: var(--cpd-color-border-critical-hovered);
+  }
+}
+
+.checkbox[data-kind="critical"] [type="checkbox"]:active + .checkbox-ui {
   color: var(--cpd-color-icon-quaternary);
   border-color: var(--cpd-color-border-critical-hovered);
 }
@@ -103,10 +117,28 @@ limitations under the License.
   background: var(--cpd-color-bg-action-primary-disabled);
 }
 
-.checkbox[data-kind="primary"] [type="checkbox"]:checked:hover + .checkbox-ui {
+@media (hover) {
+  .checkbox[data-kind="primary"]
+    [type="checkbox"]:checked:hover
+    + .checkbox-ui {
+    background: var(--cpd-color-bg-action-primary-hovered);
+  }
+}
+
+.checkbox[data-kind="primary"] [type="checkbox"]:checked:active + .checkbox-ui {
   background: var(--cpd-color-bg-action-primary-hovered);
 }
 
-.checkbox[data-kind="critical"] [type="checkbox"]:checked:hover + .checkbox-ui {
+@media (hover) {
+  .checkbox[data-kind="critical"]
+    [type="checkbox"]:checked:hover
+    + .checkbox-ui {
+    background: var(--cpd-color-bg-critical-hovered);
+  }
+}
+
+.checkbox[data-kind="critical"]
+  [type="checkbox"]:checked:active
+  + .checkbox-ui {
   background: var(--cpd-color-bg-critical-hovered);
 }
diff --git a/src/components/Form/form.module.css b/src/components/Form/form.module.css
@@ -74,8 +74,15 @@ https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */
  */
 
 /* stylelint-disable no-descending-specificity */
-.control:hover,
-input:hover ~ .control {
+@media (hover) {
+  .control:hover,
+  input:hover ~ .control {
+    border-color: var(--cpd-color-border-interactive-hovered);
+  }
+}
+
+.control:active,
+input:active ~ .control {
   border-color: var(--cpd-color-border-interactive-hovered);
 }
 

diff --git a/src/components/IconButton/IconButton.module.css b/src/components/IconButton/IconButton.module.css
@@ -69,12 +69,29 @@ limitations under the License.
  * Hover state
  */
 
-.icon-button:not(:disabled):hover {
+@media (hover) {
+  .icon-button:not(:disabled):hover {
+    color: var(--cpd-color-icon-primary);
+    background: var(--cpd-color-bg-subtle-primary);
+  }
+}
+
+.icon-button:not(:disabled):active {
   color: var(--cpd-color-icon-primary);
   background: var(--cpd-color-bg-subtle-primary);
 }
 
-.icon-button[data-indicator]:is(:hover)::before {
+@media (hover) {
+  .icon-button[data-indicator]:is(:hover)::before {
+    /* Same colour as the background */
+    border: var(--cpd-icon-button-indicator-border-size) solid
+      var(--cpd-color-bg-subtle-primary);
+    top: 0;
+    right: 0;
+  }
+}
+
+.icon-button[data-indicator]:is(:active)::before {
   /* Same colour as the background */
   border: var(--cpd-icon-button-indicator-border-size) solid
     var(--cpd-color-bg-subtle-primary);

diff --git a/src/components/Link/Link.module.css b/src/components/Link/Link.module.css
@@ -31,12 +31,14 @@ limitations under the License.
   color: var(--cpd-color-text-critical-primary);
 }
 
-.link[data-kind="primary"]:hover {
-  background: var(--cpd-color-gray-300);
-}
-
-.link[data-kind="critical"]:hover {
-  background: var(--cpd-color-red-300);
+@media (hover) {
+  .link[data-kind="primary"]:hover {
+    background: var(--cpd-color-gray-300);
+  }
+
+  .link[data-kind="critical"]:hover {
+    background: var(--cpd-color-red-300);
+  }
 }
 
 .link:active {

diff --git a/src/components/Radio/Radio.module.css b/src/components/Radio/Radio.module.css
@@ -59,12 +59,20 @@ limitations under the License.
   background: var(--cpd-color-icon-on-solid-primary);
 }
 
-:hover + .radio-ui::after {
+@media (hover) {
+  :hover + .radio-ui::after {
+    background: var(--cpd-color-icon-quaternary);
+  }
+}
+
+:active + .radio-ui::after {
   background: var(--cpd-color-icon-quaternary);
 }
 
-:checked:hover + .radio-ui::after {
-  background: var(--cpd-color-icon-on-solid-primary);
+@media (hover) {
+  :checked:hover + .radio-ui::after {
+    background: var(--cpd-color-icon-on-solid-primary);
+  }
 }
 
 [data-kind="primary"] .radio-ui {
@@ -90,12 +98,26 @@ limitations under the License.
   border-color: var(--cpd-color-bg-critical-primary);
 }
 
-.radio[data-kind="primary"] [type="radio"]:hover + .radio-ui {
+@media (hover) {
+  .radio[data-kind="primary"] [type="radio"]:hover + .radio-ui {
+    color: var(--cpd-color-icon-quaternary);
+    border-color: var(--cpd-color-border-interactive-hovered);
+  }
+}
+
+.radio[data-kind="primary"] [type="radio"]:active + .radio-ui {
   color: var(--cpd-color-icon-quaternary);
   border-color: var(--cpd-color-border-interactive-hovered);
 }
 
-.radio[data-kind="critical"] [type="radio"]:hover + .radio-ui {
+@media (hover) {
+  .radio[data-kind="critical"] [type="radio"]:hover + .radio-ui {
+    color: var(--cpd-color-icon-quaternary);
+    border-color: var(--cpd-color-border-critical-hovered);
+  }
+}
+
+.radio[data-kind="critical"] [type="radio"]:active + .radio-ui {
   color: var(--cpd-color-icon-quaternary);
   border-color: var(--cpd-color-border-critical-hovered);
 }
@@ -110,10 +132,22 @@ limitations under the License.
   background: var(--cpd-color-bg-action-primary-disabled);
 }
 
-.radio[data-kind="primary"] [type="radio"]:checked:hover + .radio-ui {
+@media (hover) {
+  .radio[data-kind="primary"] [type="radio"]:checked:hover + .radio-ui {
+    background: var(--cpd-color-bg-action-primary-hovered);
+  }
+}
+
+.radio[data-kind="primary"] [type="radio"]:checked:active + .radio-ui {
   background: var(--cpd-color-bg-action-primary-hovered);
 }
 
-.radio[data-kind="critical"] [type="radio"]:checked:hover + .radio-ui {
+@media (hover) {
+  .radio[data-kind="critical"] [type="radio"]:checked:hover + .radio-ui {
+    background: var(--cpd-color-bg-critical-hovered);
+  }
+}
+
+.radio[data-kind="critical"] [type="radio"]:checked:active + .radio-ui {
   background: var(--cpd-color-bg-critical-hovered);
 }
diff --git a/src/components/Toggle/Toggle.module.css b/src/components/Toggle/Toggle.module.css
@@ -53,11 +53,24 @@ limitations under the License.
   border-color: var(--cpd-color-bg-action-primary-rest);
 }
 
-[type="checkbox"]:hover + .toggle-ui {
+@media (hover) {
+  [type="checkbox"]:hover + .toggle-ui {
+    border-color: var(--cpd-color-border-interactive-hovered);
+  }
+}
+
+[type="checkbox"]:active + .toggle-ui {
   border-color: var(--cpd-color-border-interactive-hovered);
 }
 
-:checked:hover + .toggle-ui {
+@media (hover) {
+  :checked:hover + .toggle-ui {
+    background: var(--cpd-color-bg-action-primary-hovered);
+    border-color: var(--cpd-color-bg-action-primary-hovered);
+  }
+}
+
+:checked:active + .toggle-ui {
   background: var(--cpd-color-bg-action-primary-hovered);
   border-color: var(--cpd-color-bg-action-primary-hovered);
 }