feat: Button in FIori3 | Dialog in Fiori3 | New way of adding Icons (#…

…2224) * feat: addopt styles for buttons to match fiori 3 * fix: bring icons and fonts (#2187) * fix: Migrate modal to dialog support Fiori3 design and features (#2189) * fix(core) rename modal to dialog * Reworking dialogs header * Refactor dialogs footer * fix(core) Add draggable dialog support * fix(core) Improve dynamic component and dialog service code * fix(core) Introduce custom injector to DynamicComponents | Inject configs to Alert and Notification * fix(core) Create new Dialog Container | Use InjectionTokens with parent assecuration * fix(core) Create resize directive * Update Dialog documentation * fix(core) Add responsive paddings feature to dialog * fix(core) Add CssClassBuilders to Dialog and DialogContainer * fix(core) Update descriptions * fIX(Core) Revert Alert and Notification changes * fix(core) Add unit tests * fix(core) update missing buttons adnotations * fix(core) Update popover example * fix(core) Fix indirect imports * fix(core) Add loading state do Dialog * fix(core) Update tests * fix(core) Update tests * fix(core) Fix alert and notifications * fix(core) Address PR requests * fix(core) Fix resize for IE11 * fix: button fiori3 fixes and documentation improvements (#2221) * fix: few fixes in the code and documentation found after tests * small fixes * workaround added to fix missing selector * fix: addresing pr comments * fix: bring icons to angular.json file (#2227) * changes to support new code contribution guidline * fix(core) Add footer buttons wrapper * fix(core) Apply documentation changes according to PR comments * added ngoninit to button * fix(core) Create 'closestElement' function * Update button-docs.component.html * Update date-picker-complex-i18n-example.component.html * Update dialog-docs-header.component.html * Update dialog-docs.component.html * Update component-based-dialog-example.component.ts * Update dialog-backdrop-container-example.component.ts * fix closestElement tests * chore: bump styles and theming package versions * fix: remove dialog styling * fix: shellbar product menu markup update * menu button fixed * fix(core) fix Dialog styles | Change dialog buttons order * Add NODE_OPTIONS to netlify.toml * feat: fd-button--transparent added to input-group component * fix shellbar styling issues * chore: bump fundamental-styles version * fix(core) Clear selected products in complex dialog example Co-authored-by: Gracjan Górecki <gorecki.gracjan@hotmail.com> Co-authored-by: Inna Atanasova <39598672+InnaAtanasova@users.noreply.github.com> Co-authored-by: Vanessa-Cusmich <54723167+Vanessa-Cusmich@users.noreply.github.com> Co-authored-by: deno <mladen.droshev@sap.com> Co-authored-by: Mike O'Donnell <mikerodonnell89@users.noreply.github.com>
SAP · Apr 2, 2020 · 510264e · 510264e
1 parent 97613ee
commit 510264e
Show file tree

Hide file tree

Showing 249 changed files with 5,199 additions and 3,333 deletions.
diff --git a/angular.json b/angular.json
@@ -23,13 +23,18 @@
                         "main": "apps/docs/src/main.ts",
                         "polyfills": "apps/docs/src/polyfills.ts",
                         "tsConfig": "apps/docs/tsconfig.app.json",
-                        "assets": ["apps/docs/src/favicon.ico", "apps/docs/src/assets"],
+                        "assets": [
+                            "apps/docs/src/favicon.ico",
+                            "apps/docs/src/assets"
+                        ],
                         "styles": [
                             "node_modules/fundamental-styles/dist/icon.css",
                             "apps/docs/src/fd-typedoc/assets/css/main.scss",
                             "apps/docs/src/styles.scss"
                         ],
-                        "scripts": ["node_modules/marked/lib/marked.js"],
+                        "scripts": [
+                            "node_modules/marked/lib/marked.js"
+                        ],
                         "es5BrowserSupport": true,
                         "showCircularDependencies": false
                     },
@@ -55,20 +60,10 @@
                                     "type": "initial",
                                     "maximumWarning": "2mb",
                                     "maximumError": "5mb"
-                                },
-                                {
-                                    "type": "anyComponentStyle",
-                                    "maximumWarning": "6kb"
                                 }
                             ]
                         },
                         "production-unoptimized": {
-                            "budgets": [
-                                {
-                                    "type": "anyComponentStyle",
-                                    "maximumWarning": "6kb"
-                                }
-                            ],
                             "tsConfig": "apps/docs/tsconfig.netlify.json",
                             "fileReplacements": [
                                 {
@@ -131,8 +126,13 @@
                 "lint": {
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
-                        "tsConfig": ["apps/docs/tsconfig.app.json", "apps/docs/tsconfig.spec.json"],
-                        "exclude": ["**/node_modules/**"]
+                        "tsConfig": [
+                            "apps/docs/tsconfig.app.json",
+                            "apps/docs/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
                     }
                 },
                 "test": {
@@ -147,7 +147,10 @@
                             "apps/docs/src/styles.scss"
                         ],
                         "scripts": [],
-                        "assets": ["apps/docs/src/favicon.ico", "apps/docs/src/assets"]
+                        "assets": [
+                            "apps/docs/src/favicon.ico",
+                            "apps/docs/src/assets"
+                        ]
                     }
                 }
             }
@@ -173,7 +176,9 @@
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
                         "tsConfig": "apps/docs-e2e/tsconfig.e2e.json",
-                        "exclude": ["**/node_modules/**"]
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
                     }
                 }
             }
@@ -199,8 +204,13 @@
                 "lint": {
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
-                        "tsConfig": ["libs/core/tsconfig.lib.json", "libs/core/tsconfig.spec.json"],
-                        "exclude": ["**/node_modules/**"]
+                        "tsConfig": [
+                            "libs/core/tsconfig.lib.json",
+                            "libs/core/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
                     }
                 },
                 "test": {
@@ -239,8 +249,13 @@
                 "lint": {
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
-                        "tsConfig": ["libs/platform/tsconfig.lib.json", "libs/platform/tsconfig.spec.json"],
-                        "exclude": ["**/node_modules/**"]
+                        "tsConfig": [
+                            "libs/platform/tsconfig.lib.json",
+                            "libs/platform/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
                     }
                 },
                 "test": {
@@ -273,4 +288,4 @@
         "defaultCollection": "@nrwl/angular",
         "analytics": false
     }
-}
+}
diff --git a/apps/docs/src/app/core/api-files.ts b/apps/docs/src/app/core/api-files.ts
@@ -43,9 +43,9 @@ export const API_FILES = {
     button: [
         'ButtonComponent'
     ],
-    buttonGroup: [
-        'ButtonGroupComponent',
-        'ButtonGroupedDirective',
+    segmentedButton: [
+        'SegmentedButtonComponent',
+        'SegmentedButtonDirective',
     ],
     calendar: [
         'CalendarComponent',
@@ -165,16 +165,18 @@ export const API_FILES = {
         'MenuTitleDirective',
         'MenuKeyboardService'
     ],
-    modal: [
-        'ModalService',
-        'ModalTitleDirective',
-        'ModalCloseButtonDirective',
-        'ModalConfig',
-        'ModalPosition',
-        'ModalBodyComponent',
-        'ModalHeaderComponent',
-        'ModalFooterComponent',
-        'ModalRef'
+    dialog: [
+        'DialogService',
+        'DialogContainerComponent',
+        'DialogTitleDirective',
+        'DialogCloseButtonDirective',
+        'DialogDecisiveButtonDirective',
+        'DialogConfig',
+        'DialogPosition',
+        'DialogBodyComponent',
+        'DialogHeaderComponent',
+        'DialogFooterComponent',
+        'DialogRef'
     ],
     multiInput: [
         'MultiInputComponent'

diff --git a/...cs/src/app/core/component-docs/action-bar/examples/action-bar-back-example.component.html b/...cs/src/app/core/component-docs/action-bar/examples/action-bar-back-example.component.html
@@ -1,13 +1,13 @@
 <div fd-action-bar>
     <div fd-action-bar-back>
-        <button aria-label="back" fd-button [fdType]="'light'" [compact]="true" [glyph]="'nav-back'"></button>
+        <button aria-label="back" fd-button [fdType]="'transparent'" [compact]="true" [glyph]="'nav-back'"></button>
     </div>
     <div fd-action-bar-header>
         <h3 fd-action-bar-title>Page Title</h3>
         <div fd-action-bar-description>Action bar Description</div>
     </div>
     <div fd-action-bar-actions>
         <button fd-button [fdType]="'main'">Save</button>
-        <button fd-button [fdType]="'light'">Cancel</button>
+        <button fd-button [fdType]="'transparent'">Cancel</button>
     </div>
 </div>
diff --git a/...core/component-docs/action-bar/examples/action-bar-contextual-menu-example.component.html b/...core/component-docs/action-bar/examples/action-bar-contextual-menu-example.component.html
@@ -5,8 +5,13 @@ <h3 fd-action-bar-title>Page Title</h3>
     <div fd-action-bar-actions>
         <fd-popover placement="bottom-end">
             <fd-popover-control>
-                <button fd-button aria-label="More" aria-haspopup="true" [fdType]="'light'"
-                    [glyph]="'overflow'"></button>
+                <button
+                    fd-button
+                    aria-label="More"
+                    aria-haspopup="true"
+                    [fdType]="'transparent'"
+                    [glyph]="'overflow'"
+                ></button>
             </fd-popover-control>
             <fd-popover-body>
                 <fd-menu>
@@ -31,4 +36,4 @@ <h3 fd-action-bar-title>Page Title</h3>
             </fd-popover-body>
         </fd-popover>
     </div>
-</div>
+</div>
diff --git a/...t-docs/action-bar/examples/action-bar-long-string-title-truncation-example.component.html b/...t-docs/action-bar/examples/action-bar-long-string-title-truncation-example.component.html
@@ -1,13 +1,20 @@
 <div fd-action-bar>
     <div fd-action-bar-back>
-        <button aria-label="back" fd-button [fdType]="'light'" [compact]="true" [glyph]="'nav-back'"></button>
+        <button aria-label="back" fd-button [fdType]="'transparent'" [compact]="true" [glyph]="'nav-back'"></button>
     </div>
     <div fd-action-bar-header>
-        <h3 fd-action-bar-title>Page Title Demo for very very very very very very very very very very very very very very very very very very very long text</h3>
-        <div fd-action-bar-description>Action bar Description with a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long text</div>
+        <h3 fd-action-bar-title>
+            Page Title Demo for very very very very very very very very very very very very very very very very very
+            very very long text
+        </h3>
+        <div fd-action-bar-description>
+            Action bar Description with a very very very very very very very very very very very very very very very
+            very very very very very very very very very very very very very very very very very very very very very
+            very very very very very very very long text
+        </div>
     </div>
     <div fd-action-bar-actions>
         <button fd-button [fdType]="'main'">Save</button>
-        <button fd-button [fdType]="'light'">Cancel</button>
+        <button fd-button [fdType]="'transparent'">Cancel</button>
     </div>
-</div>
+</div>
diff --git a/.../src/app/core/component-docs/action-bar/examples/action-bar-mobile-example.component.html b/.../src/app/core/component-docs/action-bar/examples/action-bar-mobile-example.component.html
@@ -1,7 +1,7 @@
 <div fd-action-bar-mobile>
     <div fd-action-bar>
         <div fd-action-bar-back>
-            <button aria-label="back" fd-button [fdType]="'light'" [compact]="true" [glyph]="'nav-back'"></button>
+            <button aria-label="back" fd-button [fdType]="'transparent'" [compact]="true" [glyph]="'nav-back'"></button>
         </div>
         <div fd-action-bar-header>
             <h3 fd-action-bar-title>Page Title</h3>
@@ -10,8 +10,13 @@ <h3 fd-action-bar-title>Page Title</h3>
         <div fd-action-bar-actions>
             <fd-popover placement="bottom-end">
                 <fd-popover-control>
-                    <button aria-label="More" aria-haspopup="true" fd-button [fdType]="'light'"
-                        [glyph]="'overflow'"></button>
+                    <button
+                        aria-label="More"
+                        aria-haspopup="true"
+                        fd-button
+                        [fdType]="'transparent'"
+                        [glyph]="'overflow'"
+                    ></button>
                 </fd-popover-control>
                 <fd-popover-body>
                     <fd-menu>
@@ -37,4 +42,4 @@ <h3 fd-action-bar-title>Page Title</h3>
             </fd-popover>
         </div>
     </div>
-</div>
+</div>
diff --git a/...src/app/core/component-docs/action-bar/examples/action-bar-no-back-example.component.html b/...src/app/core/component-docs/action-bar/examples/action-bar-no-back-example.component.html
@@ -5,6 +5,6 @@ <h3 fd-action-bar-title>Page Title</h3>
     </div>
     <div fd-action-bar-actions>
         <button fd-button [fdType]="'main'">Save</button>
-        <button fd-button [fdType]="'light'">Cancel</button>
+        <button fd-button [fdType]="'transparent'">Cancel</button>
     </div>
 </div>
diff --git a/.../app/core/component-docs/alert/examples/alert-component-as-content-example.component.html b/.../app/core/component-docs/alert/examples/alert-component-as-content-example.component.html
@@ -1,17 +1,20 @@
 <button fd-button (click)="openFromComponent()">Open from Component</button>
 <button fd-button (click)="openFromTemplate(template)">Open from Template</button>
 <button fd-button (click)="openFromString()">Open from String</button>
-<button fd-button [options]="'emphasized'" (click)="alertService.dismissAll()" [disabled]="!alertService.hasOpenAlerts()">Dismiss All</button>
+<button
+    fd-button
+    [fdType]="'emphasized'"
+    (click)="alertService.dismissAll()"
+    [disabled]="!alertService.hasOpenAlerts()"
+>
+    Dismiss All
+</button>
 
 <!-- Defining a template to open -->
 <ng-template let-alert #template>
-    <p>{{alert.data.firstLine}}</p>
-    <p>{{alert.data.secondLine}}</p>
-    <button fd-button
-            [fdType]="'positive'"
-            [options]="'emphasized'"
-            [compact]="true"
-            (click)="alert.dismiss('Data passed back')">
+    <p>{{ alert.data.firstLine }}</p>
+    <p>{{ alert.data.secondLine }}</p>
+    <button fd-button [fdType]="'positive'" [compact]="true" (click)="alert.dismiss('Data passed back')">
         Click to dismiss
     </button>
 </ng-template>
diff --git a/apps/docs/src/app/core/component-docs/bar/examples/bar-default-example.component.html b/apps/docs/src/app/core/component-docs/bar/examples/bar-default-example.component.html
@@ -1,24 +1,23 @@
 <div fd-bar>
     <div fd-bar-left>
         <fd-bar-element>
-            <button fd-button [fdType]="'standard'" [options]="'light'" [glyph]="navigationArrow$ | async" [compact]="true"></button>
+            <button fd-button [fdType]="'transparent'" [glyph]="navigationArrow$ | async" [compact]="true"></button>
         </fd-bar-element>
         <fd-bar-element>
-           Left Section
+            Left Section
         </fd-bar-element>
     </div>
     <div fd-bar-middle>
         <fd-bar-element>
-           Middle Section
+            Middle Section
         </fd-bar-element>
     </div>
     <div fd-bar-right>
         <fd-bar-element>
-           Right Section
+            Right Section
         </fd-bar-element>
         <fd-bar-element>
-           <fd-image [size]="'s'" [photo]="'https://placeimg.com/400/400/nature'">
-           </fd-image>
+            <fd-image [size]="'s'" [photo]="'https://placeimg.com/400/400/nature'"> </fd-image>
         </fd-bar-element>
     </div>
 </div>
diff --git a/.../docs/src/app/core/component-docs/bar/examples/bar-floating-footer-example.component.html b/.../docs/src/app/core/component-docs/bar/examples/bar-floating-footer-example.component.html
@@ -1,10 +1,10 @@
 <div fd-bar [barDesign]="'floating-footer'">
     <div fd-bar-right>
         <fd-bar-element>
-            <button fd-button [options]="'emphasized'" [compact]="true">Save</button>
+            <button fd-button [fdType]="'transparent'" [compact]="true">Save</button>
         </fd-bar-element>
         <fd-bar-element>
-            <button fd-button [options]="'light'" [compact]="true">Cancel</button>
+            <button fd-button [fdType]="'transparent'" [compact]="true">Cancel</button>
         </fd-bar-element>
     </div>
-</div>
+</div>
diff --git a/apps/docs/src/app/core/component-docs/bar/examples/bar-footer-example.component.html b/apps/docs/src/app/core/component-docs/bar/examples/bar-footer-example.component.html
@@ -1,10 +1,10 @@
 <div fd-bar [barDesign]="'footer'">
     <div fd-bar-right>
         <fd-bar-element>
-            <button fd-button [options]="'emphasized'" [compact]="true">Save</button>
+            <button fd-button [fdType]="'transparent'" [compact]="true">Save</button>
         </fd-bar-element>
         <fd-bar-element>
-            <button fd-button [options]="'light'" [compact]="true">Cancel</button>
+            <button fd-button [fdType]="'transparent'" [compact]="true">Cancel</button>
         </fd-bar-element>
     </div>
-</div>
+</div>
diff --git a/apps/docs/src/app/core/component-docs/bar/examples/bar-header-example.component.html b/apps/docs/src/app/core/component-docs/bar/examples/bar-header-example.component.html
@@ -1,24 +1,23 @@
 <div fd-bar [barDesign]="'header'">
     <div fd-bar-left>
         <fd-bar-element>
-            <button fd-button [fdType]="'standard'" [options]="'light'" [glyph]="navigationArrow$ | async" [compact]="true"></button>
+            <button fd-button [fdType]="'transparent'" [glyph]="navigationArrow$ | async" [compact]="true"></button>
         </fd-bar-element>
         <fd-bar-element>
-           Left Section
+            Left Section
         </fd-bar-element>
     </div>
     <div fd-bar-middle>
         <fd-bar-element>
-           Middle Section
+            Middle Section
         </fd-bar-element>
     </div>
     <div fd-bar-right>
         <fd-bar-element>
-           Right Section
+            Right Section
         </fd-bar-element>
         <fd-bar-element>
-           <fd-image [size]="'s'" [photo]="'https://placeimg.com/400/400/nature'">
-           </fd-image>
+            <fd-image [size]="'s'" [photo]="'https://placeimg.com/400/400/nature'"> </fd-image>
         </fd-bar-element>
     </div>
 </div>