Compare commits
1 Commits
v8.3.0
...
cb/react-o
| Author | SHA1 | Date | |
|---|---|---|---|
|
703cb82a4b |
2
.github/workflows/assign-issues.yml
vendored
@@ -13,6 +13,6 @@ jobs:
|
||||
- name: 'Auto-assign issue'
|
||||
uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
|
||||
with:
|
||||
assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
|
||||
assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva
|
||||
numOfAssignee: 1
|
||||
allowSelfAssign: false
|
||||
|
||||
58
CHANGELOG.md
@@ -3,64 +3,6 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [8.3.0](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.3.0) (2024-09-05)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **checkbox:** display as block when justify or alignment properties are defined ([#29783](https://github.com/ionic-team/ionic-framework/issues/29783)) ([4ccd15e](https://github.com/ionic-team/ionic-framework/commit/4ccd15e47ad4ec7cb59d2694c5738eab1bb265ff))
|
||||
* **radio:** display as block when justify or alignment properties are defined ([#29801](https://github.com/ionic-team/ionic-framework/issues/29801)) ([18b02b3](https://github.com/ionic-team/ionic-framework/commit/18b02b3574f54a2f377f5bfe4e074bf015418dd3))
|
||||
* **react, vue, angular:** use tabs without router ([#29794](https://github.com/ionic-team/ionic-framework/issues/29794)) ([867066b](https://github.com/ionic-team/ionic-framework/commit/867066b4eba369de025f3c7c8ef33e7089cdf3bc)), closes [#25184](https://github.com/ionic-team/ionic-framework/issues/25184)
|
||||
* **toggle:** display as block when justify or alignment properties are defined ([#29802](https://github.com/ionic-team/ionic-framework/issues/29802)) ([0332c8c](https://github.com/ionic-team/ionic-framework/commit/0332c8c6ceb612840e73f789d5c5b66f05cb53d4))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
|
||||
* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
|
||||
* **test:** fix Stencil Nightly build ([#29780](https://github.com/ionic-team/ionic-framework/issues/29780)) ([bf7f6f6](https://github.com/ionic-team/ionic-framework/commit/bf7f6f6acf63ac4d7d536c8a297ff14f704b13c7)), closes [#5926](https://github.com/ionic-team/ionic-framework/issues/5926)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
|
||||
* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
|
||||
* **angular:** remove the tabindex set by routerLink from Ionic components ([#29744](https://github.com/ionic-team/ionic-framework/issues/29744)) ([20073e1](https://github.com/ionic-team/ionic-framework/commit/20073e10c934d3704734195c72f4281c9b9658e3)), closes [#20632](https://github.com/ionic-team/ionic-framework/issues/20632)
|
||||
* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
|
||||
* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
|
||||
* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
|
||||
* **react:** add onPointerDown, onTouchEnd, add onTouchMove ([#29736](https://github.com/ionic-team/ionic-framework/issues/29736)) ([bfee3cd](https://github.com/ionic-team/ionic-framework/commit/bfee3cd064a9b495489c2679ccfb762e622dbf09)), closes [#29174](https://github.com/ionic-team/ionic-framework/issues/29174)
|
||||
* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
|
||||
* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
|
||||
* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
|
||||
|
||||
|
||||
|
||||
@@ -3,60 +3,6 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [8.3.0](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.3.0) (2024-09-05)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **checkbox:** display as block when justify or alignment properties are defined ([#29783](https://github.com/ionic-team/ionic-framework/issues/29783)) ([4ccd15e](https://github.com/ionic-team/ionic-framework/commit/4ccd15e47ad4ec7cb59d2694c5738eab1bb265ff))
|
||||
* **radio:** display as block when justify or alignment properties are defined ([#29801](https://github.com/ionic-team/ionic-framework/issues/29801)) ([18b02b3](https://github.com/ionic-team/ionic-framework/commit/18b02b3574f54a2f377f5bfe4e074bf015418dd3))
|
||||
* **react, vue, angular:** use tabs without router ([#29794](https://github.com/ionic-team/ionic-framework/issues/29794)) ([867066b](https://github.com/ionic-team/ionic-framework/commit/867066b4eba369de025f3c7c8ef33e7089cdf3bc)), closes [#25184](https://github.com/ionic-team/ionic-framework/issues/25184)
|
||||
* **toggle:** display as block when justify or alignment properties are defined ([#29802](https://github.com/ionic-team/ionic-framework/issues/29802)) ([0332c8c](https://github.com/ionic-team/ionic-framework/commit/0332c8c6ceb612840e73f789d5c5b66f05cb53d4))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
|
||||
* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
|
||||
* **test:** fix Stencil Nightly build ([#29780](https://github.com/ionic-team/ionic-framework/issues/29780)) ([bf7f6f6](https://github.com/ionic-team/ionic-framework/commit/bf7f6f6acf63ac4d7d536c8a297ff14f704b13c7)), closes [#5926](https://github.com/ionic-team/ionic-framework/issues/5926)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
|
||||
* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
|
||||
* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
|
||||
* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
|
||||
* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
|
||||
* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
|
||||
|
||||
**Note:** Version bump only for package @ionic/core
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
# Get Playwright
|
||||
FROM mcr.microsoft.com/playwright:v1.46.1
|
||||
FROM mcr.microsoft.com/playwright:v1.44.1
|
||||
|
||||
# Set the working directory
|
||||
WORKDIR /ionic
|
||||
|
||||
14
core/api.txt
@@ -393,12 +393,12 @@ ion-card-title,css-prop,--color,ios
|
||||
ion-card-title,css-prop,--color,md
|
||||
|
||||
ion-checkbox,shadow
|
||||
ion-checkbox,prop,alignment,"center" | "start" | undefined,undefined,false,false
|
||||
ion-checkbox,prop,alignment,"center" | "start",'center',false,false
|
||||
ion-checkbox,prop,checked,boolean,false,false,false
|
||||
ion-checkbox,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-checkbox,prop,disabled,boolean,false,false,false
|
||||
ion-checkbox,prop,indeterminate,boolean,false,false,false
|
||||
ion-checkbox,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
|
||||
ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',false,false
|
||||
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
|
||||
@@ -1319,10 +1319,10 @@ ion-progress-bar,part,stream
|
||||
ion-progress-bar,part,track
|
||||
|
||||
ion-radio,shadow
|
||||
ion-radio,prop,alignment,"center" | "start" | undefined,undefined,false,false
|
||||
ion-radio,prop,alignment,"center" | "start",'center',false,false
|
||||
ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-radio,prop,disabled,boolean,false,false,false
|
||||
ion-radio,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
|
||||
ion-radio,prop,justify,"end" | "space-between" | "start",'space-between',false,false
|
||||
ion-radio,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
|
||||
ion-radio,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-radio,prop,name,string,this.inputId,false,false
|
||||
@@ -1615,7 +1615,7 @@ ion-select,prop,expandedIcon,string | undefined,undefined,false,false
|
||||
ion-select,prop,fill,"outline" | "solid" | undefined,undefined,false,false
|
||||
ion-select,prop,interface,"action-sheet" | "alert" | "popover",'alert',false,false
|
||||
ion-select,prop,interfaceOptions,any,{},false,false
|
||||
ion-select,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
|
||||
ion-select,prop,justify,"end" | "space-between" | "start",'space-between',false,false
|
||||
ion-select,prop,label,string | undefined,undefined,false,false
|
||||
ion-select,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start" | undefined,'start',false,false
|
||||
ion-select,prop,mode,"ios" | "md",undefined,false,false
|
||||
@@ -1922,12 +1922,12 @@ ion-toast,part,icon
|
||||
ion-toast,part,message
|
||||
|
||||
ion-toggle,shadow
|
||||
ion-toggle,prop,alignment,"center" | "start" | undefined,undefined,false,false
|
||||
ion-toggle,prop,alignment,"center" | "start",'center',false,false
|
||||
ion-toggle,prop,checked,boolean,false,false,false
|
||||
ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-toggle,prop,disabled,boolean,false,false,false
|
||||
ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false
|
||||
ion-toggle,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
|
||||
ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false
|
||||
ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
|
||||
ion-toggle,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-toggle,prop,name,string,this.inputId,false,false
|
||||
|
||||
@@ -67,5 +67,4 @@ const ASYNC_PLAYWRIGHT_ASSERTS = [
|
||||
'toHaveTitle',
|
||||
'toHaveURL',
|
||||
'toBeOK',
|
||||
'click'
|
||||
];
|
||||
|
||||
685
core/package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.3.0",
|
||||
"version": "8.2.5",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -36,7 +36,7 @@
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.10.0",
|
||||
"@axe-core/playwright": "^4.9.1",
|
||||
"@capacitor/core": "^6.0.0",
|
||||
"@capacitor/haptics": "^6.0.0",
|
||||
"@capacitor/keyboard": "^6.0.0",
|
||||
@@ -44,13 +44,13 @@
|
||||
"@clack/prompts": "^0.7.0",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@playwright/test": "^1.46.1",
|
||||
"@playwright/test": "^1.44.1",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.8.4",
|
||||
"@stencil/react-output-target": "^0.6.0",
|
||||
"@stencil/react-output-target": "0.0.1-dev.11721063914.1cb11145",
|
||||
"@stencil/sass": "^3.0.9",
|
||||
"@stencil/vue-output-target": "^0.8.9",
|
||||
"@stencil/vue-output-target": "^0.8.7",
|
||||
"@types/jest": "^29.5.6",
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||
|
||||
38
core/src/components.d.ts
vendored
@@ -601,9 +601,9 @@ export namespace Components {
|
||||
}
|
||||
interface IonCheckbox {
|
||||
/**
|
||||
* How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
|
||||
* How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
"alignment": 'start' | 'center';
|
||||
/**
|
||||
* If `true`, the checkbox is selected.
|
||||
*/
|
||||
@@ -621,9 +621,9 @@ export namespace Components {
|
||||
*/
|
||||
"indeterminate": boolean;
|
||||
/**
|
||||
* How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
|
||||
* How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
"justify": 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
* Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
|
||||
*/
|
||||
@@ -2248,9 +2248,9 @@ export namespace Components {
|
||||
}
|
||||
interface IonRadio {
|
||||
/**
|
||||
* How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radio `display` to `block`.
|
||||
* How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
"alignment": 'start' | 'center';
|
||||
/**
|
||||
* 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).
|
||||
*/
|
||||
@@ -2260,9 +2260,9 @@ export namespace Components {
|
||||
*/
|
||||
"disabled": boolean;
|
||||
/**
|
||||
* How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
|
||||
* How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
"justify": 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
* Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
|
||||
*/
|
||||
@@ -2748,7 +2748,7 @@ export namespace Components {
|
||||
/**
|
||||
* How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `"floating"` or `"stacked"`. `"start"`: The label and select will appear on the left in LTR and on the right in RTL. `"end"`: The label and select will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and select will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
"justify": 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
* The visible label associated with the select. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used.
|
||||
*/
|
||||
@@ -3214,9 +3214,9 @@ export namespace Components {
|
||||
}
|
||||
interface IonToggle {
|
||||
/**
|
||||
* How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
|
||||
* How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
"alignment": 'start' | 'center';
|
||||
/**
|
||||
* If `true`, the toggle is selected.
|
||||
*/
|
||||
@@ -3234,9 +3234,9 @@ export namespace Components {
|
||||
*/
|
||||
"enableOnOffLabels": boolean | undefined;
|
||||
/**
|
||||
* How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
|
||||
* How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
"justify": 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
* Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
|
||||
*/
|
||||
@@ -5321,7 +5321,7 @@ declare namespace LocalJSX {
|
||||
}
|
||||
interface IonCheckbox {
|
||||
/**
|
||||
* How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
|
||||
* How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
/**
|
||||
@@ -5341,7 +5341,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"indeterminate"?: boolean;
|
||||
/**
|
||||
* How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
|
||||
* How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
@@ -6939,7 +6939,7 @@ declare namespace LocalJSX {
|
||||
}
|
||||
interface IonRadio {
|
||||
/**
|
||||
* How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radio `display` to `block`.
|
||||
* How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
/**
|
||||
@@ -6951,7 +6951,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"disabled"?: boolean;
|
||||
/**
|
||||
* How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
|
||||
* How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
@@ -8020,7 +8020,7 @@ declare namespace LocalJSX {
|
||||
}
|
||||
interface IonToggle {
|
||||
/**
|
||||
* How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
|
||||
* How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
/**
|
||||
@@ -8040,7 +8040,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"enableOnOffLabels"?: boolean | undefined;
|
||||
/**
|
||||
* How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
|
||||
* How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
|
||||
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 87 KiB |
@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await accordion.click();
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await accordion.click();
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await accordion.click();
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await accordion.click();
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
@@ -310,9 +310,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
}
|
||||
|
||||
componentWillLoad() {
|
||||
if (!this.htmlAttributes?.id) {
|
||||
setOverlayId(this.el);
|
||||
}
|
||||
setOverlayId(this.el);
|
||||
}
|
||||
|
||||
componentDidLoad() {
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { ActionSheet } from '../action-sheet';
|
||||
|
||||
it('action sheet should be assigned an incrementing id', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [ActionSheet],
|
||||
html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
|
||||
});
|
||||
let actionSheet: HTMLIonActionSheetElement;
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet).not.toBe(null);
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
|
||||
|
||||
// Remove the action sheet from the DOM
|
||||
actionSheet.remove();
|
||||
await page.waitForChanges();
|
||||
|
||||
// Create a new action sheet to verify the id is incremented
|
||||
actionSheet = document.createElement('ion-action-sheet');
|
||||
actionSheet.isOpen = true;
|
||||
page.body.appendChild(actionSheet);
|
||||
await page.waitForChanges();
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
|
||||
|
||||
// Presenting the same action sheet again should reuse the existing id
|
||||
|
||||
actionSheet.isOpen = false;
|
||||
await page.waitForChanges();
|
||||
actionSheet.isOpen = true;
|
||||
await page.waitForChanges();
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
|
||||
});
|
||||
@@ -1,55 +0,0 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { ActionSheet } from '../action-sheet';
|
||||
import { h } from '@stencil/core';
|
||||
|
||||
describe('action-sheet: id', () => {
|
||||
it('action sheet should be assigned an incrementing id', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [ActionSheet],
|
||||
html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
|
||||
});
|
||||
let actionSheet: HTMLIonActionSheetElement;
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet).not.toBe(null);
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
|
||||
|
||||
// Remove the action sheet from the DOM
|
||||
actionSheet.remove();
|
||||
await page.waitForChanges();
|
||||
|
||||
// Create a new action sheet to verify the id is incremented
|
||||
actionSheet = document.createElement('ion-action-sheet');
|
||||
actionSheet.isOpen = true;
|
||||
page.body.appendChild(actionSheet);
|
||||
await page.waitForChanges();
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
|
||||
|
||||
// Presenting the same action sheet again should reuse the existing id
|
||||
|
||||
actionSheet.isOpen = false;
|
||||
await page.waitForChanges();
|
||||
actionSheet.isOpen = true;
|
||||
await page.waitForChanges();
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
|
||||
});
|
||||
|
||||
it('should not overwrite the id set in htmlAttributes', async () => {
|
||||
const id = 'custom-id';
|
||||
const page = await newSpecPage({
|
||||
components: [ActionSheet],
|
||||
template: () => <ion-action-sheet htmlAttributes={{ id }} overlayIndex={-1}></ion-action-sheet>,
|
||||
});
|
||||
|
||||
const alert = page.body.querySelector('ion-action-sheet')!;
|
||||
expect(alert.id).toBe(id);
|
||||
});
|
||||
});
|
||||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 36 KiB |
41
core/src/components/alert/test/alert-id.spec.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { Alert } from '../alert';
|
||||
|
||||
it('alert should be assigned an incrementing id', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Alert],
|
||||
html: `<ion-alert is-open="true"></ion-alert>`,
|
||||
});
|
||||
let alert: HTMLIonAlertElement;
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert).not.toBe(null);
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-1');
|
||||
|
||||
// Remove the alert from the DOM
|
||||
alert.remove();
|
||||
await page.waitForChanges();
|
||||
|
||||
// Create a new alert to verify the id is incremented
|
||||
alert = document.createElement('ion-alert');
|
||||
alert.isOpen = true;
|
||||
page.body.appendChild(alert);
|
||||
await page.waitForChanges();
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-2');
|
||||
|
||||
// Presenting the same alert again should reuse the existing id
|
||||
|
||||
alert.isOpen = false;
|
||||
await page.waitForChanges();
|
||||
alert.isOpen = true;
|
||||
await page.waitForChanges();
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-2');
|
||||
});
|
||||
@@ -1,55 +0,0 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { Alert } from '../alert';
|
||||
import { h } from '@stencil/core';
|
||||
|
||||
describe('alert: id', () => {
|
||||
it('alert should be assigned an incrementing id', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Alert],
|
||||
html: `<ion-alert is-open="true"></ion-alert>`,
|
||||
});
|
||||
let alert: HTMLIonAlertElement;
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert).not.toBe(null);
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-1');
|
||||
|
||||
// Remove the alert from the DOM
|
||||
alert.remove();
|
||||
await page.waitForChanges();
|
||||
|
||||
// Create a new alert to verify the id is incremented
|
||||
alert = document.createElement('ion-alert');
|
||||
alert.isOpen = true;
|
||||
page.body.appendChild(alert);
|
||||
await page.waitForChanges();
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-2');
|
||||
|
||||
// Presenting the same alert again should reuse the existing id
|
||||
|
||||
alert.isOpen = false;
|
||||
await page.waitForChanges();
|
||||
alert.isOpen = true;
|
||||
await page.waitForChanges();
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-2');
|
||||
});
|
||||
|
||||
it('should not overwrite the id set in htmlAttributes', async () => {
|
||||
const id = 'custom-id';
|
||||
const page = await newSpecPage({
|
||||
components: [Alert],
|
||||
template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
|
||||
});
|
||||
|
||||
const alert = page.body.querySelector('ion-alert')!;
|
||||
expect(alert.id).toBe(id);
|
||||
});
|
||||
});
|
||||
@@ -2,6 +2,7 @@ import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { config } from '../../../global/config';
|
||||
import { Alert } from '../alert';
|
||||
import { h } from '@stencil/core';
|
||||
|
||||
describe('alert: custom html', () => {
|
||||
it('should not allow for custom html by default', async () => {
|
||||
@@ -38,4 +39,15 @@ describe('alert: custom html', () => {
|
||||
expect(content.textContent).toContain('Custom Text');
|
||||
expect(content.querySelector('button.custom-html')).toBe(null);
|
||||
});
|
||||
|
||||
it('should not overwrite the id set in htmlAttributes', async () => {
|
||||
const id = 'custom-id';
|
||||
const page = await newSpecPage({
|
||||
components: [Alert],
|
||||
template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
|
||||
});
|
||||
|
||||
const alert = page.body.querySelector('ion-alert')!;
|
||||
expect(alert.id).toBe(id);
|
||||
});
|
||||
});
|
||||
|
Before Width: | Height: | Size: 186 KiB After Width: | Height: | Size: 186 KiB |
|
Before Width: | Height: | Size: 188 KiB After Width: | Height: | Size: 188 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 158 KiB After Width: | Height: | Size: 152 KiB |
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 152 KiB |
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 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 |
@@ -72,7 +72,6 @@
|
||||
flex-grow: 1;
|
||||
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
height: inherit;
|
||||
|
||||
@@ -171,20 +170,6 @@ input {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Justify Content & Align Items
|
||||
// ---------------------------------------------
|
||||
|
||||
// The checkbox should be displayed as block when either justify
|
||||
// or alignment is set; otherwise, these properties will have no
|
||||
// visible effect.
|
||||
:host(.checkbox-justify-space-between),
|
||||
:host(.checkbox-justify-start),
|
||||
:host(.checkbox-justify-end),
|
||||
:host(.checkbox-alignment-start),
|
||||
:host(.checkbox-alignment-center) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Label Placement - Start
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
|
||||
@@ -86,17 +86,15 @@ export class Checkbox implements ComponentInterface {
|
||||
* on the left in RTL.
|
||||
* `"space-between"`: The label and checkbox will appear on opposite
|
||||
* ends of the line with space between the two elements.
|
||||
* Setting this property will change the checkbox `display` to `block`.
|
||||
*/
|
||||
@Prop() justify?: 'start' | 'end' | 'space-between';
|
||||
@Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
|
||||
|
||||
/**
|
||||
* How to control the alignment of the checkbox and label on the cross axis.
|
||||
* `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
|
||||
* `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
* Setting this property will change the checkbox `display` to `block`.
|
||||
*/
|
||||
@Prop() alignment?: 'start' | 'center';
|
||||
@Prop() alignment: 'start' | 'center' = 'center';
|
||||
|
||||
/**
|
||||
* Emitted when the checked property has changed as a result of a user action such as a click.
|
||||
@@ -196,8 +194,8 @@ export class Checkbox implements ComponentInterface {
|
||||
'checkbox-disabled': disabled,
|
||||
'checkbox-indeterminate': indeterminate,
|
||||
interactive: true,
|
||||
[`checkbox-justify-${justify}`]: justify !== undefined,
|
||||
[`checkbox-alignment-${alignment}`]: alignment !== undefined,
|
||||
[`checkbox-justify-${justify}`]: true,
|
||||
[`checkbox-alignment-${alignment}`]: true,
|
||||
[`checkbox-label-placement-${labelPlacement}`]: true,
|
||||
})}
|
||||
onClick={this.onClick}
|
||||
|
||||
@@ -36,7 +36,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
|
||||
font-size: 310%;
|
||||
}
|
||||
</style>
|
||||
<ion-checkbox checked>Checked</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked>Checked</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
</head>
|
||||
<style>
|
||||
ion-checkbox {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -22,10 +23,6 @@
|
||||
transform: scale(0.5);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: #ddd;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<ion-app>
|
||||
@@ -36,19 +33,15 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<ion-checkbox>Unchecked</ion-checkbox><br />
|
||||
<ion-checkbox checked>Checked</ion-checkbox><br />
|
||||
<ion-checkbox disabled>Disabled</ion-checkbox><br />
|
||||
<ion-checkbox disabled checked>Disabled, Checked</ion-checkbox><br />
|
||||
<ion-checkbox checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox><br />
|
||||
<ion-checkbox checked class="checkbox-part">Checkmark Shadow Part</ion-checkbox><br />
|
||||
<ion-checkbox checked style="--size: 100px">--size</ion-checkbox><br />
|
||||
|
||||
<hr />
|
||||
|
||||
<ion-checkbox checked>Default width</ion-checkbox><br />
|
||||
<ion-checkbox checked style="width: 200px">Specified width</ion-checkbox><br />
|
||||
<ion-checkbox checked style="width: 100%">Full-width</ion-checkbox><br />
|
||||
<div id="checkboxes">
|
||||
<ion-checkbox justify="start">Unchecked</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked>Checked</ion-checkbox>
|
||||
<ion-checkbox justify="start" disabled>Disabled</ion-checkbox>
|
||||
<ion-checkbox justify="start" disabled checked>Disabled, Checked</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked class="checkbox-part">Checkmark Shadow Part</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked style="--size: 100px">--size</ion-checkbox>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
@@ -2,50 +2,20 @@ import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* By default ion-checkbox only takes up as much space
|
||||
* as it needs. Justification is used for when the
|
||||
* checkbox should take up the full line (such as in an
|
||||
* ion-item or when it has 100% width).
|
||||
* By default ion-checkbox only takes up
|
||||
* as much space as it needs. Justification is
|
||||
* used for when the checkbox takes up the full
|
||||
* line (such as in an ion-item). As a result,
|
||||
* we set the width of the checkbox so we can
|
||||
* see the justification results.
|
||||
*/
|
||||
configs().forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('checkbox: label'), () => {
|
||||
test.describe('checkbox: default placement', () => {
|
||||
test('should render a space between justification with a full width checkbox', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox style="width: 100%">
|
||||
Label
|
||||
</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const checkbox = page.locator('ion-checkbox');
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-full-width`));
|
||||
});
|
||||
|
||||
test('should truncate long labels with ellipses', async ({ page }) => {
|
||||
// Checkbox needs to be full width to truncate properly
|
||||
// because it is not inside of an `ion-app` in tests
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox style="width: 100%">
|
||||
Long Label Long Label Long Label Long Label Long Label Long Label
|
||||
</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const checkbox = page.locator('ion-checkbox');
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-long-label`));
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('checkbox: start placement', () => {
|
||||
test('should render a start justification with label in the start position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="start" justify="start">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="start" justify="start" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -57,7 +27,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render an end justification with label in the start position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="start" justify="end">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="start" justify="end" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -69,7 +39,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a space between justification with label in the start position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="start" justify="space-between">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="start" justify="space-between" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -81,7 +51,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should truncate long labels with ellipses', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="start" justify="start">
|
||||
<ion-checkbox label-placement="start" justify="start" style="width: 200px">
|
||||
Long Label Long Label Long Label Long Label Long Label Long Label
|
||||
</ion-checkbox>
|
||||
`,
|
||||
@@ -89,7 +59,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
);
|
||||
|
||||
const checkbox = page.locator('ion-checkbox');
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-start-justify-start-long-label`));
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-long-label`));
|
||||
});
|
||||
});
|
||||
|
||||
@@ -97,7 +67,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a start justification with label in the end position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="end" justify="start">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="end" justify="start" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -109,7 +79,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render an end justification with label in the end position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="end" justify="end">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="end" justify="end" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -121,7 +91,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a space between justification with label in the end position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="end" justify="space-between">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="end" justify="space-between" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -135,7 +105,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a start justification with label in the fixed position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="fixed" justify="start">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="fixed" justify="start" style="width: 200px">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -147,7 +117,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render an end justification with label in the fixed position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="fixed" justify="end">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="fixed" justify="end" style="width: 200px">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -159,7 +129,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a space between justification with label in the fixed position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="fixed" justify="space-between">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="fixed" justify="space-between" style="width: 200px">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -173,7 +143,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should align the label to the start of the container in the stacked position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="stacked" alignment="start">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -185,7 +155,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should align the label to the center of the container in the stacked position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="stacked" alignment="center">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="stacked" alignment="center" style="width: 200px">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -202,7 +172,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screen
|
||||
test('long label should truncate', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="stacked" alignment="start">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
|
||||
<ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 992 B After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 986 B After Width: | Height: | Size: 956 B |
|
Before Width: | Height: | Size: 1012 B After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 998 B |
|
Before Width: | Height: | Size: 1000 B After Width: | Height: | Size: 977 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 988 B After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1016 B |
|
Before Width: | Height: | Size: 976 B After Width: | Height: | Size: 948 B |
|
Before Width: | Height: | Size: 988 B After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 989 B |
|
Before Width: | Height: | Size: 969 B After Width: | Height: | Size: 946 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1008 B After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 989 B |
|
Before Width: | Height: | Size: 994 B After Width: | Height: | Size: 962 B |
|
Before Width: | Height: | Size: 980 B After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 982 B |
|
Before Width: | Height: | Size: 964 B After Width: | Height: | Size: 939 B |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.8 KiB |