Merge pull request #1413 from christophercr/bugfix/table-demo-styles

fix(stark-demo): replace encapsulated styles of Table Regular Component by global styles since they depend on Angular Material theming
NationalBankBelgium · Oct 8, 2019 · cb6f145 · cb6f145
2 parents 7906605 + 97b969e
commit cb6f145
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 11 deletions.
diff --git a/showcase/src/app/demo-ui/components/table-regular/table-regular-theme.scss b/showcase/src/app/demo-ui/components/table-regular/table-regular-theme.scss
@@ -0,0 +1,8 @@
+// todo review after #509 (https://github.com/NationalBankBelgium/stark/issues/509)
+.showcase-table-regular {
+  .shadowed {
+    .header {
+      @include mat-elevation(2);
+    }
+  }
+}
diff --git a/showcase/src/app/demo-ui/components/table-regular/table-regular.component.scss b/showcase/src/app/demo-ui/components/table-regular/table-regular.component.scss
@@ -1,9 +1,8 @@
-@import "~@angular/material/theming";
-
 // todo review after #509 (https://github.com/NationalBankBelgium/stark/issues/509)
-.shadowed {
-  .header {
-    padding: 10px 15px;
-    @include mat-elevation(2);
+.showcase-table-regular {
+  .shadowed {
+    .header {
+      padding: 10px 15px;
+    }
   }
 }
diff --git a/showcase/src/app/demo-ui/components/table-regular/table-regular.component.ts b/showcase/src/app/demo-ui/components/table-regular/table-regular.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, ViewEncapsulation } from "@angular/core";
+import { Component, HostBinding, Inject } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "@nationalbankbelgium/stark-ui";
 
@@ -34,12 +34,12 @@ const DUMMY_DATA: object[] = [
 
 @Component({
 	selector: "showcase-table-regular",
-	templateUrl: "./table-regular.component.html",
-	styleUrls: ["./table-regular.component.scss"],
-	/* tslint:disable-next-line:use-view-encapsulation */
-	encapsulation: ViewEncapsulation.None // Important
+	templateUrl: "./table-regular.component.html"
 })
 export class TableRegularComponent {
+	@HostBinding("class")
+	public class = "showcase-table-regular";
+
 	public data: object[] = DUMMY_DATA;
 
 	public columns: StarkTableColumnProperties[] = [

diff --git a/showcase/src/styles/_theme.scss b/showcase/src/styles/_theme.scss
@@ -14,4 +14,5 @@ Import the local variables file first to set the correct variables, see:
 @import "../app/welcome/components/news-item/news-item-theme";
 @import "../app/styleguide/pages/typography/styleguide-typography-page-theme";
 @import "../app/demo-ui/pages/route-search/demo-route-search-page.component-theme";
+@import "../app/demo-ui/components/table-regular/table-regular-theme";
 @import "../app/styleguide/pages/layout/styleguide-layout-page.theme";
diff --git a/showcase/src/styles/styles.scss b/showcase/src/styles/styles.scss
@@ -13,4 +13,5 @@ IMPORTANT: Stark styles are provided as SCSS styles so they should be imported i
 @import "../app/welcome/pages/news/news-page.component";
 @import "../app/welcome/components/news-item/news-item.component";
 @import "../app/demo-ui/pages/message-pane/demo-message-pane-page.component";
+@import "../app/demo-ui/components/table-regular/table-regular.component";
 @import "../app/styleguide/pages/layout/styleguide-layout-page.component";