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

Commit acb47d7

Browse files
authored
chore(ripple): move common ripple styles out of mixins and into @material/ripple/common (#1736)
BREAKING CHANGE: Please update all components which use MDC Ripple to import the new /common file
1 parent f71025f commit acb47d7

File tree

12 files changed

+54
-28
lines changed

12 files changed

+54
-28
lines changed

packages/mdc-button/mdc-button.scss

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
// limitations under the License.
1515
//
1616

17+
@import "@material/ripple/common";
1718
@import "@material/ripple/mixins";
1819
@import "@material/theme/mixins";
1920
@import "./mixins";

packages/mdc-checkbox/mdc-checkbox.scss

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
// limitations under the License.
1515
//
1616

17+
@import "@material/ripple/common";
1718
@import "@material/ripple/mixins";
1819
@import "@material/theme/mixins";
1920
@import "./mixins";

packages/mdc-fab/mdc-fab.scss

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15+
@import "@material/ripple/common";
1516
@import "@material/ripple/mixins";
1617
@import "@material/ripple/variables";
1718
@import "./mixins";

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

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
/** postcss-bem-linter: define icon-toggle */
1818

1919
@import "@material/animation/functions";
20+
@import "@material/ripple/common";
2021
@import "@material/ripple/mixins";
2122
@import "@material/theme/mixins";
2223
@import "./mixins";

packages/mdc-list/mdc-list.scss

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15+
@import "@material/ripple/common";
1516
@import "@material/ripple/mixins";
1617
@import "@material/rtl/mixins";
1718
@import "@material/theme/mixins";

packages/mdc-radio/mdc-radio.scss

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
//
1616

1717
@import "@material/animation/functions";
18+
@import "@material/ripple/common";
1819
@import "@material/ripple/mixins";
1920
@import "@material/theme/mixins";
2021
@import "./functions";

packages/mdc-ripple/_mixins.scss

-28
Original file line numberDiff line numberDiff line change
@@ -17,36 +17,8 @@
1717
@import "@material/animation/variables";
1818
@import "@material/theme/functions";
1919
@import "@material/theme/mixins";
20-
@import "./keyframes";
2120
@import "./variables";
2221

23-
// Ensure that styles needed by any component using MDC Ripple are emitted, but only once.
24-
// (Every component using MDC Ripple imports these mixins, but doesn't necessarily import mdc-ripple.scss.)
25-
26-
// This variable is not intended to be overridden externally; it uses !default to avoid being reset
27-
// every time this file is imported.
28-
$mdc-ripple-common-styles-emitted_: false !default;
29-
30-
@if not $mdc-ripple-common-styles-emitted_ {
31-
$mdc-ripple-common-styles-emitted_: true;
32-
33-
@include mdc-ripple-keyframes_;
34-
35-
// Styles used to detect buggy behavior of CSS custom properties in Edge.
36-
// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
37-
// This is included in _mixins.scss rather than mdc-ripple.scss so that it will be
38-
// present for other components which rely on ripple as well as mdc-ripple itself.
39-
.mdc-ripple-surface--test-edge-var-bug {
40-
--mdc-ripple-surface-test-edge-var: 1px solid #000;
41-
42-
visibility: hidden;
43-
44-
&::before {
45-
border: var(--mdc-ripple-surface-test-edge-var);
46-
}
47-
}
48-
}
49-
5022
@mixin mdc-ripple-surface() {
5123
--mdc-ripple-fg-size: 0;
5224
--mdc-ripple-left: 0;

packages/mdc-ripple/common.scss

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
//
2+
// Copyright 2017 Google Inc. All Rights Reserved.
3+
//
4+
// Licensed under the Apache License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License.
6+
// You may obtain a copy of the License at
7+
//
8+
// http://www.apache.org/licenses/LICENSE-2.0
9+
//
10+
// Unless required by applicable law or agreed to in writing, software
11+
// distributed under the License is distributed on an "AS IS" BASIS,
12+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
// See the License for the specific language governing permissions and
14+
// limitations under the License.
15+
//
16+
17+
@import "./keyframes";
18+
19+
// Ensure that styles needed by any component using MDC Ripple are emitted, but only once.
20+
// (Every component using MDC Ripple imports these mixins, but doesn't necessarily import mdc-ripple.scss.)
21+
22+
// This variable is not intended to be overridden externally; it uses !default to avoid being reset
23+
// every time this file is imported.
24+
$mdc-ripple-common-styles-emitted_: false !default;
25+
26+
@if not $mdc-ripple-common-styles-emitted_ {
27+
$mdc-ripple-common-styles-emitted_: true;
28+
29+
@include mdc-ripple-keyframes_;
30+
31+
// Styles used to detect buggy behavior of CSS custom properties in Edge.
32+
// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
33+
// This is included in _mixins.scss rather than mdc-ripple.scss so that it will be
34+
// present for other components which rely on ripple as well as mdc-ripple itself.
35+
.mdc-ripple-surface--test-edge-var-bug {
36+
--mdc-ripple-surface-test-edge-var: 1px solid #000;
37+
38+
visibility: hidden;
39+
40+
&::before {
41+
border: var(--mdc-ripple-surface-test-edge-var);
42+
}
43+
}
44+
}

packages/mdc-ripple/mdc-ripple.scss

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
@import "@material/animation/functions";
1818
@import "@material/theme/mixins";
19+
@import "./common";
1920
@import "./mixins";
2021
@import "./variables";
2122

packages/mdc-select/mdc-select.scss

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
@import "@material/animation/variables";
1919
@import "@material/typography/mixins";
2020
@import "@material/theme/mixins";
21+
@import "@material/ripple/common";
2122
@import "@material/ripple/mixins";
2223
@import "@material/rtl/mixins";
2324

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

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
@import "@material/animation/functions";
1818
@import "@material/typography/mixins";
1919
@import "@material/theme/mixins";
20+
@import "@material/ripple/common";
2021
@import "@material/ripple/mixins";
2122
@import "@material/rtl/mixins";
2223

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

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
@import "./mixins";
1919
@import "./variables";
2020
@import "@material/animation/variables";
21+
@import "@material/ripple/common";
2122
@import "@material/ripple/mixins";
2223
@import "@material/rtl/mixins";
2324
@import "@material/theme/variables";

0 commit comments

Comments
 (0)