From 4ba82bc17c41367ee73d2983e617dd116364f47a Mon Sep 17 00:00:00 2001
From: boppli <linda.bopp@mail.schwarz>
Date: Tue, 2 Jul 2024 10:12:14 +0200
Subject: [PATCH] =?UTF-8?q?flip=20the=20bool=20(=E2=95=AF=C2=B0=E2=96=A1?=
 =?UTF-8?q?=C2=B0)=E2=95=AF=EF=B8=B5=20=E2=94=BB=E2=94=81=E2=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/alpha-test-app/src/views/HomeView.vue             |  2 +-
 .../sit-onyx/src/components/OnyxTable/OnyxTable.ct.tsx |  3 +--
 .../src/components/OnyxTable/OnyxTable.stories.ts      |  1 -
 .../sit-onyx/src/components/OnyxTable/OnyxTable.vue    |  6 +++---
 packages/sit-onyx/src/components/OnyxTable/types.ts    | 10 +++++-----
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/apps/alpha-test-app/src/views/HomeView.vue b/apps/alpha-test-app/src/views/HomeView.vue
index 027fc34c2..7eaf3a3d0 100644
--- a/apps/alpha-test-app/src/views/HomeView.vue
+++ b/apps/alpha-test-app/src/views/HomeView.vue
@@ -272,7 +272,7 @@ const tableData = [
         />
 
         <template v-if="show('OnyxTable')">
-          <OnyxTable style="max-height: 250px">
+          <OnyxTable style="max-height: 250px" with-page-scrolling>
             <template #head>
               <tr>
                 <th v-for="col in tableColumns" :key="col">{{ col }}</th>
diff --git a/packages/sit-onyx/src/components/OnyxTable/OnyxTable.ct.tsx b/packages/sit-onyx/src/components/OnyxTable/OnyxTable.ct.tsx
index 3d258cf31..c5b82c5d6 100644
--- a/packages/sit-onyx/src/components/OnyxTable/OnyxTable.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxTable/OnyxTable.ct.tsx
@@ -52,7 +52,7 @@ test.describe("Screenshot tests", () => {
     // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
     disabledAccessibilityRules: ["color-contrast"],
     component: (column) => (
-      <OnyxTable density={column} withInternalScrolling>
+      <OnyxTable density={column}>
         {tableHead}
         {tableBody}
       </OnyxTable>
@@ -88,7 +88,6 @@ test.describe("Screenshot tests", () => {
     disabledAccessibilityRules: ["color-contrast"],
     component: (column, row) => (
       <OnyxTable
-        withInternalScrolling
         style={{
           maxWidth: column !== "default" ? "16rem" : "fit-content",
           maxHeight: row !== "default" ? "12rem" : "fit-content",
diff --git a/packages/sit-onyx/src/components/OnyxTable/OnyxTable.stories.ts b/packages/sit-onyx/src/components/OnyxTable/OnyxTable.stories.ts
index 62b8c7de1..501ca031d 100644
--- a/packages/sit-onyx/src/components/OnyxTable/OnyxTable.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxTable/OnyxTable.stories.ts
@@ -84,7 +84,6 @@ export const LimitedHeight = {
     style: "max-height: 16rem",
     head: Default.args.head,
     default: () => [...getTableBodyRows(), ...getTableBodyRows(), ...getTableBodyRows()],
-    withInternalScrolling: true,
   },
 } satisfies Story;
 
diff --git a/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue b/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue
index 3efae6812..9d97065c3 100644
--- a/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue
+++ b/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue
@@ -10,7 +10,7 @@ import type { OnyxTableProps } from "./types";
 const props = withDefaults(defineProps<OnyxTableProps>(), {
   striped: false,
   withVerticalBorders: false,
-  withInternalScrolling: false,
+  withPageScrolling: false,
 });
 
 const slots = defineSlots<{
@@ -41,8 +41,8 @@ const isEmptyMessage = computed(() => t.value("table.empty"));
 <template>
   <div class="onyx-table-wrapper">
     <div
-      :class="{ 'onyx-table-wrapper__scroll-container': props.withInternalScrolling }"
-      :tabindex="props.withInternalScrolling ? 0 : undefined"
+      :class="{ 'onyx-table-wrapper__scroll-container': !props.withPageScrolling }"
+      :tabindex="props.withPageScrolling ? undefined : 0"
     >
       <table
         class="onyx-table onyx-text"
diff --git a/packages/sit-onyx/src/components/OnyxTable/types.ts b/packages/sit-onyx/src/components/OnyxTable/types.ts
index df16210ea..49f8b1019 100644
--- a/packages/sit-onyx/src/components/OnyxTable/types.ts
+++ b/packages/sit-onyx/src/components/OnyxTable/types.ts
@@ -10,10 +10,10 @@ export type OnyxTableProps = DensityProp & {
    */
   withVerticalBorders?: boolean;
   /**
-   * Whether the table will scroll internally when a CSS max height/width is exceeded.
-   * - with scrolling internally, the table header will stick to the top of the **table**
-   * - without scrolling internally, the table header will stick to the top of the **page**
-   * - Never set a max-height/width on the table without setting `withInternalScrolling` to true.
+   * Whether the table will be displayed at it's full size and is scrollable only in the page context.
+   * - `false` => the table header will stick to the top of the **table** when it has a limited height
+   * - `true` => the table header will stick to the top of the **page** when scrolling the page
+   * - Warning: Don't set a max-height/width on the table when `withPageScrolling` is set.
    */
-  withInternalScrolling?: boolean;
+  withPageScrolling?: boolean;
 };