Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
fix(focus ring): Using box-shadow instead of border for focus ring as…
Browse files Browse the repository at this point in the history 
… animating on box-shadow is more performant.

PiperOrigin-RevId: 505211942
  • Loading branch information
@sayris @copybara-github
sayris authored and copybara-github committed Jan 27, 2023
1 parent 033ae08 commit 3a705fa
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 79 deletions.
37 changes: 11 additions & 26 deletions packages/mdc-focus/_focus-ring-outward-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ $_custom-property-prefix: 'focus-ring-outward';

/// Mold the focus ring to the target shape.
/// See the diagram for insights into why the border-radius calc is needed:
/// https://screenshot.googleplex.com/3cYw8Pi8WQNa3h8.png
border: $track-width solid $ring-color;
border-radius: calc($target-shape + $track-width + $ring-offset);
inset-block: calc(-1 * ($ring-offset + $track-width));
inset-inline: calc(-1 * ($ring-offset + $track-width));
/// http://screen/9J9CzpCxJxxDHCb.png
border-radius: calc($target-shape + $ring-offset);
inset: calc(-1 * $ring-offset);
box-shadow: 0 0 0 $track-width $ring-color;
// HCM ignores box-shadow, so a transparent outline is added to ensure
// focus ring is shown in HCM.
outline: $track-width solid transparent;

// Motion spec for focus ring:
// https://direct.googleplex.com/#/spec/273380003&264990003
@include _focus-ring-animation-keyframes($theme);
@include focus-ring-shared-theme.focus-ring-animation(
$grow-animation-name: focus-ring-grows,
Expand All @@ -47,39 +47,24 @@ $_custom-property-prefix: 'focus-ring-outward';
}

@mixin _focus-ring-animation-keyframes($theme) {
$ring-offset: map.get($theme, focus-ring-shared-theme.$ring-offset-key);
$track-width: map.get($theme, focus-ring-shared-theme.$track-width-key);
$target-shape: map.get($theme, focus-ring-shared-theme.$target-shape-key);
$ring-color: map.get($theme, focus-ring-shared-theme.$ring-color-key);

$start-border-width: 0;
$midpoint-border-width: 8px;

@keyframes focus-ring-grows {
from {
border-width: $start-border-width;
border-radius: calc($target-shape + $start-border-width + $ring-offset);
box-shadow: 0 0 0 $start-border-width $ring-color;
}
to {
border-width: $midpoint-border-width;
inset-block: calc(-1 * ($ring-offset + $midpoint-border-width));
inset-inline: calc(-1 * ($ring-offset + $midpoint-border-width));
border-radius: calc(
$target-shape + $midpoint-border-width + $ring-offset
);
box-shadow: 0 0 0 $midpoint-border-width $ring-color;
}
}

@keyframes focus-ring-shrinks {
from {
border-width: $midpoint-border-width;
inset-block: calc(-1 * ($ring-offset + $midpoint-border-width));
inset-inline: calc(-1 * ($ring-offset + $midpoint-border-width));
border-radius: calc(
$target-shape + $midpoint-border-width + $ring-offset
);
}
to {
border-width: $track-width;
box-shadow: 0 0 0 $midpoint-border-width $ring-color;
}
}
}
66 changes: 13 additions & 53 deletions packages/mdc-focus/test/focus-ring-outward-theme.test.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,21 +55,15 @@
}

@include test.contains {
border: var(--mdc-focus-ring-outward-track-width, 3px) solid
var(--mdc-focus-ring-outward-color, blue);
border-radius: calc(
var(--mdc-focus-ring-outward-target-shape, 5px) +
var(--mdc-focus-ring-outward-track-width, 3px) +
var(--mdc-focus-ring-outward-offset, 2px)
);
inset-block: calc(
-1 * (var(--mdc-focus-ring-outward-offset, 2px) +
var(--mdc-focus-ring-outward-track-width, 3px))
);
inset-inline: calc(
-1 * (var(--mdc-focus-ring-outward-offset, 2px) +
var(--mdc-focus-ring-outward-track-width, 3px))
);
inset: calc(-1 * var(--mdc-focus-ring-outward-offset, 2px));
box-shadow: 0 0 0 var(--mdc-focus-ring-outward-track-width, 3px)
var(--mdc-focus-ring-outward-color, blue);
outline: var(--mdc-focus-ring-outward-track-width, 3px) solid
transparent;
}
}
}
Expand All @@ -90,62 +84,28 @@
}

@include test.expect {
border: var(--mdc-focus-ring-outward-track-width, 3px) solid
var(--mdc-focus-ring-outward-color, blue);
border-radius: calc(
var(--mdc-focus-ring-outward-target-shape, 5px) +
var(--mdc-focus-ring-outward-track-width, 3px) +
var(--mdc-focus-ring-outward-offset, 2px)
);
inset-block: calc(
-1 * (var(--mdc-focus-ring-outward-offset, 2px) +
var(--mdc-focus-ring-outward-track-width, 3px))
);
inset-inline: calc(
-1 * (var(--mdc-focus-ring-outward-offset, 2px) +
var(--mdc-focus-ring-outward-track-width, 3px))
);
inset: calc(-1 * var(--mdc-focus-ring-outward-offset, 2px));
box-shadow: 0 0 0 var(--mdc-focus-ring-outward-track-width, 3px)
var(--mdc-focus-ring-outward-color, blue);
outline: var(--mdc-focus-ring-outward-track-width, 3px) solid
transparent;

@keyframes focus-ring-grows {
from {
border-width: 0;
border-radius: calc(
var(--mdc-focus-ring-outward-target-shape, 5px) + 0 +
var(--mdc-focus-ring-outward-offset, 2px)
);
box-shadow: 0 0 0 0 var(--mdc-focus-ring-outward-color, blue);
}
to {
border-width: 8px;
inset-block: calc(
-1 * (var(--mdc-focus-ring-outward-offset, 2px) + 8px)
);
inset-inline: calc(
-1 * (var(--mdc-focus-ring-outward-offset, 2px) + 8px)
);
border-radius: calc(
var(--mdc-focus-ring-outward-target-shape, 5px) + 8px +
var(--mdc-focus-ring-outward-offset, 2px)
);
box-shadow: 0 0 0 8px var(--mdc-focus-ring-outward-color, blue);
}
}

@keyframes focus-ring-shrinks {
from {
border-width: 8px;
inset-block: calc(
-1 * (var(--mdc-focus-ring-outward-offset, 2px) + 8px)
);
inset-inline: calc(
-1 * (var(--mdc-focus-ring-outward-offset, 2px) + 8px)
);
border-radius: calc(
var(--mdc-focus-ring-outward-target-shape, 5px) + 8px +
var(--mdc-focus-ring-outward-offset, 2px)
);
}

to {
border-width: var(--mdc-focus-ring-outward-track-width, 3px);
box-shadow: 0 0 0 8px var(--mdc-focus-ring-outward-color, blue);
}
}
animation-name: focus-ring-grows, focus-ring-shrinks;
Expand Down

1 comment on commit 3a705fa

@billkitsios
Copy link

Choose a reason for hiding this comment

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

an einai i tautotita i to diploma pou katedasa katedasa apo to gov.gr kalos ama den pao alou ok.

Please sign in to comment.