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. -->
- Updates to the latest version of Stencil
- Includes a fix for the api.txt diff issue we are experiencing off
`next`
## 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. -->
Issue number: resolves#29358
---------
<!-- 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. -->
When the clear button is focused, `focusin` is dispatched and bubbles up
to the `ion-input`. Our [scroll assist utility listens for
`focusin`](2fc81ddc9b/core/src/utils/input-shims/hacks/scroll-assist.ts (L135))
to adjust the scroll position. It also causes the input to be
re-focused. As a result, when swiping to the clear button with a screen
reader, focus will be forcibly moved back to the input. This means that
users cannot swipe away from the input to the right when using a screen
reader.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- To fix this, I decided to have the `focusin` event from the clear
button not bubble (as opposed to add a really specific workaround to the
scroll assist utility).
Adding `stopPropagation` was easy enough, but it turned out that the
scroll assist listeners were all configured to listen during the capture
phase instead of the bubble phase. As a result, `stopPropgation` had no
effect because the scroll assist callback had already fired. To address
this, I updated the listeners to listen during the bubbling phase
instead of the capture phase. Based on my testing the capture phase was
not required for scroll assist to work, so it appears safe to remove.
## 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. -->
Dev build: `8.0.1-dev.11713535425.1a4afba3`
Reviewers: Please test this on a physical iOS device and be sure to test
the scroll assist behavior. There is a test at
http://localhost:3333/src/utils/input-shims/hacks/test you can use.
Issue number: resolves#29374
---------
<!-- 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. -->
When using Angular binding syntax, the `debounce` value can be set after
`connectedCallback`, but before `componentDidLoad`. This results in the
internal representation of the `debounce` value to be the default and
the watch callback to never fire.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The callback handler for `debounce` is called on component load,
identical to what we do for the same exact reasons for the input `type`.
- `debounce` will correctly reflect and apply the developers value when
using binding syntax on initial load
## 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. -->
Dev-build: `8.0.1-dev.11713879639.102f51a0`
Forked reproduction with the dev-build is available here:
https://github.com/ionic-team/ionic-framework/issues/29374#issuecomment-2072377087
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. -->
If a dev wants to view a test page in dark mode, they have to manually
add the styles. This can lead to a slowdown. Plus they can't use
Playwright's `goto` to test both light and dark. In order to test dark
mode with Playwright, the dev would need to use `setContent` instead of
`goto`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Dark mode can be added to any page by appending `palette=dark` to the
URL.
- The param will be used to add a link tag with the correct palette
file.
- Playwright will load the correct palette file when a dev uses `goto`
and `{ themes: ['dark'] }`
## 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. -->
I recommend using badge to try this out. It already has a `goto` in the
basic tests.
Issue number: internal
---------
## What is the current behavior?
Tab bar & tab button use the `md` styles for the `ionic` theme
## What is the new behavior?
Adds the following styles for the `ionic` theme:
- Rectangular, fixed tab bar
- Box shadow with elevation z2
- Selected, activated, and focused states
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
- A ticket (FW-6186) has been created to track updating the hardcoded
hex values to design tokens
- A ticket (FW-6189) has been created to add badge styles
Issue number: None
---------
<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
This PR follows the architectural changes defined on the _SCSS
Architecture Design Doc_. Due to some of the developments done in the
meantime, not everything that was defined on that document was followed
and some sections were simplified.
Overall, there were two guidelines that supported the work on this PR:
- Have no impact on the current scss partials & CSS architecture for the
`md/iOS` themes.
- Make everything related to the new `Ionic` Theme separated.
Based on these, here're the changes made:
**On Themes folder (private):**
- Renamed current internal scss partials on src/themes, related to
md/iOS, to `native.*.scss` and move them to a new folder, called
`native`. Updated imports on all framework.
- Removed the ionic prefix from the name of the mixins and function
partials on src/themes. Updated imports on all framework.
- Created new folder, named ionic, inside src/themes. This holds the
`ionic.globals.scss`, with all the mixins and functions forwarded, to be
used on other scopes.
- Replaced on already created Ionic theme files, the usage of tokens and
mixins with @use, to instead _@use
"../../themes/ionic/ionic.globals.scss" as globals;_. This ensures an
equal approach is followed everywhere and also makes it easier to change
the files imported or paths, in the future, as its all in the same
global file.
- Updated the foundations `readMe` file, with the new process for using
globals.
**On css folder (public):**
- Created new folder, named `ionic`, inside src/css. This holds all the
files related exclusively to Ionic Theme, following the same structure
as exists now for md/iOS, with a core, a bundle, utils, etc. Some files
were a bit duplicated, to eliminate imports from ios or md theme
partials. The only file common to both Themes is the `normalize.scss`.
- No folder structure or renamings were done on the existing output, to
prevent breaking-changes for developers already making imports from this
folder.
- Updated typography and link partials to use globals instead of tokens.
- Changed `font-size` styles on typography to be on `body`, instead of
`html`, to enable correct support of accessibility features on browsers
and devices, related to `font-size`.
**Other changes related to global styles new architecture:**
- Updated margin & padding utility-classed generated by token, to
include css variables and padding/margin mixins.
- Updated link test to use new global Ionic bundle, correct
utility-class on ion-content and updated snapshots. The font-size
changed to 16, as its now the default on the body.
- Updated typography snapshots.
- Updated prettier format on all scss files. Later on we should make
sure this is equal for all team members.
## 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.
-->
---------
Co-authored-by: Sean Perkins <sean@ionic.io>
Issue number: N/A
---------
## What is the current behavior?
Dark palette is hardcoded in style tags in tests.
## What is the new behavior?
Updated the following tests:
- **datetime/basic** - added an import for `dark.class.css` which works
with the checkbox to toggle the `ion-palette-dark` class
- does not update the e2e test to include dark palette because this was
not tested previously
- **datetime/color** - added an import for `dark.class.css` which works
with the checkbox to toggle the `ion-palette-dark` class
- updates the e2e test to use the dark palette
- **modal/dark-mode** - added an import for `dark.always.css` which
always applies the dark palette
- does not update the e2e test to include dark palette because this test
needs to be moved but I am not sure where it should go yet
- **toggle/enable-on-off-labels** - added an import for `dark.class.css`
which works with the checkbox to toggle the `ion-palette-dark` class
- updates the e2e test to use the dark palette & splits the color into a
separate screenshot test
Did not update the following tests:
- **item/buttons** - has already been updated to remove the dark palette
- **toggle/legacy/enable-on-off-labels** - test was removed in v8
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
- We could probably remove the checkbox toggles entirely when we add
support for the `palette` query param.
---------
Co-authored-by: ionitron <hi@ionicframework.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. -->
Checkbox does not have an ionic theme implementation.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds the ionic theme styles and initial features for checkbox.
- This PR is a combination of all the individual PRs already reviewed.
## 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. -->
We should confirm that the visual styles and behavior function as we
expect with all the changes combined in this PR.
---------
Co-authored-by: João Ferreira <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.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>
|
Team members on Windows were having trouble running tests inside of
Docker. Given that headed tests must use WSL, I think it makes sense to
have Windows devs use WSL for any E2E tests run inside of Docker. That
way they aren't switching back and forth between shells.
This PR clarifies the Docker docs that instruct devs on how to use WSL.
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. -->
CI will fail randomly due to which stylesheet is processed last by
rollup in Stencil. This leads to random failures.
This is caused by some of the new ionic stylesheets not importing the
same common stylesheet that included the CSS variable documentation.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Temporarily copies and pastes the documentation blocks to the affected
ionic stylesheets
- CI should no longer fail randomly when comparing the generated
`api.txt` output
- Adds a technical debt track to track removing these changes once the
bug in Stencil is resolved and released
## 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. -->
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. -->
The generated design tokens only generate HEX output of colors. This
prevents us from using the color tokens when we need to manipulate the
alpha channel of the color.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Generate a rgb color token and sass variable for each existing color
token.
- These "rgb" formatted variables are an existing practice to Ionic
Framework. Developers are expected to pass the variable into an `rgb` or
`rgba` function.
## 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. -->
Issue number: None
---------
<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added new prop `shape`, only supported on Ionic Theme.
- Added scss for the different shapes.
- Added missing scss for font-weight and line-height.
- Added missing tests for focus state and new tests for shape.
- Added new font weight and line-height design tokens. This change
uncovered an issue on the IOnic Typography tests that resulted on
snapshots differences.
- Added & updated new snapshot baselines.
## 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.
-->
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.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. -->
N/A
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds two global classes for `.ionic-link` (standalone) and
`.ionic-link-underline` (underline) appearances.
- The global classes apply when directly applied to an anchor element
(`a`) or when used on a parent container that renders a link internally.
**Usage**
Developers will need to import the link global stylesheet at this time
to leverage the following CSS classes.
```html
<!-- Basic Usage -->
<a href="#" class="ionic-link">Standalone</a>
<a href="#" class="ionic-link-underline">Underline</a>
<!-- Nested Usage -->
<div class="ionic-link">
<a href="#">Standalone</a>
</div>
<div class="ionic-link-underline">
<a href="#">Underline</a>
</div>
```
**Focus and Activated States**
Developers should apply the `ion-focusable` and `ion-activatable`
classes to the anchor elements to enable proper styling on a mobile
device. For web-only usages, the fallback `:focus` and `:active` pseudo
states will apply correctly.
```html
<!-- Basic Usage -->
<a href="#" class="ionic-link ion-focusable ion-activatable">Standalone</a>
<a href="#" class="ionic-link-underline ion-focusable ion-activatable">Underline</a>
```
### Design Changes
This section is areas of the implementation that are not consistent with
the design and why.
1. Font size: Link font sizing is inherited from its content. This is to
provide visual consistency when using a link within a paragraph or
existing text content. Links should not have an explicit font size, but
can be customized by the developer if a specific font size is desired.
2. Color: `currentColor` was used in place of
`$ionic-color-neutral-900`. This is to provide better visual consistency
when a link is used within content. Text color should be set on the body
or text content, which would apply neutral-900 in places where it is
applied.
3. The text underline offset in the designs is ~3px, but all of the
design implementation is on a 4px grid. We've landed on 2px for the
offset here.
Discussed with Design and these proposed changes were verbally approved.
## 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.
4. Update the BREAKING.md file with the breaking change.
5. 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. -->
Issue number: resolves#24583
---------
<!-- 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. -->
See
https://github.com/ionic-team/ionic-framework/issues/24583#issuecomment-2033478601
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- See https://github.com/ionic-team/ionic-framework/pull/29260 and
https://github.com/ionic-team/ionic-framework/pull/29259. This PR is a
combination of previously reviewed fixes.
## 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. -->
Dev build: `7.8.3-dev.11712695191.1d7ec370`
Issue number: resolves #
---------
<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds the new shapes to ionic theme card
## 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.
-->
---------
Co-authored-by: Brandy Carney <brandy@ionic.io>
<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added a new README.md file under core/src/foudantions, with
documentation about Design 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.
-->
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Issue number: ROU-4815
---------
## What is the current behavior?
- Ionic theme, Icon size was 14px to the default button size;
## What is the new behavior?
- Ionic theme, Icon size has now 16px to the default button size;
## NOTE:
- Tests related... this a fix on top of [PR of ROU-4815
branch](https://github.com/ionic-team/ionic-framework/pull/29187) and as
was mentioned there, tests will be implemented under a task that will be
then created specifically for it.
Start your review here 👉
[docs/README.md](https://github.com/ionic-team/ionic-framework/blob/FW-6107/docs/README.md)
## What is the current behavior?
Documentation files with information on how to contribute, component
implementations, testing, etc. are scattered throughout various folders
in this repository.
## What is the new behavior?
Consolidates the documentation files into a root `docs/` directory for
easier discovery and organization.
`/docs` tree:
```
├── _config.yml
├── component-guide.md
├── CONTRIBUTING.md
├── README.md
├── sass-guidelines.md
├── angular
│ ├── README.md
│ └── testing.md
├── core
│ ├── README.md
│ └── testing
│ ├── README.md
│ ├── api.md
│ ├── best-practices.md
│ ├── preview-changes.md
│ └── usage-instructions.md
├── react
│ ├── README.md
│ └── testing.md
├── react-router
│ ├── README.md
│ └── testing.md
├── vue
│ ├── README.md
│ └── testing.md
└── vue-router
├── README.md
└── testing.md
```
**Migrates the following:**
| Previous Location | New Location |
| ----------------------------------------------------------- |
----------------------------------------- |
| `.github/COMPONENT-GUIDE.md` | `docs/component-guide.md` |
| `.github/CONTRIBUTING.md` | `docs/CONTRIBUTING.md` |
| `core/scripts/README.md` | `docs/core/testing/preview-changes.md` |
| `core/src/utils/test/playwright/docs/api.md` |
`docs/core/testing/api.md` |
| `core/src/utils/test/playwright/docs/best-practices.md` |
`docs/core/testing/best-practices.md` |
| `core/src/utils/test/playwright/docs/README.md` |
`docs/core/testing/README.md` |
| `core/src/utils/test/playwright/docs/usage-instructions.md` |
`docs/core/testing/usage-instructions.md` |
| `packages/angular/test/README.md` | `docs/angular/testing.md` |
| `packages/react-router/test/README.md` |
`docs/react-router/testing.md` |
| `packages/react/test/README.md` | `docs/react/testing.md` |
| `packages/react/test/base/README.md` | `docs/react/testing.md` |
| `packages/vue/test/README.md` | `docs/vue/testing.md` |
**Adds the following:**
| File | Description |
| ----------------------------- |
-----------------------------------------------------------------------
|
| `docs/sass-guidelines.md` | Sass Variable guidelines taken from
`ionic-framework-design-documents` |
| `docs/README.md` | Entry file that should link to all other files |
| `docs/_config.yml` | Config file for use with GitHub pages |
| `docs/core/README.md` | Description of core, links to contributing and
testing |
| `docs/angular/README.md` | Description of angular, links to
contributing and testing |
| `docs/react/README.md` | Description of react, links to contributing
and testing |
| `docs/react-router/README.md` | Description of react-router, links to
contributing and testing |
| `docs/vue/README.md` | Description of vue, links to contributing and
testing |
| `docs/vue-router/README.md` | Description of vue-router, links to
contributing and testing |
| `docs/vue-router/testing.md` | Testing file for vue-router, populated
from vue-router's main README |
**Does not** add any files for `angular-server`. This is because the
README is essentially empty and there is no testing in that directory. I
can add blank files if we want to have something to add to later.
**Does not** migrate the content of the packages' root `README.md`
files. These files are used for their npm package descriptions so we
should not edit them.
## Hosting Documentation
We can (and should) host these files using GitHub Pages. I have
duplicated them in a personal repository to see how this would look:
[docs-consolidation](https://brandyscarney.github.io/docs-consolidation/).
Doing so will require some formatting fixes (see [Sass
Guidelines](https://brandyscarney.github.io/docs-consolidation/sass-guidelines.html#-reusable-values))
so I did not publish them now but we can easily enable GitHub pages by
toggling a setting in this repository.
## Other information
- Verify that no documentation files were missed in the migration
- You can use these commands to search for `*.md` files in a directory:
- `find core/src -type f -name "*.md" -print`
- `find packages/angular -type f -name "*.md" -not -path
"**/node_modules/*" -print`
- I did add some redirect links in some of the existing markdown files
so they might still exist for that reason
- We should probably break up the contributing + component guide
documentation into smaller files, such as including best practices, but
I wanted to get everything in the same place first
- The contributing has sections on each of the packages that we could
move to that package's docs folder:
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#core
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Issue number: resolves #ROU-4838
---------
<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added styles for icons inside Chip (Ionic Theme)
- Fixed an issue related to hover status, after tokens integration
## 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.
-->
Issue number: resolves #ROU-4839
---------
<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added support for outline option on Ionic Theme
- Replaced temporary variables with global variables from Design Tokens
- Removed associated TODO
## 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. -->
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. -->
Ionic Framework developers make extensive use of multi-line comments in
the Sass files. However these comments are not stripped from the
generated output.
This leads to a significant increase to the file size of CSS and can
have an impact on runtime performance.
For example: https://cdn.jsdelivr.net/npm/@ionic/core/css/core.css has
183 lines of comment blocks before a single line of CSS.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Compresses the generated output from Sass → CSS to strip out
multi-line comment blocks.
- Developers can use [loud
comments](https://sass-lang.com/documentation/syntax/comments/) if they
want to include comments in the generated output.
- In the case of just the core.css file, the file size goes from 20kb to
10kb.
- The entire CSS global styles goes from 758 KB to 606kb.
## 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.4-dev.11712251308.1da8aede`
<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated missing font tokens on `_designTokens.json`.
- Updated `tokens.js` script for building utility-classes for newly
added font tokens.
- Fixed space token typo.
- Updated ionic.typography file to start using design tokens and remove
duplicated code from the tokens generated files.
- Updated Ionic Typography tests
## 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. -->
<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Following the Design Doc for the new Ionic Design System, an
architecture for Design Tokens was added.
1. Added new `foundations` folder inside the `src`, to hold all the
tokens related files.
2. On this file, a json with all the tokens for the new Design System
was added. The format followed was the one suggested on the [W3C
draft](https://design-tokens.github.io/community-group/format/).
3. Added a dev dependency for [Styles
Dictionary](https://amzn.github.io/style-dictionary/#/), version 3.9.2.
4. Added a tokens.js script that will take care of transforming the json
tokens into the desired output. For now, three files are being
generated: ionic.vars.css (:root with all CSS Variables); ionic.vars.css
(scss variables for each token) and ionic.utility.css (a new
utility-class for each token)
5. Added the script `npm run build.tokens` to package.json, that will
generate the three files mentioned above.
For now, all these changes bring no impact to the rest of the Framework,
as these variables are not yet being consumed.
The `margin`, `padding` and `border-radius` were removed from the
prohibited properties on lint, to prevent lint errors with the new
utility-classes. This is very open to discussion/feedback if it's seen
as not ok.
The `build` command now includes the `build.tokens` script, to make sure
the files are always generated, in case someone forget to run the
command, after changing the json file!
## 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.
6. 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.
-->
---------
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Issue number: ROU-4840
---------
<!-- 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 new behavior?
- Added a new Ionic Theme partial, with no dependencies to current
`ios/md` architecture. This is to avoid bleeding of the current Design
System into the work we are doing for the new Ionic Design System and
Theme. For that reason I duplicated part of the basic styles for the
Chip (display, box-sizing, etc) and created provisional scss variables,
that should be replaced later on with the correct global ones from the
new Design System.
- Added styles for info chip type states (default, hover, focus and
disabled)
- No new tests were done on this scope, as there're still other Chip
tasks being developed that would override any baselines defined now for
this theme. Once the initial basic work for the Chip is complete, tests
for the Ionic Theme should be implemented, under the task ROU-4837.
- A new page was created - `chip/tests/theme-ionic` - to check styles
for current implementation. This will also be used and improved in
future Chip Ionic Theme tasks.
## 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.
-->
Issue number: **ROU-4810**
---------
## Context
All the CSS for typography is temporarily added in the `text.scss` file
because the correct architecture for the new theme implementation isn’t
ready yet. In the future, all these **Sass variables** and **CSS**
created need to be placed at the theme level in terms of architecture.
The typography of an app needs to be divided into `iOS`, `Android (md)`,
and `Ionic` themes.
---------
## What is the new behavior?
- Added new typography styles;
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
## Preview
---------
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
