diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx index 789cf18d73..913e0b12a9 100644 --- a/src/content-tags-drawer/ContentTagsCollapsible.jsx +++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx @@ -176,7 +176,7 @@ const ContentTagsCollapsible = ({ contentId, taxonomyAndTagsData }) => { }; // This converts the contentTags prop to the tree structure mentioned above - React.useEffect(() => { + React.useMemo(() => { const resultTree = {}; contentTags.forEach(item => { @@ -251,18 +251,17 @@ const ContentTagsCollapsible = ({ contentId, taxonomyAndTagsData }) => { } }; - const handleSelectableBoxChange = (e) => { - // eslint-disable-next-line no-unused-expressions - const tagLineage = e.target.value.split(',').map(t => decodeURIComponent(t)); + const tagChangeHandler = (tagSelectableBoxValue, checked) => { + const tagLineage = tagSelectableBoxValue.split(',').map(t => decodeURIComponent(t)); const selectedTag = tagLineage.slice(-1)[0]; const addedTree = { ...addedContentTags }; - if (e.target.checked) { + if (checked) { // We "add" the tag to the SelectableBox.Set inside the addTags method addTags(addedTree, tagLineage, selectedTag); } else { // Remove tag from the SelectableBox.Set - remove(e.target.value); + remove(tagSelectableBoxValue); // We remove them from both incase we are unselecting from an // existing applied Tag or a newly added one @@ -274,11 +273,15 @@ const ContentTagsCollapsible = ({ contentId, taxonomyAndTagsData }) => { setUpdatingTags(true); }; + const handleSelectableBoxChange = React.useCallback((e) => { + tagChangeHandler(e.target.value, e.target.checked); + }); + return (
- +
diff --git a/src/content-tags-drawer/TagBubble.jsx b/src/content-tags-drawer/TagBubble.jsx index b28c1a912c..84a0cfbe55 100644 --- a/src/content-tags-drawer/TagBubble.jsx +++ b/src/content-tags-drawer/TagBubble.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { - Button, + Chip, } from '@edx/paragon'; import { Tag, Close } from '@edx/paragon/icons'; import PropTypes from 'prop-types'; @@ -11,27 +11,24 @@ const TagBubble = ({ value, implicit, level, lineage, removeTagHandler, }) => { const className = `tag-bubble mb-2 ${implicit ? 'implicit' : ''}`; - const tagIcon = () => (implicit ? : ); - const handleClick = (e) => { - if (e.target.value) { - e.target.checked = false; - removeTagHandler(e); + const handleClick = React.useCallback(() => { + if (!implicit) { + removeTagHandler(lineage.join(','), false); } - }; + }, [implicit, lineage]); return (
- +
); }; diff --git a/src/content-tags-drawer/TagBubble.scss b/src/content-tags-drawer/TagBubble.scss index 281d0fe209..e139d71226 100644 --- a/src/content-tags-drawer/TagBubble.scss +++ b/src/content-tags-drawer/TagBubble.scss @@ -1,13 +1,18 @@ -.tag-bubble.btn-outline-dark { +.tag-bubble.pgn__chip { border-color: $light-300; + border-style: solid; + border-width: 2px; + background-color: transparent; &:hover { - color: $white; + .pgn__chip__icon-before * { + color: $white; + fill: $white; + } + .pgn__chip__label { + color: $white; + } background-color: $dark; border-color: $dark; } } - -.implicit > .implicit-tag-icon { - color: $dark; -} diff --git a/src/content-tags-drawer/TagOutlineIcon.jsx b/src/content-tags-drawer/TagOutlineIcon.jsx index f817b1f077..7f9d439254 100644 --- a/src/content-tags-drawer/TagOutlineIcon.jsx +++ b/src/content-tags-drawer/TagOutlineIcon.jsx @@ -10,7 +10,6 @@ const TagOutlineIcon = (props) => ( aria-hidden="true" {...props} > -