fix(pagination): Colors, right to left demo, and logical properties (#…

…2116) * fix(pagination): make bg of open variants transparent * fix(pagination): fallback colors for public and private variables * fix(pagination): use logical properties * fix(pagination): fix RTL demo layout * fix(pagination): wrap all pagination demos with `<rh-surface>` * fix(pagination): remove fallbacks to RHDS color tokens * chore(pagination): add changeset * docs(pagination): add docs about colors + surface * chore(pagination): downgrade changeset to patch Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * docs(pagination): update changeset description Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * docs(pagination): reword `rh-surface` requirement terminology, add alert note * docs(pagination): update 30-code.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
RedHat-UX · Jan 28, 2025 · 34b8726 · 34b8726
1 parent 6271efd
commit 34b8726
Show file tree

Hide file tree

Showing 15 changed files with 145 additions and 119 deletions.
diff --git a/.changeset/dry-icons-love.md b/.changeset/dry-icons-love.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-pagination>`: improves layouts for non-left-to-right languages
diff --git a/elements/rh-pagination/demo/compact.html b/elements/rh-pagination/demo/compact.html
@@ -1,4 +1,4 @@
-<div id="constrain">
+<rh-surface color-palette="lightest" id="constrain">
   <rh-pagination>
     <ol>
       <li><a href="#">1</a></li>
@@ -8,11 +8,12 @@
       <li><a href="#5">5</a></li>
     </ol>
   </rh-pagination>
-</div>
+</rh-surface>
 
 <link rel="stylesheet" href="../rh-pagination-lightdom.css">
 
 <script type="module">
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-pagination/rh-pagination.js';
 </script>
 

diff --git a/elements/rh-pagination/demo/many-pages.html b/elements/rh-pagination/demo/many-pages.html
@@ -1,27 +1,29 @@
-<rh-pagination>
-  <ol>
-    <li><a href="#">1</a></li>
-    <li><a href="#2">2</a></li>
-    <li><a href="#3">3</a></li>
-    <li><a href="#4">4</a></li>
-    <li><a href="#5">5</a></li>
-    <li><a href="#6">6</a></li>
-    <li><a href="#7">7</a></li>
-    <li><a href="#8">8</a></li>
-    <li><a href="#9">9</a></li>
-    <li><a href="#10">10</a></li>
-    <li><a href="#11">11</a></li>
-    <li><a href="#12">12</a></li>
-    <li><a href="#13">13</a></li>
-    <li><a href="#14">14</a></li>
-    <li><a href="#15">15</a></li>
-    <li><a href="#16">16</a></li>
-    <li><a href="#17">17</a></li>
-    <li><a href="#18">18</a></li>
-    <li><a href="#19">19</a></li>
-    <li><a href="#20">20</a></li>
-  </ol>
-</rh-pagination>
+<rh-surface color-palette="lightest">
+  <rh-pagination>
+    <ol>
+      <li><a href="#">1</a></li>
+      <li><a href="#2">2</a></li>
+      <li><a href="#3">3</a></li>
+      <li><a href="#4">4</a></li>
+      <li><a href="#5">5</a></li>
+      <li><a href="#6">6</a></li>
+      <li><a href="#7">7</a></li>
+      <li><a href="#8">8</a></li>
+      <li><a href="#9">9</a></li>
+      <li><a href="#10">10</a></li>
+      <li><a href="#11">11</a></li>
+      <li><a href="#12">12</a></li>
+      <li><a href="#13">13</a></li>
+      <li><a href="#14">14</a></li>
+      <li><a href="#15">15</a></li>
+      <li><a href="#16">16</a></li>
+      <li><a href="#17">17</a></li>
+      <li><a href="#18">18</a></li>
+      <li><a href="#19">19</a></li>
+      <li><a href="#20">20</a></li>
+    </ol>
+  </rh-pagination>
+</rh-surface>
 
 <p>Paginators with many pages must overflow.</p>
 
@@ -35,5 +37,6 @@
 
 <script type="module">
   import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-pagination/rh-pagination.js';
 </script>
diff --git a/elements/rh-pagination/demo/no-numeric-control.html b/elements/rh-pagination/demo/no-numeric-control.html
@@ -1,12 +1,14 @@
-<rh-pagination>
-  <ol>
-    <li><a href="#">1</a></li>
-    <li><a href="#2">2</a></li>
-    <li><a href="#3">3</a></li>
-    <li><a href="#4">4</a></li>
-    <li><a href="#5">5</a></li>
-  </ol>
-</rh-pagination>
+<rh-surface color-palette="lightest">
+  <rh-pagination>
+    <ol>
+      <li><a href="#">1</a></li>
+      <li><a href="#2">2</a></li>
+      <li><a href="#3">3</a></li>
+      <li><a href="#4">4</a></li>
+      <li><a href="#5">5</a></li>
+    </ol>
+  </rh-pagination>
+</rh-surface>
 
 <link rel="stylesheet" href="../rh-pagination-lightdom.css">
 
@@ -17,6 +19,7 @@
 </style>
 
 <script type="module">
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-pagination/rh-pagination.js';
 </script>
 
diff --git a/elements/rh-pagination/demo/open-compact-size.html b/elements/rh-pagination/demo/open-compact-size.html
@@ -1,4 +1,4 @@
-<div id="constrain">
+<rh-surface color-palette="lightest" id="constrain">
   <rh-pagination variant="open" size="sm">
     <ol>
       <li><a href="#">1</a></li>
@@ -8,7 +8,7 @@
       <li><a href="#5">5</a></li>
     </ol>
   </rh-pagination>
-</div>
+</rh-surface>
 
 <link rel="stylesheet" href="../rh-pagination-lightdom.css">
 
@@ -19,5 +19,6 @@
 </style>
 
 <script type="module">
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-pagination/rh-pagination.js';
 </script>
diff --git a/elements/rh-pagination/demo/open-compact.html b/elements/rh-pagination/demo/open-compact.html
@@ -1,4 +1,4 @@
-<div id="constrain">
+<rh-surface color-palette="lightest" id="constrain">
   <rh-pagination variant="open">
     <ol>
       <li><a href="#">1</a></li>
@@ -8,7 +8,7 @@
       <li><a href="#5">5</a></li>
     </ol>
   </rh-pagination>
-</div>
+</rh-surface>
 
 <link rel="stylesheet" href="../rh-pagination-lightdom.css">
 
@@ -19,5 +19,6 @@
 </style>
 
 <script type="module">
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-pagination/rh-pagination.js';
 </script>
diff --git a/elements/rh-pagination/demo/open.html b/elements/rh-pagination/demo/open.html
@@ -1,15 +1,18 @@
-<rh-pagination variant="open">
-  <ol>
-    <li><a href="#">1</a></li>
-    <li><a href="#2">2</a></li>
-    <li><a href="#3">3</a></li>
-    <li><a href="#4">4</a></li>
-    <li><a href="#5">5</a></li>
-  </ol>
-</rh-pagination>
+<rh-surface color-palette="lightest">
+  <rh-pagination variant="open">
+    <ol>
+      <li><a href="#">1</a></li>
+      <li><a href="#2">2</a></li>
+      <li><a href="#3">3</a></li>
+      <li><a href="#4">4</a></li>
+      <li><a href="#5">5</a></li>
+    </ol>
+  </rh-pagination>
+</rh-surface>
 
 <link rel="stylesheet" href="../rh-pagination-lightdom.css">
 
 <script type="module">
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-pagination/rh-pagination.js';
 </script>
diff --git a/elements/rh-pagination/demo/overflow.html b/elements/rh-pagination/demo/overflow.html
@@ -1,12 +1,14 @@
-<rh-pagination>
-  <ol>
-    <li><a href="#">1</a></li>
-    <li><a href="#2">2</a></li>
-    <li><a href="#3">3</a></li>
-    <li><a href="#4">4</a></li>
-    <li><a href="#5">5</a></li>
-  </ol>
-</rh-pagination>
+<rh-surface color-palette="lightest">
+  <rh-pagination>
+    <ol>
+      <li><a href="#">1</a></li>
+      <li><a href="#2">2</a></li>
+      <li><a href="#3">3</a></li>
+      <li><a href="#4">4</a></li>
+      <li><a href="#5">5</a></li>
+    </ol>
+  </rh-pagination>
+</rh-surface>
 
 <p>Paginators with 5 or fewer pages should not overflow, meaning all links should be visible.
   Once a paginator has more than 5 pages, then it must overflow, meaning some links will be hidden.
@@ -43,6 +45,7 @@
 
 <script type="module">
   import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-pagination/rh-pagination.js';
 
   const $ = s => document.querySelector(s);

diff --git a/elements/rh-pagination/demo/rh-pagination.html b/elements/rh-pagination/demo/rh-pagination.html
@@ -1,15 +1,18 @@
-<rh-pagination>
-  <ol>
-    <li><a href="#">1</a></li>
-    <li><a href="#2">2</a></li>
-    <li><a href="#3">3</a></li>
-    <li><a href="#4">4</a></li>
-    <li><a href="#5">5</a></li>
-  </ol>
-</rh-pagination>
+<rh-surface color-palette="lightest">
+  <rh-pagination>
+    <ol>
+      <li><a href="#">1</a></li>
+      <li><a href="#2">2</a></li>
+      <li><a href="#3">3</a></li>
+      <li><a href="#4">4</a></li>
+      <li><a href="#5">5</a></li>
+    </ol>
+  </rh-pagination>
+</rh-surface>
 
 <link rel="stylesheet" href="../rh-pagination-lightdom.css">
 
 <script type="module">
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-pagination/rh-pagination.js';
 </script>
diff --git a/elements/rh-pagination/demo/right-to-left.html b/elements/rh-pagination/demo/right-to-left.html
@@ -1,4 +1,4 @@
-<div id="rtl-pagination" dir="rtl">
+<rh-surface color-palette="lightest" id="rtl-pagination" dir="rtl">
   <p>צריך להיראות יותר טוב</p>
   <rh-pagination>
     <span slot="go-to-page">עבור לדף</span>
@@ -10,23 +10,13 @@
       <li><a href="#5">5</a></li>
     </ol>
   </rh-pagination>
-</div>
+</rh-surface>
 
 <link rel="stylesheet" href="../rh-pagination-lightdom.css">
 
-<style>
-  #rtl-pagination {
-    gap: var(--rh-space-2xl, 32px);
-    padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
-    & rh-pagination {
-      justify-self: center;
-    }
-  }
-</style>
-
 <script type="module">
   import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-pagination/rh-pagination.js';
 </script>
 
-
diff --git a/elements/rh-pagination/demo/size-compact.html b/elements/rh-pagination/demo/size-compact.html
@@ -1,4 +1,4 @@
-<div id="constrain">
+<rh-surface color-palette="lightest" id="constrain">
   <rh-pagination size="sm">
     <ol>
       <li><a href="#">1</a></li>
@@ -8,7 +8,7 @@
       <li><a href="#5">5</a></li>
     </ol>
   </rh-pagination>
-</div>
+</rh-surface>
 
 <link rel="stylesheet" href="../rh-pagination-lightdom.css">
 
@@ -19,5 +19,6 @@
 </style>
 
 <script type="module">
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-pagination/rh-pagination.js';
 </script>
diff --git a/elements/rh-pagination/demo/size.html b/elements/rh-pagination/demo/size.html
@@ -1,15 +1,18 @@
-<rh-pagination size="sm">
-  <ol>
-    <li><a href="#">1</a></li>
-    <li><a href="#2">2</a></li>
-    <li><a href="#3">3</a></li>
-    <li><a href="#4">4</a></li>
-    <li><a href="#5">5</a></li>
-  </ol>
-</rh-pagination>
+<rh-surface color-palette="lightest">
+  <rh-pagination size="sm">
+    <ol>
+      <li><a href="#">1</a></li>
+      <li><a href="#2">2</a></li>
+      <li><a href="#3">3</a></li>
+      <li><a href="#4">4</a></li>
+      <li><a href="#5">5</a></li>
+    </ol>
+  </rh-pagination>
+</rh-surface>
 
 <link rel="stylesheet" href="../rh-pagination-lightdom.css">
 
 <script type="module">
+  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-pagination/rh-pagination.js';
 </script>
diff --git a/elements/rh-pagination/docs/30-code.md b/elements/rh-pagination/docs/30-code.md
@@ -0,0 +1,10 @@
+### Displaying correct pagination colors
+
+In order for pagination to be styled correctly, each `<rh-pagination>` must be wrapped in a container element which supports the `color-palette` attribute, such as the [`<rh-surface>` element](/elements/surface).
+
+<rh-alert state="alternate">
+  <h4 slot="header">Developer note</h4>
+
+  The requirement to wrap `<rh-pagination>`s with color palette containers could be relaxed in the future with advancements in browser themeing APIs.
+
+</rh-alert>