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>