BREAKING CHANGE(web-twig): Rename ScrollView indicators prop to `ov…

…erflowDecorators` #DS-825 ## Migration Guide Rename `indicators` prop to `overflowDecorators` on all ScrollView component usages. - `<ScrollView indicators="shadows" …>` → `<ScrollView overflowDecorators="shadows" …>` - `<ScrollView indicators="borders" …>` → `<ScrollView overflowDecorators="borders" …>` - `<ScrollView indicators="both" …>` → `<ScrollView overflowDecorators="both" …>` Please refer back to these instructions or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · c4f64e4 · c4f64e4
1 parent d7b8026
commit c4f64e4
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 29 deletions.
diff --git a/packages/web-twig/src/Resources/components/ScrollView/README.md b/packages/web-twig/src/Resources/components/ScrollView/README.md
@@ -11,15 +11,15 @@ Basic example usage:
 Advanced example usage:
 
 ```html
-<ScrollView direction="horizontal" indicators="both" data-toggle="scrollView">ScrollView content</ScrollView>
+<ScrollView direction="horizontal" overflowDecorators="both" data-toggle="scrollView">ScrollView content</ScrollView>
 ```
 
 Without lexer:
 
 ```twig
 {% embed "@spirit/scrollView.twig" with { props: {
     direction: 'horizontal',
-    indicators: 'both',
+    overflowDecorators: 'both',
     data-toggle: 'scrollView'
 }} %}
     {% block content %}
@@ -47,8 +47,8 @@ Or, feel free to write the controlling script yourself.
 | Prop name             | Type                         | Default    | Required | Description                        |
 | --------------------- | ---------------------------- | ---------- | -------- | ---------------------------------- |
 | `direction`           | `horizontal`, `vertical`     | `vertical` | no       | Direction of the scroll            |
-| `indicators`          | `borders`, `shadows`, `both` | `shadows`  | no       | Type of indicators                 |
 | `isScrollbarDisabled` | `bool`                       | `false`    | no       | If true, the Scrollbar is disabled |
+| `overflowDecorators`  | `borders`, `shadows`, `both` | `shadows`  | no       | Type of overflow decorators        |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
 descriptiveness and accessibility. Also, UNSAFE styling props are available,

diff --git a/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig b/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig
@@ -11,8 +11,8 @@
     {# ScrollView Horizontal with Container Breakout #}
     {% include '@components/ScrollView/stories/ScrollViewHorizontalBreakout.twig' %}
 
-    {# ScrollView Scrolling Indicators #}
-    {% include '@components/ScrollView/stories/ScrollViewScrollingIndicators.twig' %}
+    {# ScrollView Overflow Decorators #}
+    {% include '@components/ScrollView/stories/ScrollViewOverflowDecorators.twig' %}
 
     {# ScrollView Hidden Scrollbar #}
     {% include '@components/ScrollView/stories/ScrollViewHiddenScrollbar.twig' %}

diff --git a/packages/web-twig/src/Resources/components/ScrollView/ScrollView.twig b/packages/web-twig/src/Resources/components/ScrollView/ScrollView.twig
@@ -1,14 +1,14 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _direction = props.direction | default('vertical') -%}
-{%- set _indicators = props.indicators | default('shadows') -%}
 {%- set _isScrollbarDisabled = props.isScrollbarDisabled | default(false) -%}
+{%- set _overflowDecorators = props.overflowDecorators | default('shadows') -%}
 
 {# Class names #}
 {%- set _contentClassName = _spiritClassPrefix ~ 'ScrollView__content' -%}
-{%- set _indicatorsClassName = _spiritClassPrefix ~ 'ScrollView__indicators' -%}
-{%- set _indicatorsShadowsClassName = _indicators in ['shadows', 'both'] ? _spiritClassPrefix ~ 'ScrollView__indicators--shadows' : null -%}
-{%- set _indicatorsBordersClassName = _indicators in ['borders', 'both'] ? _spiritClassPrefix ~ 'ScrollView__indicators--borders' : null -%}
+{%- set _overflowDecoratorsClassName = _spiritClassPrefix ~ 'ScrollView__overflowDecorators' -%}
+{%- set _overflowDecoratorsShadowsClassName = _overflowDecorators in ['shadows', 'both'] ? _spiritClassPrefix ~ 'ScrollView__overflowDecorators--shadows' : null -%}
+{%- set _overflowDecoratorsBordersClassName = _overflowDecorators in ['borders', 'both'] ? _spiritClassPrefix ~ 'ScrollView__overflowDecorators--borders' : null -%}
 {%- set _rootClassName = _spiritClassPrefix ~ 'ScrollView' -%}
 {%- set _rootDirectionClassName = _spiritClassPrefix ~ 'ScrollView--' ~ _direction -%}
 {%- set _rootScrollbarDisabledClassName = _isScrollbarDisabled ? _spiritClassPrefix ~ 'ScrollView--scrollbarDisabled' : '' -%}
@@ -17,7 +17,7 @@
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _rootDirectionClassName, _rootScrollbarDisabledClassName, _styleProps.className ] -%}
-{%- set _indicatorsClassNames = [ _indicatorsClassName, _indicatorsShadowsClassName, _indicatorsBordersClassName ] -%}
+{%- set _overflowDecoratorsClassNames = [ _overflowDecoratorsClassName, _overflowDecoratorsShadowsClassName, _overflowDecoratorsBordersClassName ] -%}
 {%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop is not same as('data-spirit-direction')) -%}
 
 <div
@@ -33,5 +33,5 @@
 
         </div>
     </div>
-    <div {{ classProp(_indicatorsClassNames) }} aria-hidden="true"></div>
+    <div {{ classProp(_overflowDecoratorsClassNames) }} aria-hidden="true"></div>
 </div>
diff --git a/...tories/ScrollViewScrollingIndicators.twig → ...stories/ScrollViewOverflowDecorators.twig b/...tories/ScrollViewScrollingIndicators.twig → ...stories/ScrollViewOverflowDecorators.twig
@@ -1,13 +1,13 @@
 <section class="docs-Section">
 
-    <h2 class="docs-Heading">Scrolling Indicators</h2>
+    <h2 class="docs-Heading">Overflow Decorators</h2>
 
     <h3>Borders</h3>
 
     <div class="mb-1000" style="height: 160px">
 
         <ScrollView
-            indicators="borders"
+            overflowDecorators="borders"
             data-toggle="scrollView"
         >
             <p>
@@ -19,7 +19,7 @@
 
     <ScrollView
         direction="horizontal"
-        indicators="borders"
+        overflowDecorators="borders"
         data-toggle="scrollView"
         UNSAFE_className="mb-1000"
     >
@@ -33,7 +33,7 @@
     <div class="mb-1000" style="height: 160px">
 
         <ScrollView
-            indicators="both"
+            overflowDecorators="both"
             data-toggle="scrollView"
         >
             <p>
@@ -45,7 +45,7 @@
 
     <ScrollView
         direction="horizontal"
-        indicators="both"
+        overflowDecorators="both"
         data-toggle="scrollView"
     >
         <p class="py-700" style="white-space: nowrap">

diff --git a/...s/__snapshots__/ComponentsSnapshotTest__test with data set scrollViewDefault.twig__1.html b/...s/__snapshots__/ComponentsSnapshotTest__test with data set scrollViewDefault.twig__1.html
@@ -12,7 +12,7 @@
         </div>
       </div>
 
-      <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true">
+      <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true">
       </div>
     </div>
     <!-- Render with horizontal direction -->
@@ -24,7 +24,7 @@
         </div>
       </div>
 
-      <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true">
+      <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true">
       </div>
     </div>
     <!-- Render with disabled Scrollbar -->
@@ -38,10 +38,10 @@
         </div>
       </div>
 
-      <div class="ScrollView__indicators ScrollView__indicators--shadows" aria-hidden="true">
+      <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows" aria-hidden="true">
       </div>
     </div>
-    <!-- Render with borders as indicators -->
+    <!-- Render with borders as overflow decorators -->
 
     <div data-toggle="scrollView" class="ScrollView ScrollView--vertical" data-spirit-direction="vertical">
       <div class="ScrollView__viewport" data-spirit-element="viewport">
@@ -52,10 +52,10 @@
         </div>
       </div>
 
-      <div class="ScrollView__indicators ScrollView__indicators--borders" aria-hidden="true">
+      <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true">
       </div>
     </div>
-    <!-- Render with both indicators and in horizontal direction -->
+    <!-- Render with both overflow decorators and in horizontal direction -->
 
     <div data-toggle="scrollView" class="ScrollView ScrollView--horizontal" data-spirit-direction="horizontal">
       <div class="ScrollView__viewport" data-spirit-element="viewport">
@@ -66,7 +66,7 @@
         </div>
       </div>
 
-      <div class="ScrollView__indicators ScrollView__indicators--shadows ScrollView__indicators--borders" aria-hidden="true">
+      <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows ScrollView__overflowDecorators--borders" aria-hidden="true">
       </div>
     </div>
     <!-- Render with all props -->
@@ -80,7 +80,7 @@
         </div>
       </div>
 
-      <div class="ScrollView__indicators ScrollView__indicators--borders" aria-hidden="true">
+      <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true">
       </div>
     </div>
   </body>

diff --git a/packages/web-twig/tests/components-fixtures/scrollViewDefault.twig b/packages/web-twig/tests/components-fixtures/scrollViewDefault.twig
@@ -10,22 +10,22 @@
     </p>
 </ScrollView>
 
-<!-- Render with borders as indicators -->
-<ScrollView indicators="borders" data-toggle="scrollView">
+<!-- Render with borders as overflow decorators -->
+<ScrollView overflowDecorators="borders" data-toggle="scrollView">
     <p>
         ScrollView content
     </p>
 </ScrollView>
 
-<!-- Render with both indicators and in horizontal direction -->
-<ScrollView direction="horizontal" indicators="both" data-toggle="scrollView">
+<!-- Render with both overflow decorators and in horizontal direction -->
+<ScrollView direction="horizontal" overflowDecorators="both" data-toggle="scrollView">
     <p>
         ScrollView content
     </p>
 </ScrollView>
 
 <!-- Render with all props -->
-<ScrollView direction="horizontal" indicators="borders" isScrollbarDisabled data-toggle="scrollView">
+<ScrollView direction="horizontal" overflowDecorators="borders" isScrollbarDisabled data-toggle="scrollView">
     <p>
         ScrollView content
     </p>