diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 47f3afd70b..44e677b53e 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -7,3 +7,4 @@ updates: allow: - dependency-name: "@playwright/test" - dependency-name: "@axe-core/playwright" + - dependency-name: "@stencil/core" diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f5c91617d..e80f0ba00a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,21 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.6.2](https://github.com/ionic-team/ionic-framework/compare/v6.6.1...v6.6.2) (2023-03-15) + + +### Bug Fixes + +* **accordion:** include margins during expand animation ([#26390](https://github.com/ionic-team/ionic-framework/issues/26390)) ([f809918](https://github.com/ionic-team/ionic-framework/commit/f80991813ae8873d8ef6038b0aeb763d727f402e)), closes [#26381](https://github.com/ionic-team/ionic-framework/issues/26381) +* **IonicSlides:** remove unnecessary autoplay option ([#26935](https://github.com/ionic-team/ionic-framework/issues/26935)) ([b8f8937](https://github.com/ionic-team/ionic-framework/commit/b8f893731471052df198824b7ece47606ffcc500)) +* **radio:** checked state is updated when value changes ([#26936](https://github.com/ionic-team/ionic-framework/issues/26936)) ([27a5356](https://github.com/ionic-team/ionic-framework/commit/27a5356fa2b72073d565e9d6f527107869faa3ee)) +* **react/vue:** properly switch ionicon based on the mode when ios/md is set ([#26924](https://github.com/ionic-team/ionic-framework/issues/26924)) ([1eb9a08](https://github.com/ionic-team/ionic-framework/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae)), closes [#26207](https://github.com/ionic-team/ionic-framework/issues/26207) +* **textarea:** inherit tabindex to inner textarea ([#26945](https://github.com/ionic-team/ionic-framework/issues/26945)) ([2c68d01](https://github.com/ionic-team/ionic-framework/commit/2c68d01b898a2f879445b8b64014189afe1255d7)), closes [#26944](https://github.com/ionic-team/ionic-framework/issues/26944) + + + + + # [7.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08) diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md index cc2a6762ac..9399953b27 100644 --- a/angular/CHANGELOG.md +++ b/angular/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.6.2](https://github.com/ionic-team/ionic/compare/v6.6.1...v6.6.2) (2023-03-15) + +**Note:** Version bump only for package @ionic/angular + + + + + # [7.0.0-rc.1](https://github.com/ionic-team/ionic/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08) diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 952508faf9..46541d4fad 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,21 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.6.2](https://github.com/ionic-team/ionic/compare/v6.6.1...v6.6.2) (2023-03-15) + + +### Bug Fixes + +* **accordion:** include margins during expand animation ([#26390](https://github.com/ionic-team/ionic/issues/26390)) ([f809918](https://github.com/ionic-team/ionic/commit/f80991813ae8873d8ef6038b0aeb763d727f402e)), closes [#26381](https://github.com/ionic-team/ionic/issues/26381) +* **IonicSlides:** remove unnecessary autoplay option ([#26935](https://github.com/ionic-team/ionic/issues/26935)) ([b8f8937](https://github.com/ionic-team/ionic/commit/b8f893731471052df198824b7ece47606ffcc500)) +* **radio:** checked state is updated when value changes ([#26936](https://github.com/ionic-team/ionic/issues/26936)) ([27a5356](https://github.com/ionic-team/ionic/commit/27a5356fa2b72073d565e9d6f527107869faa3ee)) +* **react/vue:** properly switch ionicon based on the mode when ios/md is set ([#26924](https://github.com/ionic-team/ionic/issues/26924)) ([1eb9a08](https://github.com/ionic-team/ionic/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae)), closes [#26207](https://github.com/ionic-team/ionic/issues/26207) +* **textarea:** inherit tabindex to inner textarea ([#26945](https://github.com/ionic-team/ionic/issues/26945)) ([2c68d01](https://github.com/ionic-team/ionic/commit/2c68d01b898a2f879445b8b64014189afe1255d7)), closes [#26944](https://github.com/ionic-team/ionic/issues/26944) + + + + + # [7.0.0-rc.1](https://github.com/ionic-team/ionic/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08) diff --git a/core/src/components/accordion/accordion.scss b/core/src/components/accordion/accordion.scss index 1305913a92..e560c5de33 100644 --- a/core/src/components/accordion/accordion.scss +++ b/core/src/components/accordion/accordion.scss @@ -57,6 +57,14 @@ max-height: 0; } +/** + * Prevent margins of content-wrapper + * from collapsing, breaking the animation. + */ +:host(.accordion-expanding) #content-wrapper { + overflow: auto; +} + :host(.accordion-disabled) #header, :host(.accordion-readonly) #header, :host(.accordion-disabled) #content, diff --git a/core/src/components/accordion/test/standalone/index.html b/core/src/components/accordion/test/standalone/index.html index d01bed44c0..50cf965424 100644 --- a/core/src/components/accordion/test/standalone/index.html +++ b/core/src/components/accordion/test/standalone/index.html @@ -77,6 +77,26 @@ + +
+

Margins In Content

+ + + + Accordion + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + + + +
diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index b9900a7597..f6e04499b1 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -26,6 +26,9 @@ export interface AlertInput { name?: string; placeholder?: string; value?: any; // TODO(FW-2832): type + /** + * The label text to display next to the input, if the input type is `radio` or `checkbox`. + */ label?: string; checked?: boolean; disabled?: boolean; diff --git a/core/src/components/icon/test/basic/index.html b/core/src/components/icon/test/basic/index.html index 1295cd4af5..e6ea0961b3 100644 --- a/core/src/components/icon/test/basic/index.html +++ b/core/src/components/icon/test/basic/index.html @@ -87,6 +87,30 @@ + + + +

ios: star outline

+

md: star

+ + + + + +

mode: ios

+

ios: star outline

+

md: star

+ + + + + +

mode: md

+

ios: star outline

+

md: star

+ + + ion-item w/ [detail="true"] attr. text text text text text text diff --git a/core/src/components/input/test/input.spec.ts b/core/src/components/input/test/input.spec.ts new file mode 100644 index 0000000000..f07d46c8f0 --- /dev/null +++ b/core/src/components/input/test/input.spec.ts @@ -0,0 +1,14 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { Input } from '../input'; + +it('should inherit attributes', async () => { + const page = await newSpecPage({ + components: [Input], + html: '', + }); + + const nativeEl = page.body.querySelector('ion-input input'); + expect(nativeEl.getAttribute('title')).toBe('my title'); + expect(nativeEl.getAttribute('tabindex')).toBe('-1'); + expect(nativeEl.getAttribute('data-form-type')).toBe('password'); +}); diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index 2c9e55f292..38f9faaadb 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -71,6 +71,16 @@ export class Radio implements ComponentInterface { */ @Prop() value?: any | null; + @Watch('value') + valueChanged() { + /** + * The new value of the radio may + * match the radio group's value, + * so we see if it should be checked. + */ + this.updateState(); + } + /** * 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. diff --git a/core/src/components/radio/test/radio.spec.ts b/core/src/components/radio/test/radio.spec.ts index 4cd981805b..88b4547109 100644 --- a/core/src/components/radio/test/radio.spec.ts +++ b/core/src/components/radio/test/radio.spec.ts @@ -1,4 +1,6 @@ import { Radio } from '../radio.tsx'; +import { RadioGroup } from '../../radio-group/radio-group.tsx'; +import { newSpecPage } from '@stencil/core/testing'; describe('ion-radio', () => { it('should set a default value', async () => { @@ -8,4 +10,24 @@ describe('ion-radio', () => { expect(radio.value).toEqual('ion-rb-0'); }); + + it('should update the checked state when updating the value', async () => { + const page = await newSpecPage({ + components: [Radio, RadioGroup], + html: ` + + + + `, + }); + + const radio = page.root.querySelector('ion-radio'); + expect(radio.classList.contains('radio-checked')).toBe(false); + + radio.value = 'a'; + + await page.waitForChanges(); + + expect(radio.classList.contains('radio-checked')).toBe(true); + }); }); diff --git a/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts b/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts index 6806369909..033bff3ce7 100644 --- a/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts +++ b/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts @@ -2,8 +2,12 @@ import { expect } from '@playwright/test'; import type { E2EPage } from '@utils/test/playwright'; import { test } from '@utils/test/playwright'; -// TODO FW-3081 -test.describe.skip('ripple-effect: basic', () => { +test.describe('ripple-effect: basic', () => { + test.beforeEach(async ({ skip }) => { + skip.rtl(); + skip.mode('ios'); + }); + test('should add .ion-activated when pressed', async ({ page }) => { await verifyRippleEffect(page, '#small-btn'); await verifyRippleEffect(page, '#large-btn'); @@ -14,7 +18,7 @@ test.describe.skip('ripple-effect: basic', () => { test.describe('ripple effect with nested ion-button', () => { test('should add .ion-activated when the block is pressed', async ({ page }) => { - await page.goto(`/src/components/ripple-effect/test/basic?ionic:_testing=false&ionic:mode=md`); + await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false'); const el = page.locator('#ripple-with-button'); @@ -30,9 +34,7 @@ test.describe.skip('ripple-effect: basic', () => { // Waits for the ripple effect to be added await page.waitForSelector('.ion-activated'); - const elHandle = await el.elementHandle(); - const classes = await elHandle?.evaluate((el) => el.classList.value); - expect(classes).toMatch(/ion-activated/); + await expect(el).toHaveClass(/ion-activated/); }); test('should add .ion-activated when the button is pressed', async ({ page }) => { @@ -42,7 +44,7 @@ test.describe.skip('ripple-effect: basic', () => { }); const verifyRippleEffect = async (page: E2EPage, selector: string) => { - await page.goto(`/src/components/ripple-effect/test/basic?ionic:_testing=false&ionic:mode=md`); + await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false'); const el = page.locator(selector); @@ -55,10 +57,7 @@ const verifyRippleEffect = async (page: E2EPage, selector: string) => { await page.mouse.down(); } - // Waits for the ripple effect to be added - await page.waitForSelector(`${selector}.ion-activated`); + await page.waitForSelector('.ion-activated'); - const elHandle = await el.elementHandle(); - const classes = await elHandle?.evaluate((el) => el.classList.value); - expect(classes).toMatch(/ion-activated/); + await expect(el).toHaveClass(/ion-activated/); }; diff --git a/core/src/components/segment/test/a11y/segment.e2e.ts b/core/src/components/segment/test/a11y/segment.e2e.ts index 76bcad3be6..8fe9e20049 100644 --- a/core/src/components/segment/test/a11y/segment.e2e.ts +++ b/core/src/components/segment/test/a11y/segment.e2e.ts @@ -10,7 +10,8 @@ test.describe('segment: a11y', () => { expect(results.violations).toEqual([]); }); - test('segment buttons should be keyboard navigable', async ({ page, browserName, skip }, testInfo) => { + // TODO FW-3710 + test.skip('segment buttons should be keyboard navigable', async ({ page, browserName, skip }, testInfo) => { // TODO (FW-2979) skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.'); const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; diff --git a/core/src/components/slides/IonicSlides.ts b/core/src/components/slides/IonicSlides.ts index 3ca87af42d..c8c7d0c018 100644 --- a/core/src/components/slides/IonicSlides.ts +++ b/core/src/components/slides/IonicSlides.ts @@ -16,7 +16,6 @@ export const IonicSlides = (opts: any) => { slidesOffsetBefore: 0, slidesOffsetAfter: 0, touchEventsTarget: 'container', - autoplay: false, freeMode: false, freeModeMomentum: true, freeModeMomentumRatio: 1, diff --git a/core/src/components/textarea/test/textarea.spec.ts b/core/src/components/textarea/test/textarea.spec.ts new file mode 100644 index 0000000000..a3e8a7ec13 --- /dev/null +++ b/core/src/components/textarea/test/textarea.spec.ts @@ -0,0 +1,14 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { Textarea } from '../textarea'; + +it('should inherit attributes', async () => { + const page = await newSpecPage({ + components: [Textarea], + html: '', + }); + + const nativeEl = page.body.querySelector('ion-textarea textarea'); + expect(nativeEl.getAttribute('title')).toBe('my title'); + expect(nativeEl.getAttribute('tabindex')).toBe('-1'); + expect(nativeEl.getAttribute('data-form-type')).toBe('password'); +}); diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index b7f990ec93..37cf69fe39 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -310,7 +310,7 @@ export class Textarea implements ComponentInterface { componentWillLoad() { this.inheritedAttributes = { ...inheritAriaAttributes(this.el), - ...inheritAttributes(this.el, ['data-form-type', 'title']), + ...inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex']), }; } diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index ed5f2a7e3f..a7d0b3b758 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -3,8 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -# [7.0.0-rc.1](https://github.com/ionic-team/ionic-docs/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08) +## [6.6.2](https://github.com/ionic-team/ionic-docs/compare/v6.6.1...v6.6.2) (2023-03-15) +**Note:** Version bump only for package @ionic/docs + + + + + +# [7.0.0-rc.1](https://github.com/ionic-team/ionic-docs/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08) **Note:** Version bump only for package @ionic/docs diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index 5b2ae920f5..cd0a3bee75 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.6.2](https://github.com/ionic-team/ionic/compare/v6.6.1...v6.6.2) (2023-03-15) + +**Note:** Version bump only for package @ionic/angular-server + + + + + # [7.0.0-rc.1](https://github.com/ionic-team/ionic/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08) **Note:** Version bump only for package @ionic/angular-server diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index 44248e70d8..16341ad967 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.6.2](https://github.com/ionic-team/ionic/compare/v6.6.1...v6.6.2) (2023-03-15) + +**Note:** Version bump only for package @ionic/react-router + + + + + # [7.0.0-rc.1](https://github.com/ionic-team/ionic/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08) **Note:** Version bump only for package @ionic/react-router diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json index a3489d0276..20665ee719 100644 --- a/packages/react-router/package-lock.json +++ b/packages/react-router/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@ionic/react": "^7.0.0-rc.1", + "tslib": "*" }, "devDependencies": { diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 35405f9ace..0715ebe0a2 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.6.2](https://github.com/ionic-team/ionic/compare/v6.6.1...v6.6.2) (2023-03-15) + + +### Bug Fixes + + +* **react/vue:** properly switch ionicon based on the mode when ios/md is set ([#26924](https://github.com/ionic-team/ionic/issues/26924)) ([1eb9a08](https://github.com/ionic-team/ionic/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae)), closes [#26207](https://github.com/ionic-team/ionic/issues/26207) + + + + + # [7.0.0-rc.1](https://github.com/ionic-team/ionic/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08) diff --git a/packages/react/src/components/IonIcon.tsx b/packages/react/src/components/IonIcon.tsx index 8d782d5348..a873f3c457 100644 --- a/packages/react/src/components/IonIcon.tsx +++ b/packages/react/src/components/IonIcon.tsx @@ -4,7 +4,7 @@ import { NavContext } from '../contexts/NavContext'; import type { IonicReactProps } from './IonicReactProps'; import { IonIconInner } from './inner-proxies'; -import { createForwardRef, isPlatform } from './utils'; +import { createForwardRef, getConfig } from './utils'; interface IonIconProps { color?: string; @@ -34,12 +34,15 @@ class IonIconContainer extends React.PureComponent { } render() { - const { icon, ios, md, ...rest } = this.props; + const { icon, ios, md, mode, ...rest } = this.props; let iconToUse: typeof icon; + const config = getConfig(); + const iconMode = mode || config?.get('mode'); + if (ios || md) { - if (isPlatform('ios')) { + if (iconMode === 'ios') { iconToUse = ios ?? md ?? icon; } else { iconToUse = md ?? ios ?? icon; diff --git a/packages/react/test-app/README.md b/packages/react/test-app/README.md new file mode 100644 index 0000000000..10e49c2b06 --- /dev/null +++ b/packages/react/test-app/README.md @@ -0,0 +1,47 @@ +# React Test App + +## Getting Started + +### Setup + +Make sure you are using the latest versions of node and npm. If you do not have these, [download the installer](https://nodejs.org/) for the LTS version of Node.js. This is the best way to also [install npm](https://blog.npmjs.org/post/85484771375/how-to-install-npm#_=_). + +### Building Dependencies + +Navigate to the `core`, `packages/react` and `packages/react-router` directories and build each of them: + +```bash +npm i +npm run build +``` + +Then, install dependencies from this directory for this test app: + +``` +npm i +``` + +### Syncing Changes + +When making changes to the React package, run the following from this directory to sync the changes: + +```bash +npm run sync +``` + +### Previewing App + +To preview this app locally, run the following from this directory: + +```bash +npm start +``` + +### Running Tests + +To run the e2e tests, run the following from this directory: + +``` +npm run build +npm run e2e +``` diff --git a/packages/react/test-app/public/assets/logo-android.svg b/packages/react/test-app/public/assets/logo-android.svg new file mode 100644 index 0000000000..36d03ecea6 --- /dev/null +++ b/packages/react/test-app/public/assets/logo-android.svg @@ -0,0 +1 @@ +Logo Android diff --git a/packages/react/test-app/public/assets/logo-apple.svg b/packages/react/test-app/public/assets/logo-apple.svg new file mode 100644 index 0000000000..838eb7cca7 --- /dev/null +++ b/packages/react/test-app/public/assets/logo-apple.svg @@ -0,0 +1 @@ +Logo Apple diff --git a/packages/react/test-app/src/App.tsx b/packages/react/test-app/src/App.tsx index c6bf826508..2003e4295b 100644 --- a/packages/react/test-app/src/App.tsx +++ b/packages/react/test-app/src/App.tsx @@ -26,6 +26,7 @@ import OverlayHooks from './pages/overlay-hooks/OverlayHooks'; import OverlayComponents from './pages/overlay-components/OverlayComponents'; import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted'; import Tabs from './pages/Tabs'; +import Icons from './pages/Icons'; import NavComponent from './pages/navigation/NavComponent'; import IonModalConditionalSibling from './pages/overlay-components/IonModalConditionalSibling'; import IonModalConditional from './pages/overlay-components/IonModalConditional'; @@ -54,6 +55,7 @@ const App: React.FC = () => ( + diff --git a/packages/react/test-app/src/pages/Icons.tsx b/packages/react/test-app/src/pages/Icons.tsx new file mode 100644 index 0000000000..caf9f0b4e6 --- /dev/null +++ b/packages/react/test-app/src/pages/Icons.tsx @@ -0,0 +1,95 @@ +import React, { useState } from 'react'; +import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/react'; +import { heart, heartCircleOutline, logoApple, logoTwitter, personCircleOutline, star, starOutline, trash } from 'ionicons/icons'; + +interface IconsProps {} + +const Icons: React.FC = () => { + const [dynamic, setDynamic] = useState(star); + const iosCustomSvg = "../assets/logo-apple.svg"; + const mdCustomSvg = "../assets/logo-android.svg"; + + const toggle = () => { + setDynamic(dynamic => dynamic === star ? starOutline : star); + } + + return ( + <> + + + + + + Icons + + + + + + + Icons + + + + + + + Static Icons + + + + + + Logo Icons + + + + + Dynamic Icon + toggle()}> + Toggle Icon + + + + + +

ios: heart circle

+

md: person circle

+ + + + + +

ios: star outline

+

md: star

+ + + + + +

mode: ios

+

ios: star outline

+

md: star

+ + + + + +

mode: md

+

ios: star outline

+

md: star

+ + + + + +

Custom SVG

+ + + + + + ); +}; + +export default Icons; diff --git a/packages/react/test-app/src/pages/Main.tsx b/packages/react/test-app/src/pages/Main.tsx index c5f097357d..0d95f9d0ef 100644 --- a/packages/react/test-app/src/pages/Main.tsx +++ b/packages/react/test-app/src/pages/Main.tsx @@ -25,26 +25,21 @@ const Main: React.FC = () => { Overlay Hooks - - Overlay Components - - Keep Contents Mounted Overlay Components - - Navigation - - Tabs + + Icons + diff --git a/packages/react/test-app/tests/e2e/specs/icons/icons.cy.ts b/packages/react/test-app/tests/e2e/specs/icons/icons.cy.ts new file mode 100644 index 0000000000..5e6d8f4003 --- /dev/null +++ b/packages/react/test-app/tests/e2e/specs/icons/icons.cy.ts @@ -0,0 +1,22 @@ +describe('Icons', () => { + it('should use ios svg', () => { + cy.visit('/icons?ionic:mode=ios'); + + cy.get('#customSvg').shadow().find('svg').should('have.class', 'ios'); + cy.get('#customSvg').shadow().find('svg').should('have.class', 'apple'); + }); + + it('should use md svg', () => { + cy.visit('/icons?ionic:mode=md'); + + cy.get('#customSvg').shadow().find('svg').should('have.class', 'md'); + cy.get('#customSvg').shadow().find('svg').should('have.class', 'android'); + }); + + it('should use fallback md svg', () => { + cy.visit('/icons'); + + cy.get('#customSvg').shadow().find('svg').should('have.class', 'md'); + cy.get('#customSvg').shadow().find('svg').should('have.class', 'android'); + }); +}) diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index 7feb7e35db..5ee829786a 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.6.2](https://github.com/ionic-team/ionic/compare/v6.6.1...v6.6.2) (2023-03-15) + + +**Note:** Version bump only for package @ionic/vue-router + + + + + # [7.0.0-rc.1](https://github.com/ionic-team/ionic/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08) **Note:** Version bump only for package @ionic/vue-router diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 14fe2632da..ff34ec7812 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.6.2](https://github.com/ionic-team/ionic/compare/v6.6.1...v6.6.2) (2023-03-15) + + +### Bug Fixes + +* **react/vue:** properly switch ionicon based on the mode when ios/md is set ([#26924](https://github.com/ionic-team/ionic/issues/26924)) ([1eb9a08](https://github.com/ionic-team/ionic/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae)), closes [#26207](https://github.com/ionic-team/ionic/issues/26207) + + + + + # [7.0.0-rc.1](https://github.com/ionic-team/ionic/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08) diff --git a/packages/vue/src/components/IonIcon.ts b/packages/vue/src/components/IonIcon.ts index dea7ca86ab..9840652f8d 100644 --- a/packages/vue/src/components/IonIcon.ts +++ b/packages/vue/src/components/IonIcon.ts @@ -1,7 +1,8 @@ -import { isPlatform } from "@ionic/core/components"; import { defineCustomElement } from "ionicons/components/ion-icon.js"; import { h, defineComponent } from "vue"; +import { getConfig } from "../utils"; + export const IonIcon = /*@__PURE__*/ defineComponent({ name: "IonIcon", props: { @@ -19,11 +20,15 @@ export const IonIcon = /*@__PURE__*/ defineComponent({ setup(props, { slots }) { defineCustomElement(); return () => { - const { icon, ios, md } = props; + const { icon, ios, md, mode } = props; let iconToUse: typeof icon; + + const config = getConfig(); + const iconMode = mode || config?.get("mode"); + if (ios || md) { - if (isPlatform("ios")) { + if (iconMode === "ios") { iconToUse = ios ?? md ?? icon; } else { iconToUse = md ?? ios ?? icon; diff --git a/packages/vue/test/base/public/assets/logo-android.svg b/packages/vue/test/base/public/assets/logo-android.svg new file mode 100644 index 0000000000..36d03ecea6 --- /dev/null +++ b/packages/vue/test/base/public/assets/logo-android.svg @@ -0,0 +1 @@ +Logo Android diff --git a/packages/vue/test/base/public/assets/logo-apple.svg b/packages/vue/test/base/public/assets/logo-apple.svg new file mode 100644 index 0000000000..838eb7cca7 --- /dev/null +++ b/packages/vue/test/base/public/assets/logo-apple.svg @@ -0,0 +1 @@ +Logo Apple diff --git a/packages/vue/test/base/src/router/index.ts b/packages/vue/test/base/src/router/index.ts index 46c79c52c4..8ad0c0d477 100644 --- a/packages/vue/test/base/src/router/index.ts +++ b/packages/vue/test/base/src/router/index.ts @@ -33,6 +33,10 @@ const routes: Array = [ path: '/keep-contents-mounted', component: () => import('@/views/OverlaysKeepContentsMounted.vue') }, + { + path: '/icons', + component: () => import('@/views/Icons.vue') + }, { path: '/inputs', component: () => import('@/views/Inputs.vue') diff --git a/packages/vue/test/base/src/views/Home.vue b/packages/vue/test/base/src/views/Home.vue index 09c35f4908..a0652a93b0 100644 --- a/packages/vue/test/base/src/views/Home.vue +++ b/packages/vue/test/base/src/views/Home.vue @@ -20,6 +20,9 @@ Overlays + + Icons + Inputs diff --git a/packages/vue/test/base/src/views/Icons.vue b/packages/vue/test/base/src/views/Icons.vue new file mode 100644 index 0000000000..f44e3516b1 --- /dev/null +++ b/packages/vue/test/base/src/views/Icons.vue @@ -0,0 +1,143 @@ + + + diff --git a/packages/vue/test/base/tests/e2e/specs/icons.cy.js b/packages/vue/test/base/tests/e2e/specs/icons.cy.js new file mode 100644 index 0000000000..cdf34a0130 --- /dev/null +++ b/packages/vue/test/base/tests/e2e/specs/icons.cy.js @@ -0,0 +1,22 @@ +describe('Icons', () => { + it('should use ios svg', () => { + cy.visit('http://localhost:8080/icons?ionic:mode=ios'); + + cy.get('#customSvg').shadow().find('svg').should('have.class', 'ios'); + cy.get('#customSvg').shadow().find('svg').should('have.class', 'apple'); + }); + + it('should use md svg', () => { + cy.visit('http://localhost:8080/icons?ionic:mode=md'); + + cy.get('#customSvg').shadow().find('svg').should('have.class', 'md'); + cy.get('#customSvg').shadow().find('svg').should('have.class', 'android'); + }); + + it('should use fallback md svg', () => { + cy.visit('http://localhost:8080/icons'); + + cy.get('#customSvg').shadow().find('svg').should('have.class', 'md'); + cy.get('#customSvg').shadow().find('svg').should('have.class', 'android'); + }); +})