feat(icon-button): create component samples (#3412)

IgniteUI · Feb 15, 2024 · fe7e52a · fe7e52a
1 parent 2cfe847
commit fe7e52a
Show file tree

Hide file tree

Showing 82 changed files with 562 additions and 91 deletions.
diff --git a/live-editing/configs/IconButtonConfigGenerator.ts b/live-editing/configs/IconButtonConfigGenerator.ts
@@ -0,0 +1,101 @@
+import {IgxButtonGroupModule,
+    IgxButtonModule,
+    IgxIconButtonDirective,
+    IgxIconModule,
+    IgxRippleModule} from 'igniteui-angular';
+import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
+export class IconButtonConfigGenerator implements IConfigGenerator {
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        // icon button overview
+        configs.push(new Config({
+            component: 'IconButtonOverviewComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'IconButtonOverviewComponent'],
+                ngDeclarations: ['IconButtonOverviewComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // flat icon button
+        configs.push(new Config({
+            component: 'FlatIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'FlatIconButtonComponent'],
+                ngDeclarations: ['FlatIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // contained icon button
+        configs.push(new Config({
+            component: 'ContainedIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'ContainedIconButtonComponent'],
+                ngDeclarations: ['ContainedIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // outlined icon button
+        configs.push(new Config({
+            component: 'OutlinedIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'OutlinedIconButtonComponent'],
+                ngDeclarations: ['OutlinedIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // disabled icon button
+        configs.push(new Config({
+            component: 'DisabledIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'DisabledIconButtonComponent'],
+                ngDeclarations: ['DisabledIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // SVG icon button
+        configs.push(new Config({
+            component: 'SVGIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'SVGIconButtonComponent'],
+                ngDeclarations: ['SVGIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // icon button styling
+        configs.push(new Config({
+            component: 'IconButtonStylingComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'IconButtonStylingComponent'],
+                ngDeclarations: ['IconButtonStylingComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // icon button size
+        configs.push(new Config({
+            component: 'IconButtonSizeComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'IconButtonSizeComponent'],
+                ngDeclarations: ['IconButtonSizeComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        return configs;
+    }
+}
diff --git a/live-editing/generators/ConfigGenerators.ts b/live-editing/generators/ConfigGenerators.ts
@@ -28,6 +28,7 @@ import { ForConfigGenerator } from '../configs/ForConfigGenerator';
 import { GridConfigGenerator } from '../configs/GridConfigGenerator';
 import { HierarchicalGridConfigGenerator } from '../configs/HierarchicalGridConfigGenerator';
 import { IconConfigGenerator } from '../configs/IconConfigGenerator';
+import { IconButtonConfigGenerator } from '../configs/IconButtonConfigGenerator';
 import { InputGroupConfigGenerator } from '../configs/InputGroupConfigGenerator';
 import { LayoutConfigGenerator } from '../configs/LayoutConfigGenerator';
 import { LinearProgressbarConfigGenerator } from '../configs/LinearProgressbarConfigGenerator';
@@ -99,6 +100,7 @@ export const CONFIG_GENERATORS =
         DateRangePickerConfigGenerator,
         DateTimeEditorConfigGenerator,
         DropDownConfigGenerator,
+        IconButtonConfigGenerator,
         InputGroupConfigGenerator,
         MaskConfigGenerator,
         MonthPickerConfigGenerator,

diff --git a/projects/app-crm/src/app/app.module.ts b/projects/app-crm/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
     IgxAutocompleteModule, IgxButtonModule, IgxIconModule, IgxInputGroupModule, IgxLayoutModule,
-    IgxRippleModule, IgxGridModule, IgxAvatarModule, IgxProgressBarModule
+    IgxRippleModule, IgxGridModule, IgxAvatarModule, IgxProgressBarModule, IgxIconButtonDirective
 } from 'igniteui-angular';
 import { IgxPreventDocumentScrollModule } from '../../../../src/app/directives/prevent-scroll.directive';
 import { AppComponent } from './app.component';
@@ -33,7 +33,8 @@ import { SEOService } from '../../../app-lob/src/app/seo.service';
         IgxProgressBarModule,
         FormsModule,
         IgxPreventDocumentScrollModule,
-        HammerModule
+        HammerModule,
+        IgxIconButtonDirective
     ],
     providers: [SEOService]
 })

diff --git a/projects/app-lob/src/app/app.module.ts b/projects/app-lob/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
-    IgxButtonModule, IgxFocusModule, IgxIconModule, IgxInputGroupModule,
+    IgxButtonModule, IgxFocusModule, IgxIconButtonDirective, IgxIconModule, IgxInputGroupModule,
     IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule, IgxToggleModule
 } from 'igniteui-angular';
 import { IgxExtrasModule } from 'igniteui-angular-extras';
@@ -38,7 +38,8 @@ import { SEOService } from './seo.service';
         HammerModule,
         IgxExtrasModule,
         IgxFocusModule,
-        IgxToggleModule
+        IgxToggleModule,
+        IgxIconButtonDirective
     ],
     providers: [
         SEOService

diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
@@ -95,7 +95,7 @@
         <igx-column [field]="'startY'" [width]="'110px'" dataType="currency" [pipeArgs]="columnFormat"  [sortable]="true"></igx-column>
         <!-- <igx-column [field]="'Grid'" [width]="'80px'" [hidden]="false" [filterable]="false">
             <ng-template igxCell let-cell="cell" class="center-text">
-                <button class="button-icon" igxButton="icon" [igxRippleCentered]="true">
+                <button class="button-icon" igxIconButton="flat" [igxRippleCentered]="true">
                     <igx-icon (click)="chartClick(cell)" family="material">table_charttable_chart</igx-icon>
                 </button>
             </ng-template>

diff --git a/src/app/data-display/data-display.module.ts b/src/app/data-display/data-display.module.ts
@@ -21,7 +21,8 @@ import {
     IgxSwitchModule,
     IgxTextHighlightModule,
     IgxTextSelectionModule,
-    IgxToastModule
+    IgxToastModule,
+    IgxIconButtonDirective
 } from 'igniteui-angular';
 import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component';
 import { BadgeSample2Component } from './badge/badge-sample-2/badge-sample-2.component';
@@ -136,7 +137,8 @@ import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbo
         IgxSnackbarModule,
         IgxSwitchModule,
         IgxButtonModule,
-        IgxTextHighlightModule
+        IgxTextHighlightModule,
+        IgxIconButtonDirective
     ]
 })
 export class DataDisplayModule {}
diff --git a/...ata-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.html b/...ata-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.html
@@ -10,7 +10,7 @@
     <igx-suffix>
         <div class="caseSensitiveButton">
             <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
-                    [igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
+                [style.background]="caseSensitive ? 'rgb(73, 180, 254)' : 'transparent'">
                 <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
             </button>
         </div>

diff --git a/...ata-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.html b/...ata-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.html
@@ -12,7 +12,7 @@
         <igx-suffix>
             <div class="caseSensitiveButton">
                 <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
-                        [igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
+                        [style.background]="caseSensitive ? 'rgb(73, 180, 254)' : 'transparent'">
                     <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
                 </button>
             </div>

diff --git a/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.html b/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.html
@@ -11,7 +11,7 @@
         <igx-suffix>
             <div class="caseSensitiveButton">
                 <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
-                        [igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
+                        [style.background]="caseSensitive ? 'rgb(73, 180, 254)' : 'transparent'">
                     <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
                 </button>
             </div>

diff --git a/src/app/data-entries/buttons/buttons-disabled-sample/buttons-disabled-sample.html b/src/app/data-entries/buttons/buttons-disabled-sample/buttons-disabled-sample.html
@@ -1 +1 @@
-<button class="btn" igxButton="raised" [disabled]="'true'">Disabled</button>
+<button class="btn" igxButton="contained" [disabled]="'true'">Disabled</button>
diff --git a/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.html b/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.html
@@ -7,7 +7,7 @@
             <button igxButton="flat" igxRipple>Flat</button>
         </div>
         <div class="button-sample">
-            <button igxButton="contained" igxRipple>Raised</button>
+            <button igxButton="contained" igxRipple>Contained</button>
         </div>
         <div class="button-sample">
             <button igxButton="outlined" igxRipple>Outlined</button>

diff --git a/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.html b/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.html
@@ -4,16 +4,16 @@
             <div class="buttons-sample_item flat">
                 <button igxButton="flat" igxRipple>Button</button>
             </div>
-            <div class="buttons-sample_item raised">
-                <button igxButton="raised" igxRipple="white">Button</button>
+            <div class="buttons-sample_item contained">
+                <button igxButton="contained" igxRipple="white">Button</button>
             </div>
             <div class="buttons-sample_item fab">
                 <button igxButton="fab" igxRipple="white">
                     <igx-icon fontSet="material">favorite</igx-icon>
                 </button>
             </div>
             <div class="buttons-sample_item icon">
-                <button igxButton="icon" igxRipple [igxRippleCentered]="true">
+                <button igxIconButton="flat" igxRipple [igxRippleCentered]="true">
                     <igx-icon fontSet="material">search</igx-icon>
                 </button>
             </div>

diff --git a/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.scss b/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.scss
@@ -4,24 +4,24 @@ $flatBtn: button-theme(
     $border-radius: .5
 );
 
-$raisedBtn: button-theme(
+$containedBtn: button-theme(
     $border-radius: 30px
 );
 
 $fabBtn: button-theme(
     $border-radius: 10%
 );
 
-$iconBtn: button-theme(
-    $border-radius: .5 .2 .5 .2
+$iconBtn: icon-button-theme(
+    $border-radius: 12px
 );
 
 .flat {
     @include css-vars($flatBtn);
 }
 
-.raised {
-    @include css-vars($raisedBtn);
+.contained {
+    @include css-vars($containedBtn);
 }
 
 .fab {

diff --git a/src/app/data-entries/buttons/buttons-sample-1/buttons-sample-1.component.html b/src/app/data-entries/buttons/buttons-sample-1/buttons-sample-1.component.html
@@ -3,7 +3,7 @@
         <button igxButton="flat" igxRipple>Flat</button>
     </div>
     <div class="button-sample">
-        <button igxButton="contained" igxRipple>Raised</button>
+        <button igxButton="contained" igxRipple>Contained</button>
     </div>
     <div class="button-sample">
         <button igxButton="outlined" igxRipple>Outlined</button>

diff --git a/src/app/data-entries/buttons/buttons-sample-5/buttons-sample-5.component.html b/src/app/data-entries/buttons/buttons-sample-5/buttons-sample-5.component.html
@@ -1 +1 @@
-<button igxButton="contained" class="btn">Raised</button>
+<button igxButton="contained" class="btn">Contained</button>
diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
@@ -13,7 +13,7 @@ export const dataEntriesRoutesData = {
     "buttons-sample-2": { displayName: "Flat Button", parentName: "Buttons" },
     "buttons-sample-3": { displayName: "Button Ripple", parentName: "Buttons" },
     "buttons-sample-4": { displayName: "Span Button", parentName: "Buttons" },
-    "buttons-sample-5": { displayName: "Raised Button", parentName: "Buttons" },
+    "buttons-sample-5": { displayName: "Contained Button", parentName: "Buttons" },
     "buttons-sample-6": { displayName: "Floating Action Button", parentName: "Buttons" },
     "buttons-sample-7": { displayName: "Icon Button", parentName: "Buttons" },
     "buttons-sample-8": { displayName: "Outlined Button", parentName: "Buttons" },
@@ -37,6 +37,14 @@ export const dataEntriesRoutesData = {
     "dropdown-tree-hierarchical-selection": { displayName: "Dropdown Tree Hierarchical Selection", parentName: "Dropdown" },
     "dropdown-tree-grid-hierarchical-selection": { displayName: "Dropdown Tree Grid Hierarchical Selection", parentName: "Dropdown" },
     "dropdown-sample-4": { displayName: "Input Dropdown Selection", parentName: "Dropdown" },
+    "icon-button-overview": { displayName: "Overview", parentName: "Icon Buttons" },
+    "flat-icon-button": { displayName: "Flat Icon Button", parentName: "Icon Buttons" },
+    "contained-icon-button": { displayName: "Contained Icon Button", parentName: "Icon Buttons" },
+    "outlined-icon-button": { displayName: "Outlined Icon Button", parentName: "Icon Buttons" },
+    "disabled-icon-button": { displayName: "Disabled Icon Button", parentName: "Icon Buttons" },
+    "svg-icon-button": { displayName: "SVG Icon Button", parentName: "Icon Buttons" },
+    "icon-button-size": { displayName: "Icon Button Size", parentName: "Icon Buttons" },
+    "icon-button-styling": { displayName: "Icon Button Styling", parentName: "Icon Buttons" },
     "input-group-sample-1": { displayName: "Simple Input Group", parentName: "Input Group" },
     "input-group-sample-2": { displayName: "Input Required", parentName: "Input Group" },
     "input-group-sample-3": { displayName: "Input Group Prefix and Sufix", parentName: "Input Group" },

diff --git a/src/app/data-entries/data-entries-routing.module.ts b/src/app/data-entries/data-entries-routing.module.ts
@@ -65,6 +65,14 @@ import { RatingInFormComponent } from './rating/rating-form/rating-form.componen
 import { TemplateDrivenFormValidationComponent } from './input-group/template-driven-form-validation/template-driven-form-validation.component';
 import { ReactiveFormValidationComponent } from './input-group/reactive-form-validation/reactive-form-validation.component';
 import { ReactiveFormCustomValidationComponent } from './input-group/reactive-form-custom-validation/reactive-form-custom-validation.component';
+import { IconButtonOverviewComponent } from './icon-button/icon-button-overview/icon-button-overview.component';
+import { FlatIconButtonComponent } from './icon-button/flat-icon-button/flat-icon-button.component';
+import { ContainedIconButtonComponent } from './icon-button/contained-icon-button/contained-icon-button.component';
+import { OutlinedIconButtonComponent } from './icon-button/outlined-icon-button/outlined-icon-button.component';
+import { DisabledIconButtonComponent } from './icon-button/disabled-icon-button/disabled-icon-button.component';
+import { SVGIconButtonComponent } from './icon-button/svg-icon-button/svg-icon-button.component';
+import { IconButtonSizeComponent } from './icon-button/icon-button-size/icon-button-size.component';
+import { IconButtonStylingComponent } from './icon-button/icon-button-styling/icon-button-styling.component';
 
 export const dataEntriesRoutes: Routes = [
     {
@@ -247,6 +255,46 @@ export const dataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['dropdown-remote'],
         path: 'dropdown-remote'
     },
+    {
+        component: IconButtonOverviewComponent,
+        data: dataEntriesRoutesData['icon-button-overview'],
+        path: 'icon-button-overview'
+    },
+    {
+        component: FlatIconButtonComponent,
+        data: dataEntriesRoutesData['flat-icon-button'],
+        path: 'flat-icon-button'
+    },
+    {
+        component: ContainedIconButtonComponent,
+        data: dataEntriesRoutesData['contained-icon-button'],
+        path: 'contained-icon-button'
+    },
+    {
+        component: OutlinedIconButtonComponent,
+        data: dataEntriesRoutesData['outlined-icon-button'],
+        path: 'outlined-icon-button'
+    },
+    {
+        component: DisabledIconButtonComponent,
+        data: dataEntriesRoutesData['disabled-icon-button'],
+        path: 'disabled-icon-button'
+    },
+    {
+        component: SVGIconButtonComponent,
+        data: dataEntriesRoutesData['svg-icon-button'],
+        path: 'svg-icon-button'
+    },
+    {
+        component: IconButtonSizeComponent,
+        data: dataEntriesRoutesData['icon-button-size'],
+        path: 'icon-button-size'
+    },
+    {
+        component: IconButtonStylingComponent,
+        data: dataEntriesRoutesData['icon-button-styling'],
+        path: 'icon-button-styling'
+    },
     {
         component: InputGroupSample1Component,
         data: dataEntriesRoutesData['input-group-sample-1'],
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<button class="btn" igxButton="raised" [disabled]="'true'">Disabled</button>
		<button class="btn" igxButton="contained" [disabled]="'true'">Disabled</button>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<button igxButton="contained" class="btn">Raised</button>
		<button igxButton="contained" class="btn">Contained</button>