Compare commits
62 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
95daa05a49 | ||
|
|
a57be0941d | ||
|
|
9e7c9a5934 | ||
|
|
e93941ffa3 | ||
|
|
2e9fee8ed8 | ||
|
|
6f42c29250 | ||
|
|
0decc7770d | ||
|
|
1674211ce7 | ||
|
|
fb445322c3 | ||
|
|
2220d83d32 | ||
|
|
adf220b681 | ||
|
|
e64015a609 | ||
|
|
3d9871a77f | ||
|
|
e91fee4f2d | ||
|
|
b315b0cb29 | ||
|
|
7b6c330f17 | ||
|
|
7ce115993a | ||
|
|
77c67f2362 | ||
|
|
b3cd49bf22 | ||
|
|
a8c06c118e | ||
|
|
19f7be8877 | ||
|
|
1c4b6bd8f2 | ||
|
|
6c36cef241 | ||
|
|
17f5be1edd | ||
|
|
4d6edee89c | ||
|
|
6945adc3cc | ||
|
|
90a7e70a1c | ||
|
|
0f5d1c02d2 | ||
|
|
4b79bbef7d | ||
|
|
ac7631a324 | ||
|
|
b5cb828861 | ||
|
|
efdaf38520 | ||
|
|
101ad5402f | ||
|
|
de35fa8b94 | ||
|
|
c766528a17 | ||
|
|
b11c630410 | ||
|
|
9b3cf9fbc2 | ||
|
|
ee5da7a747 | ||
|
|
c4bfc783e0 | ||
|
|
0137e732ce | ||
|
|
88ecb29e39 | ||
|
|
f726c35868 | ||
|
|
4a9d84ecbd | ||
|
|
f08759c2b8 | ||
|
|
2053bc77a6 | ||
|
|
5234224700 | ||
|
|
02e05bd7cb | ||
|
|
fa387cb2a2 | ||
|
|
8ab116150c | ||
|
|
8c9182c52f | ||
|
|
c0a8e7a95d | ||
|
|
0c5a2967d8 | ||
|
|
6ebb3c4e38 | ||
|
|
cdcb6decbd | ||
|
|
652ea169b7 | ||
|
|
42c09a7ea1 | ||
|
|
c23be1befd | ||
|
|
a2923aaeb3 | ||
|
|
eeab96de55 | ||
|
|
ca0923812a | ||
|
|
1be956bd18 | ||
|
|
8ad66c03d7 |
66
.github/CODEOWNERS
vendored
@@ -13,73 +13,7 @@
|
||||
|
||||
* @ionic-team/framework
|
||||
|
||||
# Frameworks
|
||||
|
||||
## Angular
|
||||
|
||||
/packages/angular/ @sean-perkins @thetaPC
|
||||
/packages/angular-server @sean-perkins @thetaPC
|
||||
/packages/angular/test @thetaPC
|
||||
|
||||
## React
|
||||
|
||||
/packages/react/ @amandaejohnston
|
||||
/packages/react-router @amandaejohnston
|
||||
/packages/react/test-app/
|
||||
/packages/react-router/test-app/
|
||||
|
||||
## Vue
|
||||
|
||||
/packages/vue/ @liamdebeasi @thetaPC
|
||||
/packages/vue-router/ @liamdebeasi @thetaPC
|
||||
/packages/vue/test/ @thetaPC
|
||||
/packages/vue-router/__tests__ @thetaPC
|
||||
|
||||
# Components
|
||||
|
||||
/core/src/components/accordion/ @liamdebeasi
|
||||
/core/src/components/accordion-group/ @liamdebeasi
|
||||
|
||||
/core/src/components/checkbox/ @amandaejohnston
|
||||
|
||||
/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
|
||||
/core/src/components/datetime-button/ @liamdebeasi
|
||||
|
||||
/core/src/components/item/ @brandyscarney
|
||||
|
||||
/core/src/components/menu/ @amandaejohnston
|
||||
/core/src/components/menu-toggle/ @amandaejohnston
|
||||
|
||||
/core/src/components/nav/ @sean-perkins
|
||||
/core/src/components/nav-link/ @sean-perkins
|
||||
|
||||
/core/src/components/picker/ @liamdebeasi
|
||||
/core/src/components/picker-column/ @liamdebeasi
|
||||
|
||||
/core/src/components/radio/ @amandaejohnston
|
||||
/core/src/components/radio-group/ @amandaejohnston
|
||||
|
||||
/core/src/components/refresher/ @liamdebeasi
|
||||
/core/src/components/refresher-content/ @liamdebeasi
|
||||
|
||||
/core/src/components/searchbar/ @brandyscarney
|
||||
|
||||
/core/src/components/segment/ @brandyscarney
|
||||
/core/src/components/segment-button/ @brandyscarney
|
||||
|
||||
/core/src/components/skeleton-text/ @brandyscarney
|
||||
|
||||
# Utilities
|
||||
|
||||
/core/src/utils/animation/ @liamdebeasi
|
||||
/core/src/utils/content/ @sean-perkins
|
||||
/core/src/utils/gesture/ @liamdebeasi
|
||||
/core/src/utils/input-shims/ @liamdebeasi
|
||||
/core/src/utils/keyboard/ @liamdebeasi
|
||||
/core/src/utils/logging/ @amandaejohnston
|
||||
/core/src/utils/sanitization/ @liamdebeasi
|
||||
/core/src/utils/tap-click/ @liamdebeasi
|
||||
/core/src/utils/transition/ @liamdebeasi
|
||||
|
||||
/core/src/css/ @brandyscarney
|
||||
/core/src/themes/ @brandyscarney
|
||||
|
||||
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -25,7 +25,7 @@ Issue number: resolves #
|
||||
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.
|
||||
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.
|
||||
-->
|
||||
|
||||
|
||||
|
||||
@@ -29,4 +29,4 @@ runs:
|
||||
with:
|
||||
name: ionic-core
|
||||
output: core/CoreBuild.zip
|
||||
paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
|
||||
paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts
|
||||
|
||||
@@ -31,4 +31,4 @@ runs:
|
||||
with:
|
||||
name: ionic-core
|
||||
output: core/CoreBuild.zip
|
||||
paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
|
||||
paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
|
||||
|
||||
2
.github/workflows/assign-issues.yml
vendored
@@ -13,6 +13,6 @@ jobs:
|
||||
- name: 'Auto-assign issue'
|
||||
uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
|
||||
with:
|
||||
assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
|
||||
assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
|
||||
numOfAssignee: 1
|
||||
allowSelfAssign: false
|
||||
|
||||
8
.github/workflows/release-ionic.yml
vendored
@@ -41,8 +41,8 @@ jobs:
|
||||
uses: ./.github/workflows/actions/upload-archive
|
||||
with:
|
||||
name: ionic-docs
|
||||
output: docs/DocsBuild.zip
|
||||
paths: docs/core.json docs/core.d.ts
|
||||
output: packages/docs/DocsBuild.zip
|
||||
paths: packages/docs/core.json packages/docs/core.d.ts
|
||||
|
||||
release-docs:
|
||||
needs: [release-core]
|
||||
@@ -53,7 +53,7 @@ jobs:
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-docs
|
||||
path: ./docs
|
||||
path: ./packages/docs
|
||||
filename: DocsBuild.zip
|
||||
- uses: ./.github/workflows/actions/publish-npm
|
||||
with:
|
||||
@@ -61,7 +61,7 @@ jobs:
|
||||
tag: ${{ inputs.tag }}
|
||||
version: ${{ inputs.version }}
|
||||
preid: ${{ inputs.preid }}
|
||||
working-directory: 'docs'
|
||||
working-directory: 'packages/docs'
|
||||
token: ${{ secrets.NPM_TOKEN }}
|
||||
|
||||
release-angular:
|
||||
|
||||
61
CHANGELOG.md
@@ -3,6 +3,67 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
|
||||
## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
|
||||
* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
|
||||
|
||||
**Note:** Version bump only for package ionic-framework
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** schematics account for new theme files ([#29185](https://github.com/ionic-team/ionic-framework/issues/29185)) ([b0a10df](https://github.com/ionic-team/ionic-framework/commit/b0a10dfa56a65ee3905cc2c3d48d2221a42f222f))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **haptics:** remove cordova haptics support ([#29186](https://github.com/ionic-team/ionic-framework/issues/29186)) ([9efeb0a](https://github.com/ionic-team/ionic-framework/commit/9efeb0ad31aadee5f5ae542641d928ecf93fe82a))
|
||||
* **searchbar:** autocapitalize defaults to off ([#29107](https://github.com/ionic-team/ionic-framework/issues/29107)) ([6e477b7](https://github.com/ionic-team/ionic-framework/commit/6e477b743e41b2b37627c8208901704f599b762a))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **button:** add circular shape as round ([#29161](https://github.com/ionic-team/ionic-framework/issues/29161)) ([44529f0](https://github.com/ionic-team/ionic-framework/commit/44529f0a62f1b1ce42750a20f19e829b2789febd))
|
||||
* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172))
|
||||
* remove css animations support for ionic animations ([#29123](https://github.com/ionic-team/ionic-framework/issues/29123)) ([892594d](https://github.com/ionic-team/ionic-framework/commit/892594de0665e8fc5c8a737d292812842ea03d64))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **searchbar:** The `autocapitalize` property on Searchbar now defaults to `'off'`.
|
||||
* **haptics:** Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-03-20)
|
||||
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<a href="https://github.com/ionic-team/ionic-framework/blob/main/LICENSE">
|
||||
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Ionic Framework is released under the MIT license." />
|
||||
</a>
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">
|
||||
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
||||
</a>
|
||||
<a href="https://twitter.com/Ionicframework">
|
||||
@@ -38,7 +38,7 @@
|
||||
Documentation
|
||||
</a>
|
||||
<span> · </span>
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">Contribute</a>
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">Contribute</a>
|
||||
<span> · </span>
|
||||
<a href="https://blog.ionicframework.com/">Blog</a>
|
||||
<br />
|
||||
@@ -88,7 +88,7 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin
|
||||
### Contributing
|
||||
|
||||
Thanks for your interest in contributing! Read up on our guidelines for
|
||||
[contributing](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md)
|
||||
[contributing](https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md)
|
||||
and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
|
||||
label.
|
||||
|
||||
|
||||
@@ -23,10 +23,10 @@ rules:
|
||||
at-rule-empty-line-before:
|
||||
- always
|
||||
- except:
|
||||
- blockless-after-blockless
|
||||
- first-nested
|
||||
- blockless-after-blockless
|
||||
- first-nested
|
||||
ignore:
|
||||
- after-comment
|
||||
- after-comment
|
||||
|
||||
block-closing-brace-newline-before:
|
||||
- always
|
||||
@@ -40,14 +40,13 @@ rules:
|
||||
custom-property-empty-line-before:
|
||||
- always
|
||||
- except:
|
||||
- after-comment
|
||||
- after-custom-property
|
||||
- first-nested
|
||||
- after-comment
|
||||
- after-custom-property
|
||||
- first-nested
|
||||
|
||||
declaration-no-important:
|
||||
- true
|
||||
|
||||
|
||||
order/order:
|
||||
- custom-properties
|
||||
- dollar-variables
|
||||
@@ -57,216 +56,212 @@ rules:
|
||||
|
||||
# https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
|
||||
order/properties-order:
|
||||
|
||||
# Box
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- display
|
||||
- position
|
||||
- top
|
||||
- right
|
||||
- bottom
|
||||
- left
|
||||
- display
|
||||
- position
|
||||
- top
|
||||
- right
|
||||
- bottom
|
||||
- left
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- flex
|
||||
- flex-basis
|
||||
- flex-direction
|
||||
- flex-flow
|
||||
- flex-grow
|
||||
- flex-shrink
|
||||
- flex-wrap
|
||||
- align-content
|
||||
- align-items
|
||||
- align-self
|
||||
- justify-content
|
||||
- order
|
||||
- flex
|
||||
- flex-basis
|
||||
- flex-direction
|
||||
- flex-flow
|
||||
- flex-grow
|
||||
- flex-shrink
|
||||
- flex-wrap
|
||||
- align-content
|
||||
- align-items
|
||||
- align-self
|
||||
- justify-content
|
||||
- order
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- width
|
||||
- min-width
|
||||
- max-width
|
||||
- width
|
||||
- min-width
|
||||
- max-width
|
||||
|
||||
- height
|
||||
- min-height
|
||||
- max-height
|
||||
- height
|
||||
- min-height
|
||||
- max-height
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- margin
|
||||
- margin-top
|
||||
- margin-right
|
||||
- margin-bottom
|
||||
- margin-left
|
||||
- margin
|
||||
- margin-top
|
||||
- margin-right
|
||||
- margin-bottom
|
||||
- margin-left
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- padding
|
||||
- padding-top
|
||||
- padding-right
|
||||
- padding-bottom
|
||||
- padding-left
|
||||
- padding
|
||||
- padding-top
|
||||
- padding-right
|
||||
- padding-bottom
|
||||
- padding-left
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- float
|
||||
- clear
|
||||
- float
|
||||
- clear
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- columns
|
||||
- column-gap
|
||||
- column-fill
|
||||
- column-rule
|
||||
- column-span
|
||||
- column-count
|
||||
- column-width
|
||||
- columns
|
||||
- column-gap
|
||||
- column-fill
|
||||
- column-rule
|
||||
- column-span
|
||||
- column-count
|
||||
- column-width
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- transform
|
||||
- transform-box
|
||||
- transform-origin
|
||||
- transform-style
|
||||
- transform
|
||||
- transform-box
|
||||
- transform-origin
|
||||
- transform-style
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- transition
|
||||
- transition-delay
|
||||
- transition-duration
|
||||
- transition-property
|
||||
- transition-timing-function
|
||||
- transition
|
||||
- transition-delay
|
||||
- transition-duration
|
||||
- transition-property
|
||||
- transition-timing-function
|
||||
|
||||
# Border
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- border
|
||||
- border-top
|
||||
- border-right
|
||||
- border-bottom
|
||||
- border-left
|
||||
- border-width
|
||||
- border-top-width
|
||||
- border-right-width
|
||||
- border-bottom-width
|
||||
- border-left-width
|
||||
- border
|
||||
- border-top
|
||||
- border-right
|
||||
- border-bottom
|
||||
- border-left
|
||||
- border-width
|
||||
- border-top-width
|
||||
- border-right-width
|
||||
- border-bottom-width
|
||||
- border-left-width
|
||||
|
||||
- border-style
|
||||
- border-top-style
|
||||
- border-right-style
|
||||
- border-bottom-style
|
||||
- border-left-style
|
||||
- border-style
|
||||
- border-top-style
|
||||
- border-right-style
|
||||
- border-bottom-style
|
||||
- border-left-style
|
||||
|
||||
- border-radius
|
||||
- border-top-left-radius
|
||||
- border-top-right-radius
|
||||
- border-bottom-left-radius
|
||||
- border-bottom-right-radius
|
||||
- border-radius
|
||||
- border-top-left-radius
|
||||
- border-top-right-radius
|
||||
- border-bottom-left-radius
|
||||
- border-bottom-right-radius
|
||||
|
||||
- border-color
|
||||
- border-top-color
|
||||
- border-right-color
|
||||
- border-bottom-color
|
||||
- border-left-color
|
||||
- border-color
|
||||
- border-top-color
|
||||
- border-right-color
|
||||
- border-bottom-color
|
||||
- border-left-color
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- outline
|
||||
- outline-color
|
||||
- outline-offset
|
||||
- outline-style
|
||||
- outline-width
|
||||
- outline
|
||||
- outline-color
|
||||
- outline-offset
|
||||
- outline-style
|
||||
- outline-width
|
||||
|
||||
# Background
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- background
|
||||
- background-attachment
|
||||
- background-clip
|
||||
- background-color
|
||||
- background-image
|
||||
- background-repeat
|
||||
- background-position
|
||||
- background-size
|
||||
- background
|
||||
- background-attachment
|
||||
- background-clip
|
||||
- background-color
|
||||
- background-image
|
||||
- background-repeat
|
||||
- background-position
|
||||
- background-size
|
||||
|
||||
# Text
|
||||
# Text
|
||||
|
||||
- color
|
||||
- color
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- font
|
||||
- font-family
|
||||
- font-size
|
||||
- font-smoothing
|
||||
- font-style
|
||||
- font-variant
|
||||
- font-weight
|
||||
- font
|
||||
- font-family
|
||||
- font-size
|
||||
- font-smoothing
|
||||
- font-style
|
||||
- font-variant
|
||||
- font-weight
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- letter-spacing
|
||||
- line-height
|
||||
- list-style
|
||||
- letter-spacing
|
||||
- line-height
|
||||
- list-style
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- text-align
|
||||
- text-decoration
|
||||
- text-indent
|
||||
- text-overflow
|
||||
- text-rendering
|
||||
- text-shadow
|
||||
- text-transform
|
||||
- text-wrap
|
||||
- text-align
|
||||
- text-decoration
|
||||
- text-indent
|
||||
- text-overflow
|
||||
- text-rendering
|
||||
- text-shadow
|
||||
- text-transform
|
||||
- text-wrap
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- white-space
|
||||
- word-spacing
|
||||
- white-space
|
||||
- word-spacing
|
||||
|
||||
# Other
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- border-collapse
|
||||
- border-spacing
|
||||
- box-shadow
|
||||
- caption-side
|
||||
- contain
|
||||
- content
|
||||
- cursor
|
||||
- direction
|
||||
- empty-cells
|
||||
- object-fit
|
||||
- opacity
|
||||
- overflow
|
||||
- quotes
|
||||
- speak
|
||||
- table-layout
|
||||
- touch-action
|
||||
- user-select
|
||||
- vertical-align
|
||||
- visibility
|
||||
- z-index
|
||||
- border-collapse
|
||||
- border-spacing
|
||||
- box-shadow
|
||||
- caption-side
|
||||
- contain
|
||||
- content
|
||||
- cursor
|
||||
- direction
|
||||
- empty-cells
|
||||
- object-fit
|
||||
- opacity
|
||||
- overflow
|
||||
- quotes
|
||||
- speak
|
||||
- table-layout
|
||||
- touch-action
|
||||
- user-select
|
||||
- vertical-align
|
||||
- visibility
|
||||
- z-index
|
||||
|
||||
property-disallowed-list:
|
||||
- background-position
|
||||
- right
|
||||
- left
|
||||
- float
|
||||
- padding
|
||||
- padding-left
|
||||
- padding-right
|
||||
- margin
|
||||
- margin-left
|
||||
- margin-right
|
||||
- border-radius
|
||||
- border-top-left-radius
|
||||
- border-top-right-radius
|
||||
- border-bottom-right-radius
|
||||
|
||||
@@ -3,6 +3,63 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
|
||||
## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
|
||||
* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
|
||||
|
||||
**Note:** Version bump only for package @ionic/core
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27)
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **haptics:** remove cordova haptics support ([#29186](https://github.com/ionic-team/ionic-framework/issues/29186)) ([9efeb0a](https://github.com/ionic-team/ionic-framework/commit/9efeb0ad31aadee5f5ae542641d928ecf93fe82a))
|
||||
* **searchbar:** autocapitalize defaults to off ([#29107](https://github.com/ionic-team/ionic-framework/issues/29107)) ([6e477b7](https://github.com/ionic-team/ionic-framework/commit/6e477b743e41b2b37627c8208901704f599b762a))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **button:** add circular shape as round ([#29161](https://github.com/ionic-team/ionic-framework/issues/29161)) ([44529f0](https://github.com/ionic-team/ionic-framework/commit/44529f0a62f1b1ce42750a20f19e829b2789febd))
|
||||
* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172))
|
||||
* remove css animations support for ionic animations ([#29123](https://github.com/ionic-team/ionic-framework/issues/29123)) ([892594d](https://github.com/ionic-team/ionic-framework/commit/892594de0665e8fc5c8a737d292812842ea03d64))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **searchbar:** The `autocapitalize` property on Searchbar now defaults to `'off'`.
|
||||
* **haptics:** Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v8.0.0-beta.3) (2024-03-20)
|
||||
|
||||
|
||||
|
||||
@@ -282,6 +282,7 @@ ion-card,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-card,prop,rel,string | undefined,undefined,false,false
|
||||
ion-card,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
|
||||
ion-card,prop,shape,"rectangular" | "round" | undefined,undefined,false,true
|
||||
ion-card,prop,target,string | undefined,undefined,false,false
|
||||
ion-card,prop,theme,"ios" | "md" | "ionic",undefined,false,false
|
||||
ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
|
||||
@@ -321,9 +322,6 @@ ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',fals
|
||||
ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
|
||||
ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-checkbox,prop,name,string,this.inputId,false,false
|
||||
ion-checkbox,prop,required,boolean,false,false,false
|
||||
ion-checkbox,prop,shape,"rectangular" | "soft" | undefined,'soft',false,true
|
||||
ion-checkbox,prop,size,"default" | "small" | undefined,'default',false,true
|
||||
ion-checkbox,prop,theme,"ios" | "md" | "ionic",undefined,false,false
|
||||
ion-checkbox,prop,value,any,'on',false,false
|
||||
ion-checkbox,event,ionBlur,void,true
|
||||
@@ -341,7 +339,6 @@ ion-checkbox,css-prop,--checkmark-width
|
||||
ion-checkbox,css-prop,--size
|
||||
ion-checkbox,css-prop,--transition
|
||||
ion-checkbox,part,container
|
||||
ion-checkbox,part,focus-ring
|
||||
ion-checkbox,part,label
|
||||
ion-checkbox,part,mark
|
||||
|
||||
@@ -350,6 +347,7 @@ ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
|
||||
ion-chip,prop,disabled,boolean,false,false,false
|
||||
ion-chip,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-chip,prop,outline,boolean,false,false,false
|
||||
ion-chip,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
|
||||
ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
|
||||
ion-chip,css-prop,--background
|
||||
ion-chip,css-prop,--color
|
||||
@@ -391,6 +389,7 @@ ion-col,css-prop,--ion-grid-columns
|
||||
|
||||
ion-content,shadow
|
||||
ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-content,prop,fixedSlotPlacement,"after" | "before",'after',false,false
|
||||
ion-content,prop,forceOverscroll,boolean | undefined,undefined,false,false
|
||||
ion-content,prop,fullscreen,boolean,false,false,false
|
||||
ion-content,prop,mode,"ios" | "md",undefined,false,false
|
||||
@@ -602,6 +601,7 @@ ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "h
|
||||
ion-input,prop,autocorrect,"off" | "on",'off',false,false
|
||||
ion-input,prop,autofocus,boolean,false,false,false
|
||||
ion-input,prop,clearInput,boolean,false,false,false
|
||||
ion-input,prop,clearInputIcon,string | undefined,undefined,false,false
|
||||
ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
|
||||
ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-input,prop,counter,boolean,false,false,false
|
||||
|
||||
1687
core/package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.0.0-beta.3",
|
||||
"version": "8.0.0-rc.0",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -67,17 +67,19 @@
|
||||
"rollup": "^2.26.4",
|
||||
"sass": "^1.33.0",
|
||||
"serve": "^14.0.1",
|
||||
"style-dictionary": "^3.9.2",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-order": "^4.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
|
||||
"build": "npm run clean && npm run build.tokens && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
|
||||
"build.css": "npm run css.sass && npm run css.minify",
|
||||
"build.debug": "npm run clean && stencil build --debug",
|
||||
"build.docs.json": "stencil build --docs-json dist/docs.json",
|
||||
"build.tokens": "node ./scripts/tokens.js && npm run lint.sass.fix",
|
||||
"clean": "node scripts/clean.js",
|
||||
"css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
|
||||
"css.sass": "sass --embed-sources src/css:./css",
|
||||
"css.sass": "sass --embed-sources --style compressed src/css:./css",
|
||||
"eslint": "eslint src",
|
||||
"lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write --cache",
|
||||
"lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write --cache",
|
||||
|
||||
@@ -1,44 +1,4 @@
|
||||
|
||||
## Build
|
||||
# Core Scripts
|
||||
|
||||
### 1. Clone ionic
|
||||
|
||||
git@github.com:ionic-team/ionic.git
|
||||
cd ionic
|
||||
|
||||
### 2. Run `npm install`
|
||||
|
||||
cd core
|
||||
npm install
|
||||
|
||||
|
||||
Notice that `@ionic/core` lives in `core`.
|
||||
|
||||
### 3. Run `npm start`
|
||||
|
||||
Make sure you are inside the `core` directory.
|
||||
|
||||
npm start
|
||||
|
||||
With the `dev` command, Ionic components will be built with [Stencil](https://stenciljs.com/), changes to source files are watched, a local http server will startup, and http://localhost:3333/ will open in a browser.
|
||||
|
||||
### 4. Preview
|
||||
|
||||
Navigate to http://localhost:3333/src/components/. Each component has small e2e apps found in the `test` directory, for example: http://localhost:3333/src/components/button/test/basic
|
||||
|
||||
As changes are made in an editor to source files, the e2e app will live-reload.
|
||||
|
||||
## How to contribute
|
||||
|
||||
1. `npm start` allows you to modify the components and have live reloading, just like another ionic app.
|
||||
|
||||
2. When everything looks good, run `npm run validate` to verify the tests linter and production build passes.
|
||||
|
||||
|
||||
# Deploy
|
||||
|
||||
1. `npm run prepare.deploy`
|
||||
2. Review/update changelog
|
||||
3. Commit updates using the package name and version number as the commit message.
|
||||
4. `npm run deploy`
|
||||
5. :tada:
|
||||
This file has been moved to [/docs/core/testing/preview-changes.md](/docs/core/testing/preview-changes.md).
|
||||
|
||||
174
core/scripts/tokens.js
Normal file
@@ -0,0 +1,174 @@
|
||||
/* For generating Design Tokens, we use Style Dictionary for several reasons:
|
||||
- It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
|
||||
- It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
|
||||
- It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
|
||||
- It can easily scale to different necessities we might have in the future.
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const StyleDictionary = require('style-dictionary');
|
||||
|
||||
const { fileHeader } = StyleDictionary.formatHelpers;
|
||||
|
||||
// Empty for as an example of how we can add some extra variables, not from the tokens JSON
|
||||
const customVariables = ``;
|
||||
|
||||
// Prefix for all generated variables
|
||||
const variablesPrefix = 'ionic';
|
||||
|
||||
// CSS vanilla :root format
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'rootFormat',
|
||||
formatter({ dictionary, file }) {
|
||||
// Add a prefix to all variable names
|
||||
const prefixedVariables = dictionary.allProperties.map((prop) => {
|
||||
return ` --${variablesPrefix}-${prop.name}: ${prop.value};`;
|
||||
});
|
||||
|
||||
return (
|
||||
fileHeader({ file }) +
|
||||
':root {\n' +
|
||||
prefixedVariables.join('\n') + // Join all prefixed variables with a newline
|
||||
customVariables +
|
||||
'\n}\n'
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// scss variables format
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'scssVariablesFormat',
|
||||
formatter({ dictionary, file }) {
|
||||
// Add a prefix to all variable names
|
||||
const prefixedVariables = dictionary.allProperties.map((prop) => {
|
||||
return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});`;
|
||||
});
|
||||
|
||||
return (
|
||||
fileHeader({ file }) +
|
||||
prefixedVariables.join('\n') + // Join all prefixed variables with a newline
|
||||
customVariables +
|
||||
'\n'
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// Create utility-classes
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'cssUtilityClassesFormat',
|
||||
formatter({ dictionary, file }) {
|
||||
const utilityClasses = dictionary.allProperties.map((prop) => {
|
||||
let tokenType = prop.attributes.category;
|
||||
const className = `${prop.name}`;
|
||||
let utilityClass = '';
|
||||
|
||||
switch (tokenType) {
|
||||
case 'color':
|
||||
utilityClass = `.${variablesPrefix}-${className} {\n color: $ionic-${prop.name};\n}
|
||||
.${variablesPrefix}-background-${className} {\n background-color: $ionic-${prop.name};\n}`;
|
||||
break;
|
||||
case 'border':
|
||||
const borderAttribute = prop.attributes.type === 'radius' ? 'border-radius' : 'border-width';
|
||||
utilityClass = `.${variablesPrefix}-${className} {\n ${borderAttribute}: $ionic-${prop.name};\n}`;
|
||||
break;
|
||||
case 'font':
|
||||
let fontAttribute;
|
||||
switch (prop.attributes.type) {
|
||||
case 'size':
|
||||
fontAttribute = 'font-size';
|
||||
break;
|
||||
case 'weight':
|
||||
fontAttribute = 'font-weight';
|
||||
break;
|
||||
case 'line-height':
|
||||
fontAttribute = 'line-height';
|
||||
break;
|
||||
case 'letter-spacing':
|
||||
fontAttribute = 'letter-spacing';
|
||||
break;
|
||||
case 'family':
|
||||
return;
|
||||
}
|
||||
utilityClass = `.${variablesPrefix}-${className} {\n ${fontAttribute}: $ionic-${prop.name};\n}`;
|
||||
break;
|
||||
case 'elevation':
|
||||
utilityClass = `.${variablesPrefix}-${className} {\n box-shadow: $ionic-${prop.name};\n}`;
|
||||
break;
|
||||
case 'space':
|
||||
utilityClass = `.${variablesPrefix}-margin-${className} {\n margin: $ionic-${prop.name};\n};
|
||||
.${variablesPrefix}-padding-${className} {\n padding: $ionic-${prop.name};\n}`;
|
||||
break;
|
||||
default:
|
||||
utilityClass = `.${variablesPrefix}-${className} {\n ${tokenType}: $ionic-${prop.name};\n}`;
|
||||
}
|
||||
|
||||
return utilityClass;
|
||||
});
|
||||
|
||||
return [fileHeader({ file }), '@import "./ionic.vars";\n', utilityClasses.join('\n')].join('\n');
|
||||
},
|
||||
});
|
||||
|
||||
// Make Style Dictionary comply with the $ format on properties from W3C Guidelines
|
||||
const w3cTokenJsonParser = {
|
||||
pattern: /\.json|\.tokens\.json|\.tokens$/,
|
||||
parse(_a) {
|
||||
var contents = _a.contents;
|
||||
// replace $value with value so that style dictionary recognizes it
|
||||
var preparedContent = (contents || '{}')
|
||||
.replace(/"\$?value":/g, '"value":')
|
||||
// convert $description to comment
|
||||
.replace(/"\$?description":/g, '"comment":');
|
||||
//
|
||||
return JSON.parse(preparedContent);
|
||||
},
|
||||
};
|
||||
|
||||
StyleDictionary.registerParser(w3cTokenJsonParser);
|
||||
|
||||
// Generate Tokens
|
||||
StyleDictionary.extend({
|
||||
source: ['./src/foundations/*.json'],
|
||||
platforms: {
|
||||
css: {
|
||||
buildPath: './src/foundations/',
|
||||
transformGroup: 'css',
|
||||
files: [
|
||||
{
|
||||
destination: 'ionic.root.scss',
|
||||
format: 'rootFormat',
|
||||
options: {
|
||||
outputReferences: true,
|
||||
fileHeader: `myFileHeader`,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
scss: {
|
||||
buildPath: './src/foundations/',
|
||||
transformGroup: 'scss',
|
||||
files: [
|
||||
{
|
||||
destination: 'ionic.vars.scss',
|
||||
format: 'scssVariablesFormat',
|
||||
options: {
|
||||
outputReferences: true,
|
||||
fileHeader: `myFileHeader`,
|
||||
},
|
||||
},
|
||||
{
|
||||
destination: 'ionic.utility.scss',
|
||||
format: 'cssUtilityClassesFormat',
|
||||
options: {
|
||||
outputReferences: true,
|
||||
fileHeader: `myFileHeader`,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
fileHeader: {
|
||||
myFileHeader: () => {
|
||||
return [`This is an auto-generated file, please do not change it directly.`, `Ionic Design System`];
|
||||
},
|
||||
},
|
||||
}).buildAllPlatforms();
|
||||
56
core/src/components.d.ts
vendored
@@ -618,6 +618,10 @@ export namespace Components {
|
||||
* When using a router, it specifies the transition direction when navigating to another page using `href`.
|
||||
*/
|
||||
"routerDirection": RouterDirection;
|
||||
/**
|
||||
* Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners.
|
||||
*/
|
||||
"shape"?: 'round' | 'rectangular';
|
||||
/**
|
||||
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
|
||||
*/
|
||||
@@ -724,18 +728,6 @@ export namespace Components {
|
||||
* The name of the control, which is submitted with the form data.
|
||||
*/
|
||||
"name": string;
|
||||
/**
|
||||
* If `true`, the checkbox will be presented with an error style when it is unchecked.
|
||||
*/
|
||||
"required": boolean;
|
||||
/**
|
||||
* Set to `"soft"` for a checkbox with more rounded corners.
|
||||
*/
|
||||
"shape"?: 'soft' | 'rectangular';
|
||||
/**
|
||||
* Set to `"small"` for a checkbox with less height and padding or to `"default"` for a checkbox with the default height and padding.
|
||||
*/
|
||||
"size"?: 'small' | 'default';
|
||||
/**
|
||||
* The theme determines the visual appearance of the component.
|
||||
*/
|
||||
@@ -762,6 +754,10 @@ export namespace Components {
|
||||
* Display an outline style button.
|
||||
*/
|
||||
"outline": boolean;
|
||||
/**
|
||||
* Define the Chip corner shape, when using the Ionic Theme.
|
||||
*/
|
||||
"shape"?: 'round' | 'rectangular';
|
||||
/**
|
||||
* The theme determines the visual appearance of the component.
|
||||
*/
|
||||
@@ -878,6 +874,10 @@ export namespace Components {
|
||||
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
||||
*/
|
||||
"color"?: Color;
|
||||
/**
|
||||
* Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
|
||||
*/
|
||||
"fixedSlotPlacement": 'after' | 'before';
|
||||
/**
|
||||
* If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
|
||||
*/
|
||||
@@ -1354,6 +1354,10 @@ export namespace Components {
|
||||
* If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
|
||||
*/
|
||||
"clearInput": boolean;
|
||||
/**
|
||||
* The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
|
||||
*/
|
||||
"clearInputIcon"?: string;
|
||||
/**
|
||||
* If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
|
||||
*/
|
||||
@@ -5846,6 +5850,10 @@ declare namespace LocalJSX {
|
||||
* When using a router, it specifies the transition direction when navigating to another page using `href`.
|
||||
*/
|
||||
"routerDirection"?: RouterDirection;
|
||||
/**
|
||||
* Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners.
|
||||
*/
|
||||
"shape"?: 'round' | 'rectangular';
|
||||
/**
|
||||
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
|
||||
*/
|
||||
@@ -5964,18 +5972,6 @@ declare namespace LocalJSX {
|
||||
* Emitted when the checkbox has focus.
|
||||
*/
|
||||
"onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
|
||||
/**
|
||||
* If `true`, the checkbox will be presented with an error style when it is unchecked.
|
||||
*/
|
||||
"required"?: boolean;
|
||||
/**
|
||||
* Set to `"soft"` for a checkbox with more rounded corners.
|
||||
*/
|
||||
"shape"?: 'soft' | 'rectangular';
|
||||
/**
|
||||
* Set to `"small"` for a checkbox with less height and padding or to `"default"` for a checkbox with the default height and padding.
|
||||
*/
|
||||
"size"?: 'small' | 'default';
|
||||
/**
|
||||
* The theme determines the visual appearance of the component.
|
||||
*/
|
||||
@@ -6002,6 +5998,10 @@ declare namespace LocalJSX {
|
||||
* Display an outline style button.
|
||||
*/
|
||||
"outline"?: boolean;
|
||||
/**
|
||||
* Define the Chip corner shape, when using the Ionic Theme.
|
||||
*/
|
||||
"shape"?: 'round' | 'rectangular';
|
||||
/**
|
||||
* The theme determines the visual appearance of the component.
|
||||
*/
|
||||
@@ -6118,6 +6118,10 @@ declare namespace LocalJSX {
|
||||
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
||||
*/
|
||||
"color"?: Color;
|
||||
/**
|
||||
* Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
|
||||
*/
|
||||
"fixedSlotPlacement"?: 'after' | 'before';
|
||||
/**
|
||||
* If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
|
||||
*/
|
||||
@@ -6602,6 +6606,10 @@ declare namespace LocalJSX {
|
||||
* If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
|
||||
*/
|
||||
"clearInput"?: boolean;
|
||||
/**
|
||||
* The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
|
||||
*/
|
||||
"clearInputIcon"?: string;
|
||||
/**
|
||||
* If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
|
||||
*/
|
||||
|
||||
@@ -109,7 +109,18 @@
|
||||
::slotted(ion-icon[slot="start"]),
|
||||
::slotted(ion-icon[slot="end"]),
|
||||
::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1em;
|
||||
font-size: px-to-rem(16);
|
||||
}
|
||||
|
||||
:host(.button-xsmall),
|
||||
:host(.button-small),
|
||||
:host(.button-large),
|
||||
:host(.button-xlarge) {
|
||||
::slotted(ion-icon[slot="start"]),
|
||||
::slotted(ion-icon[slot="end"]),
|
||||
::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button extra small */
|
||||
@@ -142,6 +153,7 @@
|
||||
|
||||
// Button Shape Rectangular
|
||||
// -------------------------------------------------------------------------------
|
||||
|
||||
:host(.button-rectangular) {
|
||||
--border-radius: #{$button-ionic-rectangular-border};
|
||||
}
|
||||
@@ -168,6 +180,11 @@
|
||||
--background-activated: #{ion-color(primary, shade)};
|
||||
}
|
||||
|
||||
:host(.button-solid.ion-color.ion-activated) .button-native::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
|
||||
// Fill Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@@ -149,7 +149,20 @@
|
||||
}
|
||||
|
||||
::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1.125em;
|
||||
/**
|
||||
* The values were provided through a native iOS app.
|
||||
* min font size: 15px, default font size: 18px, max font size: 43px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 16px
|
||||
* (derived from rem), then the base size can use the default font
|
||||
* size of the icon.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(0.84, 18px, 2.39, 1em);
|
||||
}
|
||||
|
||||
:host(.button-small.button-has-icon-only) {
|
||||
@@ -157,11 +170,23 @@
|
||||
min-width: clamp(23px, 2.16em, 54px);
|
||||
// TODO(FW-6053): replace em value with the min-height variable.
|
||||
min-height: clamp(23px, 2.16em, 54px);
|
||||
|
||||
}
|
||||
|
||||
:host(.button-small) ::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1.4em;
|
||||
/**
|
||||
* The values were provided through a native iOS app.
|
||||
* min font size: 12px, default font size: 17px, max font size: 40px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 13px
|
||||
* (derived from rem) and the default font size of the icon is
|
||||
* 17px, then the base size would need to be increased.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(0.58, 20.93px, 1.92, 1em);
|
||||
}
|
||||
|
||||
:host(.button-large.button-has-icon-only) {
|
||||
@@ -172,7 +197,20 @@
|
||||
}
|
||||
|
||||
:host(.button-large) ::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1em;
|
||||
/**
|
||||
* The values were provided through a native iOS app.
|
||||
* min font size: 15px, default font size: 18px, max font size: 43px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 20px
|
||||
* (derived from rem) and the default font size of the icon is
|
||||
* 18px, then the base size would need to be decreased.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(1.05, 14.4px, 2.99, 1em);
|
||||
}
|
||||
|
||||
// iOS Button Focused
|
||||
@@ -247,3 +285,12 @@
|
||||
:host(.button-solid.ion-color.ion-activated) .button-native::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
|
||||
// Activated Button in Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
|
||||
background: var(--ion-toolbar-color, var(--color));
|
||||
color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
|
||||
}
|
||||
|
||||
@@ -142,7 +142,21 @@
|
||||
}
|
||||
|
||||
::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1.6em;
|
||||
/**
|
||||
* The values were provided through MD design,
|
||||
* large and small are based on the iOS sizes.
|
||||
* min font size: 15px, default font size: 22.4px, max font size: 43px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 14px
|
||||
* (derived from rem) and the default font size of the icon is
|
||||
* 22.4px, then the base size would need to be increased.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(0.59, 25.6px, 1.68, 1em);
|
||||
}
|
||||
|
||||
:host(.button-small.button-has-icon-only) {
|
||||
@@ -153,7 +167,21 @@
|
||||
}
|
||||
|
||||
:host(.button-small) ::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1.23em;
|
||||
/**
|
||||
* The values were provided through MD design,
|
||||
* large and small are based on the iOS sizes.
|
||||
* min font size: 12px, default font size: 16px, max font size: 40px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 13px
|
||||
* (derived from rem) and the default font size of the icon is
|
||||
* 16px, then the base size would need to be increased.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(0.66, 19.7px, 2.05, 1em);
|
||||
}
|
||||
|
||||
:host(.button-large.button-has-icon-only) {
|
||||
@@ -164,7 +192,21 @@
|
||||
}
|
||||
|
||||
:host(.button-large) ::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1.4em;
|
||||
/**
|
||||
* The values were provided through MD design,
|
||||
* large and small are based on the iOS sizes.
|
||||
* min font size: 15px, default font size: 28px, max font size: 43px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 20px
|
||||
* (derived from rem) and the default font size of the icon is
|
||||
* 28px, then the base size would need to be increased.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(0.67, 22.4px, 1.92, 1em);
|
||||
}
|
||||
|
||||
// Material Design Button: Hover
|
||||
@@ -196,3 +238,12 @@
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Activated Button in Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
|
||||
background: var(--ion-toolbar-background, var(--color));
|
||||
color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
|
||||
}
|
||||
|
||||
@@ -325,11 +325,3 @@ ion-ripple-effect {
|
||||
background: #{var(--ion-toolbar-color, var(--background))};
|
||||
color: #{var(--ion-toolbar-background, var(--color))};
|
||||
}
|
||||
|
||||
// Activated Button in Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
|
||||
background: var(--ion-toolbar-color, var(--color));
|
||||
color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
|
||||
/**
|
||||
* Fill="clear" does not render differently based on the direction.
|
||||
*/
|
||||
configs({ directions: ['ltr'], themes: ['ios', 'md', 'ionic'] }).forEach(({ title, config, screenshot }) => {
|
||||
configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config, screenshot }) => {
|
||||
test.describe(title('button: fill: clear'), () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/button/test/clear`, config);
|
||||
|
||||
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
@@ -74,7 +74,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
/**
|
||||
* Shape="rectangular" is only available in the Ionic theme.
|
||||
*/
|
||||
configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
|
||||
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('button: shape'), () => {
|
||||
test.describe('rectangular', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
|
||||
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@@ -1,8 +1,7 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
// TODO: FW-6077 - Limit this test to just the Ionic theme on MD mode.
|
||||
configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
|
||||
configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('button: size'), () => {
|
||||
test('should render small buttons', async ({ page }) => {
|
||||
await page.setContent(
|
||||
@@ -65,7 +64,7 @@ configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ titl
|
||||
/**
|
||||
* The following tests are specific to the Ionic theme and do not depend on the text direction.
|
||||
*/
|
||||
configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
|
||||
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('button: size'), () => {
|
||||
test('should render xsmall buttons', async ({ page }) => {
|
||||
await page.setContent(`<ion-button size="xsmall" fill="solid">X-Small Button</ion-button>`, config);
|
||||
|
||||
84
core/src/components/button/test/states/button.e2e.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('button: activated'), () => {
|
||||
test('should render solid button', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-solid`));
|
||||
});
|
||||
|
||||
test('should render solid button with color', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button color="tertiary" class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-solid-color`));
|
||||
});
|
||||
|
||||
test('should render outline button', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button fill="outline" class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-outline`));
|
||||
});
|
||||
|
||||
test('should render outline button with color', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button color="tertiary" fill="outline" class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-outline-color`));
|
||||
});
|
||||
|
||||
test('should render clear button', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button fill="clear" class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-clear`));
|
||||
});
|
||||
|
||||
test('should render clear button with color', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button color="tertiary" fill="clear" class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-clear-color`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 945 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 909 B |
|
After Width: | Height: | Size: 902 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 919 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 986 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1014 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.2 KiB |