Commit aa7f5fae authored by Lyza Danger Gardner's avatar Lyza Danger Gardner

Use SVG icon for cancel; make styling more accessible and consistent

parent 5be86536
......@@ -8,6 +8,7 @@ const { withServices } = require('../util/service-context');
const Menu = require('./menu');
const MenuItem = require('./menu-item');
const SvgIcon = require('./svg-icon');
/**
* Render a compound control button for publishing (saving) an annotation:
......@@ -75,11 +76,11 @@ function AnnotationPublishControl({
</Menu>
</div>
<button
className="annotation-publish-control__cancel-btn btn-clean"
className="action-button"
onClick={onCancel}
title="Cancel changes to this annotation"
>
<i className="h-icon-cancel-outline publish-annotation-cancel-btn__icon btn-icon" />{' '}
<SvgIcon name="cancel" className="action-button__icon--compact" />
Cancel
</button>
</div>
......
......@@ -191,7 +191,9 @@ describe('AnnotationPublishControl', () => {
const wrapper = createAnnotationPublishControl({
onCancel: fakeOnCancel,
});
const cancelBtn = wrapper.find('.annotation-publish-control__cancel-btn');
const cancelBtn = wrapper.find(
'[title="Cancel changes to this annotation"]'
);
cancelBtn.prop('onClick')();
assert.calledOnce(fakeOnCancel);
......
@use "../../mixins/buttons";
@use "../../mixins/forms";
@use "../../variables" as var;
.annotation-publish-control {
display: flex;
&__cancel-btn {
margin-left: 5px;
font-weight: normal;
color: var.$grey-4;
&:hover {
color: var.$grey-5;
}
&__icon {
margin-right: 3px;
transform: translateY(10%);
}
}
// A split button with a primary submit on the left and a drop-down menu
// of related options to the right
.annotation-publish-control__btn {
......@@ -32,6 +18,7 @@
height: $height;
position: relative;
margin-right: 1em;
// Align the menu arrow correctly with the ▼ in the toggle
&-menu-arrow {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment