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

feat(ripple): Implement subset of improved interaction response guidelines #419

Merged
merged 1 commit into from
Mar 28, 2017
Merged

feat(ripple): Implement subset of improved interaction response guidelines #419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 10 additions & 19 deletions packages/mdc-ripple/_keyframes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,46 +20,37 @@

@keyframes mdc-ripple-fg-radius-in {
from {
transform: translate(0) scale(1);
Copy link
Contributor

Choose a reason for hiding this comment

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

Why is this removed? Don't we need a fallback for browsers that don't support var?

Copy link
Contributor

Choose a reason for hiding this comment

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

See #361.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@BBosman good question. Typically, yes. However, this keyframe is only attached when mdc-ripple-upgraded is added to the ripple surface. Before we add that class, we check - within JS - to make sure custom properties are supported. Thus, fallbacks here aren't necessary.

...I'm going to add this explanation as a comment 😃

Copy link
Contributor

Choose a reason for hiding this comment

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

👍

// NOTE: For these keyframes, we do not need custom property fallbacks because they are only
// used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure
// that custom properties are supported within the browser before adding this class, we can
// safely use them without a fallback.
transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
animation-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
}

to {
Copy link
Contributor

Choose a reason for hiding this comment

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

Same here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ack

transform: translate(0) scale(0);
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 0));
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
Copy link
Contributor

Choose a reason for hiding this comment

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

Is there any reason why the default value is different from --mdc-ripple-fg-scale default value (which is 0 and default to 0 else where in _mixins.scss). Is this a spec change?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Looks like an oversight on my part for the --mdc-ripple-fg-scale default value, which should be set to 1. Will change.

}
}

@keyframes mdc-ripple-fg-opacity-out {
@keyframes mdc-ripple-fg-opacity-in {
from {
opacity: 1;
opacity: 0;
animation-timing-function: linear;
}

to {
opacity: 0;
opacity: 1;
}
}

@keyframes mdc-ripple-fg-unbounded-opacity-deactivate {
@keyframes mdc-ripple-fg-opacity-out {
from {
opacity: 1;
animation-timing-function: linear;
}

to {
opacity: 0;
}
}

@keyframes mdc-ripple-fg-unbounded-transform-deactivate {
from {
transform: 0;
transform: var(--mdc-ripple-fg-approx-xf, 0);
}

to {
transform: scale(0);
transform: scale(var(--mdc-ripple-fg-scale, 0));
}
}
57 changes: 16 additions & 41 deletions packages/mdc-ripple/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
Expand All @@ -28,17 +29,14 @@
}

@mixin mdc-ripple-base() {
--mdc-ripple-surface-width: 0;
--mdc-ripple-surface-height: 0;
--mdc-ripple-fg-size: 0;
--mdc-ripple-left: 0;
--mdc-ripple-top: 0;
--mdc-ripple-fg-size: 0;
--mdc-ripple-surface-height: 0;
--mdc-ripple-surface-width: 0;
--mdc-ripple-fg-unbounded-transform-duration: 0ms;
--mdc-ripple-xfo-x: center;
--mdc-ripple-xfo-y: center;
--mdc-ripple-fg-unbounded-opacity-duration: 0ms;
--mdc-ripple-fg-unbounded-transform-duration: 0ms;
--mdc-ripple-fg-approx-xf: 0;
--mdc-ripple-fg-scale: 1;
--mdc-ripple-fg-translate-end: 0;
--mdc-ripple-fg-translate-start: 0;

will-change: transform, opacity;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Expand Down Expand Up @@ -121,18 +119,11 @@
transform: scale(var(--mdc-ripple-fg-scale, 0));
}

&.mdc-ripple-upgraded--background-active#{$pseudo} {
&.mdc-ripple-upgraded--background-focused#{$pseudo} {
opacity: .99999;
}

// When an element goes active, a foreground ripple will be triggered.
// Therefore, we adjust the transition duration for the correct "wind-
// up" animation.
&.mdc-ripple-upgraded--background-active:active#{$pseudo} {
transition-duration: 600ms;
}

&.mdc-ripple-upgraded--background-bounded-active-fill#{$pseudo} {
&.mdc-ripple-upgraded--background-active-fill#{$pseudo} {
transition-duration: 120ms;
opacity: 1;
}
Expand Down Expand Up @@ -215,29 +206,13 @@
transform-origin: center center;
}

&.mdc-ripple-upgraded--foreground-bounded-active-fill#{$pseudo} {
animation-fill-mode: forwards;
animation: 300ms mdc-ripple-fg-radius-in, 400ms mdc-ripple-fg-opacity-out;
}

&.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-activation#{$pseudo} {
transform: scale(0);
transform: scale(var(--mdc-ripple-fg-scale, 0));
transition:
opacity 110ms linear,
transform 0 linear 80ms;
transition:
opacity 110ms linear,
transform var(--mdc-ripple-fg-unbounded-transform-duration, 0) linear 80ms;
opacity: 1;
&.mdc-ripple-upgraded--foreground-activation#{$pseudo} {
animation: 300ms mdc-ripple-fg-radius-in forwards, 83ms mdc-ripple-fg-opacity-in forwards;
}

&.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-deactivation#{$pseudo} {
animation:
mdc-ripple-fg-unbounded-opacity-deactivate 0 linear,
mdc-ripple-fg-unbounded-transform-deactivate 0 $mdc-animation-fast-out-slow-in-timing-function;
animation:
mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration, 0) linear,
mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration, 0) $mdc-animation-fast-out-slow-in-timing-function;
&.mdc-ripple-upgraded--foreground-deactivation#{$pseudo} {
// Retain transform from mdc-ripple-fg-radius-in activation
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
Copy link
Contributor

Choose a reason for hiding this comment

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

Same here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ack

Copy link
Contributor

Choose a reason for hiding this comment

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

Same thing here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ack

animation: 250ms mdc-ripple-fg-opacity-out;
}
}
42 changes: 15 additions & 27 deletions packages/mdc-ripple/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,43 +14,31 @@
* limitations under the License.
*/

export const ROOT = 'mdc-ripple';
export const UPGRADED = `${ROOT}-upgraded`;

export const cssClasses = {
// Ripple is a special case where the "root" component is really a "mixin" of sorts,
// given that it's an 'upgrade' to an existing component. That being said it is the root
// CSS class that all other CSS classes derive from.
ROOT: UPGRADED,
UNBOUNDED: `${UPGRADED}--unbounded`,
BG_ACTIVE: `${UPGRADED}--background-active`,
BG_BOUNDED_ACTIVE_FILL: `${UPGRADED}--background-bounded-active-fill`,
FG_BOUNDED_ACTIVE_FILL: `${UPGRADED}--foreground-bounded-active-fill`,
FG_UNBOUNDED_ACTIVATION: `${UPGRADED}--foreground-unbounded-activation`,
FG_UNBOUNDED_DEACTIVATION: `${UPGRADED}--foreground-unbounded-deactivation`,
ROOT: 'mdc-ripple-upgraded',
UNBOUNDED: 'mdc-ripple-upgraded--unbounded',
BG_FOCUSED: 'mdc-ripple-upgraded--background-focused',
BG_ACTIVE_FILL: 'mdc-ripple-upgraded--background-active-fill',
FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',
FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation',
};

export const strings = {
VAR_SURFACE_WIDTH: `--${ROOT}-surface-width`,
VAR_SURFACE_HEIGHT: `--${ROOT}-surface-height`,
VAR_FG_SIZE: `--${ROOT}-fg-size`,
VAR_FG_UNBOUNDED_OPACITY_DURATION: `--${ROOT}-fg-unbounded-opacity-duration`,
VAR_FG_UNBOUNDED_TRANSFORM_DURATION: `--${ROOT}-fg-unbounded-transform-duration`,
VAR_LEFT: `--${ROOT}-left`,
VAR_TOP: `--${ROOT}-top`,
VAR_TRANSLATE_END: `--${ROOT}-translate-end`,
VAR_FG_APPROX_XF: `--${ROOT}-fg-approx-xf`,
VAR_FG_SCALE: `--${ROOT}-fg-scale`,
VAR_FG_TRANSLATE_START: `--${ROOT}-fg-translate-start`,
VAR_FG_TRANSLATE_END: `--${ROOT}-fg-translate-end`,
VAR_SURFACE_WIDTH: '--mdc-ripple-surface-width',
VAR_SURFACE_HEIGHT: '--mdc-ripple-surface-height',
VAR_FG_SIZE: '--mdc-ripple-fg-size',
VAR_LEFT: '--mdc-ripple-left',
VAR_TOP: '--mdc-ripple-top',
VAR_FG_SCALE: '--mdc-ripple-fg-scale',
VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',
VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end',
};

export const numbers = {
FG_TRANSFORM_DELAY_MS: 80,
OPACITY_DURATION_DIVISOR: 3,
ACTIVE_OPACITY_DURATION_MS: 110,
MIN_OPACITY_DURATION_MS: 200,
UNBOUNDED_TRANSFORM_DURATION_MS: 200,
PADDING: 10,
INITIAL_ORIGIN_SCALE: 0.6,
DEACTIVATION_TIMEOUT_MS: 300,
};
Loading