UIK-4841/button-link-underline-v-17#2730
Open
slizhevskyv-semrush wants to merge 39 commits intorelease/v17from
Open
UIK-4841/button-link-underline-v-17#2730slizhevskyv-semrush wants to merge 39 commits intorelease/v17from
slizhevskyv-semrush wants to merge 39 commits intorelease/v17from
Conversation
…#2711) <!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [ ] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [ ] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality. --------- Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
…c into release/v17
…nents (#2719) <!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [ ] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [ ] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality.
… folder (#2720) <!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [ ] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [ ] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality.
## Changelog ### @semcore/base-components #### BREAK - Removed using `getNodeByRef` in `Portal`, `OutsideClick`, `ScrollArea` components. Use `React.RefObject` instead. #### Added - `Hint` component.
## Changelog ### @semcore/core #### BREAK - New major version. - Removed `WithI18n`. Use `useI18n`. - Removed `WithCSS`. Use `useCss`. - Removed `WithAutoFocus` and `autoFocusEnhance`. - Removed `WithKeyboardFocus`. Just don't use. - Removed `WithRef`. Use `useForkRef`.
## Changelog ### @semcore/icon #### BREAK - New major version as a separate package with icons.
## Changelog ### @semcore/accordion #### BREAK - New major version. ### @semcore/add-filter #### BREAK - New major version. ### @semcore/badge #### BREAK - New major version. Added property `type`. Deprecated `color` and `bg`. ### @semcore/breadcrumbs #### BREAK - New major version. ### @semcore/bulk-textarea #### BREAK - New major version. ### @semcore/card #### BREAK - New major version. ### @semcore/carousel #### BREAK - New major version. ### @semcore/checkbox #### BREAK - New major version. ### @semcore/color-picker #### BREAK - New major version. ### @semcore/data-table #### BREAK - New major version. ### @semcore/date-picker #### BREAK - New major version. ### @semcore/divider #### BREAK - New major version. ### @semcore/dot #### BREAK - New major version. ### @semcore/drag-and-drop #### BREAK - New major version. ### @semcore/dropdown #### BREAK - New major version. ### @semcore/dropdown-menu #### BREAK - New major version. ### @semcore/ellipsis #### BREAK - Deprecated component. Use the new `ellipsis` prop that's built into various components. ### @semcore/errors #### BREAK - New major version. ### @semcore/feature-highlight #### BREAK - New major version. ### @semcore/feature-popover #### BREAK - New major version. ### @semcore/feedback-form #### BREAK - New major version. ### @semcore/flags #### BREAK - New major version. ### @semcore/inline-edit #### BREAK - New major version. ### @semcore/inline-input #### BREAK - New major version. ### @semcore/input-mask #### BREAK - New major version. ### @semcore/input-number #### BREAK - New major version. ### @semcore/input-tags #### BREAK - New major version. ### @semcore/link #### BREAK - New major version. ### @semcore/mini-chart #### BREAK - New major version. ### @semcore/modal #### BREAK - New major version. ### @semcore/notice #### BREAK - New major version. ### @semcore/notice-bubble #### BREAK - New major version. ### @semcore/pagination #### BREAK - New major version. ### @semcore/pills #### BREAK - New major version. ### @semcore/product-head #### BREAK - New major version. ### @semcore/progress-bar #### BREAK - New major version. ### @semcore/radio #### BREAK - New major version. ### @semcore/select #### BREAK - New major version. #### Added - `Select.Option.Text` component. Use it if you have an options that should be ellipsized. ### @semcore/side-panel #### BREAK - New major version. ### @semcore/skeleton #### BREAK - New major version. ### @semcore/slider #### BREAK - New major version. ### @semcore/spin #### BREAK - New major version. ### @semcore/spin-container #### BREAK - New major version. ### @semcore/switch #### BREAK - New major version. ### @semcore/tab-line #### BREAK - New major version. ### @semcore/tab-panel #### BREAK - New major version. ### @semcore/tag #### BREAK - New major version. ### @semcore/textarea #### BREAK - New major version. ### @semcore/tooltip #### BREAK - New major version. Deprecated `Tooltip.Hint`. ### @semcore/widget-empty #### BREAK - New major version. - Removed unnecessary `margin-bottom` for the widget container.
## Chandelog ### @semcore/base-trigger #### BREAK - New major version. ### @semcore/button #### BREAK - New major version. ### @semcore/counter #### BREAK - New major version. ### @semcore/fullscreen-modal #### BREAK - New major version. ### @semcore/input #### BREAK - New major version. ### @semcore/time-picker #### BREAK - New major version. ### @semcore/typography #### BREAK - New major version. ### @semcore/wizard #### BREAK - New major version.
## Changelog ### @semcore/base-trigger #### BREAK - New major version. ### @semcore/button #### BREAK - New major version. ### @semcore/counter #### BREAK - New major version. ### @semcore/fullscreen-modal #### BREAK - New major version. ### @semcore/input #### BREAK - New major version. ### @semcore/time-picker #### BREAK - New major version. ### @semcore/typography #### BREAK - New major version. #### Added - `ellipsis` property to crop the text out of the box. ### @semcore/wizard #### BREAK - New major version.
github-actions
bot
added
button
wizard
time-picker
side-panel
select
feature-highlight
add-filter
pagination
modal
fullscreen-modal
feedback-form
carousel
notice-bubble
notice
inline-input
data-table
feature-popover
errors
dropdown-menu
date-picker
color-picker
card
drag-and-drop
bulk-textarea
accordion
labels
…n-link-underline-v-17
ilyabrower
reviewed
Feb 19, 2026
| text-decoration-thickness: 1px; | ||
| text-decoration-color: transparent; | ||
| text-underline-position: under; | ||
| text-underline-offset: 1px; |
Contributor
There was a problem hiding this comment.
maybe offset should be 2px?
Contributor
Author
There was a problem hiding this comment.
idk, it could be tweaked :)
probably some input is required from @j-mnizhek or @sheila-semrush
Contributor
There was a problem hiding this comment.
you can check whether the offset looks the same as in Link on hover
(also offset should be the same in primary buttonlink on hover and in secondary buttonlink)
we will look at it on design review and change the value if needed, but it will be nice if you make sure everything looks consistent at least in some degree
Contributor
There was a problem hiding this comment.
(but 2px sounds legit)
Contributor
Author
There was a problem hiding this comment.
yeah, I tried to make it unified as it possible, but the text-decoration depends on some font variables that could affect at which point offset the text-decoration is painted. You could check how ButtonLink looks like for different sizes in comparison to box-shadow.
I just left 1px since it's the most closest to the old implementation value.
Contributor
Author
There was a problem hiding this comment.
In Figma, this component has slightly different css properties. At least it has text-underline-position: from-font; which work fine for lines like ButtonLink but doesn't work fine for lines like this Buttonyes. Where the text-decoration will be stuck to the baseline of letter y.
ilyabrower
force-pushed
the
release/v17
branch
3 times, most recently
from
8c13dc0 to
635119e
Compare
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
Changelog
@semcore/button
Fixed
box-shadowtotext-decorationforButtonLinkcomponent.Motivation and Context
How has this been tested?
Screenshots (if appropriate):
Types of changes
Checklist: