Merge pull request #12465 from ToolJet/link-comp-bugs

[BugFixes] : fix link QA bugs
This commit is contained in:
Johnson Cherian 2025-04-23 09:35:10 +05:30 committed by GitHub
commit c00a32aac5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 9 deletions

View file

@ -19,8 +19,7 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
const computedStyles = {
display: 'flex',
alignItems: verticalAlignment === 'top' ? 'flex-start' : verticalAlignment === 'center' ? 'center' : 'flex-end',
justifyContent:
horizontalAlignment === 'left' ? 'flex-start' : horizontalAlignment === 'center' ? 'center' : 'flex-end',
textAlign: horizontalAlignment === 'left' ? 'left' : horizontalAlignment === 'center' ? 'center' : 'right',
height: '100%',
width: '100%',
boxShadow,
@ -113,10 +112,20 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
onMouseOver={() => {
fireEvent('onHover');
}}
style={{ color: textColor, fontSize: textSize, cursor: isDisabled ? 'not-allowed' : 'pointer' }}
style={{ width: '100%' }}
ref={clickRef}
>
<span className="d-flex justify-content-center">
<span
className="d-flex"
style={{
fontSize: textSize,
cursor: 'auto',
justifyContent:
horizontalAlignment === 'left' ? 'flex-start' : horizontalAlignment === 'center' ? 'center' : 'flex-end',
color: textColor,
paddingBottom: verticalAlignment === 'bottom' ? '1px' : '0px',
}}
>
{iconVisibility && (
<IconElement
style={{
@ -130,7 +139,7 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
stroke={1.5}
/>
)}
{linkTextState}
<span className="link-text">{linkTextState}</span>
</span>
</a>
</div>

View file

@ -1,8 +1,18 @@
.link-widget {
a {
text-underline-offset: 32%; // Adds space between text and underline
&:hover {
color: var(--link-hover-color) !important;
}
text-decoration: none !important;
pointer-events: none;
cursor: none !important;
.link-text {
pointer-events: all;
text-underline-offset: 32%; // Adds space between text and underline
cursor: pointer;
&:hover {
text-decoration: underline;
text-decoration-color: var(--link-hover-color) !important;
color: var(--link-hover-color) !important;
}
}
}
}