fix(line-ripple): Fix CSP inline style rule (#2491)

Changed from modifying the style attribute, to modifying style properties.

packages/mdc-line-ripple/README.md

@@ -40,39 +40,39 @@ The line ripple is used to highlight user-specified text above it. When a line r
 
 CSS Class | Description
 --- | ---
-`mdc-line-ripple` | Mandatory
-`mdc-line-ripple--active` | Styles the line ripple as an active line ripple
-`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple
+`mdc-line-ripple` | Mandatory.
+`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.
+`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.
 
 ### Sass Mixins
 
 Mixin | Description
 --- | ---
-`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active
+`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.
 
 ### `MDCLineRipple`
 
 Method Signature | Description
 --- | ---
-`activate() => void` | Proxies to the foundation's `activate()` method
-`deactivate() => void` | Proxies to the foundation's `deactivate()` method
-`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method
+`activate() => void` | Proxies to the foundation's `activate()` method.
+`deactivate() => void` | Proxies to the foundation's `deactivate()` method.
+`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.
 
 ### `MDCLineRippleAdapter`
 
 Method Signature | Description
 --- | ---
-`addClass(className: string) => void` | Adds a class to the root element
-`removeClass(className: string) => void` | Removes a class from the root element
-`setAttr(attr: string, value: string) => void` | Sets an attribute with a given value on the root element
-`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element for a given event
-`deregisterEventHandler(handler: EventListener) => void` | Deregisters an event listener on the root element for a given event
+`addClass(className: string) => void` | Adds a class to the root element.
+`removeClass(className: string) => void` | Removes a class from the root element.
+`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.
+`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element for a given event.
+`deregisterEventHandler(handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.
 
 ### `MDCLineRippleFoundation`
 
 Method Signature | Description
 --- | ---
-`activate() => void` | Activates the line ripple
-`deactivate() => void` |  Deactivates the line ripple
-`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given
-`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event
+`activate() => void` | Activates the line ripple.
+`deactivate() => void` |  Deactivates the line ripple.
+`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.
+`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.

packages/mdc-line-ripple/adapter.js

@@ -47,11 +47,11 @@ class MDCLineRippleAdapter {
   hasClass(className) {}
 
   /**
-   * Sets an attribute with a given value on the line ripple element.
-   * @param {string} attr
+   * Sets the style property with propertyName to value on the root element.
+   * @param {string} propertyName
    * @param {string} value
    */
-  setAttr(attr, value) {}
+  setStyle(propertyName, value) {}
 
   /**
    * Registers an event listener on the line ripple element for a given event.

packages/mdc-line-ripple/foundation.js

@@ -40,7 +40,7 @@ class MDCLineRippleFoundation extends MDCFoundation {
       addClass: () => {},
       removeClass: () => {},
       hasClass: () => {},
-      setAttr: () => {},
+      setStyle: () => {},
       registerEventHandler: () => {},
       deregisterEventHandler: () => {},
     });
@@ -77,10 +77,7 @@ class MDCLineRippleFoundation extends MDCFoundation {
    * @param {!number} xCoordinate
    */
   setRippleCenter(xCoordinate) {
-    const attributeString =
-        `transform-origin: ${xCoordinate}px center`;
-
-    this.adapter_.setAttr('style', attributeString);
+    this.adapter_.setStyle('transform-origin', `${xCoordinate}px center`);
   }
 
   /**

packages/mdc-line-ripple/index.js

@@ -64,7 +64,7 @@ class MDCLineRipple extends MDCComponent {
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
       hasClass: (className) => this.root_.classList.contains(className),
-      setAttr: (attr, value) => this.root_.setAttribute(attr, value),
+      setStyle: (propertyName, value) => this.root_.style[propertyName] = value,
       registerEventHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
       deregisterEventHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
     })));

test/unit/mdc-line-ripple/mdc-line-ripple-foundation.test.js

@@ -35,7 +35,7 @@ test('exports strings', () => {
 
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCLineRippleFoundation, [
-    'addClass', 'removeClass', 'hasClass', 'setAttr',
+    'addClass', 'removeClass', 'hasClass', 'setStyle',
     'registerEventHandler', 'deregisterEventHandler',
   ]);
 });
@@ -116,5 +116,5 @@ test('setRippleCenter sets style attribute', () => {
   foundation.init();
   foundation.setRippleCenter(transformOriginValue);
 
-  td.verify(mockAdapter.setAttr('style', td.matchers.isA(String)));
+  td.verify(mockAdapter.setStyle('transform-origin', td.matchers.isA(String)));
 });

test/unit/mdc-line-ripple/mdc-line-ripple.test.js

@@ -58,10 +58,10 @@ test('#adapter.hasClass returns true if a class is on the element', () => {
   assert.isTrue(hasClass);
 });
 
-test('#adapter.setAttr adds a given attribute to the element', () => {
+test('#adapter.setStyle adds a given style property to the element', () => {
   const {root, component} = setupTest();
-  component.getDefaultFoundation().adapter_.setAttr('aria-label', 'foo');
-  assert.equal(root.getAttribute('aria-label'), 'foo');
+  component.getDefaultFoundation().adapter_.setStyle('color', 'blue');
+  assert.equal(root.getAttribute('style'), 'color: blue;');
 });
 
 test('#adapter.registerEventHandler adds event listener for a given event to the element', () => {