Update demo app

Author: rafgraph

demo/package-lock.json

@@ -15,12 +15,12 @@
     "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.1",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^14.14.41",
-    "@types/react": "^17.0.3",
+    "@testing-library/user-event": "^13.1.8",
+    "@types/jest": "^26.0.23",
+    "@types/node": "^15.0.1",
+    "@types/react": "^17.0.4",
     "@types/react-dom": "^17.0.3",
     "@types/react-router-dom": "^5.1.7",
     "browserslist-config-css-grid": "^1.0.0",

demo/package.json

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
-      content="React Interactive, better interactive states than CSS pseudo classes and a callback when the interactive state changes."
+      content="React Interactive, better hover, active and focus states than CSS pseudo-classes, and a callback when the interactive state changes."
     />
 
     <link rel="icon" type=”image/svg+xml” href="%PUBLIC_URL%/favicon/green-grid-144-168-192.svg" />

demo/public/index.html

@@ -11,7 +11,7 @@ import { DemoContainer } from './ui/DemoContainer';
 
 const AppContainer = styled('div', {
   maxWidth: '500px',
-  padding: '10px 15px 25px',
+  padding: '12px 15px 25px',
   margin: '0 auto',
 });
 
@@ -22,16 +22,15 @@ const HeaderContainer = styled('header', {
 });
 
 const H1 = styled('h1', {
-  display: 'flex',
-  alignItems: 'center',
   fontSize: '26px',
-  marginRight: '10px',
+  marginRight: '16px',
 });
 
 const HeaderIconContainer = styled('span', {
-  width: '80px',
+  width: '78px',
   display: 'inline-flex',
   justifyContent: 'space-between',
+  gap: '10px',
 });
 
 export const App = () => {
@@ -40,11 +39,11 @@ export const App = () => {
       <HeaderContainer>
         <H1>React Interactive Demo</H1>
         <HeaderIconContainer>
+          <DarkModeButton />
           <GitHubIconLink
             title="GitHub repository for React Interactive"
             href="https://github.com/rafgraph/react-interactive"
           />
-          <DarkModeButton />
         </HeaderIconContainer>
       </HeaderContainer>
       <DemoContainer as="p" css={{ paddingBottom: '20px' }}>

demo/src/App.tsx

@@ -60,7 +60,7 @@ export const CssStickyHoverBug: React.VFC = () => {
       <p>
         On touch devices the{' '}
         <Link href="https://github.com/rafgraph/react-interactive#css-sticky-hover-bug">
-          CSS <code>:hover</code> state sticks
+          CSS :hover state sticks
         </Link>{' '}
         until you tap someplace else on the screen.
       </p>

demo/src/demos/CssStickyHoverBug.tsx

@@ -90,10 +90,10 @@ const Checkbox = styled(createInteractive(RadixCheckbox.Root), {
   border: '1px solid $highContrast',
   borderRadius: '2px',
 
-  // hover and active styles in LabelBase so styles are applied when label is hovered/active
+  // hover and active styles in label so styles are applied when label is hovered/active
   // '&.hover, &.active': {...},
   '&.focusFromKey': {
-    // !important required so hover and active styles from Label are not applied
+    // !important required so hover and active styles from label are not applied
     // to border and boxShadow when in the focusFromKey state
     borderColor: '$purple !important',
     boxShadow:

demo/src/demos/FormElements.tsx

@@ -35,6 +35,8 @@ const InteractiveInfo = styled(Interactive.Span, {
   height: 30,
   display: 'inline-block',
   verticalAlign: 'top',
+  // outline: 'none' required because this is a span (with tabIndex)
+  // which doesn't have "unset: all" in css reset applied
   outline: 'none',
   borderRadius: '50%',
   '&.hover': {

demo/src/demos/ShowOn.tsx

@@ -4,7 +4,6 @@ import {
   Interactive,
   createInteractive,
   eventFrom,
-  InteractiveExtendableProps,
   InteractiveState,
   InteractiveStateChange,
 } from 'react-interactive';
@@ -14,25 +13,8 @@ import { CheckIcon } from '@radix-ui/react-icons';
 import { DemoContainer, DemoHeading } from '../ui/DemoContainer';
 import { styled } from '../stitches.config';
 
-const StateLogContainer = styled('div', {
-  height: '200px',
-  padding: '0 5px',
-  border: '1px solid $highContrast',
-  overflowY: 'scroll',
-  fontFamily: 'monospace',
-  outline: 'none',
-  '&.focusFromKey': {
-    outline: '3px solid $colors$purple',
-    outlineOffset: '1px',
-  },
-});
-
-const InteractiveButton: React.VFC<InteractiveExtendableProps<'button'>> = (
-  props,
-) => <Interactive {...props} as="button" />;
-
-const DemoButton = styled(InteractiveButton, {
-  fontFamily: 'monospace',
+const DemoButton = styled(Interactive.Button, {
+  fontFamily: '$mono',
   fontSize: '20px',
   textAlign: 'center',
   width: '100%',
@@ -65,6 +47,21 @@ const DemoButton = styled(InteractiveButton, {
   },
 });
 
+const StateLogContainer = styled('div', {
+  height: '200px',
+  padding: '0 5px',
+  border: '1px solid $highContrast',
+  overflowY: 'scroll',
+  fontFamily: '$mono',
+  // outline: 'none' required because this is a div (with tabIndex)
+  // which doesn't have "unset: all" in css reset applied
+  outline: 'none',
+  '&.focusFromKey': {
+    outline: '3px solid $colors$purple',
+    outlineOffset: '1px',
+  },
+});
+
 const variantLookup: Record<string, any> = {
   'hover: true': 'green',
   'hover: false': 'normal',
@@ -136,11 +133,10 @@ const ExtendedTouchActiveOptionCheckbox = styled(
     width: '32px',
     height: '32px',
     borderRadius: '2px',
-    // hover and active are styled in LabelBase so styles are applied when label is hovered/active
+    // hover and active are styled in label so styles are applied when label is hovered/active
     // '&.hover, &.active': {...},
     '&.focusFromKey': {
-      outline: 'none',
-      // !important required so hover and active styles from Label are not applied
+      // !important required so hover and active styles from label are not applied
       // to border and boxShadow when in the focusFromKey state
       borderColor: '$purple !important',
       boxShadow: '0 0 0 1px $colors$purple !important',

demo/src/demos/StateLog.tsx

@@ -47,7 +47,7 @@ const ShowStressTestButton = styled(Interactive.Button, {
 const StressTestItem = styled(Interactive.Button, {
   display: 'block',
   width: '100%',
-  fontFamily: 'monospace',
+  fontFamily: '$mono',
   '&.hover, &.mouseActive': {
     color: '$green',
   },

demo/src/demos/StressTest.tsx

@@ -18,6 +18,9 @@ export const stitchesConfig = createCss({
       purple: 'hsl(270,100%,60%)',
       backgroundPurple: 'hsl(270,100%,92%)',
     },
+    fonts: {
+      mono: 'monospace',
+    },
   },
 });
 
@@ -83,8 +86,7 @@ export const globalCss = createGlobalCss({
     textSizeAdjust: 'none',
   },
   code: {
-    fontFamily: 'monospace',
-    lineHeight: '16px',
+    fontFamily: '$mono',
   },
   // pass down height: 100% to the #root div
   'body, html': {