Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(dropdown/action-menu): [dropdown,action-menu] refactor styles for drodpwn #2343

Merged
merged 2 commits into from
Oct 22, 2024
Merged

refactor(dropdown/action-menu): [dropdown,action-menu] refactor styles for drodpwn #2343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ddf2900
refactor(dropdown): [dropdown] refactor styles for drodpwn
MomoPoppy Oct 22, 2024
0ed6338
refactor(action-menu): [action-menu] refactor styles for action-menu
MomoPoppy Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions packages/theme/src/action-menu/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@
// 默认
&.@{action-menu-prefix-cls}__item-visable {
.@{dropdown-item-prefix-cls} {
padding: 0;

.@{dropdown-item-prefix-cls}__wrap {
color: var(--tv-ActionMenu-text-color);
margin: 0px;
Expand All @@ -50,8 +52,12 @@

// 悬浮
&:not(.is-disabled):hover {
.@{dropdown-item-prefix-cls}__wrap {
text-decoration: underline;
.@{dropdown-item-prefix-cls} {
background-color: unset;

Comment on lines +55 to +57
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Removing background color on hover eliminates visual feedback for menu items.

The background color for non-disabled dropdown items is unset on hover without any alternative visual indicators. This can reduce the clarity of interactions for users. Consider adding another form of visual feedback to ensure a clear and intuitive user experience.

🔗 Analysis chain

Verify hover state visibility after background color removal.

Setting the background color to 'unset' on hover for non-disabled dropdown items removes the visual feedback users might expect when interacting with the menu. While this change aligns with the refactoring goals, please ensure that there's still sufficient visual indication when users hover over menu items.

To verify the hover state visibility, you can run the following command to check if there are any other hover effects applied to these elements:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for other hover effects on dropdown items
rg -i '(hover|:hover)' packages/theme/src/action-menu/

Length of output: 134

Script:

#!/bin/bash
# Description: Extract styles applied to &:not(.is-disabled):hover
rg -A 5 '^&:not\(.is-disabled\):hover\s*{' packages/theme/src/action-menu/index.less

Length of output: 214

Script:

#!/bin/bash
# Description: Extract styles applied to &:not(.is-disabled):hover with corrected regex
rg -A 5 '^&:not\(.is-disabled\):hover\s*\{' packages/theme/src/action-menu/index.less

Length of output: 87

.@{dropdown-item-prefix-cls}__wrap {
text-decoration: underline;
}
}
}

Expand Down
3 changes: 3 additions & 0 deletions packages/theme/src/dropdown/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,16 @@
.@{dropdown-prefix-cls}__title-button {
padding: var(--tv-Dropdown-title-button-padding);
border-right: none;
border-radius: var(--tv-Dropdown-title-button-border-radius);
}

.@{dropdown-prefix-cls}__caret-button {
padding-left: var(--tv-Dropdown-caret-button-padding-left);
position: relative;
border-left: none;
min-width: 24px;
border-radius: var(--tv-Dropdown-caret-button-border-radius);
margin-left: 0;
}

.@{css-prefix}button {
Expand Down
6 changes: 6 additions & 0 deletions packages/theme/src/dropdown/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@

// 按钮组时，下拉按钮的左侧内边距
--tv-Dropdown-caret-button-padding-left: var(--tv-space-base, 4px);
// 按钮组时，左侧按钮圆角
--tv-Dropdown-caret-button-border-radius: 0 var(--tv-border-radius-round, 999px) var(--tv-border-radius-round, 999px)
0;
// 按钮组时，右侧按钮圆角
--tv-Dropdown-title-button-border-radius: var(--tv-border-radius-round, 999px) 0 0
var(--tv-border-radius-round, 999px);
// 按钮组时，文本按钮内边距
--tv-Dropdown-title-button-padding: 0px 0px 0px 24px;
}
Loading