Merge pull request #326 from SAP/feature/#295

#295 and #325 to swap type secondary to options light buttons
SAP · Nov 26, 2018 · ff52462 · ff52462
2 parents 2718c09 + 9a09258
commit ff52462
Show file tree

Hide file tree

Showing 15 changed files with 74 additions and 75 deletions.
diff --git a/docs/modules/documentation/containers/button/button-docs.component.html b/docs/modules/documentation/containers/button/button-docs.component.html
@@ -8,8 +8,8 @@ <h1>&lt;button fd-button&gt;</h1>
 
 <properties [properties]="{
   inputs: [
-    { name: 'options', description: '(Optional) String - Button Options.  Options include \'emphasized\' and \'light\'.  Leave empty for default.'},
-    { name: 'type', description: '(Optional) String - The type of the button.  Options include \'primary\', \'main\', \'secondary\', and \'toolbar\'. Leave empty for default.'},
+    { name: 'type', description: '(Optional) String - The type of the button.  Types include \'standard\', \'positive\', \'medium\', and \'negative\'.  Leave empty for default (Action button).'},
+    { name: 'options', description: '(Optional) String - Button options.  Options include \'emphasized\', \'light\'. Leave empty for default.'},
     { name: 'semantic', description: '(Optional) String - Semantic buttons. Semantic modifiers include \'standard\', \'positive\', \'medium\', and \'negative\'. Leave empty for no modifier.'},
     { name: 'size', description: '(Optional) String - The size of the button. Leave empty for default, or specify \'compact\'.'},
     { name: 'glyph', description: '(Optional) String - The icon to include in the button.  See the icon page for the list of icons.'},
@@ -128,4 +128,4 @@ <h2>Button RTL</h2>
   [class*="fd-button--"] {
     margin-right: 10px;
   }
-</style>
+</style>
diff --git a/...ocumentation/containers/dropdown/examples/dropdown-contextual-menu-example.component.html b/...ocumentation/containers/dropdown/examples/dropdown-contextual-menu-example.component.html
@@ -42,7 +42,7 @@
 
 <fd-popover>
     <fd-popover-control>
-        <button fd-button [fdType]="'secondary'">More</button>
+        <button fd-button [options]="'light'">More</button>
     </fd-popover-control>
     <fd-popover-body>
         <fd-menu>

diff --git a/...modules/documentation/containers/internationalization/internationalization.component.html b/...modules/documentation/containers/internationalization/internationalization.component.html
@@ -15,28 +15,28 @@ <h1>Examples</h1>
     <div class="fd-tile__content">
         <p>
             <button fd-button>
-                Primary Button
+                Action Button
             </button>
             <button fd-button
-                    [fdType]="'main'">
-                Main Button
-            </button>
-            <button fd-button
-                    [fdType]="'secondary'">
-                Secondary Button
-            </button>
-            <button fd-button
-                    [fdType]="'toolbar'">
-                Toolbar Button
+                    [fdType]="'standard'">
+                Standard Button
             </button>
             <button fd-button
                     [fdType]="'positive'">
                 Positive Button
             </button>
+            <button fd-button
+                    [fdType]="'medium'">
+                Medium Button
+            </button>
             <button fd-button
                     [fdType]="'negative'">
                 Negative Button
             </button>
+            <button fd-button
+                    [options]="'emphasized'">
+                Emphasized Button
+            </button>
         </p>
     </div>
 </div>
@@ -51,23 +51,23 @@ <h1>Examples</h1>
                 לחצן ראשי
             </button>
             <button fd-button
-                    [fdType]="'main'">
+                    [fdType]="'standard'">
                 לחצן ראשי
             </button>
             <button fd-button
-                    [fdType]="'secondary'">
+                    [fdType]="'positive'">
                 לחצן משני
             </button>
             <button fd-button
-                    [fdType]="'toolbar'">
+                    [fdType]="'medium'">
                 לחצן סרגל הכלים
             </button>
             <button fd-button
-                    [fdType]="'positive'">
+                    [fdType]="'negative'">
                 לחצן חיובי
             </button>
             <button fd-button
-                    [fdType]="'negative'">
+                    [options]="'emphasized'">
                 לחצן שלילי
             </button>
         </p>
@@ -102,4 +102,4 @@ <h3>تنبيه من نوع الخطأ القابل للرفض مع القالب.
         </p>
     </div>
 </div>
-<pre><code mwlHighlightJs [language]="'HTML'" [source]="alertHtml"></code></pre>
+<pre><code mwlHighlightJs [language]="'HTML'" [source]="alertHtml"></code></pre>
diff --git a/docs/modules/documentation/containers/internationalization/internationalization.component.ts b/docs/modules/documentation/containers/internationalization/internationalization.component.ts
@@ -14,54 +14,53 @@ export class InternationalizationDocsComponent implements OnInit {
 
     buttonHtmlType = `
     <button fd-button>
-    Primary Button
+        Action Button
     </button>
     <button fd-button
-            [fdType]="'main'">
-        Main Button
-    </button>
-    <button fd-button
-            [fdType]="'secondary'">
-        Secondary Button
-    </button>
-    <button fd-button
-            [fdType]="'toolbar'">
-        Toolbar Button
+            [fdType]="'standard'">
+        Standard Button
     </button>
     <button fd-button
             [fdType]="'positive'">
         Positive Button
     </button>
+    <button fd-button
+            [fdType]="'medium'">
+        Medium Button
+    </button>
     <button fd-button
             [fdType]="'negative'">
         Negative Button
     </button>
+    <button fd-button
+            [options]="'emphasized'">
+        Emphasized Button
+    </button>
   `;
 
     buttonHtmlTypeRTL = `
-<div dir="rtl">
     <button fd-button>
-    לחצן ראשי
+        לחצן ראשי
     </button>
     <button fd-button
-        [fdType]="'main'">
-    לחצן ראשי
+            [fdType]="'standard'">
+        לחצן ראשי
     </button>
     <button fd-button
-        [fdType]="'secondary'">
-    לחצן משני
+            [fdType]="'positive'">
+        לחצן משני
     </button>
     <button fd-button
-        [fdType]="'toolbar'">
-    לחצן סרגל הכלים
+            [fdType]="'medium'">
+        לחצן סרגל הכלים
     </button>
     <button fd-button
-        [fdType]="'positive'">
-    לחצן חיובי
+            [fdType]="'negative'">
+        לחצן חיובי
     </button>
     <button fd-button
-        [fdType]="'negative'">
-    לחצן שלילי
+            [options]="'emphasized'">
+        לחצן שלילי
     </button>
-</div>`;
+`;
 }
diff --git a/docs/modules/documentation/containers/list/examples/list-actions-example.component.html b/docs/modules/documentation/containers/list/examples/list-actions-example.component.html
@@ -1,22 +1,22 @@
 <fd-list>
     <fd-list-item>List item 1
         <fd-list-action>
-            <button fd-button [fdType]="'secondary'" [glyph]="'edit'"></button>
+            <button fd-button [options]="'light'" [glyph]="'edit'"></button>
         </fd-list-action>
     </fd-list-item>
     <fd-list-item>List item 2
         <fd-list-action>
-            <button fd-button [fdType]="'secondary'" [glyph]="'edit'"></button>
+            <button fd-button [options]="'light'" [glyph]="'edit'"></button>
         </fd-list-action>
     </fd-list-item>
     <fd-list-item>List item 3
         <fd-list-action>
-            <button fd-button [fdType]="'secondary'" [glyph]="'edit'"></button>
+            <button fd-button [options]="'light'" [glyph]="'edit'"></button>
         </fd-list-action>
     </fd-list-item>
     <fd-list-item>List item 4
         <fd-list-action>
-            <button fd-button [fdType]="'secondary'" [glyph]="'edit'"></button>
+            <button fd-button [options]="'light'" [glyph]="'edit'"></button>
         </fd-list-action>
     </fd-list-item>
 </fd-list>
diff --git a/docs/modules/documentation/containers/modal/examples/modal-confirmation-example.component.ts b/docs/modules/documentation/containers/modal/examples/modal-confirmation-example.component.ts
@@ -12,7 +12,7 @@ import { ModalService } from '../../../../../../library/src/lib/modal/modal.serv
                 Modal Body
             </fd-modal-body>
             <fd-modal-footer>
-                <button fd-button (click)="c('No')" [fdType]="'secondary'">No</button>
+                <button fd-button (click)="c('No')" [options]="'light'">No</button>
                 <button fd-button (click)="c('Yes')" [fdType]="'main'">Yes</button>
             </fd-modal-footer>
         </fd-modal>

diff --git a/docs/modules/documentation/containers/navbar/examples/navbar-example.component.html b/docs/modules/documentation/containers/navbar/examples/navbar-example.component.html
@@ -1,7 +1,7 @@
 <fd-navbar>
     <div fd-navbar-group [position]="'left'">
         <div class="fd-global-nav__side-menu">
-            <button fd-button [fdType]="'secondary'"
+            <button fd-button [options]="'light'"
                     [glyph]="'menu2'" aria-label="BUTTON_LABEL"></button>
         </div>
         <div class="fd-global-nav__logo fd-has-margin-left-none"></div>
@@ -11,7 +11,7 @@
     </div>
 
     <div fd-navbar-group [hasLaunchpad]="true">
-        <button fd-button [fdType]="'secondary'"
+        <button fd-button [options]="'light'"
                 aria-label="BUTTON_LABEL" [attr.aria-haspopup]="true">Suite Name</button>
     </div>
 
@@ -32,11 +32,11 @@
         </div>
 
         <div fd-navbar-actions>
-            <button fd-button [fdType]="'secondary'"
+            <button fd-button [options]="'light'"
                     [glyph]="'search'" aria-label="BUTTON_LABEL"></button>
-            <button fd-button [fdType]="'secondary'"
+            <button fd-button [options]="'light'"
                     [glyph]="'action-settings'" aria-label="BUTTON_LABEL"></button>
             <span fd-identifier [size]="'s'" [circle]="true">WW</span>
         </div>
     </div>
-</fd-navbar>
+</fd-navbar>
diff --git a/docs/modules/documentation/containers/tile/examples/tile-actions-example.component.html b/docs/modules/documentation/containers/tile/examples/tile-actions-example.component.html
@@ -8,7 +8,7 @@
         <fd-popover>
             <fd-popover-control>
                 <button fd-button
-                        [fdType]="'secondary'"
+                        [options]="'light'"
                         [glyph]="'vertical-grip'"></button>
             </fd-popover-control>
             <fd-popover-body>
@@ -22,4 +22,4 @@
             </fd-popover-body>
         </fd-popover>
     </fd-tile-actions>
-</fd-tile>
+</fd-tile>
diff --git a/docs/modules/documentation/containers/tile/tile-docs.component.html b/docs/modules/documentation/containers/tile/tile-docs.component.html
@@ -176,7 +176,7 @@ <h2>A Tile Gird with helpers</h2>
               <fd-popover>
                 <fd-popover-control>
                   <button fd-button
-                          [fdType]="'secondary'"
+                          [options]="'light'"
                           [glyph]="'vertical-grip'"></button>
                 </fd-popover-control>
                 <fd-popover-body>
@@ -205,4 +205,4 @@ <h2>A Tile Gird with helpers</h2>
       </div>
     </div>
   </div>
-</playground>
+</playground>
diff --git a/library/src/lib/calendar/calendar.component.html b/library/src/lib/calendar/calendar.component.html
@@ -7,12 +7,12 @@
                 (click)="showCalendarYears ? loadPrevYearsList() : goToPreviousMonth()"></button>
       </div>
       <div class="fd-calendar__action">
-        <button class=" fd-button--secondary fd-button--s"
+        <button class=" fd-button--light fd-button--s"
                 aria-label="month selection"
                 (click)="openMonthSelection()">{{monthName}}</button>
       </div>
       <div class="fd-calendar__action">
-        <button class=" fd-button--secondary fd-button--s"
+        <button class=" fd-button--light fd-button--s"
                 aria-label="year selection"
                 (click)="openYearSelection()">{{year}}</button>
       </div>

diff --git a/library/src/lib/date-picker/date-picker.component.html b/library/src/lib/date-picker/date-picker.component.html
@@ -13,7 +13,7 @@
                        (blur)="onBlurHandler()"
                        [ngClass]="{ 'fd-input--compact': compact }">
                 <span class="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button">
-                    <button class="fd-popover__control fd-button--icon fd-button--secondary sap-icon--calendar"
+                    <button class="fd-popover__control fd-button--icon fd-button--light sap-icon--calendar"
                             (click)="openCalendar(datePicker.value)" aria-label="display calendar toggle"
                             [attr.aria-expanded]="isOpen"></button>
                 </span>

diff --git a/library/src/lib/input-group/input-group.component.html b/library/src/lib/input-group/input-group.component.html
@@ -20,11 +20,11 @@
     <button [disabled]="disabled"
             *ngIf="!glyph"
             (click)="buttonClicked($event)"
-            class="fd-button--secondary">{{addOnText}}</button>
+            class="fd-button--light">{{addOnText}}</button>
     <button [disabled]="disabled"
             *ngIf="glyph"
             (click)="buttonClicked($event)"
-            class="fd-button--icon fd-button--secondary"
+            class="fd-button--icon fd-button--light"
             [ngClass]="'sap-icon--' + glyph"></button>
   </span>
   <input [(ngModel)]="inputText"

diff --git a/library/src/lib/time-picker/time-picker.component.html b/library/src/lib/time-picker/time-picker.component.html
@@ -20,7 +20,7 @@
                placeholder="{{getPlaceholder()}}">
         <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--after">
           <button [disabled]="disabled"
-                  class="fd-button--icon fd-button--secondary sap-icon--fob-watch"></button>
+                  class="fd-button--icon fd-button--light sap-icon--fob-watch"></button>
         </span>
       </div>
     </fd-popover-control>