Skip to content

Commit

Permalink
Merge pull request #191 from creative-commoners/pulls/4/hover-styling
Browse files Browse the repository at this point in the history
ENH Improve hover active and focus state styling
  • Loading branch information
sabina-talipova authored Jan 29, 2024
2 parents 76b38e7 + 836d665 commit 449b376
Show file tree
Hide file tree
Showing 8 changed files with 39 additions and 13 deletions.
2 changes: 1 addition & 1 deletion client/dist/js/bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/styles/bundle.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion client/src/components/LinkField/LinkField.js
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const LinkField = ({
? i18n._t('LinkField.ARCHIVE_CONFIRM', 'Are you sure you want to archive this link?')
: i18n._t('LinkField.DELETE_CONFIRM', 'Are you sure you want to delete this link?');
if (!window.confirm(deleteText)) {
return;
return false;
}
let endpoint = joinUrlPaths(Config.getSection(section).form.linkForm.deleteUrl, linkID.toString());
const parsedURL = url.parse(endpoint);
Expand Down
10 changes: 10 additions & 0 deletions client/src/components/LinkField/LinkField.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,13 @@
.link-field__save-record-first {
padding-top: 7px;
}

.link-field__container .btn-link {
position: absolute;
right: 0;

&:focus,
&:not(:disabled):not(.disabled):active {
box-shadow: none;
}
}
4 changes: 2 additions & 2 deletions client/src/components/LinkPicker/LinkPicker.scss
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
}

&--draft::before {
background-color: $state-draft-bg;;
background-color: $state-draft-bg;
}

&--modified::before {
Expand Down Expand Up @@ -163,7 +163,7 @@
.link-picker__link-detail {
flex-grow: 1;
width: 100%;
padding-left: 3.5rem;
padding: 0 5rem 0 3.5rem;
}

.link-picker__delete {
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/LinkPicker/LinkPickerMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const LinkPickerMenu = ({ types, onSelect }) => {
toggle={toggle}
className="link-picker__menu"
>
<DropdownToggle className="link-picker__menu-toggle font-icon-plus-1" caret>
<DropdownToggle className="link-picker__menu-toggle font-icon-plus-1" caret color="secondary">
{i18n._t('LinkField.ADD_LINK', 'Add Link')}
</DropdownToggle>
<DropdownMenu>
Expand Down
22 changes: 19 additions & 3 deletions client/src/components/LinkPicker/LinkPickerTitle.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,10 +97,26 @@ const LinkPickerTitle = ({
<span className="link-picker__url">{description}</span>
</small>
</div>
{(canDelete && !readonly) &&
// This is a <span> rather than a <Button> because we're inside a <Button> and
// trigger an error when you attempt to nest a <Button> inside a <Button>.
<span
role="button"
tabIndex="0"
className="link-picker__delete btn btn-link"
onKeyDown={(evt) => {
if ((evt.code === 'Enter' || evt.code === 'Space') && !loading) {
evt.nativeEvent.stopImmediatePropagation();
evt.stopPropagation();
onDelete(id);
evt.nativeEvent.preventDefault();
evt.preventDefault();
}
}}
onClick={stopPropagation(() => !loading ? onDelete(id) : null)}
>{deleteText}</span>
}
</Button>
{(canDelete && !readonly && !disabled) &&
<Button disabled={loading} className="link-picker__delete" color="link" onClick={stopPropagation(() => onDelete(id))}>{deleteText}</Button>
}
</div>
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ test('LinkPickerTitle delete button should fire the onDelete callback when not l
})}
/>
</LinkFieldContext.Provider>);
fireEvent.click(container.querySelector('button.link-picker__delete'));
fireEvent.click(container.querySelector('.link-picker__delete'));
expect(mockOnDelete).toHaveBeenCalledTimes(1);
});

Expand All @@ -71,7 +71,7 @@ test('LinkPickerTitle delete button should not fire the onDelete callback while
})}
/>
</LinkFieldContext.Provider>);
fireEvent.click(container.querySelector('button.link-picker__delete'));
fireEvent.click(container.querySelector('.link-picker__delete'));
expect(mockOnDelete).toHaveBeenCalledTimes(0);
});

Expand All @@ -80,7 +80,7 @@ test('LinkPickerTitle main button should fire the onClick callback when not load
const { container } = render(<LinkFieldContext.Provider value={{ loading: false }}>
<LinkPickerTitle {...makeProps({ onClick: mockOnClick })} />
</LinkFieldContext.Provider>);
fireEvent.click(container.querySelector('button.link-picker__button'));
fireEvent.click(container.querySelector('.link-picker__button'));
expect(mockOnClick).toHaveBeenCalledTimes(1);
});

Expand All @@ -89,7 +89,7 @@ test('LinkPickerTitle main button should not fire the onClick callback while loa
const { container } = render(<LinkFieldContext.Provider value={{ loading: true }}>
<LinkPickerTitle {...makeProps({ onClick: mockOnClick })} />
</LinkFieldContext.Provider>);
fireEvent.click(container.querySelector('button.link-picker__button'));
fireEvent.click(container.querySelector('.link-picker__button'));
expect(mockOnClick).toHaveBeenCalledTimes(0);
});

Expand Down

0 comments on commit 449b376

Please sign in to comment.