[WIP] feat: Make tags widget keyboard accessible #31
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
yusuf-musleh
force-pushed
the
yusuf-musleh/add-tags-widget
branch
from
cdc2269
to
603416c
Compare
yusuf-musleh
force-pushed
the
yusuf-musleh/make-tags-widget-keyboard-accessible
branch
from
b1c87e8
to
9c4c985
Compare
yusuf-musleh
force-pushed
the
yusuf-musleh/add-tags-widget
branch
from
603416c
to
94581f1
Compare
yusuf-musleh
force-pushed
the
yusuf-musleh/make-tags-widget-keyboard-accessible
branch
from
9c4c985
to
855b834
Compare
* feat: Use react-select for tags selector Replace existing component with react-select component, by passing in our custom component. This retained the existing search functionality. * fix: Fix missing deps causing constant rerender This bug appeared after removing the react-query call to the backend when selecting/unselecting a tag in the dropdown. Since it no longer gets the updated state from the backend, it doesnt mask the bug. The bug is essentially the `ContentTagsCollapsibleHelper` rerendering causing the states to reset overriding the selected (not commited) tags. This is due to missing dependancies in the useCallback. * feat: Add stagedContentTags state in react-select This adds a state and callbacks in the toplevel component of the content tags drawer to be able to add/remove staged content tags and have them showup in the react-select as selected chips. * feat: Split up applied & staged content tags trees Now content tags have seperate tree states for applied ones and staged ones. They are updated seperately and both are used when updating the selectable box UI. This allows for more flexibility with actions that can be performed on the staged content tags with impacting the applied ones. * feat: Change style of implicit checkbox to checks This overrides the indeterminate input checkbox style to match the checked checkbox style, using variables defined in paragon. * feat: Add bottom buttons in tags dropdown selector * refactor: Remove cloneDeep + simplify code * feat: Update placeholder/button texts * feat: Implement cancel button + add proptypes * feat: Implement commit/cancel staged tags This implements the commit functionality for staged tags, taking account for implicit tags. This also handles the case for removing applied tags by clicking on the "x" in the TagBubble. * feat: Keep all staged tags only commit explicit * feat: Change style of add/cancel/load more buttons * feat: Add inline "Add" button to commit tags In the react-select component, an inline "Add" button showsup when some tags are staged, if they are clicked they are commited/applied. * fix: Keep applied tag checked when only staged child unchecked * feat: Style add tags widget + staged tags Also clear search term whenever tags are staged/cancelled * feat: Fixed some typing errors * test: Update tests to fix existing broken cases * test: Add new functionality tests * chore: add types to ContentTagsCollapsible * chore: add types for useContentTagsCollapsibleHelper * fix: Small bug with useIntl * chore: Fix more linter issues * refactor: Separate stagedTags and stagedTagsTree state updates This refactor removed the warning that was caused because the state of a parent component (ContentTagsDrawer) was being updated in the middle of a state update in (ContentTagsCollapsible). This seperated the two state updates to avoid this issue. * chore: Update package-lock.json * fix: Reset applied tags in selectbox when fetching Whenever we get new applied tags from the backend, we reset the applied tags that are checked, and only check the explicit tags. This was causing an issue of duplicate applied tags being added to the selectbox. * chore: Update package.json --------- Co-authored-by: Braden MacDonald <[email protected]>
* feat: add progress bar for video uploads and refactor --------- Co-authored-by: Kristin Aoki <[email protected]>
fix: [AXIMST-424] Course unit - Fixed network connection behavior (openedx#138) * fix: [AXIMST-424] fixed network connetcion behavior * fix: added placeholder for unsuccessful loading for the page * refactor: code refactoring
…x#860)" (openedx#893) This reverts commit d76aaa7.
* feat: add progress bar for video uploads and refactor --------- Co-authored-by: Kristin Aoki <[email protected]>
* feat: add duplicate file validation for asset upload * fix: modal only appearing once * feat: add tests for overwrite modal * fix: input not allowing second upload of same file * fix: default pageSize for asset details
…penedx#895) This reverts commit a88a88e.
This is to prevent navigating/deleteing staged tags in the react-select menu when the inline add button is focused.
yusuf-musleh
force-pushed
the
yusuf-musleh/make-tags-widget-keyboard-accessible
branch
from
855b834
to
8698c84
Compare
|
Closing since base branch was merged. Continuing on openedx#900 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.