feat(many): update playgrounds to use showConsole prop instead of sho…

…wing data within demo (#3107)
ionic-team · Sep 7, 2023 · 288a265 · 288a265 · vercel · Sep 7, 2023
1 parent 134d538
commit 288a265
Show file tree

Hide file tree

Showing 101 changed files with 254 additions and 541 deletions.
diff --git a/static/usage/v7/accordion/listen-changes/angular/example_component_html.md b/static/usage/v7/accordion/listen-changes/angular/example_component_html.md
@@ -19,6 +19,4 @@
  <div class="ion-padding" slot="content">Third Content</div>
  </ion-accordion>
 </ion-accordion-group>
-
-<p #listenerOut></p>
 ```
diff --git a/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
@@ -1,27 +1,20 @@
 ```ts
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
- @ViewChild('listenerOut', { static: true }) listenerOut: ElementRef;
  private values: string[] = ['first', 'second', 'third'];
 
  accordionGroupChange = (ev: any) => {
- const nativeEl = this.listenerOut.nativeElement;
- if (!nativeEl) {
- return;
- }
-
  const collapsedItems = this.values.filter((value) => value !== ev.detail.value);
  const selectedValue = ev.detail.value;
 
- nativeEl.innerText = `
- Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
- Collapsed: ${collapsedItems.join(', ')}
- `;
+ console.log(
+ `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+ );
  };
 }
 ```
diff --git a/static/usage/v7/accordion/listen-changes/demo.html b/static/usage/v7/accordion/listen-changes/demo.html
@@ -8,11 +8,6 @@
  <script src="../../../common.js"></script>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
- <style>
- .container {
- flex-direction: column;
- }
- </style>
  </head>
 
  <body>
@@ -39,25 +34,23 @@
  <div class="ion-padding" slot="content">Third Content</div>
  </ion-accordion>
  </ion-accordion-group>
-
- <p class="listener-out"></p>
  </div>
  </ion-content>
  </ion-app>
 
  <script>
  const accordionGroup = document.querySelector('ion-accordion-group');
- const listenerOut = document.querySelector('.listener-out');
  const values = ['first', 'second', 'third'];
 
  accordionGroup.addEventListener('ionChange', (ev) => {
  const collapsedItems = values.filter((value) => value !== ev.detail.value);
  const selectedValue = ev.detail.value;
 
- listenerOut.innerText = `
- Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
- Collapsed: ${collapsedItems.join(', ')}
- `;
+ console.log(
+ `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
+ ', '
+ )}`
+ );
  });
  </script>
  </body>

diff --git a/static/usage/v7/accordion/listen-changes/index.md b/static/usage/v7/accordion/listen-changes/index.md
@@ -22,4 +22,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
  }}
  size="320px"
  src="usage/v7/accordion/listen-changes/demo.html"
+ showConsole={true}
 />
diff --git a/static/usage/v7/accordion/listen-changes/javascript.md b/static/usage/v7/accordion/listen-changes/javascript.md
@@ -20,21 +20,17 @@
  </ion-accordion>
 </ion-accordion-group>
 
-<p class="listener-out"></p>
-
 <script>
  const accordionGroup = document.querySelector('ion-accordion-group');
- const listenerOut = document.querySelector('.listener-out');
  const values = ['first', 'second', 'third'];
 
  accordionGroup.addEventListener('ionChange', (ev) => {
  const collapsedItems = values.filter((value) => value !== ev.detail.value);
  const selectedValue = ev.detail.value;
 
- listenerOut.innerText = `
- Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
- Collapsed: ${collapsedItems.join(', ')}
- `;
+ console.log(
+ `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+ );
  });
 </script>
 ```
diff --git a/static/usage/v7/accordion/listen-changes/react.md b/static/usage/v7/accordion/listen-changes/react.md
@@ -1,54 +1,44 @@
 ```tsx
-import React, { useRef } from 'react';
+import React from 'react';
 import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react';
 function Example() {
- const listenerOut = useRef<null | HTMLParagraphElement>(null);
  const values = ['first', 'second', 'third'];
  const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
- const nativeEl = listenerOut.current;
- if (!nativeEl) {
- return;
- }
-
  const collapsedItems = values.filter((value) => value !== ev.detail.value);
  const selectedValue = ev.detail.value;
 
- nativeEl.innerText = `
- Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
- Collapsed: ${collapsedItems.join(', ')}
- `;
+ console.log(
+ `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+ );
  };
 
  return (
- <>
- <IonAccordionGroup onIonChange={accordionGroupChange}>
- <IonAccordion value="first">
- <IonItem slot="header" color="light">
- <IonLabel>First Accordion</IonLabel>
- </IonItem>
- <div className="ion-padding" slot="content">
- First Content
- </div>
- </IonAccordion>
- <IonAccordion value="second">
- <IonItem slot="header" color="light">
- <IonLabel>Second Accordion</IonLabel>
- </IonItem>
- <div className="ion-padding" slot="content">
- Second Content
- </div>
- </IonAccordion>
- <IonAccordion value="third">
- <IonItem slot="header" color="light">
- <IonLabel>Third Accordion</IonLabel>
- </IonItem>
- <div className="ion-padding" slot="content">
- Third Content
- </div>
- </IonAccordion>
- </IonAccordionGroup>
- <p ref={listenerOut}></p>
- </>
+ <IonAccordionGroup onIonChange={accordionGroupChange}>
+ <IonAccordion value="first">
+ <IonItem slot="header" color="light">
+ <IonLabel>First Accordion</IonLabel>
+ </IonItem>
+ <div className="ion-padding" slot="content">
+ First Content
+ </div>
+ </IonAccordion>
+ <IonAccordion value="second">
+ <IonItem slot="header" color="light">
+ <IonLabel>Second Accordion</IonLabel>
+ </IonItem>
+ <div className="ion-padding" slot="content">
+ Second Content
+ </div>
+ </IonAccordion>
+ <IonAccordion value="third">
+ <IonItem slot="header" color="light">
+ <IonLabel>Third Accordion</IonLabel>
+ </IonItem>
+ <div className="ion-padding" slot="content">
+ Third Content
+ </div>
+ </IonAccordion>
+ </IonAccordionGroup>
  );
 }
 export default Example;

diff --git a/static/usage/v7/accordion/listen-changes/vue.md b/static/usage/v7/accordion/listen-changes/vue.md
@@ -20,13 +20,11 @@
  <div class="ion-padding" slot="content">Third Content</div>
  </ion-accordion>
  </ion-accordion-group>
-
- <p ref="listenerOut"></p>
 </template>
 
 <script lang="ts">
  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { defineComponent } from 'vue';
 
  export default defineComponent({
  components: {
@@ -36,22 +34,19 @@
  IonLabel,
  },
  setup() {
- const listenerOut = ref(null);
  const values = ['first', 'second', 'third'];
  const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
- if (!listenerOut.value) {
- return;
- }
-
  const collapsedItems = values.filter((value) => value !== ev.detail.value);
  const selectedValue = ev.detail.value;
 
- listenerOut.value.innerText = `
- Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
- Collapsed: ${collapsedItems.join(', ')}
- `;
+ console.log(
+ `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
+ ', '
+ )}`
+ );
  };
- return { listenerOut, accordionGroupChange };
+
+ return { accordionGroupChange };
  },
  });
 </script>

diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md
@@ -6,8 +6,4 @@
  flex-direction: column;
  height: 100%;
 }
-
-code {
- white-space: pre-wrap;
-}
 ```
diff --git a/...ic/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md b/...ic/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md
@@ -6,9 +6,7 @@
  header="Example header"
  subHeader="Example subheader"
  [buttons]="actionSheetButtons"
- (didDismiss)="setResult($event)"
+ (didDismiss)="logResult($event)"
  ></ion-action-sheet>
-
- <code *ngIf="result">{{ result }}</code>
 </div>
 ```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
@@ -7,7 +7,6 @@ import { Component } from '@angular/core';
  styleUrls: ['./example.component.css'],
 })
 export class ExampleComponent {
- result: string;
  public actionSheetButtons = [
  {
  text: 'Delete',
@@ -33,8 +32,8 @@ export class ExampleComponent {
 
  constructor() {}
 
- setResult(ev) {
- this.result = JSON.stringify(ev.detail, null, 2);
+ logResult(ev) {
+ console.log(JSON.stringify(ev.detail, null, 2));
  }
 }
 ```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
@@ -13,10 +13,6 @@
  .container {
  flex-direction: column;
  }
-
- code {
- white-space: pre-wrap;
- }
  </style>
  </head>
 
@@ -30,14 +26,11 @@
  header="Example header"
  sub-header="Example subheader"
  ></ion-action-sheet>
-
- <code id="action"></code>
  </div>
  </ion-content>
  </ion-app>
  <script>
  const actionSheet = document.querySelector('ion-action-sheet');
- const action = document.getElementById('action');
 
  actionSheet.buttons = [
  {
@@ -63,7 +56,7 @@
  ];
 
  actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
- action.innerText = JSON.stringify(ev.detail, null, 2);
+ console.log(JSON.stringify(ev.detail, null, 2));
  });
  </script>
  </body>

diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/index.md b/static/usage/v7/action-sheet/role-info-on-dismiss/index.md
@@ -32,4 +32,5 @@ import angular_example_component_css from './angular/example_component_css.md';
  }}
  src="usage/v7/action-sheet/role-info-on-dismiss/demo.html"
  devicePreview
+ showConsole
 />
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md b/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
@@ -7,10 +7,6 @@
  height: 100%;
  flex-direction: column;
  }
-
- code {
- white-space: pre-wrap;
- }
 </style>
 
 <div class="container">
@@ -20,13 +16,10 @@
  header="Example header"
  sub-header="Example subheader"
  ></ion-action-sheet>
-
- <code id="action"></code>
 </div>
 
 <script>
  var actionSheet = document.querySelector('ion-action-sheet');
- var action = document.getElementById('action');
 
  actionSheet.buttons = [
  {
@@ -52,7 +45,7 @@
  ];
 
  actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
- action.innerText = JSON.stringify(ev.detail, null, 2);
+ console.log(JSON.stringify(ev.detail, null, 2));
  });
 </script>
 ```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md
@@ -6,8 +6,4 @@
  flex-direction: column;
  height: 100%;
 }
-
-code {
- white-space: pre-wrap;
-}
 ```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md
@@ -1,12 +1,14 @@
 ```tsx
-import React, { useState } from 'react';
+import React from 'react';
 import { IonActionSheet, IonButton } from '@ionic/react';
 import type { OverlayEventDetail } from '@ionic/core';
 
 import './main.css';
 
 function Example() {
- const [result, setResult] = useState<OverlayEventDetail>();
+ const logResult = (result: OverlayEventDetail) => {
+ console.log(JSON.stringify(result, null, 2));
+ };
 
  return (
  <div className="container">
@@ -37,10 +39,8 @@ function Example() {
  },
  },
  ]}
- onDidDismiss={({ detail }) => setResult(detail)}
+ onDidDismiss={({ detail }) => logResult(detail)}
  ></IonActionSheet>
-
- {result && <code>{JSON.stringify(result, null, 2)}</code>}
  </div>
  );
 }