Skip to content

Commit

Permalink
fix(link): fix underline animation (#10835)
Browse files Browse the repository at this point in the history
**Related Issue:** #7284

## Summary

Restores the underline animation that was broken in v2.7.0
(#8797) and updates it
to work consistently in both LTR/RTL directions.

This also adds a `transition-default` mixin to provide finer-grained
control of transitions.
  • Loading branch information
jcfranco authored and benelan committed Feb 8, 2025
1 parent dd0be0a commit 345c318
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 4 deletions.
18 changes: 18 additions & 0 deletions packages/calcite-components/src/assets/styles/includes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -193,3 +193,21 @@
}
}
}

// we explicitly list these properties to avoid animating properties that are not intended to be animated and that might affect performance
$common-animatable-props: "background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start, inset-size, opacity, outline-color, transform";

// Mixin for default component transitions with support for customization:
// - Use $extra-props to add specific properties (comma-separated string).
// - Use $target-props to replace the default base properties entirely (comma-separated string).
@mixin transition-default($target-props: $common-animatable-props, $extra-props: null) {
$merged-props: $target-props;

@if $extra-props != null {
$merged-props: join($target-props, $extra-props, comma);
}

transition-property: #{$merged-props};
transition-duration: var(--calcite-animation-timing);
transition-timing-function: ease-in-out;
}
8 changes: 4 additions & 4 deletions packages/calcite-components/src/components/link/link.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
:host a,
:host span {
@apply font-inherit
transition-default
relative
flex
cursor-pointer
Expand All @@ -29,6 +28,8 @@
&:hover {
text-decoration: none;
}

@include transition-default($extra-props: "background-size");
}

// focus styles
Expand All @@ -48,7 +49,7 @@ calcite-icon {
}

.calcite-link--icon {
@apply transition-default align-middle;
@apply align-middle;
margin-block-start: -0.25em;
}

Expand All @@ -64,8 +65,7 @@ calcite-icon {
:host {
span,
a {
@apply transition-default
relative
@apply relative
inline
border-none
bg-transparent
Expand Down

0 comments on commit 345c318

Please sign in to comment.