test(chip): update the basic preview

2026-03-13 10:22:08 +08:00 · 2024-06-28 16:07:11 -07:00
2 changed files with 115 additions and 78 deletions
--- a/core/scripts/testing/createPlayground.js
+++ b/core/scripts/testing/createPlayground.js
@@ -0,0 +1,74 @@
+export async function createPlayground(componentTag, propDefinitions, innerContent = '') {
+  const playground = document.createElement('div');
+  const form = document.createElement('form');
+  const preview = document.createElement('div');
+  preview.classList.add('preview');
+
+  function renderComponent(props) {
+    const component = document.createElement(componentTag);
+    Object.keys(props).forEach(propName => {
+      if (props[propName] !== undefined && props[propName] !== '') {
+        component.setAttribute(propName, props[propName]);
+      }
+    });
+
+    // Set inner HTML content if provided
+    if (innerContent) {
+      component.innerHTML = innerContent;
+    }
+
+    preview.innerHTML = '';
+    preview.appendChild(component);
+  }
+
+  propDefinitions.forEach(prop => {
+    const label = document.createElement('label');
+    const labelText = document.createElement('span');
+    labelText.textContent = `${prop.name}: `;
+
+    const input = document.createElement('input');
+    input.type = prop.type === 'boolean' ? 'checkbox' : 'text';
+    input.name = prop.name;
+    input.value = prop.defaultValue || '';
+
+    if (prop.type === 'boolean') {
+      input.checked = prop.defaultValue === 'true';
+    }
+
+    input.addEventListener('input', () => {
+      const formData = new FormData(form);
+      const props = {};
+
+      formData.forEach((value, key) => {
+        const field = form.elements[key];
+
+        if (field.type === 'checkbox') {
+          props[key] = field.checked;
+        } else {
+          props[key] = value;
+        }
+      });
+
+      renderComponent(props);
+    });
+
+    label.appendChild(labelText);
+    label.appendChild(input);
+    form.appendChild(label);
+    form.appendChild(document.createElement('br'));
+  });
+
+  playground.appendChild(preview);
+  // add a divider
+  playground.appendChild(document.createElement('hr'));
+  playground.appendChild(form);
+
+  // Initial render with default props
+  const defaultProps = Object.fromEntries(
+    propDefinitions.map(prop => [prop.name, prop.defaultValue || ''])
+  );
+
+  renderComponent(defaultProps);
+
+  return playground;
+}
--- a/core/src/components/chip/test/basic/index.html
+++ b/core/src/components/chip/test/basic/index.html
@@ -12,6 +12,21 @@
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .preview {
+        min-height: 50px;
+      }
+      label {
+        display: flex;
+        align-items: center;
+      }
+
+      label span {
+        min-width: 100px;
+        text-align: left;
+        margin-inline-end: 10px;
+      }
+    </style>
  </head>

  <body>
@@ -21,86 +36,34 @@
          <ion-title>Chip - Basic</ion-title>
        </ion-toolbar>
      </ion-header>
-
      <ion-content class="ion-padding" id="content" style="text-align: center">
-        <h2>Basic Chips</h2>
-        <ion-chip>
-          <ion-label>Default</ion-label>
-        </ion-chip>
-        <ion-chip style="border-radius: 4px">
-          <ion-label>Border Radius</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>With Icon</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-avatar>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-            />
-          </ion-avatar>
-          <ion-label>With Avatar</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-avatar>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-            />
-          </ion-avatar>
-          <ion-label>With Icon and Avatar</ion-label>
-          <ion-icon name="close-circle"></ion-icon>
-        </ion-chip>
-
-        <h2>Color Chips</h2>
-        <ion-chip color="primary">
-          <ion-label>Primary</ion-label>
-        </ion-chip>
-        <ion-chip color="danger">
-          <ion-label>Danger</ion-label>
-        </ion-chip>
-        <ion-chip color="tertiary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Tertiary with Icon</ion-label>
-        </ion-chip>
-        <ion-chip color="primary">
-          <ion-avatar>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-            />
-          </ion-avatar>
-          <ion-label>Primary with Avatar</ion-label>
-        </ion-chip>
-        <ion-chip color="success">
-          <ion-label>Success with Icon</ion-label>
-          <ion-icon name="calendar"></ion-icon>
-        </ion-chip>
-
-        <h2>Outline Chips</h2>
-        <ion-chip outline>
-          <ion-label>Outline</ion-label>
-        </ion-chip>
-        <ion-chip outline color="danger">
-          <ion-label>Danger Outline</ion-label>
-        </ion-chip>
-        <ion-chip outline color="secondary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Secondary Outline with Icon</ion-label>
-        </ion-chip>
-        <ion-chip outline color="primary">
-          <ion-label>Primary Outline with Avatar</ion-label>
-          <ion-avatar>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-            />
-          </ion-avatar>
-        </ion-chip>
-        <ion-chip outline>
-          <ion-icon name="git-pull-request"></ion-icon>
-          <ion-label>Outline with Icon and Avatar</ion-label>
-          <ion-icon name="close-circle"></ion-icon>
-        </ion-chip>
+        <div id="playground"></div>
      </ion-content>
    </ion-app>
+    <script type="module">
+      import { createPlayground } from '../../../../../scripts/testing/createPlayground.js';
+
+      const chipProps = [
+        {
+          name: 'color',
+          type: 'string',
+          description:
+            'The color to use from your application\'s color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".',
+          defaultValue: 'primary',
+        },
+        {
+          name: 'outline',
+          type: 'boolean',
+          description: 'If true, the chip will have a basic style.',
+          defaultValue: 'false',
+        },
+      ];
+
+      const innerContent = '<span>Hi</span>';
+
+      createPlayground('ion-chip', chipProps, innerContent).then((playground) => {
+        document.getElementById('playground').appendChild(playground);
+      });
+    </script>
  </body>
 </html>