force to hide elements regardless of container queries, add storybook items to control it

Author: haschek

src/components/Pagination/Stories/Pagination.stories.tsx

@@ -10,6 +10,14 @@ export default {
 
 const PaginationExample = (args) => <Pagination {...args} />;
 
+const ContainerQueriesExample = (args) => (
+    <>
+        <Pagination {...args} style={{ maxWidth: "100%" }} />
+        <Pagination {...args} style={{ maxWidth: "32rem" }} />
+        <Pagination {...args} style={{ maxWidth: "26rem" }} />
+    </>
+);
+
 export const Default: StoryFn<typeof Pagination> = PaginationExample.bind({});
 Default.args = {
     pageSizes: [10, 20, 50, 100],
@@ -29,33 +37,26 @@ ExtendedPagesizeSelection.args = {
     ],
 };
 
-const VisibilityRegressionExample: StoryFn<typeof Pagination> = (args) => (
-    <div style={{ display: "grid", gap: "1rem" }}>
-        <p style={{ margin: 0, maxWidth: "56rem" }}>
-            Both examples below enable <code>hidePageSizeConfiguration</code> and <code>hideNavigationArrows</code>.
-            The expected behavior is that the page-size selector and navigation arrows stay hidden regardless of width.
-            If the container-query override is active, the wider example will show them again.
-        </p>
-        <div style={{ display: "grid", gap: "1rem", gridTemplateColumns: "repeat(auto-fit, minmax(22rem, 1fr))" }}>
-            <div style={{ border: "1px solid #c6c6c6", padding: "1rem" }}>
-                <div style={{ fontWeight: 600, marginBottom: "0.5rem" }}>Narrow container (~24rem)</div>
-                <div style={{ width: "24rem" }}>
-                    <Pagination {...args} />
-                </div>
-            </div>
-            <div style={{ border: "1px solid #c6c6c6", padding: "1rem" }}>
-                <div style={{ fontWeight: 600, marginBottom: "0.5rem" }}>Wide container (~36rem)</div>
-                <div style={{ width: "36rem" }}>
-                    <Pagination {...args} />
-                </div>
-            </div>
-        </div>
-    </div>
-);
-
-export const ContainerQueryOverridesHideFlags = VisibilityRegressionExample.bind({});
-ContainerQueryOverridesHideFlags.args = {
+/**
+ * This story demonstrates a minimal pagination and is a check that elements are always hidden.
+ */
+export const MinimalPagination: StoryFn<typeof Pagination> = PaginationExample.bind({});
+MinimalPagination.args = {
     ...Default.args,
     hidePageSizeConfiguration: true,
-    hideNavigationArrows: true,
+    hidePageSelect: true,
+    hideInfoText: true,
+    hideNavigationArrows: false,
+    hideBorders: false,
+};
+
+/**
+ * Demonstrates the breakpoints of the container queries.
+ * If the container gets too small, some elements are removed automatically.
+ * First, page selector disappears, then the page size selector.
+ * Info text and navigation arrow are never hidden automatically.
+ */
+export const ContainerQueries: StoryFn<typeof Pagination> = ContainerQueriesExample.bind({});
+ContainerQueries.args = {
+    ...Default.args,
 };

src/components/Pagination/pagination.scss

@@ -40,7 +40,7 @@ span.#{$prefix}--pagination__text {
         padding-left: 0;
 
         & > *:not(:last-child) {
-            display: none;
+            display: none !important;
         }
     }
 }
@@ -58,7 +58,7 @@ span.#{$prefix}--pagination__text {
 
 .#{$eccgui}-pagination--hideinfotext {
     .#{$prefix}--pagination__left > .#{$prefix}--pagination__text:last-child {
-        display: none;
+        display: none !important;
     }
 
     & .#{$prefix}--select__item-count .#{$prefix}--select-input {
@@ -68,13 +68,13 @@ span.#{$prefix}--pagination__text {
 
 .#{$eccgui}-pagination--hidepageselect {
     .#{$prefix}--pagination__right > *:not(.#{$prefix}--pagination__control-buttons) {
-        display: none;
+        display: none !important;
     }
 }
 
 .#{$eccgui}-pagination--hidenavigation {
     .#{$prefix}--pagination__right > .#{$prefix}--pagination__control-buttons {
-        display: none;
+        display: none !important;
     }
 }