Merge pull request #4915 from chrisgarrity/4911-delete-icon

Add larger delete icon to make it easier to do on touch devices

src/components/delete-button/delete-button.css

@@ -0,0 +1,43 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+/* the delete button has .25rem invisible 'slop' around the visible button
+   to make it easier to tap on a touch device */
+.delete-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    overflow: hidden;  /* Mask the icon animation */
+    width: 2rem;
+    height: 2rem;
+    user-select: none;
+    cursor: pointer;
+    transition: all 0.15s ease-out;
+
+}
+
+.delete-button-visible {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  overflow: hidden;  /* Mask the icon animation */
+  width: 1.75rem;
+  height: 1.75rem;
+  box-shadow: 0px 0px 0px 2px $motion-transparent;
+  background-color: $motion-primary;
+  color: $ui-white;
+  border-radius: 50%;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.15s ease-out;
+}
+
+.delete-icon {
+    position: relative;
+    margin: 0.25rem;
+    user-select: none;
+    transform-origin: 50%;
+}

src/components/delete-button/delete-button.jsx

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+
+import styles from './delete-button.css';
+import deleteIcon from './icon--delete.svg';
+
+const DeleteButton = props => (
+    <div
+        aria-label="Delete"
+        className={classNames(
+            styles.deleteButton,
+            props.className
+        )}
+        role="button"
+        tabIndex={props.tabIndex}
+        onClick={props.onClick}
+    >
+        <div className={styles.deleteButtonVisible}>
+            <img
+                className={styles.deleteIcon}
+                src={deleteIcon}
+            />
+        </div>
+    </div>
+
+);
+
+DeleteButton.propTypes = {
+    className: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+    tabIndex: PropTypes.number
+};
+
+DeleteButton.defaultProps = {
+    tabIndex: 0
+};
+
+export default DeleteButton;

src/components/delete-button/icon--delete.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>Sound/General/Delete</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M4.54751641,6.99994966 L15.4523042,6.99994966 C15.7284466,6.99994966 15.9523042,7.22380729 15.9523042,7.49994966 C15.9523042,7.51506367 15.9516189,7.5301699 15.9502504,7.54522183 L15.1651793,16.1801783 C15.0715275,17.2102489 14.207924,17.9989808 13.1736049,17.9990897 L6.82662224,17.9997575 C5.79213514,17.9998663 4.92828345,17.2110677 4.83462539,16.180829 L4.04956981,7.54521753 C4.02456905,7.27020922 4.22724022,7.02700381 4.50224854,7.00200306 C4.51729904,7.00063483 4.53240384,6.99994966 4.54751641,6.99994966 Z M7.33333333,4 L7.88603796,2.34188612 C7.95409498,2.13771505 8.14516441,2 8.36037961,2 L11.6396204,2 C11.8548356,2 12.045905,2.13771505 12.113962,2.34188612 L12.6666667,4 L16.5,4 C16.7761424,4 17,4.22385763 17,4.5 L17,5.5 C17,5.77614237 16.7761424,6 16.5,6 L3.5,6 C3.22385763,6 3,5.77614237 3,5.5 L3,4.5 C3,4.22385763 3.22385763,4 3.5,4 L7.33333333,4 Z M8.38742589,4 L11.6125741,4 L11.2792408,3 L8.72075922,3 L8.38742589,4 Z M10,11.7204812 L11.5952436,10.1252376 C11.7905057,9.92997548 12.1070882,9.92997548 12.3023504,10.1252376 L12.3747624,10.1976496 C12.5700245,10.3929118 12.5700245,10.7094943 12.3747624,10.9047564 L10.7795188,12.5 L12.3747624,14.0952436 C12.5700245,14.2905057 12.5700245,14.6070882 12.3747624,14.8023504 L12.3023504,14.8747624 C12.1070882,15.0700245 11.7905057,15.0700245 11.5952436,14.8747624 L10,13.2795188 L8.40475641,14.8747624 C8.20949427,15.0700245 7.89291178,15.0700245 7.69764963,14.8747624 L7.62523762,14.8023504 C7.42997548,14.6070882 7.42997548,14.2905057 7.62523762,14.0952436 L9.22048121,12.5 L7.62523762,10.9047564 C7.42997548,10.7094943 7.42997548,10.3929118 7.62523762,10.1976496 L7.69764963,10.1252376 C7.89291178,9.92997548 8.20949427,9.92997548 8.40475641,10.1252376 L10,11.7204812 Z" id="path-1"></path>
+    </defs>
+    <g id="Sound/General/Delete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Trash-Can"></g>
+        <g id="White" mask="url(#mask-2)" fill="#FFFFFF">
+            <rect id="Color" x="0" y="0" width="20" height="20"></rect>
+        </g>
+    </g>
+</svg>

src/components/sprite-selector-item/sprite-selector-item.css

@@ -94,16 +94,16 @@
 
 .delete-button {
     position: absolute;
-    top: 0.125rem;
+    top: -.625rem;
     z-index: auto;
 }
 
 [dir="ltr"] .delete-button {
-    right: 0.125rem;
+    right: -.625rem;
 }
 
 [dir="rtl"] .delete-button {
-    left: 0.125rem;
+    left: -.625rem;
 }
 
 .number {

src/components/sprite-selector-item/sprite-selector-item.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import CloseButton from '../close-button/close-button.jsx';
+import DeleteButton from '../delete-button/delete-button.jsx';
 import styles from './sprite-selector-item.css';
 import {ContextMenuTrigger} from 'react-contextmenu';
 import {DangerousMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
@@ -48,9 +48,8 @@ const SpriteSelectorItem = props => (
             ) : null}
         </div>
         {(props.selected && props.onDeleteButtonClick) ? (
-            <CloseButton
+            <DeleteButton
                 className={styles.deleteButton}
-                size={CloseButton.SIZE_SMALL}
                 onClick={props.onDeleteButtonClick}
             />
         ) : null }

test/integration/sprites.test.js

@@ -75,7 +75,7 @@ describe('Working with sprites', () => {
     test('Deleting by x button on sprite tile', async () => {
         await loadUri(uri);
         await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
-        await clickXpath('//*[@aria-label="Close"]'); // Only visible close button is on the sprite
+        await clickXpath('//*[@aria-label="Delete"]'); // Only visible close button is on the sprite
         // Confirm that the stage has been switched to
         await findByText('Stage selected: no motion blocks');
         const logs = await getLogs();

test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap

@@ -46,16 +46,20 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
     </div>
   </div>
   <div
-    aria-label="Close"
+    aria-label="Delete"
     className=""
     onClick={[Function]}
     role="button"
-    tabIndex="0"
+    tabIndex={0}
   >
-    <img
-      className=""
-      src="test-file-stub"
-    />
+    <div
+      className={undefined}
+    >
+      <img
+        className={undefined}
+        src="test-file-stub"
+      />
+    </div>
   </div>
   <nav
     className="react-contextmenu"
@@ -126,16 +130,20 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
     </div>
   </div>
   <div
-    aria-label="Close"
+    aria-label="Delete"
     className=""
     onClick={[Function]}
     role="button"
-    tabIndex="0"
+    tabIndex={0}
   >
-    <img
-      className=""
-      src="test-file-stub"
-    />
+    <div
+      className={undefined}
+    >
+      <img
+        className={undefined}
+        src="test-file-stub"
+      />
+    </div>
   </div>
   <nav
     className="react-contextmenu"

test/unit/components/sprite-selector-item.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithIntl, shallowWithIntl, componentWithIntl} from '../../helpers/intl-helpers.jsx';
 import SpriteSelectorItemComponent from '../../../src/components/sprite-selector-item/sprite-selector-item';
-import CloseButton from '../../../src/components/close-button/close-button';
+import DeleteButton from '../../../src/components/delete-button/delete-button';
 
 describe('SpriteSelectorItemComponent', () => {
     let className;
@@ -56,7 +56,7 @@ describe('SpriteSelectorItemComponent', () => {
     test('does not have a close box when not selected', () => {
         selected = false;
         const wrapper = shallowWithIntl(getComponent());
-        expect(wrapper.find(CloseButton).exists()).toBe(false);
+        expect(wrapper.find(DeleteButton).exists()).toBe(false);
     });
 
     test('triggers callback when Box component is clicked', () => {
@@ -68,7 +68,7 @@ describe('SpriteSelectorItemComponent', () => {
 
     test('triggers callback when CloseButton component is clicked', () => {
         const wrapper = shallowWithIntl(getComponent());
-        wrapper.find(CloseButton).simulate('click');
+        wrapper.find(DeleteButton).simulate('click');
         expect(onDeleteButtonClick).toHaveBeenCalled();
     });
 

test/unit/containers/sprite-selector-item.test.jsx

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import {Provider} from 'react-redux';
 
 import SpriteSelectorItem from '../../../src/containers/sprite-selector-item';
-import CloseButton from '../../../src/components/close-button/close-button';
+import DeleteButton from '../../../src/components/delete-button/delete-button';
 
 describe('SpriteSelectorItem Container', () => {
     const mockStore = configureStore();
@@ -52,7 +52,7 @@ describe('SpriteSelectorItem Container', () => {
 
     test('should delete the sprite', () => {
         const wrapper = mountWithIntl(getContainer());
-        wrapper.find(CloseButton).simulate('click');
+        wrapper.find(DeleteButton).simulate('click');
         expect(onDeleteButtonClick).toHaveBeenCalledWith(1337);
     });
 });