fix: (core) added selected button with group (#1543)

* added selected button with group

* added selected button with group

* fixed stackblitz and added toggle

* fixed stackblitz and added toggle

* self contained button styling fix

* self contained button styling fix

* fixed netlify

* add button import

* remove unecessary files

* remove unecessary files

* rerun netlify

* revert files

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

@@ -1,32 +1,20 @@
-<fd-docs-section-title [id]="'Button-xs'" [componentName]="'buttonGroup'"> Extra Small Size (XS)</fd-docs-section-title>
-<component-example [name]="'ex1'">
-    <fd-button-group-xs-example></fd-button-group-xs-example>
-</component-example>
-<code-example [exampleFiles]="xsSizeHtml"></code-example>
-
-<separator></separator>
-
-<fd-docs-section-title [id]="'Button-s'" [componentName]="'buttonGroup'">Small Size (S)</fd-docs-section-title>
-<component-example [name]="'ex2'">
-    <fd-button-group-s-example></fd-button-group-s-example>
-</component-example>
-<code-example [exampleFiles]="sSizeHtml"></code-example>
-
-<separator></separator>
-
-<fd-docs-section-title [id]="'Button-compact'" [componentName]="'buttonGroup'"> Compact Size</fd-docs-section-title>
-<component-example [name]="'ex3'">
-    <fd-button-group-compact-example></fd-button-group-compact-example>
+<fd-docs-section-title [id]="'Button-l'" [componentName]="'buttonGroup'">
+    Default Size with selected</fd-docs-section-title
+>
+<component-example [name]="'ex4'">
+    <fd-button-group-default-example></fd-button-group-default-example>
 </component-example>
-<code-example [exampleFiles]="compactSizeHtml"></code-example>
+<code-example [exampleFiles]="defaultSizeHtml"></code-example>
 
 <separator></separator>
 
-<fd-docs-section-title [id]="'Button-l'" [componentName]="'buttonGroup'"> Default Size (Large)</fd-docs-section-title>
+<fd-docs-section-title [id]="'Button-l'" [componentName]="'buttonGroup'">
+    Default Size with toggle</fd-docs-section-title
+>
 <component-example [name]="'ex4'">
-    <fd-button-group-default-example></fd-button-group-default-example>
+    <fd-button-group-toggle-example></fd-button-group-toggle-example>
 </component-example>
-<code-example [exampleFiles]="defaultSizeHtml"></code-example>
+<code-example [exampleFiles]="defaultToggleHtml"></code-example>
 
 <separator></separator>
 

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

@@ -2,12 +2,10 @@ import { Component, OnInit, ViewChildren, ElementRef, QueryList } from '@angular
 import { Schema } from '../../../schema/models/schema.model';
 import { SchemaFactoryService } from '../../../schema/services/schema-factory/schema-factory.service';
 
-import * as buttonGroupCompactExample from '!raw-loader!./examples/button-group-compact-example.component.html';
 import * as buttonGroupDefaultExample from '!raw-loader!./examples/button-group-default-example.component.html';
-import * as buttonGroupSmallExample from '!raw-loader!./examples/button-group-s-example.component.html';
-import * as buttonGroupXsExample from '!raw-loader!./examples/button-group-xs-example.component.html';
-
-import * as buttonGroupTsCode from '!raw-loader!./examples/button-group-examples.component.ts';
+import * as buttonGroupDefaultExampleTs from '!raw-loader!./examples/button-group-default-example.component.ts';
+import * as buttonGroupToggleExample from '!raw-loader!./examples/button-group-toggle-example.component.html';
+import * as buttonGroupToggleExampleTs from '!raw-loader!./examples/button-group-toggle-example.component.ts';
 import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
 import { DocsSectionTitleComponent } from '../../../documentation/core-helpers/docs-section-title/docs-section-title.component';
 import { ActivatedRoute } from '@angular/router';
@@ -97,36 +95,14 @@ export class ButtonGroupDocsComponent implements OnInit {
         }
     };
 
-    xsSizeHtml: ExampleFile[] = [
-        {
-            language: 'html',
-            code: buttonGroupXsExample,
-            fileName: 'button-group-xs-example',
-            component: 'ButtonGroupXsExampleComponent',
-            secondFile: 'button-group-examples',
-            typescriptFileCode: buttonGroupTsCode
-        }
-    ];
-
-    sSizeHtml: ExampleFile[] = [
-        {
-            language: 'html',
-            code: buttonGroupSmallExample,
-            fileName: 'button-group-s-example',
-            component: 'ButtonGroupSmallExampleComponent',
-            secondFile: 'button-group-examples',
-            typescriptFileCode: buttonGroupTsCode
-        }
-    ];
 
-    compactSizeHtml: ExampleFile[] = [
+    defaultToggleHtml: ExampleFile[] = [
         {
             language: 'html',
-            code: buttonGroupCompactExample,
-            fileName: 'button-group-compact-example',
-            component: 'ButtonGroupCompactExampleComponent',
-            secondFile: 'button-group-examples',
-            typescriptFileCode: buttonGroupTsCode
+            code: buttonGroupToggleExample,
+            fileName: 'button-group-toggle-example',
+            component: 'ButtonGroupToggleExampleComponent',
+            typescriptFileCode: buttonGroupToggleExampleTs,
         }
     ];
 
@@ -136,8 +112,7 @@ export class ButtonGroupDocsComponent implements OnInit {
             code: buttonGroupDefaultExample,
             fileName: 'button-group-default-example',
             component: 'ButtonGroupDefaultExampleComponent',
-            secondFile: 'button-group-examples',
-            typescriptFileCode: buttonGroupTsCode
+            typescriptFileCode: buttonGroupDefaultExampleTs,
         }
     ];
 

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

@@ -1,10 +1,11 @@
 <fd-button-group style="margin-right: 10px; margin-left: 10px;">
-    <button fd-button-grouped [glyph]="'survey'" [state]="'selected'"></button>
-    <button fd-button-grouped [glyph]="'pie-chart'"></button>
-    <button fd-button-grouped [glyph]="'pool'"></button>
+    <button fd-button-grouped [glyph]="'survey'" (click)="setLocaleIcon(0)" [state]="isSelectedIcon(0)">
+        survey
+    </button>
+    <button fd-button-grouped [glyph]="'pie-chart'" (click)="setLocaleIcon(1)" [state]="isSelectedIcon(1)">
+        pie-chart
+    </button>
+    <button fd-button-grouped [glyph]="'pool'" (click)="setLocaleIcon(2)" [state]="isSelectedIcon(2)">
+        pool
+    </button>
 </fd-button-group>
-<fd-button-group>
-    <button fd-button-grouped>Left</button>
-    <button fd-button-grouped [state]="'selected'">Middle</button>
-    <button fd-button-grouped>Right</button>
-</fd-button-group>

apps/docs/src/app/core/component-docs/button-group/examples/button-group-default-example.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'fd-button-group-default-example',
+    templateUrl: './button-group-default-example.component.html',
+
+})
+export class ButtonGroupDefaultExampleComponent {
+
+    icon: number = 0;
+    lmr: boolean[] = [false, false, false];
+
+    constructor() {
+    }
+
+
+    isSelectedIcon(x: number): string {
+        return this.icon === x ? 'selected' : '';
+    }
+
+    isSelectedLMR(x: number): string {
+        return this.lmr[x] ? 'selected' : '';
+    }
+
+    setLocaleIcon(x: number): void {
+        this.icon = x;
+    }
+
+    toggleLMR(x: number): void {
+        this.lmr[x] = !this.lmr[x];
+    }
+}

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

@@ -0,0 +1,5 @@
+<fd-button-group>
+    <button fd-button-grouped (click)="toggleLMR(0)" [state]="isSelectedLMR(0)">Left</button>
+    <button fd-button-grouped (click)="toggleLMR(1)" [state]="isSelectedLMR(1)">Middle</button>
+    <button fd-button-grouped (click)="toggleLMR(2)" [state]="isSelectedLMR(2)">Right</button>
+</fd-button-group>

apps/docs/src/app/core/component-docs/button-group/examples/button-group-toggle-example.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'fd-button-group-toggle-example',
+    templateUrl: './button-group-toggle-example.component.html',
+
+})
+export class ButtonGroupToggleExampleComponent {
+
+    lmr: boolean[] = [false, false, false];
+
+    constructor() {
+    }
+
+    isSelectedLMR(x: number): string {
+        return this.lmr[x] ? 'selected' : '';
+    }
+
+    toggleLMR(x: number): void {
+        this.lmr[x] = !this.lmr[x];
+    }
+}

apps/docs/src/app/core/core-documentation.module.ts

@@ -71,12 +71,8 @@ import {
     ButtonStateExampleComponent,
     ButtonTypesExampleComponent
 } from '../core/component-docs/button/examples/button-examples.component';
-import {
-    ButtonGroupXsExampleComponent,
-    ButtonGroupSmallExampleComponent,
-    ButtonGroupCompactExampleComponent,
-    ButtonGroupDefaultExampleComponent
-} from '../core/component-docs/button-group/examples/button-group-examples.component';
+import { ButtonGroupDefaultExampleComponent } from '../core/component-docs/button-group/examples/button-group-default-example.component';
+import { ButtonGroupToggleExampleComponent } from '../core/component-docs/button-group/examples/button-group-toggle-example.component';
 import { CalendarRangeExampleComponent } from '../core/component-docs/calendar/examples/calendar-range-example.component';
 import { CalendarSingleExampleComponent } from '../core/component-docs/calendar/examples/calendar-single-example.component';
 import { CalendarMondayStartExampleComponent } from '../core/component-docs/calendar/examples/calendar-monday-start-example.component';
@@ -480,9 +476,7 @@ import { SideNavigationMultipleSelectedExampleComponent } from './component-docs
         ButtonSplitProgrammaticalExampleComponent,
         ButtonSplitOptionsExampleComponent,
         ButtonSplitTemplateExampleComponent,
-        ButtonGroupXsExampleComponent,
-        ButtonGroupSmallExampleComponent,
-        ButtonGroupCompactExampleComponent,
+        ButtonGroupToggleExampleComponent,
         ButtonGroupDefaultExampleComponent,
         CalendarRangeExampleComponent,
         CalendarSingleExampleComponent,

apps/docs/src/app/documentation/core-helpers/code-example/code-example.component.ts

@@ -139,7 +139,6 @@ export class CodeExampleComponent implements OnInit, AfterViewInit {
                 } else {
                     this.parameters.html_tag = 'fd-' + example.fileName;
                 }
-                this.parameters.addonAppModule = example.appModuleAddon;
                 this.parameters.app_module = 'AppModule';
                 this.parameters.app_module_file = 'app.module';
                 this.parameters.app_component = example.component;
@@ -248,7 +247,7 @@ export class CodeExampleComponent implements OnInit, AfterViewInit {
         this.project.files['src/index.html'] = `
         <link rel="stylesheet" href="node_modules/fundamental-styles/dist/fonts.css"></link>
         <link rel="stylesheet" href="node_modules/fundamental-styles/dist/icon.css"></link>
-                    <${this.parameters.html_tag}></${this.parameters.html_tag}>
+        <${this.parameters.html_tag}></${this.parameters.html_tag}>
         `;
 
 

apps/docs/src/app/documentation/core-helpers/code-example/example-file.ts

@@ -16,5 +16,5 @@ export interface ExampleFile {
     thirdFile?: string;
     component?: string;
     fileName?: string;
-    appModuleAddon?: string;
+    styleAddon?: string;
 }

libs/core/src/lib/button-group/button-group.component.scss

@@ -1 +1,2 @@
-@import "~fundamental-styles/dist/button-group";
+@import '~fundamental-styles/dist/button-group';
+@import '~fundamental-styles/dist/button';

libs/core/src/lib/button-group/button-grouped.directive.ts

@@ -22,6 +22,9 @@ export class ButtonGroupedDirective extends AbstractFdNgxClass {
     @Input()
     size: string;
 
+    /** Defines if there will be added fd-button class. Enabled by default. */
+    @Input() fdButtonClass: boolean = true;
+
     /** Glyph (icon) of the button. */
     @Input()
     glyph: string;
@@ -47,6 +50,12 @@ export class ButtonGroupedDirective extends AbstractFdNgxClass {
     /** @hidden */
     _setProperties() {
         this._addClassToElement('fd-button--grouped');
+        if (this.fdButtonClass) {
+            this._addClassToElement('fd-button');
+        }
+        if (this.size) {
+            this._addClassToElement('fd-button--' + this.size);
+        }
         if (this.glyph) {
             this._addClassToElement('sap-icon--' + this.glyph);
         }