Merge pull request #3674 from IgniteUI/apetrov/update-button-sample-vnext

refactor(button): new button sample including individual type themes (vnext)

Author: simeonoff

package-lock.json

@@ -71,11 +71,11 @@
     "express": "^4.18.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "20.0.0",
+    "igniteui-angular": "20.0.2",
     "igniteui-angular-charts": "^19.0.1",
     "igniteui-angular-core": "^19.0.1",
     "igniteui-angular-extras": "^20.0.0",
-    "igniteui-angular-i18n": "^20.0.0",
+    "igniteui-angular-i18n": "^20.0.2",
     "igniteui-dockmanager": "^1.16.0",
     "igniteui-live-editing": "^3.0.3",
     "igniteui-webcomponents": "^6.0.1",

package.json

@@ -1,8 +1,17 @@
 <div class="buttons-sample">
-    <div class="button-sample">
-        <button igxButton="contained" igxRipple="#fdfdfd">Styled Button</button>
-    </div>
-    <div class="button-sample">
-        <button igxButton="contained" [disabled]="'true'" igxRipple>Disabled</button>
-    </div>
-</div>
+  <div class="button-sample">
+    <button igxButton="contained" igxRipple>Contained Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="flat" igxRipple>Flat Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="outlined" igxRipple>Outlined Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="fab" igxRipple>Fab Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="contained" [disabled]="'true'">Disabled</button>
+  </div>
+</div>

src/app/data-entries/buttons/buttons-style/buttons-style.component.html

@@ -1,17 +1,26 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$custom-button-theme: button-theme(
-  $foreground: #fdfdfd,
-  $hover-foreground: #fdfdfd,
-  $focus-foreground: #fdfdfd,
-  $background: #345779,
-  $hover-background: #2e4d6b,
-  $focus-background: #2e4d6b,
-  $disabled-foreground: #2e4d6b,
+$custom-contained-theme: contained-button-theme(
+  $background: #348ae0
+);
+
+$custom-flat-theme: flat-button-theme(
+  $foreground: var(--ig-error-800)
+);
+
+$custom-outlined-theme: outlined-button-theme(
+  $foreground: var(--ig-success-500)
+);
+
+$custom-fab-theme: fab-button-theme(
+  $background: #ffc506
 );
 
 .button-sample {
-  @include css-vars($custom-button-theme);
-}
+  @include css-vars($custom-contained-theme);
+  @include css-vars($custom-flat-theme);
+  @include css-vars($custom-outlined-theme);
+  @include css-vars($custom-fab-theme);
+};
 

src/app/data-entries/buttons/buttons-style/buttons-style.component.scss

@@ -6,7 +6,6 @@ $custom-input-group: input-group-theme(
   $focused-text-color: #174f30,
   $idle-text-color: #288a54,
   $idle-bottom-line-color: #288a54,
-  $interim-bottom-line-color: #288a54,
   $hover-bottom-line-color: #288a54,
   $focused-secondary-color: #174f30,
   $box-background: #eeeeee

src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss

@@ -25,7 +25,6 @@ $dark-input-group: input-group-theme(
   $focused-text-color: $yellow,
   $idle-text-color: $yellow,
   $idle-bottom-line-color: $yellow,
-  $interim-bottom-line-color: $yellow,
   $hover-bottom-line-color: $yellow,
   $focused-secondary-color: $gray,
   $box-background: $bg

src/app/grid/grid-column-hiding-toolbar-style/grid-column-hiding-toolbar-style.component.scss

@@ -35,7 +35,6 @@ $input-theme: input-group-theme(
   $idle-text-color: $white,
   $idle-bottom-line-color: $white,
   $focused-bottom-line-color: $white,
-  $interim-bottom-line-color: $white,
   $hover-bottom-line-color: $white,
   $box-background: $blue
 );

src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.scss

@@ -24,7 +24,6 @@ $input-theme: input-group-theme(
   $idle-text-color: $white,
   $idle-bottom-line-color: $white,
   $focused-bottom-line-color: $white,
-  $interim-bottom-line-color: $white,
   $hover-bottom-line-color: $white,
   $box-background: $blue
 );

src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component.scss

@@ -25,8 +25,7 @@ $custom-input-group-theme: input-group-theme(
   $idle-text-color: $text-color,
   $focused-text-color: $color-focused,
   $idle-bottom-line-color: $purple,
-  $hover-bottom-line-color: $color-focused,
-  $interim-bottom-line-color: $color-focused
+  $hover-bottom-line-color: $color-focused
 );
 
 // CALENDAR styling specific overlay component requires outlet -> [overlaySettings]="{ outlet: element }"

src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.scss

@@ -35,7 +35,6 @@ $input-theme: input-group-theme(
   $idle-text-color: $white,
   $idle-bottom-line-color: $white,
   $focused-bottom-line-color: $white,
-  $interim-bottom-line-color: $white,
   $hover-bottom-line-color: $white,
   $box-background: $blue
 );