BREAKING CHANGE(web): Rename ScrollView indicators class to `overfl…

…owDecorators` #DS-825 ## Migration Guide Replace all occurrences of `ScrollView__indicators` with `ScrollView__overflowDecorators`. This also applies to classes with modifiers. - `ScrollView__indicators` → `ScrollView__overflowDecorators` - `ScrollView__indicators--shadows` → `ScrollView__overflowDecorators--shadows` - `ScrollView__indicators--borders` → `ScrollView__overflowDecorators--borders` Please refer back to these instructions or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · d7b8026 · d7b8026
1 parent b2ff1c6
commit d7b8026
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 49 deletions.
diff --git a/packages/web/src/scss/components/Modal/README.md b/packages/web/src/scss/components/Modal/README.md
@@ -246,7 +246,7 @@ scrolling, e.g.:
  </div>
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--borders" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true"></div>
  </div>
  <!-- ModalFooter -->
 </article>

diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html
@@ -495,7 +495,7 @@ <h2 id="example_scroll_view_title" class="ModalHeader__title">
 
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--borders" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true"></div>
  </div>
  <!-- ScrollView: end -->
 

diff --git a/packages/web/src/scss/components/ScrollView/README.md b/packages/web/src/scss/components/ScrollView/README.md
@@ -28,7 +28,7 @@ For vertical scrolling, you need to add the `ScrollView--vertical` class to the
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit…</p>
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
 </div>
 ```
 
@@ -47,7 +47,7 @@ content from wrapping.
  <p class="mb-700" style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetuer adipiscing elit…</p>
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
 </div>
 ```
 
@@ -65,30 +65,30 @@ content from wrapping.
  </div>
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
 </div>
 ```
 
-## Scrolling Indicators
+## Scrolling Overflow Decorators
 
-The ScrollView component provides indicators on its edges, showing that there is more content to scroll to. The default indicators
-use shadows:
+The ScrollView component provides overflow decorators on its edges, showing that there is more content to scroll to. The default overflow
+decorators use shadows:
 
 ```html
-<div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true"></div>
+<div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
 ```
 
 You can use borders instead:
 
 ```html
-<div class="ScrollView__indicators ScrollView__indicators--borders" aria-hidden="true"></div>
+<div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true"></div>
 ```
 
 Or both:
 
 ```html
 <div
- class="ScrollView__indicators ScrollView__indicators--borders ScrollView__indicators--shadows"
+ class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders ScrollView__overflowDecorators--shadows"
  aria-hidden="true"
 ></div>
 ```
@@ -117,7 +117,7 @@ class to your content, e.g. `mb-700` or `pb-700`.
  <p class="mb-700">…</p>
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
 </div>
 ```
 
@@ -138,7 +138,7 @@ To hide the scrollbar, add the `ScrollView--hideScrollbar` class to the containe
  <!-- … -->
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
 </div>
 ```
 

diff --git a/packages/web/src/scss/components/ScrollView/_ScrollView.scss b/packages/web/src/scss/components/ScrollView/_ScrollView.scss
@@ -1,13 +1,13 @@
 // Based on React UI ScrollView ❤️:
 // https://react-ui.io/components/scroll-view
 
-// 1. Scrolling indicators are implemented as pseudo elements. This way we can transition their visibility easily.
+// 1. Overflow decorators are implemented as pseudo elements. This way we can transition their visibility easily.
 //
-// 2. Stack scrolling indicators over viewport content while keeping the content interactive.
+// 2. Stack overflow decorators over viewport content while keeping the content interactive.
 //
-// - Scrolling indicators are positioned absolutely over the `.ScrollView`, with auto `z-index` (this is
+// - Overflow decorators are positioned absolutely over the `.ScrollView`, with auto `z-index` (this is
 // important!), and with `overflow: hidden` to clip the shadows (ie. its pseudo elements) when offset is applied.
-// - The `.ScrollView__viewport` remains interactive thanks to `pointer-events: none` on scrolling indicators.
+// - The `.ScrollView__viewport` remains interactive thanks to `pointer-events: none` on overflow decorators.
 //
 // 3. Make the `.ScrollView__content`'s bounding rectangle spread beyond the part visible through `.ScrollView__viewport`.
 //
@@ -42,7 +42,7 @@
 }
 
 // 1.
-.ScrollView__indicators {
+.ScrollView__overflowDecorators {
  position: absolute; // 2.
  width: 100%; // 2.
  height: 100%; // 2.
@@ -62,7 +62,7 @@
  }
 }
 
-.ScrollView__indicators--shadows {
+.ScrollView__overflowDecorators--shadows {
  &::before {
  background: var(--scroll-view-start-shadow-background, theme.$start-shadow-background);
  }
@@ -105,87 +105,87 @@
  vertical-align: top;
 }
 
-.ScrollView--vertical > .ScrollView__indicators::before,
-.ScrollView--vertical > .ScrollView__indicators::after {
+.ScrollView--vertical > .ScrollView__overflowDecorators::before,
+.ScrollView--vertical > .ScrollView__overflowDecorators::after {
  right: 0;
  left: 0;
  width: auto;
 }
 
-.ScrollView--vertical > .ScrollView__indicators::before {
+.ScrollView--vertical > .ScrollView__overflowDecorators::before {
  top: 0;
 }
 
-.ScrollView--vertical > .ScrollView__indicators::after {
+.ScrollView--vertical > .ScrollView__overflowDecorators::after {
  bottom: 0;
 }
 
-.ScrollView--vertical > .ScrollView__indicators--borders::before {
+.ScrollView--vertical > .ScrollView__overflowDecorators--borders::before {
  border-top: theme.$border-width theme.$border-style theme.$border-color;
 }
 
-.ScrollView--vertical > .ScrollView__indicators--borders::after {
+.ScrollView--vertical > .ScrollView__overflowDecorators--borders::after {
  border-bottom: theme.$border-width theme.$border-style theme.$border-color;
 }
 
-.ScrollView--vertical > .ScrollView__indicators--shadows::before {
+.ScrollView--vertical > .ScrollView__overflowDecorators--shadows::before {
  --angle: 180deg;
 
  height: theme.$start-shadow-size;
  transform: translateY(#{theme.$start-shadow-initial-offset});
 }
 
-.ScrollView--vertical > .ScrollView__indicators--shadows::after {
+.ScrollView--vertical > .ScrollView__overflowDecorators--shadows::after {
  --angle: 0;
 
  height: theme.$end-shadow-size;
  transform: translateY(#{-1 * theme.$end-shadow-initial-offset});
 }
 
-.ScrollView--horizontal > .ScrollView__indicators::before,
-.ScrollView--horizontal > .ScrollView__indicators::after {
+.ScrollView--horizontal > .ScrollView__overflowDecorators::before,
+.ScrollView--horizontal > .ScrollView__overflowDecorators::after {
  top: 0;
  bottom: 0;
  height: auto;
 }
 
-.ScrollView--horizontal > .ScrollView__indicators::before {
+.ScrollView--horizontal > .ScrollView__overflowDecorators::before {
  left: 0;
 }
 
-.ScrollView--horizontal > .ScrollView__indicators::after {
+.ScrollView--horizontal > .ScrollView__overflowDecorators::after {
  right: 0;
 }
 
-.ScrollView--horizontal > .ScrollView__indicators--borders::before {
+.ScrollView--horizontal > .ScrollView__overflowDecorators--borders::before {
  border-left: theme.$border-width theme.$border-style theme.$border-color;
 }
 
-.ScrollView--horizontal > .ScrollView__indicators--borders::after {
+.ScrollView--horizontal > .ScrollView__overflowDecorators--borders::after {
  border-right: theme.$border-width theme.$border-style theme.$border-color;
 }
 
-.ScrollView--horizontal > .ScrollView__indicators--shadows::before {
+.ScrollView--horizontal > .ScrollView__overflowDecorators--shadows::before {
  --angle: 90deg;
 
  width: theme.$start-shadow-size;
  transform: translateX(#{theme.$start-shadow-initial-offset});
 }
 
-.ScrollView--horizontal > .ScrollView__indicators--shadows::after {
+.ScrollView--horizontal > .ScrollView__overflowDecorators--shadows::after {
  --angle: 270deg;
 
  width: theme.$end-shadow-size;
  transform: translateX(#{-1 * theme.$end-shadow-initial-offset});
 }
 
-.is-scrolled-at-start > .ScrollView__indicators::before {
+.is-scrolled-at-start > .ScrollView__overflowDecorators::before {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
 }
 
-.is-scrolled-at-end > .ScrollView__indicators::after {
+.is-scrolled-at-end > .ScrollView__overflowDecorators::after {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);

diff --git a/packages/web/src/scss/components/ScrollView/index.html b/packages/web/src/scss/components/ScrollView/index.html
@@ -20,7 +20,7 @@ <h2 class="docs-Heading">Vertical Scrolling</h2>
 
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
  </div>
 
  </div>
@@ -44,7 +44,7 @@ <h2 class="docs-Heading">Horizontal Scrolling</h2>
 
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
  </div>
 
 </section>
@@ -70,14 +70,14 @@ <h2 class="docs-Heading">Horizontal Scrolling with Container Breakout</h2>
 
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
  </div>
  </div>
 
 </section>
 <section class="docs-Section">
 
- <h2 class="docs-Heading">Scrolling Indicators</h2>
+ <h2 class="docs-Heading">Scrolling Overflow Decorators</h2>
 
  <h3>Borders</h3>
 
@@ -97,7 +97,7 @@ <h3>Borders</h3>
 
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--borders" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true"></div>
  </div>
 
  </div>
@@ -116,7 +116,7 @@ <h3>Borders</h3>
 
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--borders" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true"></div>
  </div>
 
  <h3>Borders and Shadows</h3>
@@ -137,7 +137,7 @@ <h3>Borders and Shadows</h3>
 
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--borders ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
  </div>
 
  </div>
@@ -156,7 +156,7 @@ <h3>Borders and Shadows</h3>
 
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--borders ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
  </div>
 
  <h3>Custom Shadows</h3>
@@ -181,7 +181,7 @@ <h3>Custom Shadows</h3>
  </div>
  </div>
  <div
- class="ScrollView__indicators ScrollView__indicators--shadows"
+ class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows"
  style="
  --scroll-view-start-shadow-background: linear-gradient(to bottom, #9400d3 0%, #9400d300 100%);
  --scroll-view-end-shadow-background: linear-gradient(to top, #9400d3 0%, #9400d300 100%);
@@ -209,7 +209,7 @@ <h3>Custom Shadows</h3>
  </div>
  </div>
  <div
- class="ScrollView__indicators ScrollView__indicators--shadows"
+ class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows"
  style="
  --scroll-view-start-shadow-background: linear-gradient(to right, #9400d3 0%, #9400d300 100%);
  --scroll-view-end-shadow-background: linear-gradient(to left, #9400d3 0%, #9400d300 100%);
@@ -241,7 +241,7 @@ <h2 class="docs-Heading">Hidden Scrollbar</h2>
 
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
  </div>
 
  </div>
@@ -260,7 +260,7 @@ <h2 class="docs-Heading">Hidden Scrollbar</h2>
 
  </div>
  </div>
- <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true"></div>
+ <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true"></div>
  </div>
 
 </section>