From 9ef969b94d60e90f7214edd0971676ba2b1245b8 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 14 Aug 2023 10:16:47 -0400 Subject: [PATCH 1/4] docs: document event bubbles --- docs/reference/glossary.md | 15 +++++++++++++++ .../index.js | 6 +++--- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md index 0ac1a08c706..597b308c28e 100644 --- a/docs/reference/glossary.md +++ b/docs/reference/glossary.md @@ -67,6 +67,21 @@ title: Glossary

+
+ +

Event Bubbling

+ +

+ Bubbling is a way of propagating events in the DOM. With bubbling, the event is first captured by the innermost element and then propagated upwards. +

+

+ Many Ionic components emit events of the same name that also bubble. For example, ionChange is an event emitted by several components such as ion-radio-group, ion-input, and more. Developers can check the target property on the event to see the component that the event originated from. +

+

+ See MDN's Introduction to events guide for more information on bubbling. +

+
+

Bundling

diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index 25dec8d1441..9657ad16edd 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -155,9 +155,9 @@ function renderEvents({ events }) { } return ` -| Name | Description | -| --- | --- | -${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} |`).join('\n')} +| Name | Description | [Bubbles](../reference/glossary#event-bubbling) | +| --- | --- | -- | +${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} | ${event.bubbles ? 'Yes' : 'No'} |`).join('\n')} `; } From f8d2af75f97d2534a898ef0011a11c16fab32444 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 14 Aug 2023 10:27:13 -0400 Subject: [PATCH 2/4] lint --- docs/reference/glossary.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md index 597b308c28e..0aa79d254a9 100644 --- a/docs/reference/glossary.md +++ b/docs/reference/glossary.md @@ -72,13 +72,23 @@ title: Glossary

Event Bubbling

- Bubbling is a way of propagating events in the DOM. With bubbling, the event is first captured by the innermost element and then propagated upwards. + Bubbling is a way of propagating events in the DOM. With bubbling, the event is first captured by the innermost + element and then propagated upwards.

- Many Ionic components emit events of the same name that also bubble. For example, ionChange is an event emitted by several components such as ion-radio-group, ion-input, and more. Developers can check the target property on the event to see the component that the event originated from. + Many Ionic components emit events of the same name that also bubble. For example, ionChange is an event + emitted by several components such as ion-radio-group, ion-input, and more. Developers can + check the target property on the event to see the component that the event originated from.

- See MDN's Introduction to events guide for more information on bubbling. + See{' '} + + MDN's Introduction to events guide + {' '} + for more information on bubbling.

From 481be02abb3e7695ce0b67fc003772c9b7eaf0a6 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 14 Aug 2023 10:30:21 -0400 Subject: [PATCH 3/4] lint --- plugins/docusaurus-plugin-ionic-component-api/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index 9657ad16edd..bc3e67f43a6 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -157,7 +157,9 @@ function renderEvents({ events }) { return ` | Name | Description | [Bubbles](../reference/glossary#event-bubbling) | | --- | --- | -- | -${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} | ${event.bubbles ? 'Yes' : 'No'} |`).join('\n')} +${events + .map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} | ${event.bubbles ? 'Yes' : 'No'} |`) + .join('\n')} `; } From 34dad42a02a41a92d7f613aa0e67737746cc8eca Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 25 Apr 2024 14:20:02 -0400 Subject: [PATCH 4/4] rename to bubbling --- docs/reference/glossary.md | 6 +++--- plugins/docusaurus-plugin-ionic-component-api/index.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md index f698472fbd3..b0480f64c53 100644 --- a/docs/reference/glossary.md +++ b/docs/reference/glossary.md @@ -67,9 +67,9 @@ title: Glossary

-
- -

Event Bubbling

+
+ +

Bubbling

Bubbling is a way of propagating events in the DOM. With bubbling, the event is first captured by the innermost diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index e5e5674c249..68eae58eed0 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -168,7 +168,7 @@ function renderEvents({ events }) { } return ` -| Name | Description | [Bubbles](../reference/glossary#event-bubbling) | +| Name | Description | [Bubbles](../reference/glossary#bubbling) | | --- | --- | --- | ${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} | \`${event.bubbles}\` |`).join('\n')}`; }