diff --git a/src/components/delete-button/delete-button.css b/src/components/delete-button/delete-button.css new file mode 100644 index 000000000..3224e23b9 --- /dev/null +++ b/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%; +} diff --git a/src/components/delete-button/delete-button.jsx b/src/components/delete-button/delete-button.jsx new file mode 100644 index 000000000..6e84fb983 --- /dev/null +++ b/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 => ( +
+
+ +
+
+ +); + +DeleteButton.propTypes = { + className: PropTypes.string, + onClick: PropTypes.func.isRequired, + tabIndex: PropTypes.number +}; + +DeleteButton.defaultProps = { + tabIndex: 0 +}; + +export default DeleteButton; diff --git a/src/components/delete-button/icon--delete.svg b/src/components/delete-button/icon--delete.svg new file mode 100644 index 000000000..3edd347dd --- /dev/null +++ b/src/components/delete-button/icon--delete.svg @@ -0,0 +1,18 @@ + + + + Sound/General/Delete + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css index 6844ef1c5..dffc18902 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.css +++ b/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 { diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx index bcccb7fe7..458df186f 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.jsx +++ b/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} {(props.selected && props.onDeleteButtonClick) ? ( - ) : null } diff --git a/test/integration/sprites.test.js b/test/integration/sprites.test.js index 638c744a0..511d898eb 100644 --- a/test/integration/sprites.test.js +++ b/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(); diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap index 2aa7a9829..f7f19434a 100644 --- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap +++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap @@ -46,16 +46,20 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
- +
+ +