refactor: wp-791 dropdown menu #1028
Open
+48
−102
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
- remove most of the redundant code - use Dropdown not ButtonDropdown - fix layout of menu and button in DataFilesSidebar - clean up our .dropdown-menu styles - use variables for arrow and border
`….scss`: - use class not ID - position via `top` not `margin-top` - explain menu position's "magic" value - explain why positioning is necessary[^1] `….jsx`: - use class not ID use Dropdown not ButtonDropdown[^2] [^1]: Not desired, but necessary if we use our custom <Button> as is. [^2]: I don't see ButtonDropdown in latest ReactStrap (v9).
This class is assigned to buttons that:
- **either** have Bootstrap btn-primary
(in which case the `.workbench-content .btn-primary` styles it)
- **or** are our custom `<Button>`
(in which case the `composes: c-button` styles it)
This reverts commit 1b644ed.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1028 +/- ##
=======================================
Coverage 72.88% 72.88%
=======================================
Files 534 534
Lines 33455 33455
Branches 2981 2981
=======================================
Hits 24385 24385
Misses 8875 8875
Partials 195 195
Flags with carried forward coverage won't be shown. Click here to find out more.
|
wesleyboar
changed the title
wesleyboar
commented
Dec 4, 2024
Comment on lines
-88
to
74
| #go-to-button-dropdown .complex-dropdown-item-root, | ||
| .complex-dropdown-item-root, | ||
| .complex-dropdown-item-project { | ||
| display: flex !important; | ||
| display: flex; | ||
| } |
There was a problem hiding this comment.
What did I do?
- Use class not ID.
- Remove unnecessary styles.
- Remove styles that
dropdown-menu.cssmanages. - Position via
topnotmargin-top.
Margin is for space between items. Positioning uses specific properties.
client/src/components/DataFiles/DataFilesDropdown/DataFilesDropdown.jsx
Outdated
Show resolved
Hide resolved
client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
Outdated
Show resolved
Hide resolved
| padding-left: 20px; | ||
| padding-inline: var(--global-space--section-left); |
Comment on lines
-13
to
15
| #add-button-wrapper { | ||
| padding-left: var(--horizontal-buffer); | ||
| } | ||
| #data-files-add { | ||
| width: 174px; | ||
| width: 100%; | ||
| } |
There was a problem hiding this comment.
What did I do? Match design:
- Stretch the button.
- Center the button.
| } | ||
| } | ||
|
|
||
| .complex-dropdown-item { | ||
| border-top: 1px solid #707070; |
There was a problem hiding this comment.
Why?
- Replaced by
<DropdownItem divider>.
There was a problem hiding this comment.
Why delete so much?
Most of the dropdown menu styles are in dropdown-menu.css thus are redundant here.
wesleyboar
commented
Dec 4, 2024
There was a problem hiding this comment.
Why?
- Latest Reactstrap does not document
ButtonDropdown; it might be deprecated.
There was a problem hiding this comment.
Why?
- Don't use wrappers (cruft) unless necessary.
- Latest Reactstrap does not document
ButtonDropdown; it might be deprecated. - Use
<DropdownItem divider />likeDataFilesDropdowndoes.
If we're gonna use Reactstrap, let's use it as designed (until we replace it).1
Footnotes
-
A more recent guideline I follow, cuz it's easier to reference an API than search for "what we normally do". ↩
There was a problem hiding this comment.
What did I do?
- Add variables so arrow math is documented via code.
- Style
<DropdownItem divider>. - Clarify code with whitespace or comments.
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.
Overview
Refactor the styles for Data Files dropdown menus to:
Related
Changes
.dropdown-menu:<Dropdown>not<ButtonDropdown>1.dropdown-dividerlike.complex-dropdown-itemDataFilesSidebar:<DropdownItem divider>likeDataFilesBreadcrumbsDataFilesBreadcrumbs:topnotmargin-topTesting
UI
…DropdownA…DropdownB…SidebarNotes
Footnotes
I don't see
ButtonDropdownin latest ReactStrap (v9). ↩Not desired, but necessary if we use our custom
<Button>as is. ↩