Apply new responsive styles

Author: lindapaiste

client/components/Dropdown/DropdownMenu.jsx

@@ -7,7 +7,10 @@ import { DropdownWrapper } from '../Dropdown';
 // TODO: enable arrow keys to navigate options from list
 
 const DropdownMenu = forwardRef(
-  ({ children, 'aria-label': ariaLabel, align, className, classes }, ref) => {
+  (
+    { 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);
 
@@ -44,7 +47,7 @@ const DropdownMenu = forwardRef(
           onBlur={handleBlur}
           onFocus={handleFocus}
         >
-          <DownArrowIcon focusable="false" aria-hidden="true" />
+          {anchor ?? <DownArrowIcon focusable="false" aria-hidden="true" />}
         </button>
         {isOpen && (
           <DropdownWrapper
@@ -65,7 +68,15 @@ const DropdownMenu = forwardRef(
 );
 
 DropdownMenu.propTypes = {
-  children: PropTypes.node,
+  /**
+   * 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,
@@ -76,7 +87,7 @@ DropdownMenu.propTypes = {
 };
 
 DropdownMenu.defaultProps = {
-  children: null,
+  anchor: null,
   align: 'right',
   className: '',
   classes: {}

client/components/Dropdown/TableDropdown.jsx

@@ -1,11 +1,39 @@
+import React from 'react';
+import { useMediaQuery } from 'react-responsive';
 import styled from 'styled-components';
 import { prop, remSize } from '../../theme';
 import DropdownMenu from './DropdownMenu';
 
-const TableDropdown = styled(DropdownMenu).attrs({ align: 'right' })`
+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')};

client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap

@@ -2,7 +2,28 @@
 
 exports[`<Sketchlist /> snapshot testing 1`] = `
 <DocumentFragment>
-  <article
+  .c0 > button {
+  width: 2.0833333333333335rem;
+  height: 2.0833333333333335rem;
+  padding: 0;
+}
+
+.c0 > button svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.c0 > button polygon,
+.c0 > button path {
+  fill: #666;
+}
+
+.c0 ul {
+  top: 63%;
+  right: calc(100% - 26px);
+}
+
+<article
     class="sketches-table-container"
   >
     <table
@@ -86,7 +107,7 @@ exports[`<Sketchlist /> snapshot testing 1`] = `
             class="sketch-list__dropdown-column"
           >
             <div
-              class="sc-jSFjdj leDKmY"
+              class="c0"
             >
               <button
                 aria-label="Toggle Open/Close Sketch Options"
@@ -122,7 +143,7 @@ exports[`<Sketchlist /> snapshot testing 1`] = `
             class="sketch-list__dropdown-column"
           >
             <div
-              class="sc-jSFjdj leDKmY"
+              class="c0"
             >
               <button
                 aria-label="Toggle Open/Close Sketch Options"

client/styles/components/_sketch-list.scss

@@ -58,14 +58,9 @@
           .sketch-list__dropdown-column {
             position: absolute;
             top: 0;
-            right: 0;
+            right: #{4 / $base-font-size}rem;
             width: auto;
             margin: #{8 / $base-font-size}rem;
-
-            .sketch-list__dropdown-button {
-              transform: rotateZ(90deg) translateX(-30%);
-              transform-origin: center;
-            }
           }
         }
       }