javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 01:03:03 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ionic-framework/packages/vue
History
Brandy Carney 6bd446f681 refactor(select): remove legacy property and support for legacy syntax (#29024) 
Issue number: internal

---------

## What is the current behavior?

In Ionic Framework v7, we [simplified the select
syntax](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax)
so that it was no longer required to be placed inside of an `ion-item`.
We maintained backwards compatibility by adding a `legacy` property
which allowed it to continue to be styled properly when written in the
following way:

```html
<ion-item>
  <ion-label>Label</ion-label>
  <ion-select></ion-select>
</ion-item>
```

While this was supported in v7, console warnings were logged to notify
developers that they needed to update this syntax for the best
accessibility experience.

## What is the new behavior?

- Removes the `legacy` property and support for the legacy syntax.
Developers should follow the [migration
guide](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax)
in the select documentation to update their apps. The new syntax
requires a `label` or `aria-label` on `ion-select`:
    ```html
    <ion-item>
      <ion-select label="Label"></ion-select>
    </ion-item>
    ```
- Removes the legacy tests under under `select/test/legacy/` and all
related screenshots
- Removes the select usage from `item/test/disabled`,
`item/test/legacy/alignment`, and `item/test/legacy/disabled` and all
related screenshots if the test was removed

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

1. Developers have had console warnings when using the legacy syntax
since the v7 release. The migration guide for the new select syntax is
outlined in the [Select
documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).
2. This change has been documented in the Breaking Changes document with
a link to the migration guide.

BREAKING CHANGE:

The `legacy` property and support for the legacy syntax, which involved
placing an `ion-select` inside of an `ion-item` with an `ion-label`,
have been removed from select. For more information on migrating from
the legacy select syntax, refer to the [Select
documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2024-02-13 13:15:24 -05:00
..
scripts
feat(picker): add inline picker (#28689)
2023-12-13 13:03:58 -05:00
src
refactor(select): remove legacy property and support for legacy syntax (#29024)
2024-02-13 13:15:24 -05:00
test
refactor(angular, react, vue): add missing test app msg (#28951)
2024-02-01 17:04:58 +00:00
types
feat(slides): remove ion-slide, ion-slides, and IonicSwiper module (#25868)
2022-09-01 14:36:17 -05:00
.eslintignore
chore(vue): add eslint and prettier (#26635)
2023-01-18 18:29:25 -05:00
.eslintrc.js
chore(vue): add eslint and prettier (#26635)
2023-01-18 18:29:25 -05:00
.prettierignore
chore(vue): add eslint and prettier (#26635)
2023-01-18 18:29:25 -05:00
CHANGELOG.md
v7.7.1
2024-02-07 14:20:32 +00:00
package-lock.json
chore(): update package lock files
2024-02-07 14:21:09 +00:00
package.json
v7.7.1
2024-02-07 14:20:32 +00:00
README.md
docs(vue): update README instructions (#28175)
2023-09-14 16:20:51 +00:00
rollup.config.mjs
refactor: update to rollup 4 (#28459)
2023-11-07 15:21:46 +00:00
tsconfig.json
chore: packages do not explicitly run tsc (#28450)
2023-11-06 19:23:48 +00:00

README.md

@ionic/vue

Ionic Framework integration for Vue 3 apps.

Building

  1. Install dependencies in @ionic/core:
cd core && npm install
  1. Build @ionic/core. This will generate Vue component bindings in the packages/vue directory:
npm run build
  1. Install dependencies in @ionic/vue:
cd packages/vue && npm install
  1. Build @ionic/vue:
npm run build
  1. Install dependencies in @ionic/vue-router:
cd packages/vue-router && npm install
  1. Build @ionic/vue-router:
npm run build

Tests

  • E2E Tests are found in the packages/vue/test/base/tests directory and use Cypress.
  • When making changes to @ionic/vue or @ionic/vue-router you can run npm run sync in the test-app directory to ensure that the test application is using your built changes. Be sure to build in the vue and vue-router directories first.
  • Tests can be run in headless mode by running npm run cypress.
  • If you want to open the Cypress test runner, you can run node_modules/.bin/cypress open.
  • Bug fix and feature PRs should have new tests verifying the PR functionality.

Contributing

See our Contributing Guide.

Need Help?

Post your question on the Ionic Forum.