Issue number: resolves#23650
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
In traditional native applications, navigation will inform screen
readers that the view has changed. This allows screen readers to focus
the correct view. In a single page app on the web, this same concept
does not exist. As a result, transitioning from Page A to Page B results
in screen reader focus remaining on Page A. This means that users who
rely on screen readers are not informed of view changes.
Currently, developers are responsible for implementing this on their
own.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Introduces a new focus manager priority global config. When defined,
the app developer can specify which area of the view focus should be
moved to when the transition ends. The developer does this by specifying
areas in order of priority which allows for fallbacks in the event that
a particular UI component (such as a header) does not exist on a view.
There is some risk here by managing focus for the application. As a
result, this feature is considered experimental and disabled by default.
The team should collect feedback based on usage and enable it by default
when they feel this feature is stable enough.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
⚠️ Due to the `tsconfig.json` change, reviewers should restart the
Stencil dev server when checking out these changes locally.
Reviewers: Please test both of the test template files on physical iOS
and Android device with VoiceOver and TalkBack enabled, respectively.
Docs Link: https://github.com/ionic-team/ionic-docs/pull/3627
Issue number: resolves#29386
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The item border does not have sufficient contrast in dark mode making
the border almost invisible.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed the `--ion-border-color` in the MD dark palette. Instead,
we're using the [theme
default](dc1172a841/core/src/themes/ionic.theme.default.md.scss (L31)).
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
The earliest reference to the offending line Brandy and I could find was
[here](https://github.com/ionic-team/ionic-framework/issues/18713#issuecomment-510644371).
Issue number: N/A
---------
## What is the current behavior?
Currently, every Sass variable in Ionic has the `!default` flag added to
the end.
From the [Sass variables
documentation](https://sass-lang.com/documentation/variables/):
> Normally when you assign a value to a variable, if that variable
already had a value, its old value is overwritten. But if you’re writing
a Sass library, you might want to allow your users to configure your
library’s variables before you use them to generate CSS.
>
> To make this possible, Sass provides the `!default` flag. This assigns
a value to a variable only if that variable isn’t defined or its value
is [null](https://sass-lang.com/documentation/values/null). Otherwise,
the existing value will be used.
In past versions of Ionic Framework, developers wrote Sass variables to
rebuild Ionic Framework using their own values. In the latest versions
of Ionic Framework, this is not possible.
## What is the new behavior?
Removes the `!default` flag from all Sass variables.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
-------
Co-authored-by: brandyscarney <brandyscarney@users.noreply.github.com>
Issue number: resolves#29219
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
We got feedback that the current dark theme is a bit jarring when
compared with native. In particular, devs are expecting the contrast to
be white for many of these colors to match native iOS. Currently, text
inside of a primary button is black on dark mode, but devs expect it to
be white. Additionally, the dark mode colors appear to be too washed out
when compared with their light mode counterparts.
The team discussed this and we think we can find a way to make the
colors more in line with what devs expect while still allowing for AA
color contrast levels.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adjusted the secondary and danger colors to be slightly more
vibrant/inline with what developers expect in mobile apps while still
meeting AA color contrast.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
I intentionally did not change the contrast color, and I intentionally
did not significantly change the vibrancy of each color token. I did
some research into how the native platforms handle colors. I'll place
this information here, because there are some subtle differences between
web and native that make a difference.
### Material Design
[Source](https://m2.material.io/design/color/dark-theme.html#ui-application)
Material Design 2 calls for desaturated color tokens as well as flipping
contrast colors. For example, a vibrant purple background with light
text on light mode is a washed purple with dark text on dark mode. The
colors in Ionic <=7 did not follow these patterns. The tokens in Ionic 8
now follows these patterns, so what we have in `main` means we are
aligning closer with native MD than have in the past.
### iOS
[Source](https://developer.apple.com/design/human-interface-guidelines/accessibility#Color-and-effects)
iOS is a bit tricky. On the docs, Apple references the WCAG color
contrast formula (what Ionic follows). However, the table they present
below is slightly different:
| Text Size | Text Weight | Minimum Contrast Ratio |
| - | - | - |
| Up to 17 points | All | 4.5:1 |
| 18 points and larger | All | 3:1 |
| All | Bold | 3:1 |
The last row is the main difference. WCAG states that text that is bold
AND >=14pts (~18.66px) needs to meet a minimum contrast ratio of 3:1.
Apple's guidelines state that any text that is bold (regardless of size)
needs to meet a minimum contrast ratio of 3:1. In other words, **Apple
is using different guidelines to choose colors which is why colored dark
mode buttons on iOS typically use white text**.
However, Apple is inconsistent in implementing its own guidelines.
Consider the following red buttons in the Apple Music app.
| Screenshot | Meets Web guidelines | Meets Apple guidelines | Notes |
| - | - | - | - |
| <img
src="https://github.com/ionic-team/ionic-framework/assets/2721089/6bb0e0b3-c29e-4b96-9ad5-e45e59bf0415"
width="300" /> | ❌ | ❌ | Text is not bold which makes it not meet either
guidelines. |
| <img
src="https://github.com/ionic-team/ionic-framework/assets/2721089/8ce93b45-0b2b-4160-97a4-19852134684c"
width="300" /> | ❌ | ✅ | Text is bold which makes it pass the Apple
guidelines, but it's still too small to also pass the Web guidelines. |
### Ionic
One of the things I tried is adjusting the base color to work well with
white and black backgrounds. It's common to have a blue background with
white text (such as a button) AND to have a blue link on a black
background (such as an `a` element). This approach does not work well
for the shade/tint colors used for hover/focus states. These colors also
need to meet Web guidelines.
Consider the following example:
| Screenshot | Notes | Text/Link passes AA guidelines | Tint passes AA
guidelines |
| - | - | - | - |
| 
| This uses the same primary color found in the light palette | ❌ | ✅ |
| 
| This changes the base color such that the Text/Link passes with a
4.5:1 ratio | ✅ | ❌ |
| 
| This changes the base color such that the Tint passes with a 4:5:1
ratio | ❌ | ✅ |
We also considered adjusting the `a` and `ion-text` colors to use the
tint color. We decided against that because it a) felt a little odd
given that tint is typically used for states (hover, focus, etc) and b)
we were concerned that making this change would impose future
restrictions on how this color palette can evolve.
### Conclusion
While Ionic's colors don't exactly match the iOS colors, the reality is
that we are a web-based tool, so we are going to be evaluated using
web-based tools/standards. As a result, it's recommended that we align
closer with the Web guidelines than Apple's guidelines.
## Testing
Testing:
Developers can look at the colors by opening
http://localhost:3333/src/themes/test/colors
In the video below, the first state is the dark theme in `main`. The
second state is the proposed changes.
| Visual Comparison |
| - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/241fb1b6-212b-4f03-83cd-9558b9a53761"></video>
|
Issue number: resolves#29211
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
In https://github.com/ionic-team/ionic-framework/pull/28861 I fixed a
bug that caused `.popover-viewport` to have `overflow: hidden`. In
reality, this code should have always applied but due to an incorrect
selector it never did.
As it turns out in
https://github.com/ionic-team/ionic-framework/issues/29211, some
developers were relying on the broken behavior to build their
applications. In particular, developers were using `ion-popover` without
an `ion-content`. The linked change made it so that using popovers
without `ion-content` were not scrollable.
After talking with @mapsandapps we think it makes sense to officially
support this behavior. We support using [modals without
`ion-content`](https://ionicframework.com/docs/api/modal#custom-dialogs),
and we could not think of a reason to not support the same use case for
popover.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- If the `.popover-viewport` element has a child content then
`.popover-viewport `will not be scrollable.
- If the `.popover-viewport` element does not have a child content then
`.popover-viewport` will be scrollable.
I implemented this behavior using progressive enhancement via `:has`.
The [`:has` pseudo-class](https://caniuse.com/?search=%3Ahas) has
cross-browser support. Ionic v7 supports some versions of browsers that
do not have `:has` support. As a result, we fall back to the existing
behavior in this environment. Developers are able to get this behavior
on older browsers by explicitly setting `overflow: auto` on
`.popover-viewport`.
Fortunately, we will be dropping support for several of the older
browsers versions in Ionic v8, so the need to do the manual opt-in
should be less frequent as time goes on.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.8.2-dev.11711383079.118d48a5`
Testing:
1. Open https://codepen.io/liamdebeasi/pen/JjVJrZQ?editors=1100 (this
has a dev build installed)
2. Click each button to open a popover.
3. Verify that each popover can be scrolled.
I could not find a great way to automate this test, but let me know if
anyone has ideas!
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Ionic Framework currently plans to offer dark and high contrast "themes"
in v8. However this naming nomenclature conflicts with a significant new
feature that the team is working on towards v9+.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Migrates previous dark and high contrast "themes" to "palettes"
- Updates test infrastructure to import from the new stylesheet
locations
## Does this introduce a breaking change?
- [x] Yes
- [ ] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
Developers that have updated to the Ionic v8 beta and have implemented
the dark and high contrast themes, will need to update the import path:
```diff
-@import '@ionic/angular/css/themes/dark.always.css';
+@import '@ionic/angular/css/palettes/dark.always.css';
```
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Blocked by: https://github.com/ionic-team/ionic-framework/pull/29148.
Review that first.
Documentation PR: https://github.com/ionic-team/ionic-docs/pull/3521
---------
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Migrates the test infrastructure to use `palettes` instead of `themes`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This **does not** change where the light/dark/high contrast styles live
or how they are consumed in the test infra. That work is done here:
https://github.com/ionic-team/ionic-framework/pull/29149
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
⚠️ This is a combination of previously approved PRs with the
exception of
fe9dca513c.
This change was made as a result of
https://github.com/ionic-team/ionic-framework-design-documents/pull/248.
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Users do not have a way of increasing the contrast in Ionic apps. This
is valuable for people with low vision as increasing the contrast
between foreground and background content helps improve readability.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds a high contrast light and high contrast dark theme. As with our
other themes, developers can choose between system, class, and always
stylesheets.
While we aim to improve contrast for text and UI components, this
feature prioritizes text in the event that both text and UI component
cannot be improved without one negatively impacting the other.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.6.7-dev.11706894781.1cd59fde`
Testing instructions:
1. Open `src/themes/test/css-variables`. Activate the high contrast
light and dark themes to verify that contrast does increase.
2. Use the dev build to integrate the theme into a test app (conference
app, starter app, etc).
I'd recommend using these imports:
```css
@import "@ionic/angular/css/themes/high-contrast.system.css";
@import "@ionic/angular/css/themes/high-contrast-dark.system.css";
```
Note: Make sure this is imported **after** `core.scss`
---------
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: resolves#28399
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
As part of https://github.com/ionic-team/ionic-framework/pull/26976 I
fixed an issue where `pointer-events: none` was not applied until after
the menu open gesture finishes. This resolved a bug where scrolling was
latching after the menu gesture starts.
However, I did not account for the edge case where scrolling latches
_before_ `pointer-events: none` is applied in the DOM. Since scrolling
has already latched then `pointer-events: none` does not change the
scrolling behavior. This can happen if a user swipes up and to the right
from the left edge of the screen.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `overflow-y: hidden` is now applied to the scrollable content which
will interrupt any scrolling when the menu is open.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Testing:
This bug fixes a timing issue where scrolling latches on the main
content as the menu tries to open. As a result, I am unable to write
reliable automated tests for this. Reviewers should perform the
following test on iOS and Android physical devices:
1. Open `src/components/menu/test/basic`.
2. Add enough elements to the main page content such that it scrolls (I
added a list with items).
3. On each device, attempt to scroll the main content while also opening
the menu on the starting edge of the screen.
Scrolling on the main content should not happen if the menu opens.
Dev build: `7.6.5-dev.11705341148.1a550d3b`
Issue number: N/A
---------
## What is the current behavior?
The `system` and `always` dark theme files target the mode-specific
styles by using the following selectors:
```scss
:root {
@include dark-base-theme();
}
.ios body {
@include dark-ios-theme();
}
.md body {
@include dark-md-theme();
}
```
This is an issue because then users **cannot** override the dark theme
by targeting `:root.ios`, they must target the `body`.
## What is the new behavior?
Updates the mode selectors to target the `:root` with the mode-specific
class:
```scss
:root {
@include dark-base-theme();
}
:root.ios {
@include dark-ios-theme();
}
:root.md {
@include dark-md-theme();
}
```
This makes more sense, since we want it to still be global but
mode-specific, and allows users to override it on `:root` if desired.
## Does this introduce a breaking change?
- [ ] Yes
- [x] Maybe
- [ ] No
BREAKING CHANGES:
In previous versions, it was recommended to define the dark theme in the
following way:
```css
@media (prefers-color-scheme: dark) {
body {
/* global app variables */
}
.ios body {
/* global ios app variables */
}
.md body {
/* global md app variables */
}
}
```
In Ionic Framework version 8, the dark theme is being distributed via
css files that can be imported. Below is an example of importing a dark
theme file in Angular:
```css
/* @import '@ionic/angular/css/themes/dark.always.css'; */
/* @import "@ionic/angular/css/themes/dark.class.css"; */
@import "@ionic/angular/css/themes/dark.system.css";
```
By importing the `dark.system.css` file, the dark theme variables will
be defined like the following:
```css
@media (prefers-color-scheme: dark) {
:root {
/* global app variables */
}
:root.ios {
/* global ios app variables */
}
:root.md {
/* global md app variables */
}
}
```
Notice that the dark theme is now applied to the `:root` selector
instead of the `body` selector. The
[`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root)
selector represents the `<html>` element and is identical to the
selector `html`, except that its specificity is higher.
While migrating to include the new dark theme files is unlikely to cause
breaking changes, these new selectors can lead to unexpected overrides
if custom CSS variables are being set on the `body` element. We
recommend updating any instances where global application variables are
set to target the `:root` selector instead.
For more information on the new dark theme files, refer to the [Dark
Mode documentation](https://ionicframework.com/docs/theming/dark-mode).
## Other Information
Dev build: `7.6.2-dev.11705355381.14b22962`
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The light theme tokens are included in the starter apps but not in Ionic
Framework itself.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The light mode tokens are bundled with Ionic Framework. This allows
developers to always have the light mode accessible to them including
the tokens.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The team would like to ensure that Ionic Framework components that use
an Ionic color (primary, secondary, etc) on top of a contrast color pass
minimum contrast ratios as defined in the WCAG.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Introduces a revised set of Ionic colors that pass AA color contrast
guidelines when with the appropriate contrast.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Older versions of WebKit used an old `constant()` syntax for safe area
variables: https://caniuse.com/?search=env
As of Safari 11.3, `env()` is supported instead. We haven't supported
Safari 11 in years, so I think this is safe to remove.
Issue number: resolves#24638, resolves#18592
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Developers have requested that Ionic Framework support the dynamic type
feature on iOS for accessibility purposes. Ionic applications do not
respond to font scaling on iOS which can create inaccessible
applications particularly for users with low vision. Ionic apps on
Android devices currently support the Android equivalent due to
functionality in the Chromium webview.
Developers have also requested a way of adjusting the fonts in their
Ionic UI components consistently.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Ionic components now use `rem` instead of `px` where appropriate. This
means devs can change the font size on `html` and the text in supported
Ionic components will scale up/down appropriately
- Add support for Dynamic Type on iOS (the iOS version of Dynamic Font
Scaling)
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: resolves#17676
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The IonNav, IonRouterOutlet, and .ion-page elements have `overflow:
hidden` which prevent content from spilling out of it. This was likely
done to prevent these elements from having overflow scroll (since the
inner IonContent should be scrollable). However, this breaks the
translucency effect on IonTabBar because the content in IonContent can
not scroll under the IonTabBar.
```html
<ion-tabs>
<ion-router-outlet> <!-- this has overflow: hidden -->
...
<ion-content fullscreen="true">...</ion-content>
</ion-router-outlet>
<ion-tab-bar translucent="true">...</ion-tab-bar>
</ion-tabs>
```
In Ionic v3 components such as IonTabs and IonNav did have `overflow:
hidden`:
cf35d5eb7f/src/components/app/app.scss (L241-L246)
However, components like IonNav were not used inside of tabs at the
time, so the reported bug was not a problem then.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed `overflow: hidden` from IonNav, IonRouterOutlet, and
.ion-page. This change seems safe to make because the `position:
absolute` and top/right/bottom/left values should ensure that these
elements take up the available screen space and avoid having overflow
scrolling.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.4.2-dev.11695832397.13fa6703`
Note: Fixing this reveals
https://github.com/ionic-team/ionic-framework/issues/21130 which is why
this fix is dependent on the linked issue getting fixed first.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
this commit removes a globally injected style, `ionic.skip-warns.scss`,
from the project. this stylesheet was used to set a variable, `$Ionic`,
that would turn on/off deprecation warnings in (the also removed)
`ionic.deprecation.scss`. any file using either of the aforementioned
files have been updated.
this change is occurring while the stencil team is looking to improve
the size of generated components that use >1 mode. this deprecation was
a part of an initiative to remove sass source files from artifact
published to npm. while that was completed, this deprecation was not
removed (until now)
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
resolves#17583
BREAKING CHANGE:
The `[hidden]` attribute has been removed from Ionic's global stylesheet. The `[hidden]` attribute can continue to be used, but developers will get the [native `hidden` implementation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) instead. The main difference is that the native implementation is easier to override using `display` than Ionic's implementation.
Developers can add the following CSS to their global stylesheet if they need the old behavior:
```css
[hidden] {
display: none !important;
}
```
