Give the floating action button a slash effect

R=rafaelw@chromium.org

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

examples/fn/widgets/floating_action_button.dart

 part of widgets;
 
-class FloatingActionButton extends StyleComponent {
-
+class FloatingActionButton extends MaterialComponent {
   // TODO(rafaelw): Ganesh has problems with box shadows
   // box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 
   static final Style _style = new Style('''
     position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     bottom: 16px;
     right: 16px;
+    z-index: 5;
+    transform: translateX(0);
     width: 56px;
     height: 56px;
     background-color: #F44336;
     color: white;
     border-radius: 28px;'''
   );
+  static final Style _clipStyle = new Style('''
+    transform: translateX(0);
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-clip-path: circle(28px at center);''');
+
+  Node content;
 
-  Style get style => _style;
+  FloatingActionButton({ Object key, this.content }) : super(key: key);
 
-  FloatingActionButton({ Object key, Node content }) : super(key: key, content: content);
+  Node render() {
+    List<Node> children = [super.render()];
+
+    if (content != null)
+      children.add(content);
+
+    return new Container(
+      key: "Container",
+      style: _style,
+      children: [
+        new Container(
+          key: "Clip",
+          style: _clipStyle,
+          children: children
+        )
+      ]
+    );
+  }
 }

examples/fn/widgets/style_component.dart

-part of widgets;
-
-abstract class StyleComponent extends Component {
-  Node content;
-
-  // Subclasses should implement this getter to provide their style information.
-  Style get style => null;
-
-  StyleComponent({ Object key, this.content }) : super(key: key);
-
-  Node render() {
-    return new Container(
-      style: style,
-      children: content == null ? [] : [content]
-    );
-  }
-}

examples/fn/widgets/widgets.dart

@@ -23,6 +23,5 @@ part 'menuitem.dart';
 part 'radio.dart';
 part 'toolbar.dart';
 part 'floating_action_button.dart';
-part 'style_component.dart';
 
 typedef void ValueChanged(value);