fix(docs): update playgrounds to use v8 (#3381)

Author: brandyscarney

docs/developing/keyboard.md

@@ -27,7 +27,7 @@ For a list of accepted values, see the <a href="https://developer.mozilla.org/en
 
 ### Usage
 
-import Inputmode from '@site/static/usage/v7/keyboard/inputmode/index.md';
+import Inputmode from '@site/static/usage/v8/keyboard/inputmode/index.md';
 
 <Inputmode />
 
@@ -45,7 +45,7 @@ For a list of accepted values, see the <a href="https://html.spec.whatwg.org/dev
 
 ### Usage
 
-import Enterkeyhint from '@site/static/usage/v7/keyboard/enterkeyhint/index.md';
+import Enterkeyhint from '@site/static/usage/v8/keyboard/enterkeyhint/index.md';
 
 <Enterkeyhint />
 

docs/developing/managing-focus.md

@@ -35,7 +35,7 @@ There are platform restrictions you should be aware of when using the `setFocus`
 
 The example below demonstrates how to use the `setFocus` API to request focus on an input when the user clicks a button.
 
-import Basic from '@site/static/usage/v7/input/set-focus/index.md';
+import Basic from '@site/static/usage/v8/input/set-focus/index.md';
 
 <Basic />
 

docs/layout/dynamic-font-scaling.md

@@ -14,7 +14,7 @@ If you are testing on Chrome for Android, make sure ["Accessibility Page Zoom"](
 
 Follow the [Changing the Font Size on a Device](#changing-the-font-size-on-a-device) guide to set your preferred font size, and watch the text in the demo below grow or shrink according to your preferences.
 
-import DynamicFontScaling from '@site/static/usage/v7/layout/dynamic-font-scaling/index.md';
+import DynamicFontScaling from '@site/static/usage/v8/layout/dynamic-font-scaling/index.md';
 
 <DynamicFontScaling />
 

docs/layout/structure.md

@@ -22,31 +22,31 @@ Ionic Framework provides several different layouts that can be used to structure
 
 The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content.
 
-import Header from '@site/static/usage/v7/header/basic/index.md';
+import Header from '@site/static/usage/v8/header/basic/index.md';
 
 <Header />
 
 ### Footer
 
 While a toolbar in a header appears above the content, a footer appears below the content. A header and a footer can also be used together on the same page.
 
-import Footer from '@site/static/usage/v7/footer/basic/index.md';
+import Footer from '@site/static/usage/v8/footer/basic/index.md';
 
 <Footer />
 
 ## Tabs Layout
 
 A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md).
 
-import Tabs from '@site/static/usage/v7/tabs/router/index.md';
+import Tabs from '@site/static/usage/v8/tabs/router/index.md';
 
 <Tabs />
 
 ## Menu Layout
 
 A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
 
-import Menu from '@site/static/usage/v7/menu/basic/index.md';
+import Menu from '@site/static/usage/v8/menu/basic/index.md';
 
 <Menu />
 
@@ -58,6 +58,6 @@ By default, the split pane view will show when the screen is larger than `768px`
 
 It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.md), [router outlet](../api/router-outlet.md), or [tabs](../api/tabs.md).
 
-import SplitPane from '@site/static/usage/v7/split-pane/basic/index.md';
+import SplitPane from '@site/static/usage/v8/split-pane/basic/index.md';
 
 <SplitPane />

docs/theming/dark-mode.md

@@ -73,15 +73,15 @@ The demo below prioritizes the site's theme over the system settings. If your sy
 Not sure how to change the system settings? Here's [how to enable dark mode on Windows 11](https://support.microsoft.com/en-us/windows/change-colors-in-windows-d26ef4d6-819a-581c-1581-493cfcc005fe) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976).
 :::
 
-import AutomaticDarkMode from '@site/static/usage/v7/theming/automatic-dark-mode/index.md';
+import AutomaticDarkMode from '@site/static/usage/v8/theming/automatic-dark-mode/index.md';
 
 <AutomaticDarkMode />
 
 ### Manually Toggle Dark Mode
 
 In addition to adding the `dark` class to the `<body>` when the media query changes, the class can be added by the app, such as when a user changes a toggle, to switch between the light and dark themes:
 
-import ManualDarkMode from '@site/static/usage/v7/theming/manual-dark-mode/index.md';
+import ManualDarkMode from '@site/static/usage/v8/theming/manual-dark-mode/index.md';
 
 <ManualDarkMode />
 

docs/utilities/animations.md

@@ -162,7 +162,7 @@ In the example below, an animation that changes the opacity on the `ion-card` el
 
 By default, all Ionic Animations are paused until the `play` method is called.
 
-import Basic from '@site/static/usage/v7/animations/basic/index.md';
+import Basic from '@site/static/usage/v8/animations/basic/index.md';
 
 <Basic />
 
@@ -172,7 +172,7 @@ Ionic Animations allows you to control the intermediate steps in an animation us
 
 Hyphenated CSS properties should be written using camel case when writing keyframes. For example, `border-radius` should be written as `borderRadius`. This also applies to the `fromTo()`, `from(),` and `to()` methods.
 
-import Keyframes from '@site/static/usage/v7/animations/keyframes/index.md';
+import Keyframes from '@site/static/usage/v8/animations/keyframes/index.md';
 
 <Keyframes />
 
@@ -186,7 +186,7 @@ Multiple elements can be animated at the same time and controlled via a single p
 
 This example shows 3 child animations controlled by a single parent animation. Animations `cardA` and `cardB` inherit the parent animation's duration of 2000ms, but animation `cardC` has a duration of 5000ms since it was explicitly set.
 
-import Group from '@site/static/usage/v7/animations/group/index.md';
+import Group from '@site/static/usage/v8/animations/group/index.md';
 
 <Group />
 
@@ -198,15 +198,15 @@ This example sets an inline filter which inverts the background color of the car
 
 See [Methods](#methods) for a complete list of hooks.
 
-import BeforeAndAfterHooks from '@site/static/usage/v7/animations/before-and-after-hooks/index.md';
+import BeforeAndAfterHooks from '@site/static/usage/v8/animations/before-and-after-hooks/index.md';
 
 <BeforeAndAfterHooks />
 
 ## Chained Animations
 
 Animations can be chained to run one after the other. The `play` method returns a Promise that resolves when the animation has completed.
 
-import Chain from '@site/static/usage/v7/animations/chain/index.md';
+import Chain from '@site/static/usage/v8/animations/chain/index.md';
 
 <Chain />
 
@@ -216,7 +216,7 @@ Ionic Animations gives developers the ability to create powerful gesture-based a
 
 In the following example we are creating a track along which we can drag the card element. Our `animation` object will take care of moving the card element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
 
-import Gesture from '@site/static/usage/v7/animations/gesture/index.md';
+import Gesture from '@site/static/usage/v8/animations/gesture/index.md';
 
 <Gesture />
 
@@ -228,7 +228,7 @@ This method works in all supported browsers when creating animations for the fir
 
 Safari does not currently support dynamically updating keyframe animations. For developers who need this kind of support in Safari, they can use [MediaQueryList.addListener()](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener).
 
-import PreferenceBased from '@site/static/usage/v7/animations/preference-based/index.md';
+import PreferenceBased from '@site/static/usage/v8/animations/preference-based/index.md';
 
 <PreferenceBased />
 
@@ -238,7 +238,7 @@ Certain Ionic components allow developers to provide custom animations. All anim
 
 ### Modals
 
-import ModalOverride from '@site/static/usage/v7/animations/modal-override/index.md';
+import ModalOverride from '@site/static/usage/v8/animations/modal-override/index.md';
 
 <ModalOverride />
 

docs/utilities/gestures.md

@@ -162,15 +162,15 @@ const gesture = createGesture({
 
 ## Basic Gestures
 
-import Basic from '@site/static/usage/v7/gestures/basic/index.md';
+import Basic from '@site/static/usage/v8/gestures/basic/index.md';
 
 In this example, our app listens for gestures on the `ion-content` element. When a gesture movement has started, the `onStart` function is called and a class is added to our `ion-card` to add a colored box shadow. When a gesture movement was detected, the `onMove` function is called and our app prints the current gesture information within the `ion-card`. Finally, when a gesture movement has ended, the `onEnd` function is called and the custom class is removed from our `ion-card`.
 
 <Basic />
 
 ## Double Click Gesture
 
-import DoubleClick from '@site/static/usage/v7/gestures/double-click/index.md';
+import DoubleClick from '@site/static/usage/v8/gestures/double-click/index.md';
 
 In the example below, we want to be able to detect double clicks on an element. By setting our `threshold` to `0`, we can ensure our gesture object can detect clicks. Additionally, we define a click threshold so that only 2 clicks that occur in quick succession count as a double click.