fix(action-sheet): follows MD spec

references ionic-team#8663
manucorporat · Nov 1, 2016 · f39b315 · f39b315
1 parent 3fe3d98
commit f39b315
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 32 deletions.
diff --git a/src/components/action-sheet/action-sheet-component.ts b/src/components/action-sheet/action-sheet-component.ts
@@ -20,7 +20,7 @@ import { ViewController } from '../../navigation/view-controller';
           '<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
           '<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
           '<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-left]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
-            '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
+            '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon" isActive="false"></ion-icon>' +
             '{{b.text}}' +
           '</button>' +
         '</div>' +

diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss
@@ -19,7 +19,7 @@ $action-sheet-md-title-color:                           #757575 !default;
 $action-sheet-md-title-font-size:                       1.6rem !default;
 
 /// @prop - Padding of the action sheet title
-$action-sheet-md-title-padding:                         19px 16px 17px !default;
+$action-sheet-md-title-padding:                         11px 16px 17px !default;
 
 /// @prop - Min height of the action sheet button
 $action-sheet-md-button-min-height:                     4.8rem !default;
@@ -42,8 +42,8 @@ $action-sheet-md-button-background-activated:           #f1f1f1 !default;
 /// @prop - Font size of the icon in the action sheet button
 $action-sheet-md-icon-font-size:                        2.4rem !default;
 
-/// @prop - Min width of the icon in the action sheet button
-$action-sheet-md-icon-min-width:                        24px !default;
+/// @prop - Width of the icon in the action sheet button
+$action-sheet-md-icon-width:                            2.3rem !default;
 
 /// @prop - Text align of the icon in the action sheet button
 $action-sheet-md-icon-text-align:                       center !default;
@@ -52,8 +52,13 @@ $action-sheet-md-icon-text-align:                       center !default;
 $action-sheet-md-icon-vertical-align:                   middle !default;
 
 /// @prop - Margin of the icon in the action sheet button
-$action-sheet-md-icon-margin:                           0 28px 0 0 !default;
+$action-sheet-md-icon-margin:                           0 32px 0 0 !default;
 
+.action-sheet-md .action-sheet-container {
+  padding: .8rem 0;
+
+  background: $action-sheet-md-background;
+}
 
 .action-sheet-md .action-sheet-title {
   padding: $action-sheet-md-title-padding;
@@ -83,8 +88,9 @@ $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
 
 .action-sheet-md .action-sheet-icon {
   margin: $action-sheet-md-icon-margin;
+  padding: 0;
 
-  min-width: $action-sheet-md-icon-min-width;
+  width: $action-sheet-md-icon-width;
 
   font-size: $action-sheet-md-icon-font-size;
   text-align: $action-sheet-md-icon-text-align;
@@ -93,12 +99,6 @@ $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
 
 .action-sheet-md .action-sheet-group {
   overflow: hidden;
-
-  background: $action-sheet-md-background;
-}
-
-.action-sheet-md .action-sheet-group:last-child .action-sheet-button {
-  margin-bottom: $action-sheet-md-group-margin-bottom;
 }
 
 .action-sheet-md .action-sheet-group .button-inner {

diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss
@@ -15,11 +15,8 @@ $action-sheet-wp-box-shadow-color:                rgba(0, 0, 0, .2) !default;
 /// @prop - Box shadow of the action sheet
 $action-sheet-wp-box-shadow:                      0 -1px 0 $action-sheet-wp-box-shadow-color !default;
 
-/// @prop - Bottom margin of the action sheet button group
-$action-sheet-wp-group-margin-bottom:             8px !default;
-
 /// @prop - Padding of the action sheet title
-$action-sheet-wp-title-padding:                   19px 16px 17px !default;
+$action-sheet-wp-title-padding:                   11px 16px 17px !default;
 
 /// @prop - Font size of the action sheet title
 $action-sheet-wp-title-font-size:                 2rem !default;
@@ -51,20 +48,20 @@ $action-sheet-wp-button-background:               transparent !default;
 /// @prop - Background color of the action sheet activated button
 $action-sheet-wp-button-background-activated:     $list-wp-activated-background-color !default;
 
-/// @prop - Min width of the icon in the action sheet button
-$action-sheet-wp-icon-min-width:                  24px !default;
+/// @prop - Font size of the icon in the action sheet button
+$action-sheet-wp-icon-font-size:                  2.4rem !default;
+
+/// @prop - Width of the icon in the action sheet button
+$action-sheet-wp-icon-width:                      2.3rem !default;
 
 /// @prop - Text align of the icon in the action sheet button
 $action-sheet-wp-icon-text-align:                 center !default;
 
 /// @prop - Vertical align of the icon in the action sheet button
 $action-sheet-wp-icon-vertical-align:             middle !default;
 
-/// @prop - Font size of the icon in the action sheet button
-$action-sheet-wp-icon-font-size:                  2.4rem !default;
-
 /// @prop - Margin of the icon in the action sheet button
-$action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
+$action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 
 
 .action-sheet-wp .action-sheet-wrapper {
@@ -96,20 +93,19 @@ $action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
 
 .action-sheet-wp .action-sheet-icon {
   margin: $action-sheet-wp-icon-margin;
+  padding: 0;
 
-  min-width: $action-sheet-wp-icon-min-width;
+  width: $action-sheet-wp-icon-width;
 
   font-size: $action-sheet-wp-icon-font-size;
   text-align: $action-sheet-wp-icon-text-align;
   vertical-align: $action-sheet-wp-icon-vertical-align;
 }
 
-.action-sheet-wp .action-sheet-group {
-  background: $action-sheet-wp-background;
-}
+.action-sheet-wp .action-sheet-container {
+  padding: .8rem 0;
 
-.action-sheet-wp .action-sheet-group:last-child .action-sheet-button {
-  margin-bottom: $action-sheet-wp-group-margin-bottom;
+  background: $action-sheet-wp-background;
 }
 
 .action-sheet-wp .action-sheet-group .button-inner {

diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
@@ -1,5 +1,6 @@
 import { Directive, ElementRef, HostBinding, Input, Renderer } from '@angular/core';
 
+import { isTrueProperty } from '../../util/util';
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
 
@@ -45,7 +46,7 @@ export class Icon extends Ion {
   /** @private */
   _iconMode: string;
   /** @private */
-  _isActive: any;
+  _isActive: boolean = true;
   /** @private */
   _name: string = '';
   /** @private */
@@ -145,11 +146,11 @@ export class Icon extends Ion {
    */
   @Input()
   get isActive(): boolean {
-    return (this._isActive === undefined || this._isActive === true || this._isActive === 'true');
+    return this._isActive;
   }
 
   set isActive(val: boolean) {
-    this._isActive = val;
+    this._isActive = isTrueProperty(val);
     this.update();
   }
 
@@ -178,7 +179,7 @@ export class Icon extends Ion {
     let iconMode = name.split('-', 2)[0];
     if (
       iconMode === 'ios' &&
-      !this.isActive &&
+      !this._isActive &&
       name.indexOf('logo-') < 0 &&
       name.indexOf('-outline') < 0) {
       name += '-outline';