fix: button fiori3 fixes and documentation improvements

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',

apps/docs/src/app/core/component-docs/button/button-docs.component.html

@@ -18,7 +18,7 @@
 <separator></separator>
 
 <fd-docs-section-title [id]="'Button-sizes'" [componentName]="'button'"> Button Sizes </fd-docs-section-title>
-<description> Use <code class="code-snippet">[compact]="true"</code> for the mobile button size. </description>
+<description> Use (or skip) <code class="code-snippet">[compact]="false"</code> for the mobile button size. </description>
 <component-example>
     <fd-button-sizes-example></fd-button-sizes-example>
 </component-example>

apps/docs/src/app/core/component-docs/button/examples/button-icons-example.component.html

@@ -6,7 +6,6 @@
 <button fd-button [fdType]="'attention'" [glyph]="'filter'">Filter</button>
 <button fd-button [fdType]="'transparent'" [glyph]="'filter'">Filter</button>
 
-<button fd-button [fdType]="'half'" [glyph]="'accept'"></button>
 <button fd-button [glyph]="'cart'"></button>
 
 <button fd-button [fdType]="'emphasized'" [glyph]="'cart'"></button>

apps/docs/src/app/core/component-docs/button/examples/button-types-example.component.html

@@ -1,4 +1,4 @@
-<button fd-button>Action Button</button>
+<button fd-button>Standard Button</button>
 <button fd-button [fdType]="'standard'">Standard Button</button>
 <button fd-button [fdType]="'emphasized'">Emphasized Button</button>
 <button fd-button [fdType]="'ghost'">Ghost Button</button>

apps/docs/src/app/core/component-docs/segmented-button/segmented-button-docs.component.ts

@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { Schema } from '../../../schema/models/schema.model';
 import { SchemaFactoryService } from '../../../schema/services/schema-factory/schema-factory.service';
 
-import * as buttonGroupDefaultExample from '!raw-loader!./examples/segmented-button-default-example.component.html';
-import * as buttonGroupToggleExample from '!raw-loader!./examples/segmented-button-toggle-example.component.html';
+import * as segmentedDefaultExample from '!raw-loader!./examples/segmented-button-default-example.component.html';
+import * as segmentedToggleExample from '!raw-loader!./examples/segmented-button-toggle-example.component.html';
 import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
 import { Icons } from '../../../documentation/utilities/icons';
 
@@ -95,15 +95,15 @@ export class SegmentedButtonDocsComponent implements OnInit {
     defaultToggleHtml: ExampleFile[] = [
         {
             language: 'html',
-            code: buttonGroupToggleExample,
+            code: segmentedToggleExample,
             fileName: 'segmented-button-toggle-example',
         }
     ];
 
     defaultSizeHtml: ExampleFile[] = [
         {
             language: 'html',
-            code: buttonGroupDefaultExample,
+            code: segmentedDefaultExample,
             fileName: 'segmented-button-default-example',
         }
     ];

apps/docs/src/app/core/component-docs/segmented-button/segmented-button-docs.module.ts

@@ -15,7 +15,7 @@ const routes: Routes = [
         component: SegmentedButtonHeaderComponent,
         children: [
             { path: '', component: SegmentedButtonDocsComponent },
-            { path: 'api', component: ApiComponent, data: { content: API_FILES.buttonGroup } }
+            { path: 'api', component: ApiComponent, data: { content: API_FILES.segmentedButton } }
         ]
     }
 ];

apps/docs/src/app/core/component-docs/split-button/examples/split-button-programmatical-example.component.html

@@ -17,5 +17,5 @@
     </div>
 </fd-split-button>
 
-<button fd-button (click)="isOpen=true">Open</button>
-<button fd-button (click)="isOpen=false">Close</button>
+<button class="programmable-button" fd-button (click)="isOpen=true">Open</button>
+<button class="programmable-button" fd-button (click)="isOpen=false">Close</button>

apps/docs/src/app/core/component-docs/split-button/examples/split-button-programmatical-example.component.ts

@@ -8,6 +8,9 @@ import { Component } from '@angular/core';
             fd-split-button {
                 margin-right: 12px;
             }
+            .programmable-button {
+                margin-right: 12px;
+            }
         `
     ]
 })
@@ -21,5 +24,4 @@ export class ButtonSplitProgrammaticalExampleComponent {
     primaryButtonClicked() {
         alert('Primary Button Clicked!');
     }
-
 }

apps/docs/src/app/core/component-docs/split-button/examples/split-button-types-example.component.ts

@@ -19,5 +19,4 @@ export class ButtonSplitTypesExampleComponent {
     primaryButtonClicked() {
         alert('Primary Button Clicked!');
     }
-
 }

libs/core/src/lib/button/button.component.ts

@@ -1,21 +1,30 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewEncapsulation, OnInit } from '@angular/core';
 import { applyCssClass, CssClassBuilder } from '../utils/public_api';
 
-export type ButtonType = '' | 'standard' | 'positive' | 'negative' | 'attention' | 'half' | 'ghost' | 'transparent' | 'emphasized' | 'menu';
+export type ButtonType =
+    | ''
+    | 'standard'
+    | 'positive'
+    | 'negative'
+    | 'attention'
+    | 'half'
+    | 'ghost'
+    | 'transparent'
+    | 'emphasized'
+    | 'menu';
 export type ButtonOptions = 'light' | 'emphasized' | 'menu';
 
-
-// TODO remove in 0.9.0
+// TODO remove in 0.17.0
 function replaceLightWithTransparent(option: string): string {
     return option.replace('light', 'transparent');
 }
 
-// TODO remove in 0.9.0
+// TODO remove in 0.17.0
 export function getOptionCssClass(options: ButtonOptions | ButtonOptions[]): string {
     if (Array.isArray(options)) {
         return options.map(option => `fd-button--${this.replaceLightWithTransparent(option)}`).join(' ');
     }
-    return `fd-button--${this.replaceLightWithTransparent(options)}`
+    return `fd-button--${this.replaceLightWithTransparent(options)}`;
 }
 
 /**
@@ -29,7 +38,9 @@ export function getOptionCssClass(options: ButtonOptions | ButtonOptions[]): str
     // tslint:disable-next-line:component-selector
     selector: `button[fd-button], a[fd-button]`,
     exportAs: 'fd-button',
-    template: `<ng-content></ng-content>`,
+    template: `
+        <ng-content></ng-content>
+    `,
     styleUrls: ['./button.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -41,50 +52,58 @@ export class ButtonComponent implements OnInit, CssClassBuilder {
         this._change();
     } // user's custom classes
 
+    private _glyph: string;
     /** The icon to include in the button. See the icon page for the list of icons.
-     * setter is used to control when css class have to be rebuilded
+     * Setter is used to control when css class have to be rebuilded.
+     * Default value is set to ''.
      */
-    private _glyph: string
     @Input() set glyph(icon: string) {
         this._glyph = icon;
         this._change();
-    };
+    }
 
-    /** Whether to apply compact mode to the button. */
     private _compact: boolean = false;
+    /** Whether to apply compact mode to the button. 
+     * Default value is set to false
+    */
     @Input() set compact(isComact: boolean) {
         this._compact = isComact;
         this._change();
     }
 
+    private _type: ButtonType;
     /** The type of the button. Types include:
      * 'standard' | 'positive' | 'negative' | 'attention' | 'half' | 'ghost' | 'transparent' | 'emphasized' | 'menu'.
-     * Leave empty for default (Action button).'*/
-    private _type: ButtonType;
+     * Leave empty for default (Standard button).'
+    */
     @Input() set fdType(type: ButtonType) {
         this._type = type;
         this._change();
     }
 
-    /** Whether to apply menu mode to the button.*/
     private _menu: boolean = false;
+    /** Whether to apply menu mode to the button.
+     * Default value is set to false
+    */
     @Input() set fdMenu(menu: boolean) {
         this._menu = menu;
         this._change();
     }
 
-    /** Button options.  Options include 'emphasized' and 'light'. Leave empty for default.' */
-    private _options: ButtonOptions | ButtonOptions[]
+    private _options: ButtonOptions | ButtonOptions[];
+    /** Button options.  Options include 'emphasized' and 'light'. Leave empty for default.'
+     * @deprecated 
+     * Will be removed in 0.17.0. 
+     */
     @Input() options(opt: ButtonOptions | ButtonOptions[]) {
         console.warn(`fd-button options property is deprecated and will be removed in 0.17.0.
-        Please follow the breaking changes.`)
+        Please follow the breaking changes.`);
         this._options = opt;
         this._change();
-    };
+    }
 
     /** @hidden */
-    constructor(private _elementRef: ElementRef) {
-    }
+    constructor(private _elementRef: ElementRef) { }
 
     /** Function runs when component is initialized
      * function should build component css class
@@ -108,11 +127,13 @@ export class ButtonComponent implements OnInit, CssClassBuilder {
             this._options ? getOptionCssClass(this._options) : '',
             this._glyph ? `sap-icon--${this._glyph}` : '',
             this._class
-        ].filter(x => x !== '').join(' ');
+        ]
+            .filter(x => x !== '')
+            .join(' ');
     }
 
     /** HasElementRef interface implementation
-     * function used by applyCssClass and applyCssStyle decorators 
+     * function used by applyCssClass and applyCssStyle decorators
      */
     elementRef(): ElementRef<any> {
         return this._elementRef;
@@ -121,6 +142,4 @@ export class ButtonComponent implements OnInit, CssClassBuilder {
     private _change(): void {
         this.buildComponentCssClass();
     }
-
-
 }

libs/core/src/lib/segmented-button/segmented-button.component.ts

@@ -23,5 +23,5 @@ export class SegmentedButtonComponent {
 
     /** @hidden */
     @HostBinding('class.fd-segmented-button')
-    fdButtonGroupClass: boolean = true;
+    fdsegmentedButtonClass: boolean = true;
 }

libs/core/src/lib/segmented-button/segmented-button.directive.spec.ts

@@ -44,7 +44,7 @@ describe('SegmentedButtonDirective', () => {
     });
 
     it('should assign base class', () => {
-        expect(component.ref.nativeElement.className).toContain('fd-button--grouped');
+        expect(component.ref.nativeElement.className).toContain('fd-segmented-button');
     });
 
     it('should support compact mode', () => {

libs/core/src/lib/segmented-button/segmented-button.directive.ts

@@ -17,12 +17,14 @@ export class SegmentedButtonDirective extends AbstractFdNgxClass {
 
     /**
      * @deprecated
-     * Will be removed in 0.13.0
+     * Will be removed in 0.17.0
      */
     @Input()
     size: string;
 
-    /** Defines if there will be added fd-button class. Enabled by default. */
+    /** Defines if there will be added fd-button class. 
+     * Enabled by default. 
+    */
     @Input() fdButtonClass: boolean = true;
 
     /** Glyph (icon) of the button. */
@@ -33,24 +35,27 @@ export class SegmentedButtonDirective extends AbstractFdNgxClass {
     @Input()
     state: string;
 
-    /** Whether the button should be in compact form. */
+    /** Whether the button should be in compact form. 
+     * Default value is set to false
+    */
     @Input()
     @HostBinding('class.fd-button--compact')
     compact: boolean = false;
 
     /** @hidden */
-    @HostBinding('class.fd-button--grouped')
-    fdButtonGroupedClass: boolean = true;
+    @HostBinding('class.fd-segmented-button')
+    fdsegmentedButtonClass: boolean = true;
 
     /** @hidden */
     constructor(private elementRef: ElementRef) {
         super(elementRef);
-        console.warn('SegmentedButtonDirective is not supported and will be removed in 0.17.0')
+        console.warn(`SegmentedButtonDirective is not supported and will be removed in 0.17.0.
+        Add styles directly to button instead`);
     }
 
     /** @hidden */
     _setProperties() {
-        this._addClassToElement('fd-button--grouped');
+        this._addClassToElement('fd-segmented-button');
         if (this.fdButtonClass) {
             this._addClassToElement('fd-button');
         }

libs/core/src/lib/split-button/split-button.component.html

@@ -7,7 +7,7 @@
     [triggers]="triggers"
     [fillControlMode]="fillControlMode"
 >
-    <fd-popover-control>
+    <fd-popover-control [dir]="direction$ | async">
         <div class="fd-button-split">
             <button
                 fd-button

libs/core/src/lib/split-button/split-button.component.ts

@@ -1,7 +1,20 @@
-import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ContentChild,
+    EventEmitter,
+    Input,
+    Output,
+    TemplateRef,
+    Inject,
+    Optional
+} from '@angular/core';
 import { SplitButtonActionTitle } from './split-button-utils/split-button.directives';
 import { PopoverFillMode } from '../popover/popover-directive/popover.directive';
 import { ButtonType, ButtonOptions } from '../button/button.component';
+import { Observable, of } from 'rxjs';
+import { RtlService } from '../utils/public_api';
+import { map } from 'rxjs/operators';
 
 /**
  * Split Button component, used to enhance standard HTML button and add possibility to put some dropdown with
@@ -32,7 +45,6 @@ import { ButtonType, ButtonOptions } from '../button/button.component';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SplitButtonComponent {
-
     /** @hidden */
     @ContentChild(SplitButtonActionTitle, { read: TemplateRef })
     titleTemplate: TemplateRef<any>;
@@ -77,9 +89,8 @@ export class SplitButtonComponent {
 
     /** Button options.  Options include 'emphasized' and 'light'. Leave empty for default.' */
 
-
     @Input()
-    options: ButtonOptions | ButtonOptions[]
+    options: ButtonOptions | ButtonOptions[];
 
     /**
      * Preset options for the popover body width.
@@ -102,6 +113,13 @@ export class SplitButtonComponent {
     @Output()
     readonly primaryButtonClicked: EventEmitter<boolean> = new EventEmitter<boolean>();
 
+    /** @hidden */
+    direction$: Observable<string>;
+
+    constructor(@Optional() private rtlService: RtlService) {
+        this.direction$ = rtlService ? rtlService.rtl.pipe(map(isRtl => (isRtl ? 'rtl' : 'ltr'))) : of('ltr');
+    }
+
     /**
      *  Handles primary button click
      *  */
@@ -140,5 +158,4 @@ export class SplitButtonComponent {
             this.isOpenChange.emit(this.isOpen);
         }
     }
-
 }