feat(core/pagination): migrate to shadow dom (#678)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>

BREAKING_CHANGES.md

@@ -1,4 +1,4 @@
-Breaking Changes
+# Breaking Changes
 
 ## v2.0.0
 

packages/angular-test-app/src/app/app-routing.module.ts

@@ -73,6 +73,7 @@ import MenuCategory from 'src/preview-examples/menu-category';
 import MessageBar from 'src/preview-examples/message-bar';
 import ModalByInstance from 'src/preview-examples/modal-by-instance';
 import Modal from 'src/preview-examples/modal-by-template';
+import Pagination from 'src/preview-examples/pagination';
 import Pill from 'src/preview-examples/pill';
 import PopoverNews from 'src/preview-examples/popover-news';
 import PushCard from 'src/preview-examples/push-card';
@@ -282,6 +283,7 @@ const routes: Routes = [
       { path: 'input', component: Input },
       { path: 'kpi', component: Kpi },
       { path: 'message-bar', component: MessageBar },
+      { path: 'pagination', component: Pagination },
       { path: 'pill', component: Pill },
       { path: 'popover-news', component: PopoverNews },
       { path: 'radio-button', component: Radiobutton },

packages/angular-test-app/src/app/app.module.ts

@@ -81,6 +81,7 @@ import MessageBar from 'src/preview-examples/message-bar';
 import ModalByInstance from 'src/preview-examples/modal-by-instance';
 import ModalByInstanceExample from 'src/preview-examples/modal-by-instance-content';
 import Modal from 'src/preview-examples/modal-by-template';
+import Pagination from 'src/preview-examples/pagination';
 import Pill from 'src/preview-examples/pill';
 import PopoverNews from 'src/preview-examples/popover-news';
 import PushCard from 'src/preview-examples/push-card';
@@ -177,6 +178,7 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     Input,
     Kpi,
     MessageBar,
+    Pagination,
     Pill,
     PopoverNews,
     Radiobutton,

packages/core/component-doc.json

@@ -7738,10 +7738,11 @@
           "text": "1.5.0"
         }
       ],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
         "ix-icon-button",
+        "ix-typography",
         "ix-select",
         "ix-select-item",
         "ix-spinner",
@@ -7750,6 +7751,7 @@
       "dependencyGraph": {
         "ix-pagination": [
           "ix-icon-button",
+          "ix-typography",
           "ix-select",
           "ix-select-item",
           "ix-spinner",

packages/core/src/components/icon-button/icon-button-mixin.scss

@@ -25,7 +25,9 @@
 @mixin base-icon-button {
   @include btn;
   @include ix-component;
+
   $button-categories: (primary, secondary);
+
   @each $category in $button-categories {
     @include btn-variant($category);
     @include btn-variant('outline-#{$category}');

packages/core/src/components/pagination/pagination.scss

@@ -8,8 +8,13 @@
  */
 
 @import 'common-variables';
+@import 'components/forms';
+@import '../icon-button/icon-button';
+@import 'mixins/shadow-dom/component';
 
 :host {
+  @include ix-component;
+
   &,
   .advanced-pagination,
   .item-count {
@@ -25,7 +30,7 @@
     padding: 0 $medium-space;
   }
 
-  input {
+  .page-selection {
     width: 4.125rem;
     text-align: center;
     margin: 0 $small-space;
@@ -50,6 +55,13 @@
     }
   }
 
+  button {
+    width: auto;
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 0.5rem;
+  }
+
   button + button {
     margin-inline-start: 0.125rem;
   }

packages/core/src/components/pagination/pagination.tsx

@@ -25,7 +25,7 @@ import { a11yBoolean } from '../utils/a11y';
 @Component({
   tag: 'ix-pagination',
   styleUrl: 'pagination.scss',
-  scoped: true,
+  shadow: true,
 })
 export class Pagination {
   private readonly baseButtonConfig: BaseButtonProps = {
@@ -100,12 +100,6 @@ export class Pagination {
    */
   @Event() itemCountChanged: EventEmitter<number>;
 
-  get pageInput() {
-    return this.hostElement.querySelector(
-      '.advanced-pagination input.form-control'
-    );
-  }
-
   private selectPage(index: number) {
     if (index < 0) {
       this.selectedPage = 0;
@@ -225,9 +219,9 @@ export class Pagination {
 
         {this.advanced ? (
           <div class="advanced-pagination">
-            {this.i18nPage}
+            <ix-typography variant="default">{this.i18nPage}</ix-typography>
             <input
-              class="form-control"
+              class="form-control page-selection"
               type="number"
               min="1"
               max={this.count}
@@ -238,7 +232,9 @@ export class Pagination {
               }}
             />
             <span class="total-count">
-              {this.i18nOf} {this.count}
+              <ix-typography variant="default">
+                {this.i18nOf} {this.count}
+              </ix-typography>
             </span>
           </div>
         ) : (
@@ -254,7 +250,7 @@ export class Pagination {
 
         {this.advanced && this.showItemCount ? (
           <span class="item-count">
-            {this.i18nItems}
+            <ix-typography variant="default">{this.i18nItems}</ix-typography>
             <ix-select
               hideListHeader
               i18nPlaceholder=""

packages/core/src/components/pagination/test/pagination.spec.tsx

@@ -17,7 +17,7 @@ describe('ix-pagination', () => {
       html: `<ix-pagination count="10"></ix-pagination>`,
     });
     const pagination = page.doc.querySelector('ix-pagination');
-    const button = page.doc.querySelectorAll('button')[5];
+    const button = pagination.shadowRoot.querySelectorAll('button')[5];
     button.click();
     expect(pagination.selectedPage).toBe(6);
   });
@@ -28,7 +28,7 @@ describe('ix-pagination', () => {
       html: `<ix-pagination count="10" selected-page="4"></ix-pagination>`,
     });
     const pagination = page.doc.querySelector('ix-pagination');
-    const button = page.doc.querySelectorAll('button')[6];
+    const button = pagination.shadowRoot.querySelectorAll('button')[6];
     button.click();
     expect(pagination.selectedPage).toBe(9);
   });
@@ -39,7 +39,7 @@ describe('ix-pagination', () => {
       html: `<ix-pagination count="10" selected-page="5"></ix-pagination>`,
     });
     const pagination = page.doc.querySelector('ix-pagination');
-    const button = page.doc.querySelectorAll('button')[1];
+    const button = pagination.shadowRoot.querySelectorAll('button')[1];
     button.click();
     expect(pagination.selectedPage).toBe(2);
   });
@@ -50,7 +50,7 @@ describe('ix-pagination', () => {
       html: `<ix-pagination count="10" selected-page="9"></ix-pagination>`,
     });
     const pagination = page.doc.querySelector('ix-pagination');
-    const button = page.doc.querySelectorAll('button')[1];
+    const button = pagination.shadowRoot.querySelectorAll('button')[1];
     button.click();
     expect(pagination.selectedPage).toBe(3);
   });

packages/core/src/tests/pagination/basic/index.html

@@ -18,6 +18,7 @@
       style="
         display: flex;
         flex-direction: column;
+        align-items: flex-start;
         justify-content: center;
         position: relative;
         margin-top: 2rem;