Merge pull request #1060 from IgniteUI/fix-stackblitz-samples-shadow-…

…roundenss Fix stackblitz samples for shadow and roundness
IgniteUI · Mar 14, 2019 · a4d7cd6 · a4d7cd6
2 parents 4201020 + c95e2f1
commit a4d7cd6
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 51 deletions.
diff --git a/live-editing/configs/ButtonConfigGenerator.ts b/live-editing/configs/ButtonConfigGenerator.ts
@@ -1,10 +1,12 @@
 /* tslint:disable:object-literal-sort-keys */
-import { IgxButtonModule, IgxIconModule, IgxRippleModule } from "igniteui-angular";
-import { ButtonsSample1Component
-} from "../../src/app/data-entries/buttons/buttons-sample-1/buttons-sample-1.component";
-import { AppModuleConfig } from "./core/AppModuleConfig";
-import { Config } from "./core/Config";
-import { IConfigGenerator } from "./core/IConfigGenerator";
+import {IgxButtonModule, IgxIconModule, IgxRippleModule} from "igniteui-angular";
+import {
+    ButtonsRoundnessComponent
+} from "../../src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample";
+import {ButtonsSample1Component} from "../../src/app/data-entries/buttons/buttons-sample-1/buttons-sample-1.component";
+import {AppModuleConfig} from "./core/AppModuleConfig";
+import {Config} from "./core/Config";
+import {IConfigGenerator} from "./core/IConfigGenerator";
 
 export class ButtonConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
@@ -21,6 +23,17 @@ export class ButtonConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-entries/buttons/"
         }));
 
+        // buttons roundness
+        configs.push(new Config({
+            component: ButtonsRoundnessComponent,
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxButtonModule, IgxIconModule, IgxRippleModule, ButtonsRoundnessComponent],
+                ngDeclarations: [ButtonsRoundnessComponent],
+                ngImports: [IgxButtonModule, IgxIconModule, IgxRippleModule]
+            }),
+            shortenComponentPathBy: "/data-entries/buttons/"
+        }));
+
         return configs;
     }
 }
diff --git a/live-editing/configs/ThemingConfigGenerator.ts b/live-editing/configs/ThemingConfigGenerator.ts
@@ -1,11 +1,12 @@
 
 // tslint:disable:object-literal-sort-keys
-import { IgxButtonGroupModule, IgxButtonModule, IgxCalendarModule, IgxDatePickerModule,
-    IgxDialogModule, IgxDropDownModule, IgxGridModule, IgxIconModule, IgxInputGroupModule,
-    IgxLayoutModule, IgxRippleModule, IgxSnackbarModule, IgxToggleModule } from "igniteui-angular";
+import { IgxButtonGroupModule, IgxButtonModule, IgxCalendarModule, IgxCardModule,
+    IgxDatePickerModule, IgxDialogModule, IgxDropDownModule, IgxGridModule, IgxIconModule,
+    IgxInputGroupModule, IgxLayoutModule, IgxRippleModule, IgxSnackbarModule, IgxToggleModule } from "igniteui-angular";
 import { DarkThemeSampleComponent } from "../../src/app/theming/dark-theme-sample/dark-theme-sample.component";
 import { DefaultThemeSampleComponent } from "../../src/app/theming/default-theme-sample/default-theme-sample.component";
 import { DisplayDensityComponent } from "../../src/app/theming/display-density/display-density.component";
+import { CardSampleShadowComponent } from "../../src/app/theming/shadows/card-sample-shadow/card-sample-shadow";
 import { ShadowsSampleComponent } from "../../src/app/theming/shadows/shadows-sample-1/shadows-sample.component";
 import { ShadowsSample2Component } from "../../src/app/theming/shadows/shadows-sample-2/shadows-sample-2.component";
 import { ThemeChooserSampleComponent } from "../../src/app/theming/theme-chooser/theme-chooser-sample.component";
@@ -97,6 +98,16 @@ export class ThemingConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/theming/shadows/"
         }));
 
+        configs.push(new Config({
+            component: CardSampleShadowComponent,
+            appModuleConfig: new AppModuleConfig({
+                imports: [CardSampleShadowComponent, IgxCardModule, IgxButtonModule, IgxIconModule],
+                ngDeclarations: [CardSampleShadowComponent],
+                ngImports: [IgxCardModule, IgxIconModule, IgxButtonModule]
+            }),
+            shortenComponentPathBy: "/theming/shadows/"
+        }));
+
         configs.push(new Config({
             component: DisplayDensityComponent,
             appModuleConfig: new AppModuleConfig({

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
@@ -3,34 +3,22 @@
         <article class="sample-column">
             <div class="buttons-sample">
                 <div class="buttons-sample_item">
-                    <button igxButton="fab" igxRipple="white">
-                        <igx-icon fontSet="material">favorite</igx-icon>
-                    </button>
-                    <span  class="no-roundness">
-                        <button igxButton="fab" igxRipple="white">FAB</button>
-                    </span>
+                    <button igxButton="flat" igxRipple>Button</button>
                 </div>
                 <div class="buttons-sample_item">
                     <span class="full-roundness">
                         <button igxButton="raised" igxRipple="white">Button</button>
                     </span>
-                    <button igxButton="raised" igxRipple="white">Button</button>
                 </div>
                 <div class="buttons-sample_item">
-                    <button igxButton="flat" igxRipple>Button</button>
-                    <span class="full-roundness">
-                        <button igxButton="flat" igxRipple>Button</button>
-                    </span>
+                    <button igxButton="fab" igxRipple="white">
+                        <igx-icon fontSet="material">favorite</igx-icon>
+                    </button>
                 </div>
                 <div class="buttons-sample_item">
                     <button igxButton="icon" igxRipple igxRippleCentered="true">
                         <igx-icon fontSet="material">search</igx-icon>
                     </button>
-                    <span class="no-roundness" >
-                        <button igxButton="icon" igxRipple igxRippleCentered="true">
-                            <igx-icon fontSet="material">favorite</igx-icon>
-                        </button>
-                    </span>
                 </div>
             </div>
         </article>

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
@@ -1,23 +1,13 @@
 @import '~igniteui-angular/lib/core/styles/themes/index';
 
-$myButton: igx-button-theme(
-    $icon-background: #333
-);
-
-@include igx-button($myButton);
-
 $mySpecialButton: igx-button-theme(
-    $flat-border-radius: 1,
-    $fab-border-radius: 0,
-    $icon-border-radius: 0,
-    $raised-border-radius: 1
+    $flat-border-radius: .5,
+    $raised-border-radius: 30px,
+    $fab-border-radius: 10%,
+    $icon-border-radius: .5 .2 .5 .2
 );
 
-.no-roundness,
-.full-roundness {
-    @include igx-button($mySpecialButton);
-}
-
+@include igx-button($mySpecialButton);
 
 .section,
 .sample-column {
@@ -33,6 +23,7 @@ $mySpecialButton: igx-button-theme(
 .buttons-sample {
     display: flex;
     max-width: 960px;
+    flex-wrap: wrap;
     justify-content: center;
     align-items: center;
 }
@@ -42,7 +33,7 @@ $mySpecialButton: igx-button-theme(
     align-items: center;
     justify-content: center;
     flex: 1;
-    margin: 0 30px;
+    margin: 30px 20px;
     >* {
         margin: 0 10px;
     }

diff --git a/src/app/data-entries/data-entries-routing.module.ts b/src/app/data-entries/data-entries-routing.module.ts
@@ -111,7 +111,6 @@ export const dataEntriesRoutes: Routes = [
         component: ButtonsSample8Component,
         data: dataEntriesRoutesData["buttons-sample-8"],
         path: "buttons-sample-8"
-
     },
     {
         component: ButtonsRoundnessComponent,

diff --git a/src/app/data-entries/data-entries.module.ts b/src/app/data-entries/data-entries.module.ts
@@ -62,6 +62,7 @@ import { SwitchSample2Component } from "./switch/switch-sample-2/switch-sample-2
         ButtonGroupSample1Component,
         ButtonGroupSample2Component,
         ButtonGroupSample3Component,
+        ButtonsRoundnessComponent,
         ButtonsSample1Component,
         ButtonsSample2Component,
         ButtonsSample3Component,
@@ -70,7 +71,6 @@ import { SwitchSample2Component } from "./switch/switch-sample-2/switch-sample-2
         ButtonsSample6Component,
         ButtonsSample7Component,
         ButtonsSample8Component,
-        ButtonsRoundnessComponent,
         CheckboxSample1Component,
         CheckboxSample2Component,
         DropdownMenuComponent,

diff --git a/src/app/theming/shadows/card-sample-shadow/card-sample-shadow.scss b/src/app/theming/shadows/card-sample-shadow/card-sample-shadow.scss
@@ -36,16 +36,16 @@
     }
 }
 .sample-wrapper {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     display: flex;
     margin:0 auto;
     justify-content: center;
     align-items: center;
     max-width: 960px;
     min-width: 250px;
+    padding: 24px;
 
     igx-card {
-        min-width: 250px;
         max-width: 300px;
         margin-left: 30px;
 

diff --git a/src/app/theming/shadows/card-sample-shadow/card-sample-shadow.ts b/src/app/theming/shadows/card-sample-shadow/card-sample-shadow.ts
@@ -5,7 +5,7 @@ import {Component, OnInit} from "@angular/core";
     styleUrls: ["./card-sample-shadow.scss"],
     templateUrl: "./card-sample-shadow.html"
 })
-export class CardSampleShadow implements OnInit {
+export class CardSampleShadowComponent implements OnInit {
 
     constructor() {
     }

diff --git a/src/app/theming/theming-routes-data.ts b/src/app/theming/theming-routes-data.ts
@@ -7,5 +7,5 @@ export const themingRoutesData = {
     "shadows-sample": { displayName: "Shadows sample", parentName: "Shadows" },
     "shadows-sample-2": { displayName: "Shadows sample 2", parentName: "Shadows" },
     "density": { displayName: "Display density sample", parentName: "Themes" },
-    "card-sample-shadow": { displayName: "Card elevations", parentName: "Shadows" }
+    "card-sample-shadow": { displayName: "card-sample-shadow", parentName: "Shadows" }
 };
diff --git a/src/app/theming/theming-routing.module.ts b/src/app/theming/theming-routing.module.ts
@@ -3,7 +3,7 @@ import { RouterModule, Routes } from "@angular/router";
 import { DarkThemeSampleComponent } from "./dark-theme-sample/dark-theme-sample.component";
 import { DefaultThemeSampleComponent } from "./default-theme-sample/default-theme-sample.component";
 import { DisplayDensityComponent } from "./display-density/display-density.component";
-import { CardSampleShadow} from "./shadows/card-sample-shadow/card-sample-shadow";
+import { CardSampleShadowComponent} from "./shadows/card-sample-shadow/card-sample-shadow";
 import { ShadowsSampleComponent } from "./shadows/shadows-sample-1/shadows-sample.component";
 import { ShadowsSample2Component } from "./shadows/shadows-sample-2/shadows-sample-2.component";
 import { ThemeChooserSampleComponent } from "./theme-chooser/theme-chooser-sample.component";
@@ -42,7 +42,7 @@ export const themingRoutes: Routes = [
         path: "density"
     },
     {
-        component: CardSampleShadow,
+        component: CardSampleShadowComponent,
         data: themingRoutesData["card-sample-shadow"],
         path: "card-sample-shadow"
     }

diff --git a/src/app/theming/theming.module.ts b/src/app/theming/theming.module.ts
@@ -7,7 +7,7 @@ import { IgxButtonGroupModule, IgxButtonModule, IgxCalendarModule, IgxCardModule
 import { DarkThemeSampleComponent } from "./dark-theme-sample/dark-theme-sample.component";
 import { DefaultThemeSampleComponent } from "./default-theme-sample/default-theme-sample.component";
 import { DisplayDensityComponent } from "./display-density/display-density.component";
-import { CardSampleShadow } from "./shadows/card-sample-shadow/card-sample-shadow";
+import { CardSampleShadowComponent } from "./shadows/card-sample-shadow/card-sample-shadow";
 import { ShadowsSampleComponent } from "./shadows/shadows-sample-1/shadows-sample.component";
 import { ShadowsSample2Component } from "./shadows/shadows-sample-2/shadows-sample-2.component";
 import { ThemeChooserSampleComponent } from "./theme-chooser/theme-chooser-sample.component";
@@ -21,7 +21,7 @@ import { ThemingRoutingModule } from "./theming-routing.module";
         ShadowsSampleComponent,
         ShadowsSample2Component,
         ThemeChooserSampleComponent,
-        CardSampleShadow
+        CardSampleShadowComponent
     ],
     imports: [
         CommonModule,