flip the bool (╯°□°)╯︵ ┻━┻

SchwarzIT · Jul 2, 2024 · 4ba82bc · 4ba82bc
1 parent d3d4fe1
commit 4ba82bc
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
 };