add table prefix

danielleroux · danielleroux · commit 49130ab8038d · 2025-03-10T17:29:07.000+01:00
diff --git a/BREAKING_CHANGES/v3.md b/BREAKING_CHANGES/v3.md
@@ -144,7 +144,7 @@ Of course you can still use Bootstrap together with @siemens/ix, but you need to
 
 ### HTML table classes `.table` and `.table-striped` are not based on Bootstrap anymore
 
-The classes `.table` and `.table-striped` can still be used in order to style HTML tables.
+The classes `.table` gets `.ix-table` and `.table-striped` gets `.ix-table-striped` and can still be used in order to style HTML tables.
 Please note that they are not based on Bootstrap anymore.
 If your tables rely on additional Bootstrap functionality (e.g. hoverable rows), you have to install Bootstrap on your own.
 
@@ -161,15 +161,13 @@ To ensure that your styles are not broken after update to v3 you have to provide
 e.g
 
 ```html
-<input type="text" />
-<input type="text" class="form-control" />
+<input type="text" /> <input type="text" class="form-control" />
 ```
 
 to
 
 ```html
-<input type="text" class="ix-form-control" />
-<input type="text" class="ix-form-control" />
+<input type="text" class="ix-form-control" /> <input type="text" class="ix-form-control" />
 ```
 
 ## Component Updates
diff --git a/packages/core/scss/components/_table.scss b/packages/core/scss/components/_table.scss
@@ -25,7 +25,7 @@
   --bs-table-hover-bg: var(--theme-table-data-row-alt--background--hover);
 }
 
-.table {
+.ix-table {
   box-sizing: border-box;
   border-spacing: 0px;
   width: 100%;
@@ -41,35 +41,37 @@
   @include bs-legacy-support;
 }
 
-.table-striped > tbody > tr:nth-of-type(odd) > * {
+.ix-table-striped > tbody > tr:nth-of-type(odd) > * {
   --ix-table-background: var(--theme-table-data-row-alt--background);
 }
 
-.table thead {
+.ix-table thead {
   background-color: var(--theme-table-header-row--background);
 }
 
-.table > thead {
+.ix-table > thead {
   vertical-align: bottom;
 }
 
-.table > :not(caption) > * > * {
+.ix-table > :not(caption) > * > * {
   padding: 0.5rem 0.5rem;
   background-color: var(--ix-table-background);
   border-bottom-width: 1px;
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-.table th,
-.table td {
+.ix-table th,
+.ix-table td {
   border-bottom-color: var(--theme-table-data-row--border-color);
 }
 
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  text-align: left;
+.ix-table {
+  thead,
+  tbody,
+  tfoot,
+  tr,
+  td,
+  th {
+    text-align: left;
+  }
 }
diff --git a/packages/core/src/tests/3rd-party/bootstrap/html-elements/index.html b/packages/core/src/tests/3rd-party/bootstrap/html-elements/index.html
@@ -32,7 +32,7 @@
     <h2 class="section">Just a ix component</h2>
     <ix-button>Button</ix-button>
     <h2 class="section">Table</h2>
-    <table class="table">
+    <table class="ix-table">
       <thead>
         <tr>
           <th scope="col">#</th>
@@ -63,7 +63,7 @@ <h2 class="section">Table</h2>
     </table>
 
     <h2 class="section">Table striped</h2>
-    <table class="table table-striped">
+    <table class="ix-table table-striped">
       <thead>
         <tr>
           <th scope="col">#</th>
diff --git a/packages/core/src/tests/html-table/basic/index.html b/packages/core/src/tests/html-table/basic/index.html
@@ -15,7 +15,7 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <table class="table">
+    <table class="ix-table">
       <thead>
         <tr>
           <th scope="col">#</th>
diff --git a/packages/core/src/tests/html-table/striped/index.html b/packages/core/src/tests/html-table/striped/index.html
@@ -15,7 +15,7 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <table class="table table-striped">
+    <table class="ix-table table-striped">
       <thead>
         <tr>
           <th scope="col">#</th>
