BC: Enable ScrollView arrows to overflow the ScrollView area (#128)

Author: adamkudrna

src/lib/components/ui/Modal/__tests__/__snapshots__/Modal.test.jsx.snap

@@ -181,6 +181,10 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                     </div>
                   </div>
                 </div>
+                <div
+                  aria-hidden={true}
+                  className="scrollingShadows"
+                />
               </div>
             </ScrollView>
           </WithTranslationContextComponent>
@@ -510,6 +514,10 @@ exports[`rendering renders correctly with all props except translations and with
                     </div>
                   </div>
                 </div>
+                <div
+                  aria-hidden={true}
+                  className="scrollingShadows"
+                />
               </div>
             </ScrollView>
           </WithTranslationContextComponent>
@@ -803,6 +811,10 @@ exports[`rendering renders correctly with mandatory props only 1`] = `
                     </div>
                   </div>
                 </div>
+                <div
+                  aria-hidden={true}
+                  className="scrollingShadows"
+                />
               </div>
             </ScrollView>
           </WithTranslationContextComponent>
@@ -901,6 +913,10 @@ exports[`rendering renders correctly with portal id 1`] = `
                       </div>
                     </div>
                   </div>
+                  <div
+                    aria-hidden="true"
+                    class="scrollingShadows"
+                  />
                 </div>
               </div>
               <div
@@ -1013,6 +1029,10 @@ exports[`rendering renders correctly with portal id 1`] = `
                       </div>
                     </div>
                   </div>
+                  <div
+                    aria-hidden={true}
+                    className="scrollingShadows"
+                  />
                 </div>
               </ScrollView>
             </WithTranslationContextComponent>
@@ -1179,6 +1199,10 @@ exports[`rendering renders correctly with translations 1`] = `
                     </div>
                   </div>
                 </div>
+                <div
+                  aria-hidden={true}
+                  className="scrollingShadows"
+                />
               </div>
             </ScrollView>
           </WithTranslationContextComponent>

src/lib/components/ui/ScrollView/ScrollView.jsx

@@ -148,6 +148,7 @@ export const ScrollView = (props) => {
           {children}
         </div>
       </div>
+      <div className={styles.scrollingShadows} aria-hidden />
       {arrows && (
         <>
           <button

src/lib/components/ui/ScrollView/ScrollView.scss

@@ -1,34 +1,50 @@
+// 1. Scrolling shadows are implemented as pseudo elements. This way we can customise them only
+//    with custom properties.
+// 2. Stack scrolling shadows  over viewport content while keeping the content interactive.
+//
+//    - `.scrollingShadows` is positioned absolutely over the `.root`, with auto `z-index` (this is
+//      important!), and with `overflow: hidden` to clip the shadows (ie. its pseudo elements).
+//    - The `.viewport` is in `.root`'s stacking context and remains interactive because its
+//      `z-index` is higher than the auto `z-index` of `.scrollingShadows`.
+//
+// 3. Optional arrows are positioned relative to the `.root` and stacked on top of scrolling
+//    shadows. They can be shifted outside the `ScrollView` area only because `overflow: hidden` is
+//    **not** present at `.root`.
+//
+// 4. Make the `.content`'s bounding rectangle spread beyond the part visible through `.viewport`.
+// 5. Prevent undesired vertical scrolling that may occur with tables inside.
+// 6. Make `ScrollView` adjust to flexible layouts.
+
 @import '../../../styles/tools/caret';
 @import '../../../styles/tools/hide-scrollbar';
 @import '../../../styles/tools/reset';
 @import '../../../styles/tools/transitions';
 @import 'theme';
 
-// 1. Scrolling shadows are implemented as pseudo elements. This way we can customise them only
-//    thanks to custom properties.
-// 2. Clip scrolling shadows.
-// 3. Create stacking context just to avoid scrolling shadows being covered by content.
-// 4. Make the content bounding rectangle spread beyond the visible part.
-// 5. Prevent undesired vertical scrolling that may occur with tables inside.
-
 $_arrow-inner-offset: 0.5rem;
 $_arrow-outer-offset: 1rem;
 
 .root {
-  position: relative;
+  position: relative; // 2.
   display: flex;
   flex-direction: column;
   width: 100%;
+}
+
+// 1.
+.scrollingShadows {
+  position: absolute; // 2.
+  width: 100%; // 2.
+  height: 100%; // 2.
   overflow: hidden; // 2.
 
-  // 1.
   &::before,
   &::after {
     @include transition((visibility, opacity, transform));
 
     content: '';
     position: absolute;
-    z-index: 1;
+    z-index: 2; // 2.
     display: block;
     visibility: hidden;
     opacity: 0;
@@ -48,7 +64,7 @@ $_arrow-outer-offset: 1rem;
 }
 
 .viewport {
-  position: relative; // 3.
+  z-index: 1; // 2.
   width: 100%;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
@@ -59,8 +75,8 @@ $_arrow-outer-offset: 1rem;
   @include reset-button();
   @include transition((visibility, opacity, transform));
 
-  position: absolute;
-  z-index: 2;
+  position: absolute; // 3.
+  z-index: 3; // 3.
   display: flex;
   visibility: hidden;
   opacity: 0;
@@ -75,11 +91,12 @@ $_arrow-outer-offset: 1rem;
 
 .isRootVertical {
   height: 100%;
+  min-height: 0; // 6.
 }
 
 .isRootVertical .viewport {
   height: 100%;
-  overflow-y: auto;
+  overflow-y: auto; // 2.
 }
 
 .isRootVertical .arrowPrev {
@@ -106,6 +123,10 @@ $_arrow-outer-offset: 1rem;
   transform: translateY(calc(-1 * #{$scrollview-arrow-initial-offset}));
 }
 
+.isRootHorizontal {
+  min-width: 0; // 6.
+}
+
 .isRootHorizontal .arrowPrev {
   top: 0;
   bottom: 0;
@@ -132,24 +153,24 @@ $_arrow-outer-offset: 1rem;
   @include caret-rotate(270);
 }
 
-.isRootVertical::before,
-.isRootVertical::after {
+.isRootVertical .scrollingShadows::before,
+.isRootVertical .scrollingShadows::after {
   right: 0;
   left: 0;
 }
 
-.isRootVertical::before {
+.isRootVertical .scrollingShadows::before {
   top: 0;
   transform: translateY($scrollview-shadow-initial-offset);
 }
 
-.isRootVertical::after {
+.isRootVertical .scrollingShadows::after {
   bottom: 0;
   transform: translateY(calc(-1 * #{$scrollview-shadow-initial-offset}));
 }
 
 .isRootHorizontal .viewport {
-  overflow-x: auto;
+  overflow-x: auto; // 2.
   overflow-y: hidden; // 5.
 }
 
@@ -158,30 +179,30 @@ $_arrow-outer-offset: 1rem;
   min-width: 100%;
 }
 
-.isRootHorizontal::before,
-.isRootHorizontal::after {
+.isRootHorizontal .scrollingShadows::before,
+.isRootHorizontal .scrollingShadows::after {
   top: 0;
   bottom: 0;
 }
 
-.isRootHorizontal::before {
+.isRootHorizontal .scrollingShadows::before {
   left: 0;
   transform: translateX($scrollview-shadow-initial-offset);
 }
 
-.isRootHorizontal::after {
+.isRootHorizontal .scrollingShadows::after {
   right: 0;
   transform: translateX(calc(-1 * #{$scrollview-shadow-initial-offset}));
 }
 
-.isRootScrolledAtStart::before,
+.isRootScrolledAtStart .scrollingShadows::before,
 .isRootScrolledAtStart .arrowPrev {
   visibility: visible;
   opacity: 1;
   transform: translate(0, 0);
 }
 
-.isRootScrolledAtEnd::after,
+.isRootScrolledAtEnd .scrollingShadows::after,
 .isRootScrolledAtEnd .arrowNext {
   visibility: visible;
   opacity: 1;

src/lib/components/ui/ScrollView/__tests__/__snapshots__/ScrollView.test.jsx.snap

@@ -55,6 +55,10 @@ exports[`rendering renders correctly with a single child 1`] = `
           </span>
         </div>
       </div>
+      <div
+        aria-hidden={true}
+        className="scrollingShadows"
+      />
     </div>
   </ScrollView>
 </WithTranslationContextComponent>
@@ -179,6 +183,10 @@ exports[`rendering renders correctly with all props 1`] = `
           </span>
         </div>
       </div>
+      <div
+        aria-hidden={true}
+        className="scrollingShadows"
+      />
       <button
         className="arrowPrev"
         id="my-scrollview__arrowPrevButton"
@@ -263,6 +271,10 @@ exports[`rendering renders correctly with arrows 1`] = `
           </span>
         </div>
       </div>
+      <div
+        aria-hidden={true}
+        className="scrollingShadows"
+      />
       <button
         className="arrowPrev"
         onClick={[Function]}
@@ -349,6 +361,10 @@ exports[`rendering renders correctly with multiple children 1`] = `
           </span>
         </div>
       </div>
+      <div
+        aria-hidden={true}
+        className="scrollingShadows"
+      />
     </div>
   </ScrollView>
 </WithTranslationContextComponent>
@@ -410,6 +426,10 @@ exports[`rendering renders correctly with scrollbar disabled 1`] = `
           </span>
         </div>
       </div>
+      <div
+        aria-hidden={true}
+        className="scrollingShadows"
+      />
     </div>
   </ScrollView>
 </WithTranslationContextComponent>