Rename Selector and Option to BentoSelector and `BentoSelectorO…

…ption`. (#36188) * [`bento-selector`] Rename Selector and Option to BentoSelector and BentoSelectorOption. * [`bento-selector`] Update tests to use `BentoSelectorOption` instead of `Option`. * [`bento-selector`] Fix import order in base-element.js.
ampproject · Oct 11, 2021 · 3021ed0 · 3021ed0
1 parent 1033a9b
commit 3021ed0
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 107 deletions.
diff --git a/extensions/amp-selector/1.0/base-element.js b/extensions/amp-selector/1.0/base-element.js
@@ -13,7 +13,7 @@ import {PreactBaseElement} from '#preact/base-element';
 
 import {devAssert} from '#utils/log';
 
-import {Option, Selector} from './component';
+import {BentoSelector, BentoSelectorOption} from './component';
 
 export class BaseElement extends PreactBaseElement {
   /** @override */
@@ -112,15 +112,15 @@ function getOptions(element, mu) {
       if (selected) {
         value.push(option);
       }
-      const optionChild = <Option {...props} />;
+      const optionChild = <BentoSelectorOption {...props} />;
       options.push(option);
       children.push(optionChild);
     });
   return {value, children, options};
 }
 
 /**
- * @param {!SelectorDef.OptionProps} props
+ * @param {!BentoSelectorDef.OptionProps} props
  * @return {PreactDef.Renderable}
  */
 export function OptionShim({
@@ -174,7 +174,7 @@ export function OptionShim({
 }
 
 /**
- * @param {!SelectorDef.Props} props
+ * @param {!BentoSelectorDef.Props} props
  * @return {PreactDef.Renderable}
  */
 function SelectorShim({
@@ -251,7 +251,7 @@ function SelectorShim({
 }
 
 /** @override */
-BaseElement['Component'] = Selector;
+BaseElement['Component'] = BentoSelector;
 
 /** @override */
 BaseElement['detached'] = true;

diff --git a/extensions/amp-selector/1.0/component.js b/extensions/amp-selector/1.0/component.js
@@ -35,7 +35,7 @@ export const KEYBOARD_SELECT_MODE = {
 };
 
 /**
- * @param {!SelectorDef.Props} props
+ * @param {!BentoSelectorDef.Props} props
  * @param {{current: ?SelectorDef.SelectorApi}} ref
  * @return {PreactDef.Renderable}
  */
@@ -257,15 +257,15 @@ function SelectorWithRef(
   );
 }
 
-const Selector = forwardRef(SelectorWithRef);
-Selector.displayName = 'Selector'; // Make findable for tests.
-export {Selector};
+const BentoSelector = forwardRef(SelectorWithRef);
+BentoSelector.displayName = 'BentoSelector'; // Make findable for tests.
+export {BentoSelector};
 
 /**
  * @param {!SelectorDef.OptionProps} props
  * @return {PreactDef.Renderable}
  */
-export function Option({
+export function BentoSelectorOption({
   as: Comp = 'div',
   'class': className = '',
   disabled = false,

diff --git a/extensions/amp-selector/1.0/component.type.js b/extensions/amp-selector/1.0/component.type.js
@@ -1,7 +1,7 @@
 /** @externs */
 
 /** @const */
-var SelectorDef = {};
+var BentoSelectorDef = {};
 
 /**
  * @typedef {{
@@ -17,7 +17,7 @@ var SelectorDef = {};
  *   children: (?PreactDef.Renderable|undefined),
  * }}
  */
-SelectorDef.Props;
+BentoSelectorDef.Props;
 
 /**
  * Note: `index` must be a positive integer to use
@@ -35,7 +35,7 @@ SelectorDef.Props;
  *   style: (!Object|undefined),
  * }}
  */
-SelectorDef.OptionProps;
+BentoSelectorDef.OptionProps;
 
 /**
  * @typedef {{
@@ -48,10 +48,10 @@ SelectorDef.OptionProps;
  *   selectOption: (function(*):undefined|undefined),
  * }}
  */
-SelectorDef.ContextProps;
+BentoSelectorDef.ContextProps;
 
 /** @interface */
-SelectorDef.SelectorApi = class {
+BentoSelectorDef.SelectorApi = class {
   clear() {}
 
   /**

diff --git a/extensions/amp-selector/1.0/storybook/Basic.js b/extensions/amp-selector/1.0/storybook/Basic.js
@@ -3,10 +3,10 @@ import {select, withKnobs} from '@storybook/addon-knobs';
 import * as Preact from '#preact';
 import {useState} from '#preact';
 
-import {Option, Selector} from '../component';
+import {BentoSelector, BentoSelectorOption} from '../component';
 export default {
   title: 'Selector',
-  component: Selector,
+  component: BentoSelector,
   decorators: [withKnobs],
 };
 
@@ -32,16 +32,16 @@ function SelectorWithActions(props) {
       <button onClick={() => setShow(!show)}>
         toggle option 2.5 visibility
       </button>
-      <Selector ref={ref} {...props}>
+      <BentoSelector ref={ref} {...props}>
         {props.children.slice(0, 2)}
         {show && (
-          <Option as="div" option="2.5" index={2}>
+          <BentoSelectorOption as="div" option="2.5" index={2}>
             Option 2.5
-          </Option>
+          </BentoSelectorOption>
         )}
         <br />
         {props.children.slice(2)}
-      </Selector>
+      </BentoSelector>
       <div style={{marginTop: 8}}>
         <button onClick={() => ref.current./*OK*/ toggle('2')}>
           toggle(option "2")
@@ -81,76 +81,76 @@ export const actionsAndOrder = () => {
         name="poll"
         aria-label="Image menu"
       >
-        <Option
+        <BentoSelectorOption
           as="img"
           alt="Sea landscape"
           style={imgStyle}
           src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
           option="1"
           index={0}
           disabled
-        ></Option>
-        <Option
+        ></BentoSelectorOption>
+        <BentoSelectorOption
           as="img"
           alt="Desert landscape"
           style={imgStyle}
           src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
           option="2"
           index={1}
-        ></Option>
+        ></BentoSelectorOption>
         <br />
-        <Option
+        <BentoSelectorOption
           as="img"
           alt="Ship landscape"
           style={imgStyle}
           src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
           option="3"
           index={3}
-        ></Option>
-        <Option
+        ></BentoSelectorOption>
+        <BentoSelectorOption
           as="img"
           alt="Village landscape"
           style={imgStyle}
           src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
           option="4"
           index={4}
-        ></Option>
+        ></BentoSelectorOption>
       </SelectorWithActions>
     </form>
   );
 };
 
 export const optionItems = () => {
   return (
-    <Selector aria-label="Option menu">
-      <Option option="1">Option 1</Option>
-      <Option option="2">Option 2</Option>
-      <Option option="3">Option 3</Option>
-      <Option option="4">Option 4</Option>
-    </Selector>
+    <BentoSelector aria-label="Option menu">
+      <BentoSelectorOption option="1">Option 1</BentoSelectorOption>
+      <BentoSelectorOption option="2">Option 2</BentoSelectorOption>
+      <BentoSelectorOption option="3">Option 3</BentoSelectorOption>
+      <BentoSelectorOption option="4">Option 4</BentoSelectorOption>
+    </BentoSelector>
   );
 };
 
 export const multiselect = () => {
   return (
-    <Selector
+    <BentoSelector
       as="ul"
       multiple
       aria-label="Multiselect menu"
       defaultValue={['2']}
     >
-      <Option as="li" option="1">
+      <BentoSelectorOption as="li" option="1">
         Option 1
-      </Option>
-      <Option as="li" disabled option="2">
+      </BentoSelectorOption>
+      <BentoSelectorOption as="li" disabled option="2">
         Option 2 (disabled)
-      </Option>
-      <Option as="li" option="3">
+      </BentoSelectorOption>
+      <BentoSelectorOption as="li" option="3">
         Option 3
-      </Option>
-      <Option as="li" option="4">
+      </BentoSelectorOption>
+      <BentoSelectorOption as="li" option="4">
         Option 4
-      </Option>
-    </Selector>
+      </BentoSelectorOption>
+    </BentoSelector>
   );
 };