From 2dfaec6eb5cf474156eed6866823d84f40fa9052 Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Fri, 16 Mar 2018 10:42:21 -0400 Subject: [PATCH] feat(ripple): Expose mdc-states-opacity; fix press fallback (#2402) --- packages/mdc-ripple/README.md | 8 ++++- packages/mdc-ripple/_functions.scss | 48 +++++++++++++++++++++++++++++ packages/mdc-ripple/_keyframes.scss | 4 +-- packages/mdc-ripple/_mixins.scss | 34 ++++++-------------- 4 files changed, 66 insertions(+), 28 deletions(-) create mode 100644 packages/mdc-ripple/_functions.scss diff --git a/packages/mdc-ripple/README.md b/packages/mdc-ripple/README.md index 3ad449f37b5..76111284153 100644 --- a/packages/mdc-ripple/README.md +++ b/packages/mdc-ripple/README.md @@ -44,7 +44,7 @@ CSS Class | Description `mdc-ripple-surface--primary` | Sets the ripple color to the theme primary color `mdc-ripple-surface--accent` | Sets the ripple color to the theme secondary color -### Sass Mixins +### Sass APIs In order to fully style the ripple effect for different states (hover/focus/pressed), the following mixins must be included: @@ -115,6 +115,12 @@ Mixin | Description > _NOTE_: `$has-nested-focusable-element` defaults to `false` but should be set to `true` if the component contains a focusable element (e.g. an input) inside the root element. +#### Sass Functions + +Function | Description +--- | --- +`mdc-states-opacity($color, $state)` | Returns the appropriate default opacity to apply to the given color in the given state (hover, focus, press, selected, or activated) + ### `MDCRipple` The `MDCRipple` JavaScript component allows for programmatic activation / deactivation of the ripple, for interdependent interaction between diff --git a/packages/mdc-ripple/_functions.scss b/packages/mdc-ripple/_functions.scss new file mode 100644 index 00000000000..9d278ff3d18 --- /dev/null +++ b/packages/mdc-ripple/_functions.scss @@ -0,0 +1,48 @@ +// +// Copyright 2016 Google Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// 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. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +@import "@material/theme/functions"; +@import "@material/theme/variables"; // for mdc-theme-prop-value +@import "./variables"; + +// +// Public +// + +@function mdc-states-opacity($color, $state) { + $opacity-map: mdc-states-opacities_($color); + + @if not map-has-key($opacity-map, $state) { + @error "Invalid state: '#{$state}'. Choose one of: #{map-keys($opacity-map)}"; + } + + @return map-get($opacity-map, $state); +} + +// +// Private +// + +@function mdc-states-opacities_($color) { + $color-value: mdc-theme-prop-value($color); + $opacity-map: if( + mdc-theme-tone($color-value) == "light", + $mdc-ripple-light-ink-opacities, + $mdc-ripple-dark-ink-opacities + ); + + @return $opacity-map; +} diff --git a/packages/mdc-ripple/_keyframes.scss b/packages/mdc-ripple/_keyframes.scss index 68635b3c95d..37356bbf792 100644 --- a/packages/mdc-ripple/_keyframes.scss +++ b/packages/mdc-ripple/_keyframes.scss @@ -42,14 +42,14 @@ } to { - opacity: var(--mdc-ripple-fg-opacity, map-get($mdc-ripple-dark-ink-opacities, "press")); + opacity: var(--mdc-ripple-fg-opacity, 0); } } @keyframes mdc-ripple-fg-opacity-out { from { animation-timing-function: linear; - opacity: var(--mdc-ripple-fg-opacity, map-get($mdc-ripple-dark-ink-opacities, "press")); + opacity: var(--mdc-ripple-fg-opacity, 0); } to { diff --git a/packages/mdc-ripple/_mixins.scss b/packages/mdc-ripple/_mixins.scss index e0cf236bad7..d747f707bf5 100644 --- a/packages/mdc-ripple/_mixins.scss +++ b/packages/mdc-ripple/_mixins.scss @@ -15,8 +15,8 @@ // @import "@material/animation/variables"; -@import "@material/theme/functions"; @import "@material/theme/mixins"; +@import "./functions"; @import "./variables"; @mixin mdc-ripple-surface() { @@ -145,8 +145,7 @@ // Simple mixin for activated states which automatically selects opacity values based on whether the ink color is // light or dark. @mixin mdc-states-activated($color, $has-nested-focusable-element: false) { - $opacity-map: mdc-states-opacities_($color); - $activated-opacity: map-get($opacity-map, "activated"); + $activated-opacity: mdc-states-opacity($color, activated); &--activated { // Stylelint seems to think that '&' qualifies as a type selector here? @@ -162,8 +161,7 @@ // Simple mixin for selected states which automatically selects opacity values based on whether the ink color is // light or dark. @mixin mdc-states-selected($color, $has-nested-focusable-element: false) { - $opacity-map: mdc-states-opacities_($color); - $selected-opacity: map-get($opacity-map, "selected"); + $selected-opacity: mdc-states-opacity($color, selected); &--selected { // stylelint-disable-next-line selector-max-type @@ -219,26 +217,12 @@ } } -// -// Private -// - -@function mdc-states-opacities_($color) { - $color-value: mdc-theme-prop-value($color); - $opacity-map: if( - mdc-theme-tone($color-value) == "light", - $mdc-ripple-light-ink-opacities, - $mdc-ripple-dark-ink-opacities - ); - - @return $opacity-map; -} - @mixin mdc-states-interactions_($color, $has-nested-focusable-element, $opacity-modifier: 0) { - $opacity-map: mdc-states-opacities_($color); - @include mdc-states-base-color($color); - @include mdc-states-hover-opacity(map-get($opacity-map, "hover") + $opacity-modifier); - @include mdc-states-focus-opacity(map-get($opacity-map, "focus") + $opacity-modifier, $has-nested-focusable-element); - @include mdc-states-press-opacity(map-get($opacity-map, "press") + $opacity-modifier); + @include mdc-states-hover-opacity(mdc-states-opacity($color, hover) + $opacity-modifier); + @include mdc-states-focus-opacity( + mdc-states-opacity($color, focus) + $opacity-modifier, + $has-nested-focusable-element + ); + @include mdc-states-press-opacity(mdc-states-opacity($color, press) + $opacity-modifier); }