feat(samples): update samples

IgniteUI · Nov 15, 2024 · 655f08d · 655f08d
1 parent 26911f7
commit 655f08d
Show file tree

Hide file tree

Showing 16 changed files with 60 additions and 73 deletions.
diff --git a/src/app/button-showcase/button-showcase.sample.scss b/src/app/button-showcase/button-showcase.sample.scss
@@ -2,23 +2,11 @@
     margin: 24px 16px;
 }
 
-.title {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+.title, .buttons-sample {
+    columns: 2 1vw;
     justify-items: center;
 }
 
-.buttons-sample {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-auto-rows: minmax(80px, auto);
-    align-items: center;
-}
-
-.button-sample {
-    justify-self: center;
-}
-
 .custom-controls {
     display: grid;
     row-gap: 1rem;

diff --git a/src/app/card-showcase/card-showcase.sample.html b/src/app/card-showcase/card-showcase.sample.html
@@ -1,7 +1,7 @@
-<div class="grid-container grid-container--fit">
+<div class="cards-wrapper">
     <!--New York City Card Begins-->
+    <h4 class="sample-title">Angular Card</h4>
     <article class="card">
-        <h4 class="sample-title">Angular Card</h4>
         <igx-card class="my-cool-card">
             <igx-card-media>
                 <img [src]="cards[0].imageUrl">
@@ -28,9 +28,36 @@ <h2 igxCardHeaderSubtitle>{{ cards[0].subtitle }}</h2>
     </article>
     <!--New York City Card End-->
 
+    <article class="card">
+        <igx-card [horizontal]="true">
+            <igx-card-actions layout="justify">
+                <button *ngFor="let icon of cards[1].icons;" igxIconButton="flat" igxRipple [igxRippleCentered]="true">
+                    <igx-icon class="bidirectional-icon">{{icon}}</igx-icon>
+                </button>
+            </igx-card-actions>
+
+            <igx-divider [middle]="true" [vertical]="true"></igx-divider>
+
+            <div style="flex-direction: row">
+                <igx-card-header>
+                    <h5 igxCardHeaderTitle>{{cards[1].title}}</h5>
+                    <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
+                </igx-card-header>
+
+                <igx-card-content>
+                    <p>New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean.</p>
+                </igx-card-content>
+            </div>
+
+            <igx-card-media>
+                <img [src]="cards[1].imageUrl">
+            </igx-card-media>
+        </igx-card>
+    </article>
+
+    <h4 class="sample-title">WC Card</h4>
     <!--New York City Card Begins-->
     <article class="card">
-        <h4 class="sample-title">WC Card</h4>
         <igc-card>
             <igc-card-media>
               <img
@@ -60,33 +87,6 @@ <h4 class="sample-title">WC Card</h4>
     </article>
     <!--New York City Card End-->
 
-    <article class="card">
-        <igx-card [horizontal]="true">
-            <igx-card-actions layout="justify">
-                <button *ngFor="let icon of cards[1].icons;" igxIconButton="flat" igxRipple [igxRippleCentered]="true">
-                    <igx-icon class="bidirectional-icon">{{icon}}</igx-icon>
-                </button>
-            </igx-card-actions>
-
-            <igx-divider [middle]="true" [vertical]="true"></igx-divider>
-
-            <div style="flex-direction: row">
-                <igx-card-header>
-                    <h5 igxCardHeaderTitle>{{cards[1].title}}</h5>
-                    <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
-                </igx-card-header>
-
-                <igx-card-content>
-                    <p>New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean.</p>
-                </igx-card-content>
-            </div>
-
-            <igx-card-media>
-                <img [src]="cards[1].imageUrl">
-            </igx-card-media>
-        </igx-card>
-    </article>
-
     <article class="card">
         <igc-card style="flex-direction: row">
             <igc-card-actions orientation="vertical">

diff --git a/src/app/card-showcase/card-showcase.sample.scss b/src/app/card-showcase/card-showcase.sample.scss
@@ -1,15 +1,13 @@
-.grid-container {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(320px, 1fr));
-    column-gap: 10px;
+.cards-wrapper {
+    columns: 2 320px;
     justify-items: center;
-    padding: 30px;
+    padding-block-start: 2rem;
 }
 
 .card {
     min-width: 320px;
     max-width: 320px;
-    margin: 10px;
+    margin: 1rem;
 
     h4 {
         margin-bottom: 1rem;

diff --git a/src/app/checkbox-showcase/checkbox-showcase.sample.html b/src/app/checkbox-showcase/checkbox-showcase.sample.html
@@ -1,5 +1,5 @@
 <div class="wrapper">
-    <article class="sample-column">
+    <article>
         <h4 class="sample-title">Angular Checkbox</h4>
 
         <igx-checkbox
@@ -15,7 +15,7 @@ <h4 class="sample-title">Angular Checkbox</h4>
         </igx-checkbox>
     </article>
 
-    <article class="sample-column">
+    <article>
         <h4 class="sample-title">WC Checkbox</h4>
 
         <igc-checkbox

diff --git a/src/app/checkbox-showcase/checkbox-showcase.sample.scss b/src/app/checkbox-showcase/checkbox-showcase.sample.scss
@@ -1,4 +1,5 @@
 .wrapper {
-    display: inline-grid;
+    display: grid;
     grid-template-columns: 1fr 1fr;
+    justify-items: center;
 }
diff --git a/src/app/combo-showcase/combo-showcase.sample.html b/src/app/combo-showcase/combo-showcase.sample.html
@@ -11,7 +11,7 @@ <h1 class="combo-sample__title">Angular and WC combo next to each other</h1>
                             [groupSortingDirection]="groupSortingAngular"
                             [placeholder]="properties.placeholder"
                             [searchPlaceholder]="properties.placeholderSearch"
-                            [filteringOptions]="filteringOptions"
+                            [showSearchCaseIcon]="properties.caseSensitiveIcon"
                             type="border"
                             [disabled]="properties.disabled"
                             [data]="items"

diff --git a/src/app/combo-showcase/combo-showcase.sample.ts b/src/app/combo-showcase/combo-showcase.sample.ts
@@ -165,10 +165,4 @@ export class ComboShowcaseSampleComponent {
                 return SortingDirection.Asc;
         }
     }
-
-    protected get filteringOptions() {
-        return {
-            caseSensitive: this.properties.caseSensitiveIcon
-        };
-    }
 }
diff --git a/src/app/list-showcase/list-showcase.sample.html b/src/app/list-showcase/list-showcase.sample.html
@@ -24,6 +24,7 @@ <h4 igxListLineTitle>{{employee.name}}</h4>
                     <igx-list-item [isHeader]="true">Job positions</igx-list-item>
                     <ng-template ngFor let-last="last" [ngForOf]="employeeItems" let-employee>
                         <igx-list-item>
+                            <igx-icon igxListThumbnail>face</igx-icon>
                             <p igxListLineTitle>{{employee.position}}</p>
                             <igx-checkbox igxListAction></igx-checkbox>
                             <igx-icon igxListAction>info</igx-icon>
@@ -72,7 +73,7 @@ <h4 igxListLineTitle>{{employee.name}}</h4>
                     </igc-list-header>
                     <ng-template ngFor let-last="last" [ngForOf]="employeeItems" let-employee>
                         <igc-list-item>
-
+                            <igc-icon slot="start" name="face"></igc-icon>
                             <span slot="title">{{employee.position}}</span>
                             <igc-checkbox slot="end"></igc-checkbox>
                             <igc-icon slot="end" name="info"></igc-icon>

diff --git a/src/app/list-showcase/list-showcase.sample.ts b/src/app/list-showcase/list-showcase.sample.ts
@@ -27,6 +27,10 @@ const icons = [
         name: 'more_horiz',
         url: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>'
     },
+    {
+        name: 'face',
+        url: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/></svg>'
+    },
     {
         name: 'info',
         url: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>'

diff --git a/src/app/radio-showcase/radio-showcase.sample.html b/src/app/radio-showcase/radio-showcase.sample.html
@@ -1,5 +1,5 @@
 <section class="wrapper">
-    <article class="sample-column">
+    <article>
         <h4 class="sample-title">Angular Radio</h4>
 
         <igx-radio-group name="angGroup" value="Bar" [required]="properties.required" [alignment]="alignment">
@@ -17,7 +17,7 @@ <h4 class="sample-title">Angular Radio</h4>
         </igx-radio-group>
     </article>
 
-    <article class="sample-column">
+    <article>
         <h4 class="sample-title">WC Radio</h4>
 
         <igc-radio-group name="wcGroup" value="Bar" [alignment]="alignment">

diff --git a/src/app/radio-showcase/radio-showcase.sample.scss b/src/app/radio-showcase/radio-showcase.sample.scss
@@ -1,4 +1,5 @@
 .wrapper {
-    display: inline-grid;
+    display: grid;
     grid-template-columns: 1fr 1fr;
+    justify-items: center;
 }
diff --git a/src/app/snackbar-showcase/snackbar-showcase.sample.html b/src/app/snackbar-showcase/snackbar-showcase.sample.html
@@ -1,7 +1,7 @@
 <div class="snackbars-wrapper">
 <div class="sample-wrapper">
     <article class="sample-column">
-        <h4 class="sample-title">Snackbar</h4>
+        <h4 class="sample-title">Angular Snackbar vs WebComponents Snackbar</h4>
         <div class="snackbar-sample">
             <div class="snackbar-container">
                 <igx-snackbar

diff --git a/src/app/switch-showcase/switch-showcase.sample.html b/src/app/switch-showcase/switch-showcase.sample.html
@@ -1,5 +1,5 @@
 <section class="wrapper">
-    <article class="sample-column">
+    <article>
         <h4 class="sample-title">Angular Switch</h4>
 
         <igx-switch
@@ -14,7 +14,7 @@ <h4 class="sample-title">Angular Switch</h4>
         </igx-switch>
     </article>
 
-    <article class="sample-column">
+    <article>
         <h4 class="sample-title">WC Switch</h4>
 
         <igc-switch

diff --git a/src/app/switch-showcase/switch-showcase.sample.scss b/src/app/switch-showcase/switch-showcase.sample.scss
@@ -1,4 +1,5 @@
 .wrapper {
-    display: inline-grid;
+    display: grid;
     grid-template-columns: 1fr 1fr;
+    justify-items: center;
 }
diff --git a/src/app/tree-showcase/tree-showcase.sample.scss b/src/app/tree-showcase/tree-showcase.sample.scss
@@ -9,7 +9,6 @@
 }
 
 strong {
-    color: hsla(var(--ig-secondary-500));
     display: block;
     margin-top: 16px;
     margin-bottom: 24px;

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -1,10 +1,10 @@
 @use 'sass:map';
 @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *;
 
-$palette: $light-material-palette;
-$schema: $light-material-schema;
-$typeface: $material-typeface;
-$type-scale: $material-type-scale;
+$palette: $light-indigo-palette;
+$schema: $light-indigo-schema;
+$typeface: $indigo-typeface;
+$type-scale: $indigo-type-scale;
 $variant: map.get($schema, '_meta', 'variant');
 
 $background-color: var(--ig-gray-900-contrast);