remove toolbar & toolbar-target from readme (#36776)

ampproject · Nov 5, 2021 · 9e4482d · 9e4482d
1 parent 2e1aed7
commit 9e4482d
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 96 deletions.
diff --git a/extensions/amp-accordion/1.0/README.md b/extensions/amp-accordion/1.0/README.md
@@ -50,7 +50,7 @@ The example below contains an `bento-accordion` with three sections. The
   />
 </head>
 <body>
-  <bento-accordion id="my-accordion" disable-session-states>
+  <bento-accordion id="my-accordion">
     <section>
       <h2>Section 1</h2>
       <p>Content in section 1.</p>

diff --git a/extensions/amp-sidebar/1.0/README.md b/extensions/amp-sidebar/1.0/README.md
@@ -64,44 +64,6 @@ defineBentoSidebar();
 </body>
 ```
 
-### Bento Toolbar
-
-You can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` attribute with a media query and a `toolbar-target` attribute with an element id on a `<nav>` element that is a child of `<bento-sidebar>`. The `toolbar` duplicates the `<nav>` element and its children and appends the element into the `toolbar-target` element.
-
-#### Behavior
-
--   The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.
--   The nav element must be a child of `<bento-sidebar>` and follow this format: `<nav toolbar="(media-query)" toolbar-target="elementID">`.
-    -   For instance, this would be a valid use of toolbar: `<nav toolbar="(max-width: 1024px)" toolbar-target="target-element">`.
--   Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.
-
-##### Example: Basic Toolbar
-
-In the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id="target-element">` element.
-
-```html
-<bento-sidebar id="sidebar1" side="right">
-  <ul>
-    <li>Nav item 1</li>
-    <li>Nav item 2</li>
-    <li>Nav item 3</li>
-    <li>Nav item 4</li>
-    <li>Nav item 5</li>
-    <li>Nav item 6</li>
-  </ul>
-
-  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
-    <ul>
-      <li>
-        <input placeholder="Search..." />
-      </li>
-    </ul>
-  </nav>
-</bento-sidebar>
-
-<div id="target-element"></div>
-```
-
 ### Interactivity and API usage
 
 Bento enabled components used as a standalone web component are highly interactive through their API. The `bento-sidebar` component API is accessible by including the following script tag in your document:
@@ -197,14 +159,6 @@ Indicates what side of the page the sidebar should open from, either `left` or `
 
 This attribute is present when the sidebar is open.
 
-#### toolbar
-
-This attribute is present on child `<nav toolbar="(media-query)" toolbar-target="elementID">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.
-
-#### toolbar-target
-
-This attribute is present on child `<nav toolbar="(media-query)" toolbar-target="elementID">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.
-
 ---
 
 ## Preact/React Component
@@ -238,47 +192,6 @@ function App() {
 }
 ```
 
-### Bento Toolbar
-
-You can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` prop with a media query and a `toolbarTarget` prop with an element id on a `<BentoSidebarToolbar>` component that is a child of `<BentoSidebar>`. The `toolbar` duplicates the `<BentoSidebarToolbar>` element and its children and appends the element into the `toolbarTarget` element.
-
-#### Behavior
-
--   The sidebar may implement toolbars by adding nav elements with the `toolbar` prop and `toolbarTarget` prop.
--   The nav element must be a child of `<BentoSidebar>` and follow this format: `<BentoSidebarToolbar toolbar="(media-query)" toolbarTarget="elementID">`.
-    -   For instance, this would be a valid use of toolbar: `<BentoSidebarToolbar toolbar="(max-width: 1024px)" toolbarTarget="target-element">`.
--   Toolbar behavior is only applied while the `toolbar` prop media-query is valid. Also, an element with the `toolbarTarget` prop id must exist on the page for the toolbar to be applied.
-
-##### Example: Basic Toolbar
-
-In the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id="target-element">` element.
-
-```jsx
-<>
-  <BentoSidebar>
-    <ul>
-      <li>Nav item 1</li>
-      <li>Nav item 2</li>
-      <li>Nav item 3</li>
-      <li>Nav item 4</li>
-      <li>Nav item 5</li>
-      <li>Nav item 6</li>
-    </ul>
-    <BentoSidebarToolbar
-      toolbar="(max-width: 767px)"
-      toolbarTarget="target-element"
-    >
-      <ul>
-        <li>Toolbar Item 1</li>
-        <li>Toolbar Item 2</li>
-      </ul>
-    </BentoSidebarToolbar>
-  </BentoSidebar>
-
-  <div id="target-element"></div>
-</>
-```
-
 ### Interactivity and API usage
 
 Bento components are highly interactive through their API. The `BentoSidebar` component API is accessible by passing a `ref`:
@@ -391,11 +304,3 @@ For this reason, we recommend that affordances to open the sidebar are not place
 #### side
 
 Indicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.
-
-#### toolbar
-
-This prop is present on child `<BentoSidebarToolbar toolbar="(media-query)" toolbarTarget="elementID">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.
-
-#### toolbarTarget
-
-This attribute is present on child `<BentoSidebarToolbar toolbar="(media-query)" toolbarTarget="elementID">`, and accepts an id of an element on the page. The `toolbarTarget` prop will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.