Merge branch 'develop' into horizontal

Author: raclim

README.md

@@ -29,7 +29,7 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 
 ### How Do I Know My Issue or Pull Request is Getting Reviewed?
 
-To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [PATCH Release](https://github.com/processing/p5.js-web-editor/milestone/10), [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
+To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
 
 Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones will be prioritized since they are planned to be merged for the next release to Production. Please feel free to [comment on this pinned issue](https://github.com/processing/p5.js-web-editor/issues/2534) if you would like your issue to be considered for the next release!
 
@@ -38,9 +38,7 @@ Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones
 
 We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards: 
 
-2.9.3 PATCH Release: By November 17, 2023
-
-2.10.0 MINOR Release: By December 15, 2023
+2.11.0 MINOR Release: By January 16, 2023
 
 [You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
 

client/common/Button.jsx

@@ -21,7 +21,8 @@ const displays = {
 const StyledButton = styled.button`
   &&& {
     font-weight: bold;
-    display: flex;
+    display: ${({ display }) =>
+      display === displays.inline ? 'inline-flex' : 'flex'};
     justify-content: center;
     align-items: center;
 
@@ -107,57 +108,6 @@ const StyledInlineButton = styled.button`
   }
 `;
 
-const StyledIconButton = styled.button`
-  &&& {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    width: ${remSize(32)}px;
-    height: ${remSize(32)}px;
-    text-decoration: none;
-
-    color: ${({ kind }) => prop(`Button.${kind}.default.foreground`)};
-    background-color: ${({ kind }) => prop(`Button.${kind}.hover.background`)};
-    cursor: pointer;
-    border: 1px solid transparent;
-    border-radius: 50%;
-    padding: ${remSize(8)} ${remSize(25)};
-    line-height: 1;
-
-    &:hover:not(:disabled) {
-      color: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
-      background-color: ${({ kind }) =>
-        prop(`Button.${kind}.hover.background`)};
-
-      svg * {
-        fill: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
-      }
-    }
-
-    &:active:not(:disabled) {
-      color: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
-      background-color: ${({ kind }) =>
-        prop(`Button.${kind}.active.background`)};
-
-      svg * {
-        fill: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
-      }
-    }
-
-    &:disabled {
-      color: ${({ kind }) => prop(`Button.${kind}.disabled.foreground`)};
-      background-color: ${({ kind }) =>
-        prop(`Button.${kind}.disabled.background`)};
-      cursor: not-allowed;
-    }
-
-    > * + * {
-      margin-left: ${remSize(8)};
-    }
-  }
-`;
-
 /**
  * A Button performs an primary action
  */
@@ -184,12 +134,8 @@ const Button = ({
   );
   let StyledComponent = StyledButton;
 
-  if (display === displays.inline) {
-    StyledComponent = StyledInlineButton;
-  }
-
   if (iconOnly) {
-    StyledComponent = StyledIconButton;
+    StyledComponent = StyledInlineButton;
   }
 
   if (href) {
@@ -265,7 +211,7 @@ Button.propTypes = {
   /**
    * The display type of the button—inline or block
    */
-  display: PropTypes.string,
+  display: PropTypes.oneOf(Object.values(displays)),
   /**
    * SVG icon to place after child content
    */
@@ -286,7 +232,7 @@ Button.propTypes = {
    * Specifying an href will use an <a> to link to the URL
    */
   href: PropTypes.string,
-  /*
+  /**
    * An ARIA Label used for accessibility
    */
   'aria-label': PropTypes.string,

client/common/IconButton.jsx

@@ -19,6 +19,7 @@ const IconButton = (props) => {
   return (
     <ButtonWrapper
       iconBefore={icon && <Icon />}
+      iconOnly
       display={Button.displays.inline}
       focusable="false"
       {...otherProps}

client/common/RouterTab.jsx

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+/**
+ * Wraps the react-router `NavLink` with dashboard-header__tab styling.
+ */
+const Tab = ({ children, to }) => (
+  <li className="dashboard-header__tab">
+    <NavLink
+      className="dashboard-header__tab__title"
+      activeClassName="dashboard-header__tab--selected"
+      to={{ pathname: to, state: { skipSavingPath: true } }}
+    >
+      {children}
+    </NavLink>
+  </li>
+);
+
+Tab.propTypes = {
+  children: PropTypes.string.isRequired,
+  to: PropTypes.string.isRequired
+};
+
+export default Tab;

client/modules/IDE/hooks/useKeyDownHandlers.js renamed to client/common/useKeyDownHandlers.js

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react';
+import useKeyDownHandlers from './useKeyDownHandlers';
+
+/**
+ * Common logic for Modal, Overlay, etc.
+ *
+ * Pass in the `onClose` handler.
+ *
+ * Can optionally pass in a ref, in case the `onClose` function needs to use the ref.
+ *
+ * Calls the provided `onClose` function on:
+ *  - Press Escape key.
+ *  - Click outside the element.
+ *
+ * Returns a ref to attach to the outermost element of the modal.
+ *
+ * @param {() => void} onClose
+ * @param {React.MutableRefObject<HTMLElement | null>} [passedRef]
+ * @return {React.MutableRefObject<HTMLElement | null>}
+ */
+export default function useModalClose(onClose, passedRef) {
+  const createdRef = useRef(null);
+  const modalRef = passedRef || createdRef;
+
+  useEffect(() => {
+    modalRef.current?.focus();
+
+    function handleClick(e) {
+      // ignore clicks on the component itself
+      if (modalRef.current && !modalRef.current.contains(e.target)) {
+        onClose?.();
+      }
+    }
+
+    document.addEventListener('click', handleClick, false);
+
+    return () => {
+      document.removeEventListener('click', handleClick, false);
+    };
+  }, [onClose, modalRef]);
+
+  useKeyDownHandlers({ escape: onClose });
+
+  return modalRef;
+}

client/common/useModalClose.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { remSize, prop } from '../theme';
 import IconButton from '../common/IconButton';
 
-const DropdownWrapper = styled.ul`
+export const DropdownWrapper = styled.ul`
   background-color: ${prop('Modal.background')};
   border: 1px solid ${prop('Modal.border')};
   box-shadow: 0 0 18px 0 ${prop('shadowColor')};
@@ -52,6 +52,7 @@ const DropdownWrapper = styled.ul`
     & button span,
     & a {
       padding: ${remSize(8)} ${remSize(16)};
+      font-size: ${remSize(12)};
     }
 
     * {

client/components/Dropdown.jsx

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import useModalClose from '../../common/useModalClose';
+import DownArrowIcon from '../../images/down-filled-triangle.svg';
+import { DropdownWrapper } from '../Dropdown';
+
+// TODO: enable arrow keys to navigate options from list
+
+const DropdownMenu = forwardRef(
+  (
+    { children, anchor, 'aria-label': ariaLabel, align, className, classes },
+    ref
+  ) => {
+    // Note: need to use a ref instead of a state to avoid stale closures.
+    const focusedRef = useRef(false);
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+
+    const anchorRef = useModalClose(close, ref);
+
+    const toggle = useCallback(() => {
+      setIsOpen((prevState) => !prevState);
+    }, [setIsOpen]);
+
+    const handleFocus = () => {
+      focusedRef.current = true;
+    };
+
+    const handleBlur = () => {
+      focusedRef.current = false;
+      setTimeout(() => {
+        if (!focusedRef.current) {
+          close();
+        }
+      }, 200);
+    };
+
+    return (
+      <div ref={anchorRef} className={className}>
+        <button
+          className={classes.button}
+          aria-label={ariaLabel}
+          tabIndex="0"
+          onClick={toggle}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+        >
+          {anchor ?? <DownArrowIcon focusable="false" aria-hidden="true" />}
+        </button>
+        {isOpen && (
+          <DropdownWrapper
+            className={classes.list}
+            align={align}
+            onMouseUp={() => {
+              setTimeout(close, 0);
+            }}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+          >
+            {children}
+          </DropdownWrapper>
+        )}
+      </div>
+    );
+  }
+);
+
+DropdownMenu.propTypes = {
+  /**
+   * Provide <MenuItem> elements as children to control the contents of the menu.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Can optionally override the contents of the button which opens the menu.
+   * Defaults to <DownArrowIcon>
+   */
+  anchor: PropTypes.node,
+  'aria-label': PropTypes.string.isRequired,
+  align: PropTypes.oneOf(['left', 'right']),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    button: PropTypes.string,
+    list: PropTypes.string
+  })
+};
+
+DropdownMenu.defaultProps = {
+  anchor: null,
+  align: 'right',
+  className: '',
+  classes: {}
+};
+
+export default DropdownMenu;

client/components/Dropdown/DropdownMenu.jsx

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ButtonOrLink from '../../common/ButtonOrLink';
+
+// TODO: combine with NavMenuItem
+
+function MenuItem({ hideIf, ...rest }) {
+  if (hideIf) {
+    return null;
+  }
+
+  return (
+    <li>
+      <ButtonOrLink {...rest} />
+    </li>
+  );
+}
+
+MenuItem.propTypes = {
+  ...ButtonOrLink.propTypes,
+  onClick: PropTypes.func,
+  value: PropTypes.string,
+  /**
+   * Provides a way to deal with optional items.
+   */
+  hideIf: PropTypes.bool
+};
+
+MenuItem.defaultProps = {
+  onClick: null,
+  value: null,
+  hideIf: false
+};
+
+export default MenuItem;

client/components/Dropdown/MenuItem.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useMediaQuery } from 'react-responsive';
+import styled from 'styled-components';
+import { prop, remSize } from '../../theme';
+import DropdownMenu from './DropdownMenu';
+
+import DownFilledTriangleIcon from '../../images/down-filled-triangle.svg';
+import MoreIconSvg from '../../images/more.svg';
+
+const DotsHorizontal = styled(MoreIconSvg)`
+  transform: rotate(90deg);
+`;
+
+const TableDropdownIcon = () => {
+  // TODO: centralize breakpoints
+  const isMobile = useMediaQuery({ maxWidth: 770 });
+
+  return isMobile ? (
+    <DotsHorizontal focusable="false" aria-hidden="true" />
+  ) : (
+    <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
+  );
+};
+
+const TableDropdown = styled(DropdownMenu).attrs({
+  align: 'right',
+  anchor: <TableDropdownIcon />
+})`
+  & > button {
+    width: ${remSize(25)};
+    height: ${remSize(25)};
+    padding: 0;
+    & svg {
+      max-width: 100%;
+      max-height: 100%;
+    }
+    & polygon,
+    & path {
+      fill: ${prop('inactiveTextColor')};
+    }
+  }
+  & ul {
+    top: 63%;
+    right: calc(100% - 26px);
+  }
+`;
+
+export default TableDropdown;