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

Commit 1f3871c

Browse files
authored
feat(ripple): Split radius mixin into bounded/unbounded versions (#2112)
BREAKING CHANGE: mdc-ripple-radius is replaced by mdc-ripple-radius-bounded and mdc-ripple-radius-unbounded; use one or the other as appropriate for the surface. The default 100% value of the unbounded mixin now results in a smaller, more appropriate radius.
1 parent ab65ece commit 1f3871c

File tree

15 files changed

+42
-36
lines changed

15 files changed

+42
-36
lines changed

packages/mdc-button/_mixins.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
@mixin mdc-button-base_() {
8888
@include mdc-typography(button);
8989
@include mdc-ripple-surface;
90-
@include mdc-ripple-radius;
90+
@include mdc-ripple-radius-bounded;
9191

9292
display: inline-block;
9393
position: relative;

packages/mdc-checkbox/_variables.scss

-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ $mdc-checkbox-border-width: 2px;
2929
$mdc-checkbox-transition-duration: 90ms;
3030
$mdc-checkbox-item-spacing: 4px;
3131
$mdc-checkbox-ripple-opacity: .14;
32-
$mdc-checkbox-ripple-radius: 50%;
3332
$mdc-checkbox-focus-indicator-opacity: .26;
3433

3534
// Manual calculation done on SVG

packages/mdc-checkbox/mdc-checkbox.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
@include mdc-checkbox-base_;
2727
@include mdc-ripple-surface;
2828
@include mdc-states($mdc-checkbox-baseline-theme-color);
29-
@include mdc-ripple-radius($mdc-checkbox-ripple-radius);
29+
@include mdc-ripple-radius-unbounded;
3030

3131
@include mdc-theme-dark {
3232
@include mdc-checkbox-container-colors($unmarked-stroke-color: $mdc-checkbox-border-color-dark);

packages/mdc-fab/_mixins.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ $mdc-fab-icon-enter-duration_: 180ms;
4747

4848
@mixin mdc-fab-base_ {
4949
@include mdc-ripple-surface;
50-
@include mdc-ripple-radius;
50+
@include mdc-ripple-radius-bounded;
5151
@include mdc-elevation(6);
5252

5353
display: inline-flex;

packages/mdc-icon-toggle/mdc-icon-toggle.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
.mdc-icon-toggle {
2626
@include mdc-ripple-surface;
27-
@include mdc-ripple-radius;
27+
@include mdc-ripple-radius-unbounded;
2828
@include mdc-states(black);
2929
@include mdc-icon-toggle-ink-color(text-primary-on-light);
3030

packages/mdc-list/mdc-list.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
// Direct child combinator is necessary for non-interactive modifier on parent to not match this selector.
144144
:not(.mdc-list--non-interactive) > .mdc-list-item {
145145
@include mdc-ripple-surface;
146-
@include mdc-ripple-radius;
146+
@include mdc-ripple-radius-bounded;
147147
@include mdc-states;
148148
@include mdc-states-activated(primary);
149149
@include mdc-states-selected(primary);

packages/mdc-radio/_variables.scss

-1
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,4 @@ $mdc-radio-ui-size: 20px;
1919
$mdc-radio-ui-pct: percentage($mdc-radio-ui-size / $mdc-radio-touch-area);
2020
$mdc-radio-transition-duration: 120ms;
2121
$mdc-radio-ripple-opacity: .14;
22-
$mdc-radio-ripple-radius: 50%;
2322
$mdc-radio-baseline-theme-color: secondary;

packages/mdc-radio/mdc-radio.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
@include mdc-radio-ink-color($mdc-radio-baseline-theme-color);
3535
@include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color);
3636
@include mdc-ripple-surface;
37-
@include mdc-ripple-radius($mdc-radio-ripple-radius);
37+
@include mdc-ripple-radius-unbounded;
3838
@include mdc-states($mdc-radio-baseline-theme-color);
3939

4040
display: inline-block;

packages/mdc-ripple/README.md

+13-6
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,17 @@ CSS Class | Description
4646

4747
### Sass Mixins
4848

49-
In order to fully style the ripple effect for different states (hover/focus/pressed), both `mdc-ripple` mixins, as well as either the basic or advanced `mdc-states` mixins must be included.
49+
In order to fully style the ripple effect for different states (hover/focus/pressed), the following mixins must be included:
50+
51+
* `mdc-ripple-surface`, for base styles
52+
* Either `mdc-ripple-radius-bounded` or `mdc-ripple-radius-unbounded`, to appropriately size the ripple on the surface
53+
* Either the basic or advanced `mdc-states` mixins, as explained below
5054

5155
##### Using basic states mixins
5256
```css
5357
.my-surface {
5458
@include mdc-ripple-surface;
55-
@include mdc-ripple-radius;
59+
@include mdc-ripple-radius-bounded;
5660
@include mdc-states;
5761
}
5862
```
@@ -61,7 +65,7 @@ In order to fully style the ripple effect for different states (hover/focus/pres
6165
```css
6266
.my-surface {
6367
@include mdc-ripple-surface;
64-
@include mdc-ripple-radius;
68+
@include mdc-ripple-radius-bounded;
6569
@include mdc-states-base-color(black);
6670
@include mdc-states-hover-opacity(.1);
6771
@include mdc-states-focus-opacity(.3);
@@ -76,7 +80,10 @@ These APIs use pseudo-elements for the ripple effect: `::before` for the backgro
7680
Mixin | Description
7781
--- | ---
7882
`mdc-ripple-surface` | Mandatory. Adds base styles for a ripple surface
79-
`mdc-ripple-radius($radius)` | Mandatory. Adds styles for the radius of the ripple effect,<br>for both bounded and unbounded ripples
83+
`mdc-ripple-radius-bounded($radius)` | Adds styles for the radius of the ripple effect,<br>for bounded ripple surfaces
84+
`mdc-ripple-radius-unbounded($radius)` | Adds styles for the radius of the ripple effect,<br>for unbounded ripple surfaces
85+
86+
> _NOTE_: It is mandatory to include _either_ `mdc-ripple-radius-bounded` or `mdc-ripple-radius-unbounded`. In both cases, `$radius` is optional and defaults to `100%`.
8087
8188
#### Basic States Mixins
8289

@@ -156,7 +163,7 @@ Method Signature | Description
156163
| `computeBoundingRect() => ClientRect` | Returns the ClientRect for the surface |
157164
| `getWindowPageOffset() => {x: number, y: number}` | Returns the `page{X,Y}Offset` values for the window object |
158165

159-
> _NOTE_: When implementing `browserSupportsCssVars`, please take the [Edge](#caveat-edge) and [Safari 9](#caveat-safari) considerations into account. We provide a `supportsCssVariables` function within the `util.js` which we recommend using, as it handles this for you.
166+
> _NOTE_: When implementing `browserSupportsCssVars`, please take the [Edge](#caveat-edge) and [Safari 9](#caveat-safari) considerations into account. We provide a `supportsCssVariables` function within the `util.js` which we recommend using, as it handles this for you.
160167
161168
### `MDCRippleFoundation`
162169

@@ -223,7 +230,7 @@ class MyMDCComponent extends MDCComponent {
223230

224231
### Handling keyboard events for custom UI components
225232

226-
Different keyboard events activate different elements. For example, the space key activates buttons, while the enter key activates links.
233+
Different keyboard events activate different elements. For example, the space key activates buttons, while the enter key activates links.
227234

228235
`MDCRipple` uses the `adapter.isSurfaceActive()` method to detect whether or not a keyboard event has activated the surface the ripple is on. Our vanilla implementation of the adapter does this by checking whether the `:active` pseudo-class has been applied to the ripple surface. However, this approach will _not_ work for custom components that the browser does not apply this pseudo-class to.
229236

packages/mdc-ripple/_mixins.scss

+16-17
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@
4545

4646
// Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)
4747

48+
&.mdc-ripple-upgraded::before {
49+
transform: scale(var(--mdc-ripple-fg-scale, 1));
50+
}
51+
4852
&.mdc-ripple-upgraded::after {
4953
top: 0;
5054
left: 0;
@@ -166,7 +170,7 @@
166170
}
167171
}
168172

169-
@mixin mdc-ripple-radius($radius: 100%) {
173+
@mixin mdc-ripple-radius-bounded($radius: 100%) {
170174
&::before,
171175
&::after {
172176
top: calc(50% - #{$radius});
@@ -175,34 +179,29 @@
175179
height: $radius * 2;
176180
}
177181

178-
&[data-mdc-ripple-is-unbounded]:not(.mdc-ripple-upgraded--unbounded)::before,
179-
&[data-mdc-ripple-is-unbounded]:not(.mdc-ripple-upgraded--unbounded)::after {
182+
&.mdc-ripple-upgraded::after {
183+
width: var(--mdc-ripple-fg-size, $radius);
184+
height: var(--mdc-ripple-fg-size, $radius);
185+
}
186+
}
187+
188+
@mixin mdc-ripple-radius-unbounded($radius: 100%) {
189+
&::before,
190+
&::after {
180191
top: calc(50% - #{$radius / 2});
181192
left: calc(50% - #{$radius / 2});
182193
width: $radius;
183194
height: $radius;
184195
}
185196

186-
// Background ripple styles
187-
188-
&.mdc-ripple-upgraded::before {
189-
top: calc(50% - #{$radius});
190-
left: calc(50% - #{$radius});
191-
width: $radius * 2;
192-
height: $radius * 2;
193-
transform: scale(var(--mdc-ripple-fg-scale, 0));
194-
}
195-
196-
&.mdc-ripple-upgraded--unbounded::before {
197+
&.mdc-ripple-upgraded::before,
198+
&.mdc-ripple-upgraded::after {
197199
top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));
198200
left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));
199201
width: var(--mdc-ripple-fg-size, $radius);
200202
height: var(--mdc-ripple-fg-size, $radius);
201-
transform: scale(var(--mdc-ripple-fg-scale, 0));
202203
}
203204

204-
// Foreground ripple styles
205-
206205
&.mdc-ripple-upgraded::after {
207206
width: var(--mdc-ripple-fg-size, $radius);
208207
height: var(--mdc-ripple-fg-size, $radius);

packages/mdc-ripple/mdc-ripple.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,15 @@
2525
.mdc-ripple-surface {
2626
@include mdc-ripple-surface;
2727
@include mdc-states;
28-
@include mdc-ripple-radius;
28+
@include mdc-ripple-radius-bounded;
2929

3030
position: relative;
3131
outline: none;
3232
overflow: hidden;
3333

3434
&[data-mdc-ripple-is-unbounded] {
35+
@include mdc-ripple-radius-unbounded;
36+
3537
overflow: visible;
3638
}
3739

packages/mdc-select/mdc-select.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
7070
@include mdc-typography(subheading2);
7171
@include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding, ".mdc-select");
7272
@include mdc-ripple-surface;
73-
@include mdc-ripple-radius;
73+
@include mdc-ripple-radius-bounded;
7474
@include mdc-states;
7575

7676
&::-ms-expand {

packages/mdc-tabs/tab/mdc-tab.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ $mdc-tab-with-icon-and-text-height: 72px;
127127
.mdc-tab.mdc-ripple-upgraded {
128128
@include mdc-ripple-surface;
129129
@include mdc-states;
130-
@include mdc-ripple-radius;
130+
@include mdc-ripple-radius-bounded;
131131

132132
// stylelint-disable plugin/selector-bem-pattern
133133
&:focus {

packages/mdc-textfield/_mixins.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@
266266
@mixin mdc-text-field-box_ {
267267
@include mdc-ripple-surface;
268268
@include mdc-states(text-primary-on-light, $has-nested-focusable-element: true);
269-
@include mdc-ripple-radius;
269+
@include mdc-ripple-radius-bounded;
270270
@include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
271271
@include mdc-text-field-box-fill-color($mdc-text-field-box-background);
272272
@include mdc-text-field-label-float_($mdc-text-field-box-label-position-y);

packages/mdc-textfield/outline/mdc-text-field-outline.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
.mdc-text-field__outline {
3838
@include mdc-ripple-surface;
39-
@include mdc-ripple-radius;
39+
@include mdc-ripple-radius-bounded;
4040
@include mdc-states-base-color(text-primary-on-light);
4141
@include mdc-states-press-opacity(map-get($mdc-ripple-dark-ink-opacities, "press"));
4242
@include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);

0 commit comments

Comments
 (0)