Rename insetArrowVisibility as controls (#31732)

extensions/amp-stream-gallery/1.0/amp-stream-gallery.js

@@ -107,12 +107,8 @@ AmpStreamGallery['children'] = {
 
 /** @override */
 AmpStreamGallery['props'] = {
+  'controls': {attr: 'controls', type: 'string', media: true},
   'extraSpace': {attr: 'extra-space', type: 'string', media: true},
-  'insetArrowVisibility': {
-    attr: 'inset-arrow-visibility',
-    type: 'string',
-    media: true,
-  },
   'loop': {attr: 'loop', type: 'boolean', media: true},
   'minItemWidth': {attr: 'min-item-width', type: 'number', media: true},
   'maxItemWidth': {attr: 'max-item-width', type: 'number', media: true},

extensions/amp-stream-gallery/1.0/storybook/Basic.amp.js

@@ -19,7 +19,7 @@ import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
 import {withA11y} from '@storybook/addon-a11y';
 import {withAmp} from '@ampproject/storybook-addon';
 
-const INSET_ARROW_VISIBILITY = ['auto', 'always', 'never'];
+const CONTROLS = ['auto', 'always', 'never'];
 
 export default {
   title: 'amp-stream-gallery-1_0',
@@ -35,10 +35,7 @@ export default {
 export const Default = () => {
   const slideCount = number('slide count', 15, {min: 3, max: 99});
   const extraSpace = boolean('extra space around?', true);
-  const insetArrowVisibility = select(
-    'inset arrow visibility',
-    INSET_ARROW_VISIBILITY
-  );
+  const controls = select('controls', CONTROLS);
   const loop = boolean('loop', true);
   const snap = boolean('snap', true);
   const slideAlign = select('slide align', ['start', 'center']);
@@ -56,8 +53,8 @@ export const Default = () => {
         width="735"
         height="225"
         layout="responsive"
+        controls={controls}
         extra-space={extraSpace}
-        inset-arrow-visibility={insetArrowVisibility}
         loop={loop}
         min-item-width={minItemWidth}
         max-item-width={maxItemWidth}

extensions/amp-stream-gallery/1.0/storybook/Basic.js

@@ -19,7 +19,7 @@ import {StreamGallery} from '../stream-gallery';
 import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
 import {withA11y} from '@storybook/addon-a11y';
 
-const INSET_ARROW_VISIBILITY = ['auto', 'always', 'never'];
+const CONTROLS = ['auto', 'always', 'never'];
 
 export default {
   title: 'StreamGallery',
@@ -52,10 +52,7 @@ export const _default = () => {
   const height = number('height', 225);
   const slideCount = number('slide count', 5, {min: 0, max: 99});
   const extraSpace = boolean('extra space around?', true);
-  const insetArrowVisibility = select(
-    'inset arrow visibility',
-    INSET_ARROW_VISIBILITY
-  );
+  const controls = select('controls', CONTROLS);
   const loop = boolean('loop', true);
   const snap = boolean('snap', true);
   const slideAlign = select('slide align', ['start', 'center']);
@@ -70,7 +67,7 @@ export const _default = () => {
     <>
       <CarouselWithActions
         extraSpace={extraSpace ? 'around' : ''}
-        insetArrowVisibility={insetArrowVisibility}
+        controls={controls}
         loop={loop}
         slideAlign={slideAlign}
         snap={snap}

extensions/amp-stream-gallery/1.0/stream-gallery.js

@@ -44,7 +44,6 @@ function StreamGalleryWithRef(props, ref) {
     children,
     className,
     extraSpace,
-    insetArrowVisibility,
     maxItemWidth = Number.MAX_VALUE,
     minItemWidth = 1,
     maxVisibleCount = Number.MAX_VALUE,
@@ -133,7 +132,6 @@ function StreamGalleryWithRef(props, ref) {
       className={`${className ?? ''} ${classes.gallery} ${
         extraSpace === 'around' ? classes.extraSpace : ''
       }`}
-      controls={insetArrowVisibility}
       outsetArrows={outsetArrows}
       snapAlign={slideAlign}
       ref={carouselRef}

extensions/amp-stream-gallery/1.0/stream-gallery.type.js

@@ -24,8 +24,8 @@ var StreamGalleryDef = {};
  *   arrowNext: (?PreactDef.VNode|undefined),
  *   arrowPrev: (?PreactDef.VNode|undefined),
  *   children: (!PreactDef.Renderable),
+ *   controls: (string|undefined),
  *   extraSpace: (string|undefined),
- *   insetArrowVisibility: (string|undefined),
  *   loop: (boolean|undefined),
  *   maxItemWidth: (number|undefined),
  *   minItemWidth: (number|undefined),

extensions/amp-stream-gallery/amp-stream-gallery.md

@@ -98,18 +98,18 @@ smaller, `defaultValue` is used.
 
 ### Behavior
 
-#### extra-space
-
-Either `"around"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `"around"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.
-
-#### inset-arrow-visibility
+#### controls
 
 Either `"always"`, `"auto"`, or `"never"`, defaults to `"auto"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `"always"`.
 
 -   `always`: Arrows are always displayed.
 -   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.
 -   `never`: Arrows are never displayed.
 
+#### extra-space
+
+Either `"around"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `"around"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.
+
 #### loop
 
 Either `true` or `false`, defaults to `true`. When true, the carousel will allow