Commit 4162a791 authored by Kyle Keating's avatar Kyle Keating

Minor change to tag-editor class names

- rename -“tag-editor__tag-list” to “tag-editor__tags” to avoid confusion between TagList component and TagEditor’s tag list class name
- rename “tag-editor__tag-item” to tag-editor__item” to match style of TagList’s “tag-list__item” class
parent 6c209ff3
...@@ -183,14 +183,14 @@ function TagEditor({ onEditTags, tags: tagsService, tagList }) { ...@@ -183,14 +183,14 @@ function TagEditor({ onEditTags, tags: tagsService, tagList }) {
return ( return (
<section className="tag-editor"> <section className="tag-editor">
<ul <ul
className="tag-editor__tag-list" className="tag-editor__tags"
aria-label="Suggested tags for annotation" aria-label="Suggested tags for annotation"
> >
{tagList.map(tag => { {tagList.map(tag => {
return ( return (
<li <li
key={`${tag}`} key={`${tag}`}
className="tag-editor__tag-item" className="tag-editor__item"
aria-label={`Tag: ${tag}`} aria-label={`Tag: ${tag}`}
> >
<span className="tag-editor__edit">{tag}</span> <span className="tag-editor__edit">{tag}</span>
......
...@@ -60,7 +60,7 @@ describe('TagEditor', function() { ...@@ -60,7 +60,7 @@ describe('TagEditor', function() {
it('adds appropriate tag values to the elements', () => { it('adds appropriate tag values to the elements', () => {
const wrapper = createComponent(); const wrapper = createComponent();
wrapper.find('li').forEach((tag, i) => { wrapper.find('li').forEach((tag, i) => {
assert.isTrue(tag.hasClass('tag-editor__tag-item')); assert.isTrue(tag.hasClass('tag-editor__item'));
assert.equal(tag.text(), fakeTags[i]); assert.equal(tag.text(), fakeTags[i]);
assert.equal(tag.prop('aria-label'), `Tag: ${fakeTags[i]}`); assert.equal(tag.prop('aria-label'), `Tag: ${fakeTags[i]}`);
}); });
......
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
width: 100%; width: 100%;
} }
&__tag-list { &__tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
&__tag-item { &__item {
display: flex; display: flex;
margin-right: 0.5em; margin-right: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
......
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