feat(button): update samples content

live-editing/configs/ButtonConfigGenerator.ts

@@ -1,48 +1,95 @@
-import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
-import { IgxButtonModule, IgxRippleModule } from 'igniteui-angular/directives';
-import { IgxIconModule } from 'igniteui-angular/icon';
-import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
+import { Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
-import { ButtonsRoundnessComponent } from '../../src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample';
 export class ButtonConfigGenerator implements IConfigGenerator {
 
 
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // buttons sample 1
+        // button overview
         configs.push(new Config({
-            component: 'ButtonsSample1Component',
+            component: 'ButtonOverviewComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-entries/buttons/"
+            shortenComponentPathBy: "/data-entries/button/"
         }));
 
-        // buttons roundness
+        // flat button
         configs.push(new Config({
-            component: 'ButtonsDisabledComponent',
+            component: 'ButtonFlatComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-entries/buttons/"
+            shortenComponentPathBy: "/data-entries/button/"
         }));
 
-        // buttons display density
+        // button interaction states
         configs.push(new Config({
-            component: 'ButtonsDisplayDensityComponent',
+            component: 'ButtonInteractionStatesComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-entries/buttons/"
+            shortenComponentPathBy: "/data-entries/button/"
         }));
 
+        // button layout
         configs.push(new Config({
-            component: 'ButtonsRoundnessComponent',
+            component: 'ButtonLayoutComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-entries/buttons/"
+            shortenComponentPathBy: "/data-entries/button/"
         }));
 
-        // button style
+        // contained button
         configs.push(new Config({
-            component: 'ButtonsStyleComponent',
-            additionalFiles: ["/src/app/data-entries/buttons/buttons-style/layout.scss"],
+            component: 'ButtonContainedComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-entries/buttons/"
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // floating action button
+        configs.push(new Config({
+            component: 'ButtonFabComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // outlined button
+        configs.push(new Config({
+            component: 'ButtonOutlinedComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // button states
+        configs.push(new Config({
+            component: 'ButtonStatesComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // button size
+        configs.push(new Config({
+            component: 'ButtonSizeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // download button
+        configs.push(new Config({
+            component: 'ButtonDownloadComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // button styling
+        configs.push(new Config({
+            component: 'ButtonStylingComponent',
+            additionalFiles: ["/src/app/data-entries/button/button-styling/layout.scss"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // button tailwind styling
+        configs.push(new Config({
+            component: 'ButtonTailwindStylingComponent',
+            additionalFiles: ["/src/app/data-entries/button/button-tailwind-styling/layout.scss"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
         }));
 
         return configs;

src/app/data-entries/button/button-contained/button-contained.component.html

@@ -0,0 +1,7 @@
+<div class="button-sample">
+    <button igxButton="contained">
+        <igx-icon family="material">notifications</igx-icon>
+        Contained
+        <igx-icon family="material">notifications</igx-icon>
+    </button>
+</div>

src/app/data-entries/button/button-contained/button-contained.component.scss

@@ -0,0 +1,9 @@
+.button-sample {
+    display: flex;
+    padding: 2.5rem;
+}
+
+.button-sample button {
+    width: 46%;
+    margin: auto;
+}

src/app/data-entries/button/button-contained/button-contained.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+    selector: 'app-button-contained',
+    styleUrls: ['./button-contained.component.scss'],
+    templateUrl: './button-contained.component.html',
+    imports: [IgxButtonDirective, IgxIconComponent]
+})
+export class ButtonContainedComponent { }

src/app/data-entries/button/button-download/button-download.component.html

@@ -0,0 +1,3 @@
+<div class="button-sample">
+    <a igxButton="contained" href="" download="url" target="_blank">Download</a>
+</div>

src/app/data-entries/button/button-download/button-download.component.scss

@@ -0,0 +1,9 @@
+.button-sample {
+    display: flex;
+    padding: 2.5rem;
+}
+
+.button-sample a {
+    width: 46%;
+    margin: auto;
+}

src/app/data-entries/button/button-download/button-download.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+
+@Component({
+    selector: 'app-button-download',
+    styleUrls: ['./button-download.component.scss'],
+    templateUrl: './button-download.component.html',
+    imports: [IgxButtonDirective]
+})
+export class ButtonDownloadComponent { }

src/app/data-entries/button/button-fab/button-fab.component.html

@@ -0,0 +1,7 @@
+<div class="button-sample">
+    <button igxButton="fab">
+        <igx-icon family="material">add</igx-icon>
+        Floating Action
+        <igx-icon family="material">add</igx-icon>
+    </button>
+</div>

src/app/data-entries/button/button-fab/button-fab.component.scss

@@ -0,0 +1,9 @@
+.button-sample {
+    display: flex;
+    padding: 2rem;
+}
+
+.button-sample button {
+    width: 44%;
+    margin: auto;
+}

src/app/data-entries/buttons/buttons-sample-6/buttons-sample-6.component.ts → src/app/data-entries/button/button-fab/button-fab.component.ts

@@ -3,9 +3,9 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 
 @Component({
-    selector: 'app-buttons-sample-6',
-    styleUrls: ['./buttons-sample-6.component.scss'],
-    templateUrl: './buttons-sample-6.component.html',
+    selector: 'app-button-fab',
+    styleUrls: ['./button-fab.component.scss'],
+    templateUrl: './button-fab.component.html',
     imports: [IgxButtonDirective, IgxIconComponent]
 })
-export class ButtonsSample6Component { }
+export class ButtonFabComponent { }

src/app/data-entries/button/button-flat/button-flat.component.html

@@ -0,0 +1,7 @@
+<div class="button-sample">
+    <button igxButton="flat">
+        <igx-icon family="material">notifications</igx-icon>
+        Flat
+        <igx-icon family="material">notifications</igx-icon>
+    </button>
+</div>

src/app/data-entries/button/button-flat/button-flat.component.scss

@@ -0,0 +1,9 @@
+.button-sample {
+    display: flex;
+    padding: 2.5rem;
+}
+
+.button-sample button {
+    width: 46%;
+    margin: auto;
+}

src/app/data-entries/button/button-flat/button-flat.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+    selector: 'app-button-flat',
+    styleUrls: ['./button-flat.component.scss'],
+    templateUrl: './button-flat.component.html',
+    imports: [IgxButtonDirective, IgxIconComponent]
+})
+export class ButtonFlatComponent { }

src/app/data-entries/button/button-interaction-states/button-interaction-states.component.html

@@ -0,0 +1,12 @@
+<div class="button-container">
+    @for (state of states; track state.value) {
+        <div class="button-item">
+            <span class="button-label">{{ state.label }}</span>
+            <button igxButton="contained" [class]="state.value">
+                <igx-icon family="material">notifications</igx-icon>
+                Contained
+                <igx-icon family="material">notifications</igx-icon>
+            </button>
+        </div>
+    }
+</div>

src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss

@@ -0,0 +1,37 @@
+@use "igniteui-angular/theming" as *;
+
+.button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    padding: 1rem;
+}
+
+.button-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.button-label {
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+}
+
+.button-item button.state-hover,
+.button-item button.state-focused-hover {
+    background: color($color: 'secondary', $variant: 400);
+    color: contrast-color($color: 'secondary', $variant: 400);
+}
+
+.button-item button.state-focused {
+    background: color($color: 'secondary', $variant: 300);
+    color: contrast-color($color: 'secondary', $variant: 300);
+}

src/app/data-entries/button/button-interaction-states/button-interaction-states.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+    selector: 'app-button-interaction-states',
+    styleUrls: ['./button-interaction-states.component.scss'],
+    templateUrl: './button-interaction-states.component.html',
+    imports: [IgxButtonDirective, IgxIconComponent]
+})
+export class ButtonInteractionStatesComponent {
+    public states = [
+        { label: 'Idle', value: 'idle' },
+        { label: 'Hover', value: 'state-hover' },
+        { label: 'Focused', value: 'state-focused' },
+        { label: 'Focused & Hover', value: 'state-focused-hover' }
+    ];
+}

src/app/data-entries/button/button-layout/button-layout.component.html

@@ -0,0 +1,8 @@
+<div class="button-container">
+    <div class="button-item"><button igxButton="outlined"><igx-icon family="material">add</igx-icon>Add</button></div>
+    <div class="button-item"><button igxButton="outlined">Buy Now</button></div>
+    <div class="button-item"><button igxButton="outlined">Add<igx-icon family="material">add</igx-icon></button></div>
+    <div class="button-item"><button igxButton="outlined"><igx-icon family="material">add</igx-icon>Floating Action</button></div>
+    <div class="button-item"><button igxButton="outlined"><igx-icon family="material">add</igx-icon></button></div>
+    <div class="button-item"><button igxButton="outlined">Floating Action</button></div>
+    </div>

src/app/data-entries/button/button-layout/button-layout.component.scss

@@ -0,0 +1,24 @@
+.button-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 2.5rem;
+}
+
+.button-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.button-container button {
+    --ig-font-family: 'Titillium Web', sans-serif;
+    --ig-button-text-transform: uppercase;
+
+    font-size: 0.85rem;
+    letter-spacing: 1px;
+}

src/app/data-entries/button/button-layout/button-layout.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+    selector: 'app-button-layout',
+    styleUrls: ['./button-layout.component.scss'],
+    templateUrl: './button-layout.component.html',
+    imports: [IgxButtonDirective, IgxIconComponent]
+})
+export class ButtonLayoutComponent {
+}

src/app/data-entries/button/button-outlined/button-outlined.component.html

@@ -0,0 +1,7 @@
+<div class="button-sample">
+    <button igxButton="outlined">
+        <igx-icon family="material">notifications</igx-icon>
+        Outlined
+        <igx-icon family="material">notifications</igx-icon>
+    </button>
+</div>

src/app/data-entries/button/button-outlined/button-outlined.component.scss

@@ -0,0 +1,9 @@
+.button-sample {
+    display: flex;
+    padding: 2.5rem;
+}
+
+.button-sample button {
+    width: 46%;
+    margin: auto;
+}

src/app/data-entries/button/button-outlined/button-outlined.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+    selector: 'app-button-outlined',
+    styleUrls: ['./button-outlined.component.scss'],
+    templateUrl: './button-outlined.component.html',
+    imports: [IgxButtonDirective, IgxIconComponent]
+})
+export class ButtonOutlinedComponent { }

src/app/data-entries/button/button-overview/button-overview.component.html

@@ -0,0 +1,15 @@
+<div class="form">
+    <igx-avatar shape="circle" src="https://dl.infragistics.com/x/img/avatars/14.jpg" alt="profile picture"></igx-avatar>
+    <div class="fields">
+        <igx-input-group>
+            <input igxInput type="text" placeholder="First Name" />
+        </igx-input-group>
+        <igx-input-group>
+            <input igxInput type="text" placeholder="Last Name" />
+        </igx-input-group>
+        <div class="actions">
+            <button igxButton="flat">Cancel</button>
+            <button igxButton="contained">Save</button>
+        </div>
+    </div>
+</div>