Update Button to be made of Material

To accomplish this, I made the following changes:

1) Material is now in charge of drawing the material shadows.
2) In order to mix in the style for the shadow, Element now takes a list of
   Styles instead of a single style.
3) Update all clients of Element#style to understand that we now have a list.
4) Update components that drawer shadows to have Material do that work instead.
   a) One exception: FloatingActionButton draws its own shadow because of its
      crazy clip requirements. We'll probably want to find a better way for
      FloatingActionButton to clip in the future.

I've also added a widgets-fn example to demo the fn material widgets.

This CL introduces a bug into Drawer whereby you can get ink splashes
everywhere in the drawer. In the future, we'll need to separate out the
different material aspects to get non-splashable materials.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1003553002

examples/stocks-fn/stockarrow.dart

@@ -74,11 +74,11 @@ class StockArrow extends Component {
 
     return new Container(
       inlineStyle: 'border-color: $border',
-      style: _style,
+      styles: [_style],
       children: [
         new Container(
           inlineStyle: 'border-$type-color: $border',
-          style: up ? _upStyle : _downStyle
+          styles: [up ? _upStyle : _downStyle]
         )
       ]
     );

examples/stocks-fn/stockrow.dart

@@ -47,23 +47,23 @@ class StockRow extends Component {
       ),
       new Container(
         key: 'Ticker',
-        style: _tickerStyle,
+        styles: [_tickerStyle],
         children: [new Text(stock.symbol)]
       ),
       new Container(
         key: 'LastSale',
-        style: _lastSaleStyle,
+        styles: [_lastSaleStyle],
         children: [new Text(lastSale)]
       ),
       new Container(
         key: 'Change',
-        style: _changeStyle,
+        styles: [_changeStyle],
         children: [new Text(changeInPrice)]
       )
     ];
 
     return new Material(
-      style: _style,
+      styles: [_style],
       children: children
     );
   }

examples/stocks-fn/stocksapp.dart

@@ -64,6 +64,7 @@ class StocksApp extends App {
   Node build() {
     var drawer = new Drawer(
       animation: _drawerAnimation,
+      level: 3,
       children: [
         new DrawerHeader(
           children: [new Text('Stocks')]
@@ -103,19 +104,19 @@ class StocksApp extends App {
 
     var toolbar = new Toolbar(
       children: [
-        new Icon(key: 'menu', style: _iconStyle,
+        new Icon(key: 'menu', styles: [_iconStyle],
             size: 24,
             type: 'navigation/menu_white')
           ..events.listen('click', _drawerAnimation.toggle),
         new Container(
-          style: _titleStyle,
+          styles: [_titleStyle],
           children: [title]
         ),
-        new Icon(key: 'search', style: _iconStyle,
+        new Icon(key: 'search', styles: [_iconStyle],
             size: 24,
             type: 'action/search_white')
           ..events.listen('click', _handleSearchClick),
-        new Icon(key: 'more_white', style: _iconStyle,
+        new Icon(key: 'more_white', styles: [_iconStyle],
             size: 24,
             type: 'navigation/more_vert_white')
       ]
@@ -124,14 +125,14 @@ class StocksApp extends App {
     var list = new Stocklist(stocks: _sortedStocks, query: _searchQuery);
 
     var fab = new FloatingActionButton(content: new Icon(
-      type: 'content/add_white', size: 24));
+      type: 'content/add_white', size: 24), level: 3);
 
     return new Container(
       key: 'StocksApp',
       children: [
         new Container(
           key: 'Content',
-          style: _style,
+          styles: [_style],
           children: [toolbar, list]
         ),
         fab,

examples/widgets-fn/main.sky

+#!mojo mojo:sky_viewer
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<sky>
+<import src="/sky/framework/debug/shake-to-reload.sky" />
+<script>
+import 'widgets_app.dart';
+main() {
+  new WidgetsApp();
+}
+</script>
+</sky>

examples/widgets-fn/widgets_app.dart

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../../framework/fn.dart';
+import '../../framework/components/button.dart';
+
+class WidgetsApp extends App {
+  Node build() {
+    return new Button(content: new Text('Go'), level: 1);
+  }
+}

framework/components/button.dart

@@ -3,41 +3,33 @@
 // found in the LICENSE file.
 
 import '../fn.dart';
-import 'button_base.dart';
+import '../theme/shadows.dart';
 import 'material.dart';
 
-class Button extends ButtonBase {
+class Button extends Component {
   static final Style _style = new Style('''
-    transform: translateX(0);
     display: inline-flex;
-    border-radius: 4px;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid blue;
-    -webkit-user-select: none;
-    margin: 5px;'''
-  );
-
-  static final Style _highlightStyle = new Style('''
     transform: translateX(0);
-    display: inline-flex;
-    border-radius: 4px;
+    -webkit-user-select: none;
     justify-content: center;
     align-items: center;
-    border: 1px solid blue;
-    -webkit-user-select: none;
-    margin: 5px;
-    background-color: orange;'''
+    height: 36px;
+    min-width: 64px;
+    padding: 0 8px;
+    margin: 4px;
+    border-radius: 2px;'''
   );
 
   Node content;
+  int level;
 
-  Button({ Object key, this.content }) : super(key: key);
+  Button({ Object key, this.content, this.level }) : super(key: key);
 
   Node build() {
     return new Material(
-      style: highlight ? _highlightStyle : _style,
-      children: [content]
+      styles: [_style],
+      children: [content],
+      level: level
     );
   }
 }

framework/components/checkbox.dart

@@ -68,13 +68,13 @@ class Checkbox extends ButtonBase {
 
   Node build() {
     return new Container(
-      style: _style,
+      styles: [_style],
       children: [
         new Container(
-          style: highlight ? _containerHighlightStyle : _containerStyle,
+          styles: [highlight ? _containerHighlightStyle : _containerStyle],
           children: [
             new Container(
-              style: checked ? _checkedStyle : _uncheckedStyle
+              styles: [checked ? _checkedStyle : _uncheckedStyle]
             )
           ]
         )

framework/components/drawer.dart

@@ -10,6 +10,7 @@ import '../theme/shadows.dart';
 import 'dart:async';
 import 'dart:math' as math;
 import 'dart:sky' as sky;
+import 'material.dart';
 
 const double _kWidth = 256.0;
 const double _kMinFlingVelocity = 0.4;
@@ -83,8 +84,7 @@ class Drawer extends Component {
     top: 0;
     left: 0;
     bottom: 0;
-    right: 0;
-    box-shadpw: ${Shadow[3]};'''
+    right: 0;'''
   );
 
   static final Style _maskStyle = new Style('''
@@ -110,11 +110,13 @@ class Drawer extends Component {
 
   DrawerAnimation animation;
   List<Node> children;
+  int level;
 
   Drawer({
     Object key,
     this.animation,
-    this.children
+    this.children,
+    this.level: 0
   }) : super(key: key) {
     events.listen('pointerdown', animation.handlePointerDown);
     events.listen('pointermove', animation.handlePointerMove);
@@ -148,20 +150,21 @@ class Drawer extends Component {
 
     Container mask = new Container(
       key: 'Mask',
-      style: _maskStyle,
+      styles: [_maskStyle],
       inlineStyle: maskInlineStyle
     )..events.listen('gesturetap', animation.handleMaskTap)
      ..events.listen('gestureflingstart', animation.handleFlingStart);
 
-    Container content = new Container(
+    Material content = new Material(
       key: 'Content',
-      style: _contentStyle,
+      styles: [_contentStyle],
       inlineStyle: contentInlineStyle,
-      children: children
+      children: children,
+      level: level
     );
 
     return new Container(
-      style: _style,
+      styles: [_style],
       inlineStyle: inlineStyle,
       children: [ mask, content ]
     );

framework/components/drawer_header.dart

@@ -33,15 +33,15 @@ class DrawerHeader extends Component {
 
   Node build() {
     return new Container(
-      style: _style,
+      styles: [_style],
       children: [
         new Container(
           key: 'Spacer',
-          style: _spacerStyle
+          styles: [_spacerStyle]
         ),
         new Container(
           key: 'Label',
-          style: _labelStyle,
+          styles: [_labelStyle],
           children: children
         )
       ]

framework/components/fixed_height_scrollable.dart

@@ -78,10 +78,10 @@ abstract class FixedHeightScrollable extends Component {
     }
 
     return new Container(
-      style: _style,
+      styles: [_style],
       children: [
         new Container(
-          style: _scrollAreaStyle,
+          styles: [_scrollAreaStyle],
           inlineStyle: transformStyle,
           children: buildItems(itemNumber, drawCount)
         )

framework/components/floating_action_button.dart

@@ -18,7 +18,6 @@ class FloatingActionButton extends Component {
     height: 56px;
     background-color: ${Red[500]};
     color: white;
-    box-shadow: ${Shadow[3]};
     border-radius: 28px;'''
   );
   static final Style _clipStyle = new Style('''
@@ -34,8 +33,10 @@ class FloatingActionButton extends Component {
     -webkit-clip-path: circle(28px at center);''');
 
   Node content;
+  int level;
 
-  FloatingActionButton({ Object key, this.content }) : super(key: key);
+  FloatingActionButton({ Object key, this.content, this.level: 0 })
+      : super(key: key);
 
   Node build() {
     List<Node> children = [];
@@ -43,13 +44,17 @@ class FloatingActionButton extends Component {
     if (content != null)
       children.add(content);
 
+    List<Style> containerStyle = [_style];
+    if (level > 0)
+      containerStyle.add(Material.shadowStyle[level]);
+
     return new Container(
       key: "Container",
-      style: _style,
+      styles: containerStyle,
       children: [
         new Material(
           key: "Clip",
-          style: _clipStyle,
+          styles: [_clipStyle],
           children: children
         )
       ]

framework/components/icon.dart

@@ -7,13 +7,13 @@ import '../fn.dart';
 const String kAssetBase = '/sky/assets/material-design-icons';
 
 class Icon extends Component {
-  Style style;
+  List<Style> styles;
   int size;
   String type;
 
   Icon({
     String key,
-    this.style,
+    this.styles,
     this.size,
     this.type: ''
   }) : super(key: key);
@@ -28,7 +28,7 @@ class Icon extends Component {
     }
 
     return new Image(
-      style: style,
+      styles: styles,
       width: size,
       height: size,
       src: '${kAssetBase}/${category}/2x_web/ic_${subtype}_${size}dp.png'

framework/components/ink_splash.dart

@@ -91,11 +91,11 @@ class InkSplash extends Component {
     _ensureListening();
 
     return new Container(
-      style: _style,
+      styles: [_style],
       children: [
         new Container(
           inlineStyle: _inlineStyle,
-          style: _splashStyle
+          styles: [_splashStyle]
         )
       ]
     );

framework/components/input.dart

@@ -75,7 +75,7 @@ class Input extends Component {
 
     if (placeholder != null && _value.isEmpty) {
       children.add(new Container(
-          style: _placeholderStyle,
+          styles: [_placeholderStyle],
           children: [new Text(placeholder)]
       ));
     }
@@ -83,7 +83,7 @@ class Input extends Component {
     children.add(new EditableText(value: _editableValue, focused: focused));
 
     return new Container(
-      style: _style,
+      styles: [_style],
       inlineStyle: focused ? _focusedInlineStyle : null,
       children: children
     );

framework/components/material.dart

@@ -3,8 +3,10 @@
 // found in the LICENSE file.
 
 import '../fn.dart';
-import 'dart:sky' as sky;
+import '../theme/shadows.dart';
 import 'dart:collection';
+import 'dart:math';
+import 'dart:sky' as sky;
 import 'ink_splash.dart';
 
 class Material extends Component {
@@ -19,12 +21,28 @@ class Material extends Component {
     bottom: 0'''
   );
 
+  static final List<Style> shadowStyle = [
+    null,
+    new Style('box-shadow: ${Shadow[1]}'),
+    new Style('box-shadow: ${Shadow[2]}'),
+    new Style('box-shadow: ${Shadow[3]}'),
+    new Style('box-shadow: ${Shadow[4]}'),
+    new Style('box-shadow: ${Shadow[5]}'),
+  ];
+
   LinkedHashSet<SplashAnimation> _splashes;
 
-  Style style;
+  List<Style> styles;
+  String inlineStyle;
   List<Node> children;
-
-  Material({ Object key, this.style, this.children }) : super(key: key) {
+  int level;
+
+  Material({
+      Object key,
+      this.styles,
+      this.inlineStyle,
+      this.children,
+      this.level: 0 }) : super(key: key) {
     events.listen('gesturescrollstart', _cancelSplashes);
     events.listen('wheel', _cancelSplashes);
     events.listen('pointerdown', _startSplash);
@@ -35,7 +53,7 @@ class Material extends Component {
 
     if (_splashes != null) {
       childrenIncludingSplashes.add(new Container(
-        style: _splashesStyle,
+        styles: [_splashesStyle],
         children: new List.from(_splashes.map(
             (s) => new InkSplash(s.onStyleChanged))),
         key: 'Splashes'
@@ -45,8 +63,14 @@ class Material extends Component {
     if (children != null)
       childrenIncludingSplashes.addAll(children);
 
-    return new Container(key: 'Material', style: style,
-        children: childrenIncludingSplashes);
+    List<Style> stylesIncludingShadow = styles;
+    if (level > 0) {
+      stylesIncludingShadow = new List.from(styles);
+      stylesIncludingShadow.add(shadowStyle[level]);
+    }
+
+    return new Container(key: 'Material', styles: stylesIncludingShadow,
+        inlineStyle: inlineStyle, children: childrenIncludingSplashes);
   }
 
   sky.ClientRect _getBoundingRect() => (getRoot() as sky.Element).getBoundingClientRect();

framework/components/menu_divider.dart

@@ -14,7 +14,7 @@ class MenuDivider extends Component {
 
   Node build() {
     return new Container(
-      style: _style
+      styles: [_style]
     );
   }
 }

framework/components/menu_item.dart

@@ -43,15 +43,15 @@ class MenuItem extends ButtonBase {
 
   Node build() {
     return new Material (
-      style: highlight ? _highlightStyle : _style,
+      styles: [highlight ? _highlightStyle : _style],
       children: [
         new Icon(
-          style: _iconStyle,
+          styles: [_iconStyle],
           size: 24,
           type: "${icon}_grey600"
         ),
         new Container(
-          style: _labelStyle,
+          styles: [_labelStyle],
           children: children
         )
       ]

framework/components/radio.dart

@@ -56,7 +56,7 @@ class Radio extends ButtonBase {
 
   Node build() {
     return new Material(
-      style: highlight ? _highlightStyle : _style,
+      styles: [highlight ? _highlightStyle : _style],
       children: value == groupValue ? [new Container( style : _dotStyle )] : []
     )
   }

framework/components/toolbar.dart

@@ -23,7 +23,7 @@ class Toolbar extends Component {
 
   Node build() {
     return new Container(
-      style: _style,
+      styles: [_style],
       children: children
     );
   }

framework/editing/editable_text.dart

@@ -76,7 +76,7 @@ class EditableText extends Component {
       if (!composing.isEmpty) {
         children.add(new Container(
           key: 'composing', 
-          style: _composingStyle,
+          styles: [_composingStyle],
           children: [new Text(composing)]
         ));
       }
@@ -87,10 +87,10 @@ class EditableText extends Component {
     }
 
     if (_showCursor)
-      children.add(new Container(key: 'cursor', style: _cusorStyle));
+      children.add(new Container(key: 'cursor', styles: [_cusorStyle]));
 
     return new Container(
-      style: _style,
+      styles: [_style],
       children: children
     );
   }

framework/fn.dart

@@ -135,17 +135,16 @@ abstract class Element extends Node {
   String inlineStyle;
 
   List<Node> _children = null;
-  String _className = '';
+  String _class = '';
 
   Element({
     Object key,
     List<Node> children,
-    Style style,
+    List<Style> styles,
 
     this.inlineStyle
   }) : super(key:key) {
-
-    _className = style == null ? '': style._className;
+    _class = styles == null ? '' : styles.map((s) => s._className).join(' ');
     _children = children == null ? _emptyList : children;
 
     if (_isInCheckedMode) {
@@ -229,8 +228,8 @@ abstract class Element extends Node {
     _syncEvents(old);
 
     sky.Element root = _root as sky.Element;
-    if (_className != old._className) {
-      root.setAttribute('class', _className);
+    if (_class != old._class) {
+      root.setAttribute('class', _class);
     }
 
     if (inlineStyle != old.inlineStyle) {
@@ -413,12 +412,12 @@ class Container extends Element {
   Container({
     Object key,
     List<Node> children,
-    Style style,
+    List<Style> styles,
     String inlineStyle
   }) : super(
     key: key,
     children: children,
-    style: style,
+    styles: styles,
     inlineStyle: inlineStyle
   );
 }
@@ -437,7 +436,7 @@ class Image extends Element {
   Image({
     Object key,
     List<Node> children,
-    Style style,
+    List<Style> styles,
     String inlineStyle,
     this.width,
     this.height,
@@ -445,7 +444,7 @@ class Image extends Element {
   }) : super(
     key: key,
     children: children,
-    style: style,
+    styles: styles,
     inlineStyle: inlineStyle
   );
 
@@ -481,7 +480,7 @@ class Anchor extends Element {
   Anchor({
     Object key,
     List<Node> children,
-    Style style,
+    List<Style> styles,
     String inlineStyle,
     this.width,
     this.height,
@@ -489,7 +488,7 @@ class Anchor extends Element {
   }) : super(
     key: key,
     children: children,
-    style: style,
+    styles: styles,
     inlineStyle: inlineStyle
   );