Deeplinking playground - disable try button in mobile/tablet

.github/workflows/test-pull-request.yml

@@ -60,7 +60,7 @@ jobs:
       - name: Setup Node v16 for Yarn v3
         uses: actions/setup-node@v3
         with:
-          node-version: '16.15.0' # Current LTS version
+          node-version: "16.15.0" # Current LTS version
 
       - name: Enable Corepack for Yarn v3
         run: corepack enable

src/@adobe/gatsby-theme-aio/components/Code/index.js

@@ -15,7 +15,7 @@ import "@spectrum-css/tooltip";
 import "@adobe/prism-adobe";
 import { ActionButton } from "@adobe/gatsby-theme-aio/src/components/ActionButton";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import nextId from "react-id-generator";
 import classNames from "classnames";
 import Highlight, { defaultProps } from "prism-react-renderer";
@@ -69,6 +69,22 @@ const openCodePlayground = (codeContent, sampleId) => {
   window.open(url.toString(), "_blank");
 };
 
+// check if device is mobile/tablet
+const isMobileDevice = () => {
+  if (typeof window === "undefined") return false;
+
+  // pointer:coarse detects touchscreen devices (mobile/tablet)
+  const hasCoarsePointer = window.matchMedia("(pointer: coarse)").matches;
+  // hover:none detects devices without hover capability (touch-only)
+  const cannotHover = window.matchMedia("(hover: none)").matches;
+  // max-width helps distinguish true mobile/tablet from devices like touchscreen laptops
+  const isSmallScreen = window.matchMedia("(max-width: 768px)").matches;
+
+  return (
+    (hasCoarsePointer && cannotHover) || (hasCoarsePointer && isSmallScreen)
+  );
+};
+
 // parse language, try option and id.
 // usage: ```js{try id=createRectangle}
 function parseAttributes(className, metastring) {
@@ -93,12 +109,17 @@ function parseAttributes(className, metastring) {
 const Code = ({ children, className = "", theme, metastring = "" }) => {
   const [tooltipId] = useState(nextId);
   const [shouldShowCopyTooltip, setShouldShowCopyTooltip] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
 
   const { language, shouldShowTry, sampleId } = parseAttributes(
     className,
     metastring
   );
 
+  useEffect(() => {
+    setIsMobile(isMobileDevice());
+  }, []);
+
   return (
     <Highlight
       {...defaultProps}
@@ -135,8 +156,13 @@ const Code = ({ children, className = "", theme, metastring = "" }) => {
             {/* Try Button */}
             {shouldShowTry && (
               <ActionButton
-                className="spectrum-ActionButton code-action-button code-try-button"
-                onClick={() => openCodePlayground(children, sampleId)}
+                className={classNames(
+                  "spectrum-ActionButton code-action-button code-try-button",
+                  { "is-disabled": isMobile }
+                )}
+                onClick={() =>
+                  !isMobile && openCodePlayground(children, sampleId)
+                }
               >
                 Try
               </ActionButton>

src/@adobe/gatsby-theme-aio/components/Code/styles.css

@@ -47,6 +47,12 @@
   inset-inline-end: var(--spectrum-global-dimension-size-125);
 }
 
+.code-try-button.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .code-tooltip-container {
   position: absolute;
   inset-block-start: var(--spectrum-global-dimension-size-65);