Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Angular base has outdated files, which has lead to many duplicated files
within the versioned apps. Base files should always be the latest.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated base files to the latest
- Removed duplicate files from the versioned apps since base will
provide them
- Added files to the older versioned apps since they no longer align
with the latest files with base
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
N/A
Adds a new component `ion-input-otp` which provides the OTP input functionality
- Displays as an input group with multiple boxes accepting a single character
- Accepts `type` which determines whether the boxes accept numbers or text/numbers and determines the keyboard to display
- Supports changing the displayed keyboard using the `inputmode` property
- Accepts a `length` property to control the number of input boxes
- Accepts the following properties to change the design: `fill`, `shape`, `size`, `color`
- Accepts a `separators` property to show a separator between 1 or more input boxes
- Supports the `disabled`, `readonly` and invalid states
- Supports limiting the accepted input via the `pattern` property
- Emits the following events: `ionInput`, `ionChange`, `ionComplete`, `ionBlur`, `ionFocus`
- Exposes the following method: `setFocus`
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Shane <shane@shanessite.net>
Issue number: internal
---------
## What is the current behavior?
There are tests apps for Angular 16, 17 and 18
## What is the new behavior?
Adds a test app for Angular 19
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There is no documentation on how to use the input field in the
screenshots GH actions.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added steps and examples on how to specify a component within
screenshots GH actions.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
N/A
Remove a missed `!default` flag in the themes directory and update the
Sass variable guidelines docs to eliminate the `!default` flag from the
code examples, except for in the historic usage section which includes
examples from previous versions where the `!default` flag was used.
---------
Co-authored-by: Brandy Carney <brandy@ionic.io>
Issue number: internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
The `ion-button` component is used in several tests to navigate or show
overlays. This causes screenshot diffs in unrelated tests any time the
UI of the `ion-button` is updated.
## What is the new behavior?
Removes the `ion-button` elements from unrelated tests.
Did not remove the `ion-button`s from the following tests:
- All `ion-button`s in an `ion-buttons` component
- An `ion-button` inside of a menu
- breadcrumbs/test/basic (uses a clear button in a list header, needs to
be moved)
- input/test/slot
- item/test/buttons
- item/test/colors
- item/test/dividers
- item/test/inputs
- item/test/media
- list-header/test/basic
- ripple-effect/test/basic
- router/test/basic
- router/test/guards
- router-outlet/test/basic
- select/test/slot
- textarea/test/slot
Updates the icon/basic test to use the right icon names by comparing
against the v3 names: https://ionicframework.com/docs/v3/ionicons/
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: ionitron <hi@ionicframework.com>
This PR makes the following changes:
1. Clarifies when `.ion-focusable` should be used versus
`:focus-visible`.
2. Clarifies that `Locator` needs to be typecast when using
`Locator.spyOnEvent`.
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
If a dev wants to view a test page in dark mode, they have to manually
add the styles. This can lead to a slowdown. Plus they can't use
Playwright's `goto` to test both light and dark. In order to test dark
mode with Playwright, the dev would need to use `setContent` instead of
`goto`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Dark mode can be added to any page by appending `palette=dark` to the
URL.
- The param will be used to add a link tag with the correct palette
file.
- Playwright will load the correct palette file when a dev uses `goto`
and `{ themes: ['dark'] }`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
I recommend using badge to try this out. It already has a `goto` in the
basic tests.
Team members on Windows were having trouble running tests inside of
Docker. Given that headed tests must use WSL, I think it makes sense to
have Windows devs use WSL for any E2E tests run inside of Docker. That
way they aren't switching back and forth between shells.
This PR clarifies the Docker docs that instruct devs on how to use WSL.
Start your review here 👉
[docs/README.md](https://github.com/ionic-team/ionic-framework/blob/FW-6107/docs/README.md)
## What is the current behavior?
Documentation files with information on how to contribute, component
implementations, testing, etc. are scattered throughout various folders
in this repository.
## What is the new behavior?
Consolidates the documentation files into a root `docs/` directory for
easier discovery and organization.
`/docs` tree:
```
├── _config.yml
├── component-guide.md
├── CONTRIBUTING.md
├── README.md
├── sass-guidelines.md
├── angular
│ ├── README.md
│ └── testing.md
├── core
│ ├── README.md
│ └── testing
│ ├── README.md
│ ├── api.md
│ ├── best-practices.md
│ ├── preview-changes.md
│ └── usage-instructions.md
├── react
│ ├── README.md
│ └── testing.md
├── react-router
│ ├── README.md
│ └── testing.md
├── vue
│ ├── README.md
│ └── testing.md
└── vue-router
├── README.md
└── testing.md
```
**Migrates the following:**
| Previous Location | New Location |
| ----------------------------------------------------------- |
----------------------------------------- |
| `.github/COMPONENT-GUIDE.md` | `docs/component-guide.md` |
| `.github/CONTRIBUTING.md` | `docs/CONTRIBUTING.md` |
| `core/scripts/README.md` | `docs/core/testing/preview-changes.md` |
| `core/src/utils/test/playwright/docs/api.md` |
`docs/core/testing/api.md` |
| `core/src/utils/test/playwright/docs/best-practices.md` |
`docs/core/testing/best-practices.md` |
| `core/src/utils/test/playwright/docs/README.md` |
`docs/core/testing/README.md` |
| `core/src/utils/test/playwright/docs/usage-instructions.md` |
`docs/core/testing/usage-instructions.md` |
| `packages/angular/test/README.md` | `docs/angular/testing.md` |
| `packages/react-router/test/README.md` |
`docs/react-router/testing.md` |
| `packages/react/test/README.md` | `docs/react/testing.md` |
| `packages/react/test/base/README.md` | `docs/react/testing.md` |
| `packages/vue/test/README.md` | `docs/vue/testing.md` |
**Adds the following:**
| File | Description |
| ----------------------------- |
-----------------------------------------------------------------------
|
| `docs/sass-guidelines.md` | Sass Variable guidelines taken from
`ionic-framework-design-documents` |
| `docs/README.md` | Entry file that should link to all other files |
| `docs/_config.yml` | Config file for use with GitHub pages |
| `docs/core/README.md` | Description of core, links to contributing and
testing |
| `docs/angular/README.md` | Description of angular, links to
contributing and testing |
| `docs/react/README.md` | Description of react, links to contributing
and testing |
| `docs/react-router/README.md` | Description of react-router, links to
contributing and testing |
| `docs/vue/README.md` | Description of vue, links to contributing and
testing |
| `docs/vue-router/README.md` | Description of vue-router, links to
contributing and testing |
| `docs/vue-router/testing.md` | Testing file for vue-router, populated
from vue-router's main README |
**Does not** add any files for `angular-server`. This is because the
README is essentially empty and there is no testing in that directory. I
can add blank files if we want to have something to add to later.
**Does not** migrate the content of the packages' root `README.md`
files. These files are used for their npm package descriptions so we
should not edit them.
## Hosting Documentation
We can (and should) host these files using GitHub Pages. I have
duplicated them in a personal repository to see how this would look:
[docs-consolidation](https://brandyscarney.github.io/docs-consolidation/).
Doing so will require some formatting fixes (see [Sass
Guidelines](https://brandyscarney.github.io/docs-consolidation/sass-guidelines.html#-reusable-values))
so I did not publish them now but we can easily enable GitHub pages by
toggling a setting in this repository.
## Other information
- Verify that no documentation files were missed in the migration
- You can use these commands to search for `*.md` files in a directory:
- `find core/src -type f -name "*.md" -print`
- `find packages/angular -type f -name "*.md" -not -path
"**/node_modules/*" -print`
- I did add some redirect links in some of the existing markdown files
so they might still exist for that reason
- We should probably break up the contributing + component guide
documentation into smaller files, such as including best practices, but
I wanted to get everything in the same place first
- The contributing has sections on each of the packages that we could
move to that package's docs folder:
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#core
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Move the `docs/` directory into the `packages/` directory. This will
enable us to create a top level `docs/` folder for onboarding and
contributing guidelines. It will also be necessary when migrating to
pnpm.
---------
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
