fix(back-to-top): demo visibility and logical properties (#2133)

* fix(back-to-top): make element visible on base demo

* fix(back-to-top): fix warnings demo, update demo content

* fix(back-to-top): show element on position sticky demo

* fix(back-to-top): use logical properties in demo styles

* fix(back-to-top): target surface with `main` role in demo JS

* chore(back-to-top): add changeset

* fix(back-to-top): revert `svb` due to lack of baseline browser support

* docs(back-to-top): remove position sticky demo

* docs(back-to-top): remove scrollable page demo

* fix(back-to-top): remove error/warning logs and warnings demo

* chore(back-to-top): update changeset

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

Author: adamjohnson

.changeset/large-buckets-cough.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-back-to-top>`: remove user-facing errors and warnings from missing attributes/values from the console

elements/rh-back-to-top/demo/always-visible.html

@@ -8,13 +8,13 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
   }
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)); !important;
+    block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)); !important;
   }
 </style>

elements/rh-back-to-top/demo/color-context.html

@@ -33,21 +33,21 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100dvh + 401px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -61,7 +61,7 @@
 <script type="module">
   /* add support for demo/fullscreen and dev server */
   const b2t = document.querySelector('rh-back-to-top');
-  const main = document.querySelector('main');
+  const main = document.querySelector('main, [role="main"]');
   // if main isn't scrollable use window
   if (window.getComputedStyle(main).overflow === 'scroll') {
     b2t.scrollableSelector = 'main';

elements/rh-back-to-top/demo/no-slotted-text.html

@@ -13,21 +13,21 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100dvh + 401px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -39,7 +39,7 @@
 <script type="module">
   /* add support for demo/fullscreen and dev server */
   const b2t = document.querySelector('rh-back-to-top');
-  const main = document.querySelector('main');
+  const main = document.querySelector('main, [role="main"]');
   // if main isn't scrollable use window
   if (window.getComputedStyle(main).overflow === 'scroll') {
     b2t.scrollableSelector = 'main';

elements/rh-back-to-top/demo/on-a-scrollable-page.html

@@ -1,7 +1,18 @@
 <div id="overflow">
+  <p>Scroll down to reveal the back to top element</p>
   <rh-back-to-top href="#">Back to top</rh-back-to-top>
 </div>
 
 <script type="module">
   import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
 </script>
+
+<style>
+  #overflow {
+    min-block-size: calc(100dvh + 401px);
+  }
+
+  p {
+    font-weight: bold;
+  }
+</style>

elements/rh-back-to-top/demo/position-sticky.html

@@ -12,22 +12,22 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
     /* scroll distance set to 50px */
-    min-height: calc(100dvh + 51px);
+    min-block-size: calc(100dvh + 51px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -41,7 +41,7 @@
 <script type="module">
   /* add support for demo/fullscreen and dev server */
   const b2t = document.querySelector('rh-back-to-top');
-  const main = document.querySelector('main');
+  const main = document.querySelector('main, [role="main"]');
   // if main isn't scrollable use window
   if (window.getComputedStyle(main).overflow === 'scroll') {
     b2t.scrollableSelector = 'main';