feat: Move dropdown arrows to left of taxonomy

open-craft · Apr 9, 2024 · ad15c04 · ad15c04
1 parent 7762945
commit ad15c04
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 57 deletions.
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -5,14 +5,13 @@
 import React from 'react';
 import Select, { components } from 'react-select';
 import {
-  Badge,
   Collapsible,
   Button,
   Spinner,
   Chip,
+  Icon,
 } from '@openedx/paragon';
-import { Tag } from '@openedx/paragon/icons';
-import classNames from 'classnames';
+import { Tag, KeyboardArrowDown, KeyboardArrowUp } from '@openedx/paragon/icons';
 import { SelectableBox } from '@edx/frontend-lib-content-components';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { debounce } from 'lodash';
@@ -393,61 +392,76 @@ const ContentTagsCollapsible = ({
 
   return (
     <div className="d-flex">
-      <Collapsible title={<h4>{name}</h4>} styling="card-lg" className="taxonomy-tags-collapsible">
-        <div key={taxonomyId}>
-          <ContentTagsTree tagsTree={appliedContentTagsTree} removeTagHandler={removeAppliedTagHandler} />
-        </div>
+      <Collapsible.Advanced
+        className="collapsible-card-lg taxonomy-tags-collapsible"
+      >
+        <Collapsible.Trigger className="collapsible-trigger pl-2.5">
+          <Collapsible.Visible whenClosed>
+            <Icon src={KeyboardArrowDown} />
+          </Collapsible.Visible>
 
-        <div className="d-flex taxonomy-tags-selector-menu">
+          <Collapsible.Visible whenOpen>
+            <Icon src={KeyboardArrowUp} />
+          </Collapsible.Visible>
+          <h4 className="flex-grow-1 pl-2">{name}</h4>
+        </Collapsible.Trigger>
 
-          {canTagObject && (
-            <Select
-              onBlur={handleOnBlur}
-              styles={{
-                // Overriding 'x' button styles for staged tags when navigating by keyboard
-                multiValueRemove: (base, state) => ({
-                  ...base,
-                  background: state.isFocused ? 'black' : base.background,
-                  color: state.isFocused ? 'white' : base.color,
-                }),
-              }}
-              menuIsOpen={selectMenuIsOpen}
-              onFocus={onSelectMenuFocus}
-              onKeyDown={handleSelectOnKeyDown}
-              ref={/** @type {React.RefObject} */(selectRef)}
-              isMulti
-              isLoading={updateTags.isLoading}
-              isDisabled={updateTags.isLoading}
-              name="tags-select"
-              placeholder={intl.formatMessage(messages.collapsibleAddTagsPlaceholderText)}
-              isSearchable
-              className="d-flex flex-column flex-fill"
-              classNamePrefix="react-select-add-tags"
-              onInputChange={handleSearchChange}
-              onChange={handleStagedTagsMenuChange}
-              components={{
-                Menu: CustomMenu,
-                LoadingIndicator: CustomLoadingIndicator,
-                IndicatorsContainer: CustomIndicatorsContainer,
-              }}
-              closeMenuOnSelect={false}
-              blurInputOnSelect={false}
-              handleSelectableBoxChange={handleSelectableBoxChange}
-              checkedTags={checkedTags}
-              taxonomyId={taxonomyId}
-              appliedContentTagsTree={appliedContentTagsTree}
-              stagedContentTagsTree={stagedContentTagsTree}
-              handleCommitStagedTags={handleCommitStagedTags}
-              handleCancelStagedTags={handleCancelStagedTags}
-              searchTerm={searchTerm}
-              selectCancelRef={selectCancelRef}
-              selectAddRef={selectAddRef}
-              selectInlineAddRef={selectInlineAddRef}
-              value={stagedContentTags}
-            />
-          )}
-        </div>
-      </Collapsible>
+        <Collapsible.Body className="collapsible-body">
+          <div key={taxonomyId}>
+            <ContentTagsTree tagsTree={appliedContentTagsTree} removeTagHandler={removeAppliedTagHandler} />
+          </div>
+
+          <div className="d-flex taxonomy-tags-selector-menu">
+
+            {canTagObject && (
+              <Select
+                onBlur={handleOnBlur}
+                styles={{
+                  // Overriding 'x' button styles for staged tags when navigating by keyboard
+                  multiValueRemove: (base, state) => ({
+                    ...base,
+                    background: state.isFocused ? 'black' : base.background,
+                    color: state.isFocused ? 'white' : base.color,
+                  }),
+                }}
+                menuIsOpen={selectMenuIsOpen}
+                onFocus={onSelectMenuFocus}
+                onKeyDown={handleSelectOnKeyDown}
+                ref={/** @type {React.RefObject} */(selectRef)}
+                isMulti
+                isLoading={updateTags.isLoading}
+                isDisabled={updateTags.isLoading}
+                name="tags-select"
+                placeholder={intl.formatMessage(messages.collapsibleAddTagsPlaceholderText)}
+                isSearchable
+                className="d-flex flex-column flex-fill"
+                classNamePrefix="react-select-add-tags"
+                onInputChange={handleSearchChange}
+                onChange={handleStagedTagsMenuChange}
+                components={{
+                  Menu: CustomMenu,
+                  LoadingIndicator: CustomLoadingIndicator,
+                  IndicatorsContainer: CustomIndicatorsContainer,
+                }}
+                closeMenuOnSelect={false}
+                blurInputOnSelect={false}
+                handleSelectableBoxChange={handleSelectableBoxChange}
+                checkedTags={checkedTags}
+                taxonomyId={taxonomyId}
+                appliedContentTagsTree={appliedContentTagsTree}
+                stagedContentTagsTree={stagedContentTagsTree}
+                handleCommitStagedTags={handleCommitStagedTags}
+                handleCancelStagedTags={handleCancelStagedTags}
+                searchTerm={searchTerm}
+                selectCancelRef={selectCancelRef}
+                selectAddRef={selectAddRef}
+                selectInlineAddRef={selectInlineAddRef}
+                value={stagedContentTags}
+              />
+            )}
+          </div>
+        </Collapsible.Body>
+      </Collapsible.Advanced>
       <div className="d-flex align-items-start pt-2.5 taxonomy-tags-count-chip">
         <Chip
           iconBefore={Tag}

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.scss b/src/content-tags-drawer/ContentTagsCollapsible.scss
@@ -4,6 +4,10 @@
 
   .collapsible-trigger {
     border: none !important;
+
+    .pgn__icon {
+      margin-left: -3px;
+    }
   }
 }
 

diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
@@ -97,7 +97,7 @@ const ContentTagsDrawer = ({ id, onClose }) => {
           )}
 
         <hr />
-        <p className='lead text-gray-500 font-weight-bold'>{intl.formatMessage(messages.headerSubtitle)}</p>
+        <p className="lead text-gray-500 font-weight-bold">{intl.formatMessage(messages.headerSubtitle)}</p>
 
         { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded
           ? tagsByTaxonomy.map((data) => (