From e26cc6154fe470ed3e9451c4511571b1c1d4e301 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 9 Apr 2024 09:16:51 -0400 Subject: [PATCH 1/2] docs(checkbox): add info for v8 --- docs/api/checkbox.md | 8 +++++ .../usage/v8/checkbox/label-link/angular.md | 3 ++ static/usage/v8/checkbox/label-link/demo.html | 24 +++++++++++++++ static/usage/v8/checkbox/label-link/index.md | 17 +++++++++++ .../v8/checkbox/label-link/javascript.md | 3 ++ static/usage/v8/checkbox/label-link/react.md | 29 +++++++++++++++++++ static/usage/v8/checkbox/label-link/vue.md | 14 +++++++++ 7 files changed, 98 insertions(+) create mode 100644 static/usage/v8/checkbox/label-link/angular.md create mode 100644 static/usage/v8/checkbox/label-link/demo.html create mode 100644 static/usage/v8/checkbox/label-link/index.md create mode 100644 static/usage/v8/checkbox/label-link/javascript.md create mode 100644 static/usage/v8/checkbox/label-link/react.md create mode 100644 static/usage/v8/checkbox/label-link/vue.md diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md index bcb053e5495..f7d46ebbb62 100644 --- a/docs/api/checkbox.md +++ b/docs/api/checkbox.md @@ -65,6 +65,14 @@ import Justify from '@site/static/usage/v8/checkbox/justify/index.md'; import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md'; + +## Links inside of Labels + +Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable. + +import LabelLink from '@site/static/usage/v8/checkbox/label-link/index.md'; + + ## Theming diff --git a/static/usage/v8/checkbox/label-link/angular.md b/static/usage/v8/checkbox/label-link/angular.md new file mode 100644 index 00000000000..34ec3baab77 --- /dev/null +++ b/static/usage/v8/checkbox/label-link/angular.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v8/checkbox/label-link/demo.html b/static/usage/v8/checkbox/label-link/demo.html new file mode 100644 index 00000000000..79dcce96004 --- /dev/null +++ b/static/usage/v8/checkbox/label-link/demo.html @@ -0,0 +1,24 @@ + + + + + + Checkbox + + + + + + + + + +
+ I agree to the terms and conditions +
+ + + + diff --git a/static/usage/v8/checkbox/label-link/index.md b/static/usage/v8/checkbox/label-link/index.md new file mode 100644 index 00000000000..c368f3c3747 --- /dev/null +++ b/static/usage/v8/checkbox/label-link/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/checkbox/label-link/javascript.md b/static/usage/v8/checkbox/label-link/javascript.md new file mode 100644 index 00000000000..0ba60cf12fc --- /dev/null +++ b/static/usage/v8/checkbox/label-link/javascript.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v8/checkbox/label-link/react.md b/static/usage/v8/checkbox/label-link/react.md new file mode 100644 index 00000000000..fa10eeb3ce8 --- /dev/null +++ b/static/usage/v8/checkbox/label-link/react.md @@ -0,0 +1,29 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + const ref = useRef(null); + + /** + * IonCheckbox will be listening for the native click event here so we need + * to call stopPropagation when the native click event instead of when the + * synthetic click event fires. + */ + useEffect(() => { + ref.current?.addEventListener('click', (event) => { + event.stopPropagation(); + }); + }, [ref]); + + return ( + + I agree to the{' '} + + terms and conditions + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/checkbox/label-link/vue.md b/static/usage/v8/checkbox/label-link/vue.md new file mode 100644 index 00000000000..7c4c44d77b5 --- /dev/null +++ b/static/usage/v8/checkbox/label-link/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` From 4e36a2a2d490ff23ba9c2e0cb702da17228a2adc Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 9 Apr 2024 09:19:47 -0400 Subject: [PATCH 2/2] docs(checkbox): add v7 example --- .../usage/v7/checkbox/label-link/angular.md | 3 ++ static/usage/v7/checkbox/label-link/demo.html | 24 +++++++++++++++ static/usage/v7/checkbox/label-link/index.md | 17 +++++++++++ .../v7/checkbox/label-link/javascript.md | 3 ++ static/usage/v7/checkbox/label-link/react.md | 29 +++++++++++++++++++ static/usage/v7/checkbox/label-link/vue.md | 14 +++++++++ versioned_docs/version-v7/api/checkbox.md | 8 +++++ 7 files changed, 98 insertions(+) create mode 100644 static/usage/v7/checkbox/label-link/angular.md create mode 100644 static/usage/v7/checkbox/label-link/demo.html create mode 100644 static/usage/v7/checkbox/label-link/index.md create mode 100644 static/usage/v7/checkbox/label-link/javascript.md create mode 100644 static/usage/v7/checkbox/label-link/react.md create mode 100644 static/usage/v7/checkbox/label-link/vue.md diff --git a/static/usage/v7/checkbox/label-link/angular.md b/static/usage/v7/checkbox/label-link/angular.md new file mode 100644 index 00000000000..34ec3baab77 --- /dev/null +++ b/static/usage/v7/checkbox/label-link/angular.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v7/checkbox/label-link/demo.html b/static/usage/v7/checkbox/label-link/demo.html new file mode 100644 index 00000000000..6dcb04f5d00 --- /dev/null +++ b/static/usage/v7/checkbox/label-link/demo.html @@ -0,0 +1,24 @@ + + + + + + Checkbox + + + + + + + + + +
+ I agree to the terms and conditions +
+ + + + diff --git a/static/usage/v7/checkbox/label-link/index.md b/static/usage/v7/checkbox/label-link/index.md new file mode 100644 index 00000000000..1e34eef6990 --- /dev/null +++ b/static/usage/v7/checkbox/label-link/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v7/checkbox/label-link/javascript.md b/static/usage/v7/checkbox/label-link/javascript.md new file mode 100644 index 00000000000..0ba60cf12fc --- /dev/null +++ b/static/usage/v7/checkbox/label-link/javascript.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v7/checkbox/label-link/react.md b/static/usage/v7/checkbox/label-link/react.md new file mode 100644 index 00000000000..fa10eeb3ce8 --- /dev/null +++ b/static/usage/v7/checkbox/label-link/react.md @@ -0,0 +1,29 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + const ref = useRef(null); + + /** + * IonCheckbox will be listening for the native click event here so we need + * to call stopPropagation when the native click event instead of when the + * synthetic click event fires. + */ + useEffect(() => { + ref.current?.addEventListener('click', (event) => { + event.stopPropagation(); + }); + }, [ref]); + + return ( + + I agree to the{' '} + + terms and conditions + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/checkbox/label-link/vue.md b/static/usage/v7/checkbox/label-link/vue.md new file mode 100644 index 00000000000..7c4c44d77b5 --- /dev/null +++ b/static/usage/v7/checkbox/label-link/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/versioned_docs/version-v7/api/checkbox.md b/versioned_docs/version-v7/api/checkbox.md index dd268c6dc7e..a68533490c8 100644 --- a/versioned_docs/version-v7/api/checkbox.md +++ b/versioned_docs/version-v7/api/checkbox.md @@ -67,6 +67,14 @@ import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md +## Links inside of Labels + +Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable. + +import LabelLink from '@site/static/usage/v7/checkbox/label-link/index.md'; + + + ## Theming ### CSS Custom Properties