You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 13, 2025. It is now read-only.
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.
Copy file name to clipboardexpand all lines: packages/mdc-ripple/README.md
+13-6
Original file line number
Diff line number
Diff line change
@@ -46,13 +46,17 @@ CSS Class | Description
46
46
47
47
### Sass Mixins
48
48
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
50
54
51
55
##### Using basic states mixins
52
56
```css
53
57
.my-surface {
54
58
@includemdc-ripple-surface;
55
-
@includemdc-ripple-radius;
59
+
@includemdc-ripple-radius-bounded;
56
60
@includemdc-states;
57
61
}
58
62
```
@@ -61,7 +65,7 @@ In order to fully style the ripple effect for different states (hover/focus/pres
61
65
```css
62
66
.my-surface {
63
67
@includemdc-ripple-surface;
64
-
@includemdc-ripple-radius;
68
+
@includemdc-ripple-radius-bounded;
65
69
@includemdc-states-base-color(black);
66
70
@includemdc-states-hover-opacity(.1);
67
71
@includemdc-states-focus-opacity(.3);
@@ -76,7 +80,10 @@ These APIs use pseudo-elements for the ripple effect: `::before` for the backgro
76
80
Mixin | Description
77
81
--- | ---
78
82
`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%`.
|`computeBoundingRect() => ClientRect`| Returns the ClientRect for the surface |
157
164
|`getWindowPageOffset() => {x: number, y: number}`| Returns the `page{X,Y}Offset` values for the window object |
158
165
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.
160
167
161
168
### `MDCRippleFoundation`
162
169
@@ -223,7 +230,7 @@ class MyMDCComponent extends MDCComponent {
223
230
224
231
### Handling keyboard events for custom UI components
225
232
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.
227
234
228
235
`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.
0 commit comments