Button Minor with Tooltip - Icon moves up vertically when hovered #5946
Comments
DipperTheDan
added
Bug
triage
|
FE-5742 |
tomdavies73
added a commit
that referenced
this issue
Apr 14, 2023
…onTooltipMessage removes padding for all button sizes when component just renders an icon with an iconTooltipMessage, this prevents the rendered icon from moving position due to additional unnecessary padding being applied on icon hover fix #5946
tomdavies73
added a commit
that referenced
this issue
Apr 14, 2023
unnecessary use of padding in the component has been removed, conditional left and right padding has also been applied when the component is icon only and a icon tool tip message has been passed, this prevents the rendered icon from moving position on hover fix #5946
Merged
14 tasks
tomdavies73
added a commit
that referenced
this issue
Apr 14, 2023
some padding which made no visual difference in the component has been removed, conditional left and right padding has also been applied when the component is icon only and uses a tooltip, this prevents the rendered icon from moving position on hover fix #5946
tomdavies73
added a commit
that referenced
this issue
Apr 18, 2023
…oltip message is passed adds position: absolute CSS property to `Icon` when `iconTooltipmessage` is passed. This prevents the rendered `Icon` from moving position on hover due to a reduction in padding added during `ButtonMinor`s composition, compared to other `Button` variants. Which causes the `Icon` and Portal used to to provide a tooltip message to stack on top of one another fix #5946
tomdavies73
added a commit
that referenced
this issue
Apr 20, 2023
…onent is icon only adds position: absolute CSS property to `Icon` when component is icon only. This prevents the rendered `Icon` from moving position on hover due to a reduction in padding added during `ButtonMinor`s composition, which causes the `Icon` and Portal used to to provide a tooltip message to stack on top of one another fix #5946
tomdavies73
added a commit
that referenced
this issue
Apr 20, 2023
…onent is icon only adds position: absolute CSS property to `Icon` when component is icon only. This prevents the rendered `Icon` from moving position on hover due to a reduction in padding added during `ButtonMinor`s composition, which causes the `Icon` and Portal used to to provide a tooltip message to stack on top of one another fix #5946
tomdavies73
added a commit
that referenced
this issue
Apr 20, 2023
…onent is icon only adds position: absolute CSS property to `Icon` when component is icon only. This prevents the rendered `Icon` from moving position on hover due to a reduction in padding added during `ButtonMinor`s composition, which causes the `Icon` and Portal used to to provide a tooltip message to stack on top of one another fix #5946
tomdavies73
added a commit
that referenced
this issue
Apr 20, 2023
…onent is icon only adds position: absolute CSS property to `Icon` when component is icon only. This prevents the rendered `Icon` from moving position on hover due to a reduction in padding added during `ButtonMinor`s composition, which causes the `Icon` and Portal used to to provide a tooltip message to stack on top of one another fix #5946
carbonci
pushed a commit
that referenced
this issue
Apr 24, 2023
## [118.1.0](v118.0.0...v118.1.0) (2023-04-24) ### Features * **minor-button:** add position: absolute property to icon when component is icon only ([72af0f4](72af0f4)), closes [#5946](#5946)
|
🎉 This issue has been resolved in version 118.1.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Current behaviour
Tooltip Icon moves up vertically when hovered.
Expected behaviour
Tooltip Icon should remain in the same position when Button Minor is hovered over.
CodeSandbox or Storybook URL
https://carbon.sage.com/?path=/docs/button-minor--primary-button#icon-only-button
JIRA Ticket (Sage Only)
No response
Suggested Solution
No response
Carbon Version
Latest
Design Tokens Version
No response
What browsers are you seeing the problem on?
Firefox, Chrome, Safari
What Operating System are you seeing the problem on?
MacOS
Anything else we should know?
No response
Confidentiality
The text was updated successfully, but these errors were encountered: