Merge branch 'main' into translation/jp

ionic-team · Mar 21, 2023 · ab86fa0 · ab86fa0
2 parents 96677eb + 51dc415
commit ab86fa0
Show file tree

Hide file tree

Showing 97 changed files with 3,842 additions and 2,576 deletions.
diff --git a/docs/angular/slides.md b/docs/angular/slides.md
diff --git a/docs/api/alert.md b/docs/api/alert.md
@@ -142,6 +142,9 @@ interface AlertInput {
   name?: string;
   placeholder?: string;
   value?: any;
+  /**
+   * The label text to display next to the input, if the input type is `radio` or `checkbox`.
+   */
   label?: string;
   checked?: boolean;
   disabled?: boolean;

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
@@ -86,7 +86,7 @@ JSONオブジェクトやデータベース内でのシリアライズやパー
 12時間表示の時計では「00」は「午前12時」、「13」は「午後1時」、「23」は「午後3時」を意味します。
 
 :::note
-ISO 8601 datetime フォーマットで秒とミリ秒を指定することができますが、 `ion-datetime` は秒とミリ秒を選択するためのインターフェースを提供しません。秒やミリ秒の値が指定されても無視されます。
+秒、ミリ秒、タイムゾーンは ISO 8601 datetime フォーマットで指定できますが、 `ion-datetime` は秒、ミリ秒、タイムゾーンを選択するためのインターフェイスを提供しません。秒、ミリ秒、タイムゾーンの値を指定しても無視されます。
 :::
 
 ## 基本的な使い方

diff --git a/docs/react/slides.md b/docs/react/slides.md
@@ -1,5 +1,5 @@
 ---
-title: Slides
+title: Migrating From IonSlides to Swiper.js
 ---
 
 <head>
@@ -16,12 +16,13 @@ title: Slides
 
 :::
 
-:::note
-This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
-:::
+We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration.
 
+:::note
+Swiper's React component is set to be removed in a future release of Swiper, with <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet.
 
-We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration.
+Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework.
+:::
 
 ## Getting Started
 
@@ -34,7 +35,7 @@ npm install @ionic/react@latest @ionic/react-router@latest
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper@8
+npm install swiper@latest
 ```
 
 :::note
@@ -43,7 +44,7 @@ Create React App does not support pure ESM packages yet. Developers can still us
 
 ## Swiping with Style
 
-Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `ion-slides`.
+Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `IonSlides`.
 
 We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
 
@@ -64,13 +65,11 @@ export default Home;
 ```
 
 :::note
-Importing `@ionic/react/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+Importing `@ionic/react/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `IonSlides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
 :::
 
 :::note
-
 Not using Create React App? You can import the Swiper CSS from `swiper/css` instead.
-
 :::
 
 ### Updating Selectors
@@ -153,16 +152,14 @@ export default Home;
 ```
 
 :::note
-
 Not using Create React App? You can import the Swiper components from `swiper/react` instead.
-
 :::
 
 ## Using Modules
 
 By default, Swiper for React does not import any additional modules. To use modules such as Navigation or Pagination, you need to import them first.
 
-`ion-slides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
+`IonSlides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
 
 To begin, we need to import the modules and their corresponding CSS files from the `swiper` package:
 
@@ -197,9 +194,7 @@ export default Home;
 ```
 
 :::note
-
 Not using Create React App? You can import these modules from `swiper/css/[MODULE NAME]` instead (i.e. `swiper/css/autoplay`).
-
 :::
 
 From here, we need to provide these modules to Swiper by using the `modules` property on the `Swiper` component:
@@ -279,7 +274,7 @@ See <a href="https://swiperjs.com/react#usage" target="_blank" rel="noopener nor
 
 ## The IonicSlides Module
 
-With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic.
+With `IonSlides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic.
 
 We can install the `IonicSlides` module by importing it from `@ionic/react` and passing it in as the last item in the `modules` array:
 
@@ -428,7 +423,7 @@ Below is a full list of event name changes when going from `IonSlides` to Swiper
 | onIonSlidesDidLoad        | onInit                       |
 
 :::note
-All events available in Swiper React can be found at <a href="https://swiperjs.com/react#swiper-events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/react#swiper-events</a>.
+All events available in Swiper can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a>.
 :::
 
 ## Methods
@@ -460,7 +455,7 @@ From here, if you wanted to access a property on the Swiper instance you would a
 
 Below is a full list of method changes when going from `IonSlides` to Swiper React:
 
-| ion-slides Method  | Notes                                                                                |
+| IonSlides Method   | Notes                                                                                |
 | ------------------ | ------------------------------------------------------------------------------------ |
 | getActiveIndex()   | Use the `activeIndex` property instead.                                              |
 | getPreviousIndex() | Use the `previousIndex` property instead.                                            |
@@ -491,7 +486,7 @@ const Home: React.FC = () => {
   return (
     <IonPage>
       <IonContent>
-        <Swiper modules={[EffectFact, IonicSlides]}>
+        <Swiper modules={[EffectFade, IonicSlides]}>
           <SwiperSlide>Slide 1</SwiperSlide>
           <SwiperSlide>Slide 2</SwiperSlide>
           <SwiperSlide>Slide 3</SwiperSlide>
@@ -519,7 +514,7 @@ const Home: React.FC = () => {
   return (
     <IonPage>
       <IonContent>
-        <Swiper modules={[EffectFact, IonicSlides]}>
+        <Swiper modules={[EffectFade, IonicSlides]}>
           <SwiperSlide>Slide 1</SwiperSlide>
           <SwiperSlide>Slide 2</SwiperSlide>
           <SwiperSlide>Slide 3</SwiperSlide>
@@ -532,9 +527,7 @@ export default Home;
 ```
 
 :::note
-
 Not using Create React App? You can import these effects from `swiper/css/[EFFECT NAME]` instead (i.e. `swiper/css/effect-fade`).
-
 :::
 
 After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`:
@@ -553,7 +546,7 @@ const Home: React.FC = () => {
   return (
     <IonPage>
       <IonContent>
-        <Swiper modules={[EffectFact, IonicSlides]} swiper="fade">
+        <Swiper modules={[EffectFade, IonicSlides]} effect="fade">
           <SwiperSlide>Slide 1</SwiperSlide>
           <SwiperSlide>Slide 2</SwiperSlide>
           <SwiperSlide>Slide 3</SwiperSlide>

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
@@ -16,11 +16,11 @@ import TabItem from '@theme/TabItem';
 
 ## Overview
 
-Ionic Animations is a utility that allows developers to build complex animations in a platform agnostic manner. Developers do not need to be using a particular framework such as React or Angular, nor do they even need to be building an Ionic app. As long as developers have access to v5.0 or greater of Ionic Framework, they will have access to all of Ionic Animations.
+Ionic Animations is a tool that enables developers to create complex animations in a platform-agnostic manner, without requiring a specific framework or an Ionic app.
 
-Building efficient animations can be tricky. Developers are often limited by the libraries available to them as well as the hardware that their apps run on. On top of that, many animation libraries use a JavaScript-driven approach to running animations where they handle the calculation of your animation's values at every step in a `requestAnimationFrame` loop. This reduces the scalability of your animations as the library is constantly computing values and using up CPU time.
+Creating efficient animations can be challenging, as developers are limited by the available libraries and hardware resources of the device. Moreover, many animation libraries use a JavaScript-driven approach, which can reduce the scalability of animations and use up CPU time.
 
-Ionic Animations uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to build and run your animations. In doing this, we offload all work required to compute and run your animations to the browser. As a result, this allows the browser to make any optimizations it needs and ensures your animations run as smoothly as possible. While most browsers support a basic implementation of Web Animations, we fallback to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) for browsers that do not support Web Animations. The performance difference in switching between these two should typically be negligible.
+Ionic Animations, on the other hand, uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), which offloads all the computation and running of animations to the browser. This approach allows the browser to optimize the animations and ensure their smooth execution. In cases where Web Animations are not supported, Ionic Animations will fall back to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), which should have a negligible difference in performance.
 
 ## Installation
 
@@ -1535,30 +1535,37 @@ const animation = createAnimation('my-animation-identifier')
   .fromTo('opacity', '1', '0');
 ```
 
-## Browser Support
+## API
 
-| Browser/Platform | Supported Versions |
-| ---------------- | ------------------ |
-| **Chrome**       | 43+                |
-| **Safari**       | 9+                 |
-| **Firefox**      | 32+                |
-| **IE/Edge**      | 11+                |
-| **Opera**        | 30+                |
-| **iOS**          | 9+                 |
-| **Android**      | 5+                 |
+This section provides a list of all the methods and properties available on the `Animation` class.
+
+### Interfaces
+
+#### AnimationDirection
+
+```tsx
+type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+```
+
+#### AnimationFill
+
+```tsx
+type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
+```
+
+#### AnimationBuilder
+
+```tsx
+type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
+```
 
 :::note
-Due to a bug in Safari versions 9-11, stepping through animations via `progressStep` is not supported. This is supported on Safari 12+.
-:::
 
-## Types
+`opts` are additional options that are specific to the custom animation. For example, the sheet modal enter animation includes information for the current breakpoint.
 
-| Name                 | Value                                                         |
-| -------------------- | ------------------------------------------------------------- |
-| `AnimationDirection` | `'normal' \| 'reverse' \| 'alternate' \| 'alternate-reverse'` |
-| `AnimationFill`      | `'auto' \| 'none' \| 'forwards' \| 'backwards' \| 'both'`     |
+:::
 
-## Interfaces
+#### AnimationCallbackOptions
 
 ```tsx
 interface AnimationCallbackOptions {
@@ -1567,7 +1574,11 @@ interface AnimationCallbackOptions {
    */
   oneTimeCallback: boolean;
 }
+```
 
+#### AnimationPlayOptions
+
+```tsx
 interface AnimationPlayOptions {
   /**
    * If true, the animation will play synchronously.
@@ -1578,15 +1589,15 @@ interface AnimationPlayOptions {
 }
 ```
 
-## Properties
+### Properties
 
 | Name                           | Description                                       |
 | ------------------------------ | ------------------------------------------------- |
 | `childAnimations: Animation[]` | All child animations of a given parent animation. |
 | `elements: HTMLElement[]`      | All elements attached to an animation.            |
 | `parentAnimation?: Animation`  | The parent animation of a given animation object. |
 
-## Methods
+### Methods
 
 | Name                                                                                                                 | Description                                                                                                                                                                             |
 | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

diff --git a/docs/vue/slides.md b/docs/vue/slides.md
@@ -1,5 +1,5 @@
 ---
-title: Slides
+title: Migrating From ion-slides to Swiper.js
 ---
 
 <head>
@@ -11,17 +11,16 @@ title: Slides
 </head>
 
 :::caution Looking for `ion-slides`?
-
 `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
-
 :::
 
-:::note
-This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
-:::
+We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration.
 
+:::note
+Swiper's Vue component is set to be removed in a future release of Swiper, with <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing.
 
-We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration.
+Using Swiper's Vue component is **not** required to use Swiper.js with Ionic Framework.
+:::
 
 ## Getting Started
 
@@ -40,7 +39,7 @@ vue upgrade --next
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper@8
+npm install swiper@latest
 ```
 
 ## Swiping with Style
@@ -63,7 +62,7 @@ We recommend importing the styles in the component in which Swiper is being used
 ```
 
 :::note
-Importing `@ionic/vue/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+Importing `@ionic/vue/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
 :::
 
 ### Updating Selectors

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "@ionic/prettier-config": "^2.0.0",
     "@tsconfig/docusaurus": "^1.0.4",
     "@types/react": "^17.0.37",
+    "deepl": "^1.0.13",
     "html-loader": "^3.1.0",
     "prettier": "^2.5.0",
     "ts-node": "^10.4.0",

diff --git a/scripts/build-translate/deepl.config.json b/scripts/build-translate/deepl.config.json
@@ -0,0 +1,5 @@
+{
+  "fromLanguage": "EN",
+  "toLanguage": "JA",
+  "ulr": "https://www.deepl.com/docs-api"
+}