Skip to content

Commit

Permalink
chore: refactor button focus ring
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 564562506
  • Loading branch information
@patrickrodee @copybara-github
patrickrodee authored and copybara-github committed Sep 12, 2023
1 parent 54feb30 commit 6cda3ce
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 152 deletions.
2 changes: 0 additions & 2 deletions packages/mdc-button/_button-filled-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,6 @@ $light-theme: (
with-icon-icon-color: null,
with-icon-icon-size: 18px,
with-icon-pressed-icon-color: null,
focus-ring-color: null,
focus-ring-offset: 0,
);

/// Sets theme based on provided theme configuration.
Expand Down
2 changes: 0 additions & 2 deletions packages/mdc-button/_button-outlined-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,6 @@ $light-theme: (
with-icon-focus-icon-color: null,
with-icon-pressed-icon-color: null,
with-icon-disabled-icon-color: null,
focus-ring-color: null,
focus-ring-offset: 0,
);

/// Sets theme based on provided theme configuration.
Expand Down
2 changes: 0 additions & 2 deletions packages/mdc-button/_button-protected-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,6 @@ $light-theme: (
with-icon-icon-color: null,
with-icon-icon-size: 18px,
with-icon-pressed-icon-color: null,
focus-ring-color: null,
focus-ring-offset: 0,
);

/// Sets theme based on provided theme configuration.
Expand Down
70 changes: 14 additions & 56 deletions packages/mdc-button/_button-shared-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,9 +180,6 @@ $disabled-container-color: rgba(
$shadow-color: map.get($theme, container-shadow-color),
$query: $query
);

@include _focus-ring-color(map.get($theme, focus-ring-color), $query);
@include _focus-ring-offset(map.get($theme, focus-ring-offset), $query);
}

@function resolve-theme-elevation-keys($theme, $resolver) {
Expand Down Expand Up @@ -499,6 +496,20 @@ $disabled-container-color: rgba(
$query: $query
);

$radius-value: $radius;
@if custom-properties.is-custom-prop($radius) {
$radius-value: custom-properties.get-declaration-value($radius);
}

@if $radius-value != 0 and type-of($radius-value) == 'number' {
.mdc-button__focus-ring {
@include focus-ring.focus-ring-radius(
$ring-radius: $radius-value,
$query: $query
);
}
}

#{button-ripple.$ripple-target} {
@include shape-mixins.radius(
$radius,
Expand All @@ -507,8 +518,6 @@ $disabled-container-color: rgba(
$query: $query
);
}

@include _focus-ring-shape($radius, $query);
}

///
Expand Down Expand Up @@ -755,54 +764,3 @@ $disabled-container-color: rgba(
}
}
}

@mixin _focus-ring-shape($radius, $query: feature-targeting.all()) {
$radius-value: if(
custom-properties.is-custom-prop($radius),
custom-properties.get-declaration-value($radius),
$radius
);

.mdc-button__focus-ring {
@if $radius-value != 0 and type-of($radius-value) == 'number' {
@include focus-ring.focus-ring-radius(
$ring-radius: $radius-value,
$query: $query
);
}
}
}

@mixin _focus-ring-color($color, $query: feature-targeting.all()) {
$color-value: if(
custom-properties.is-custom-prop($color),
custom-properties.get-declaration-value($color),
$color
);

.mdc-button__focus-ring {
@if $color != null {
@include focus-ring.focus-ring-color(
$inner-ring-color: $color-value,
$query: $query
);
}
}
}

@mixin _focus-ring-offset($offset, $query: feature-targeting.all()) {
$offset-value: if(
custom-properties.is-custom-prop($offset),
custom-properties.get-declaration-value($offset),
$offset
);

.mdc-button__focus-ring {
@if $offset-value != 0 and type-of($offset-value) == 'number' {
@include focus-ring.focus-ring-layout(
$offset: $offset-value,
$query: $query
);
}
}
}
2 changes: 0 additions & 2 deletions packages/mdc-button/_button-text-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,6 @@ $light-theme: (
with-icon-icon-color: null,
with-icon-icon-size: 18px,
with-icon-pressed-icon-color: null,
focus-ring-color: null,
focus-ring-offset: 0,
);

/// Sets theme based on provided theme configuration.
Expand Down
122 changes: 34 additions & 88 deletions packages/mdc-focus-ring/_focus-ring.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,8 @@ $container-outer-padding-default: 2px !default;
/// @param $inner-ring-color [$inner-ring-color-default] - Inner focus ring color.
/// @param $outer-ring-width [$outer-ring-width-default] - Outer focus ring width.
/// @param $outer-ring-color [$outer-ring-color-default] - Outer focus ring color.
/// @param $container-outer-padding-vertical [$container-outer-padding-default]
//// - The vertical distance between the focus ring and the container.
/// @param $container-outer-padding-horizontal [$container-outer-padding-default]
//// - The horizontal distance between the focus ring and the container.
/// @param $offset [0] - Adds to both vertical/horizontal paddings.
/// @param $container-outer-padding [$container-outer-padding-default] - The
/// distance between the focus ring and the container.
@mixin focus-ring(
$query: feature-targeting.all(),
$ring-radius: $ring-radius-default,
Expand All @@ -51,130 +48,79 @@ $container-outer-padding-default: 2px !default;
$outer-ring-width: $outer-ring-width-default,
$outer-ring-color: $outer-ring-color-default,
$container-outer-padding-vertical: $container-outer-padding-default,
$container-outer-padding-horizontal: $container-outer-padding-default,
$offset: 0
$container-outer-padding-horizontal: $container-outer-padding-default
) {
$feat-structure: feature-targeting.create-target($query, structure);

$container-size-vertical: 100%;
@if $container-outer-padding-vertical != 0 {
$container-size-vertical: calc(
100% + #{$container-outer-padding-vertical * 2}
);
}
$container-size-horizontal: 100%;
@if $container-outer-padding-horizontal != 0 {
$container-size-horizontal: calc(
100% + #{$container-outer-padding-horizontal * 2}
);
}
$outer-ring-size: 100%;
@if $outer-ring-width > 0 {
$outer-ring-size: calc(100% + #{$outer-ring-width * 2});
}
@include feature-targeting.targets($feat-structure) {
pointer-events: none;
border-style: solid;
border: $inner-ring-width solid $inner-ring-color;
border-radius: calc($ring-radius - $outer-ring-width);
box-sizing: content-box;
position: absolute;
top: 50%;
@include rtl.ignore-next-line();
left: 50%;
@include rtl.ignore-next-line();
transform: translate(-50%, -50%);
height: $container-size-vertical;
width: $container-size-horizontal;

@include dom.forced-colors-mode($exclude-ie11: true) {
border-color: CanvasText;
}

&::after {
content: '';
border-style: solid;
border: $outer-ring-width solid $outer-ring-color;
border-radius: $ring-radius;
display: block;
position: absolute;
top: 50%;
@include rtl.ignore-next-line();
left: 50%;
@include rtl.ignore-next-line();
transform: translate(-50%, -50%);
height: $outer-ring-size;
width: $outer-ring-size;

@include dom.forced-colors-mode($exclude-ie11: true) {
border-color: CanvasText;
}
}
}

@include focus-ring-color($inner-ring-color, $outer-ring-color, $query);

@include focus-ring-layout(
$inner-ring-width,
$outer-ring-width,
$container-outer-padding-vertical,
$container-outer-padding-horizontal,
$offset,
$query
);

@include focus-ring-radius($ring-radius, $outer-ring-width, $query);
}

/// Customizes width and position of the focus ring.
///
/// @param $inner-ring-width [$inner-ring-width-default] - Inner focus ring width.
/// @param $outer-ring-width [$outer-ring-width-default] - Outer focus ring width.
/// @param $outer-ring-color [$outer-ring-color-default] - Outer focus ring color.
/// @param $container-outer-padding-vertical [$container-outer-padding-default]
//// - The vertical distance between the focus ring and the container.
/// @param $container-outer-padding-horizontal [$container-outer-padding-default]
//// - The horizontal distance between the focus ring and the container.
/// @param $offset [0] - Adds to both vertical/horizontal paddings.
@mixin focus-ring-layout(
$inner-ring-width: $inner-ring-width-default,
$outer-ring-width: $outer-ring-width-default,
$container-outer-padding-vertical: $container-outer-padding-default,
$container-outer-padding-horizontal: $container-outer-padding-default,
$offset: 0,
$query: feature-targeting.all()
) {
$feat-structure: feature-targeting.create-target($query, structure);

$container-size-vertical: 100%;
$container-size-vertical-offset: $container-outer-padding-vertical + $offset *
2;
@if $container-size-vertical-offset != 0 {
$container-size-vertical: calc(100% + $container-size-vertical-offset * 2);
}
$container-size-horizontal: 100%;
$container-size-horizontal-offset: $container-outer-padding-horizontal +
$offset * 2;
@if $container-size-horizontal-offset != 0 {
$container-size-horizontal: calc(
100% + $container-size-horizontal-offset * 2
);
}
$outer-ring-size: 100%;
@if $outer-ring-width > 0 {
$outer-ring-size: calc(100% + $outer-ring-width * 2);
}

@include feature-targeting.targets($feat-structure) {
border-width: $inner-ring-width;
height: $container-size-vertical;
width: $container-size-horizontal;

&::after {
border-width: $outer-ring-width;
height: $outer-ring-size;
width: $outer-ring-size;
}
}
}

/// Customizes the color of the focus ring.
/// Customizes the color of the button focus ring.
///
/// @param $inner-ring-color [$inner-ring-color-default] - Inner focus ring color.
/// @param $outer-ring-color [$outer-ring-color-default] - Outer focus ring color.
/// @param $outer-ring-width [$outer-ring-width-default] - Outer focus ring width.
@mixin focus-ring-color(
$inner-ring-color: $inner-ring-color-default,
$outer-ring-color: $outer-ring-color-default,
$query: feature-targeting.all()
$outer-ring-color: $outer-ring-color-default
) {
$feat-structure: feature-targeting.create-target($query, structure);
border-color: $inner-ring-color;

@include feature-targeting.targets($feat-structure) {
border-color: $inner-ring-color;

&::after {
border-color: $outer-ring-color;
}
&::after {
border-color: $outer-ring-color;
}
}

/// Customizes the border radius of the focus ring.
/// Customizes the border radius of the button focus ring.
///
/// @param {Number} $ring-radius - The border radius of the focus ring.
/// @param {Number} $outer-ring-width [$outer-ring-width] - Width of the outer
Expand Down

0 comments on commit 6cda3ce

Please sign in to comment.