From f5a6b5a4c434167cafd9060911ccbfda2a89734c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 26 Aug 2022 08:34:41 -0500
Subject: [PATCH] refactor(core): remove global hidden attribute (#25829)

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;
}
```
---
 BREAKING.md            | 16 ++++++++++++++++
 core/src/css/core.scss |  3 +--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/BREAKING.md b/BREAKING.md
index df4c58d524..ba3edd34cd 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -16,6 +16,8 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Overlays](#version-7x-overlays)
   - [Virtual Scroll](#version-7x-virtual-scroll)
 - [Browser and Platform Support](#version-7x-browser-platform-support)
+- [Utilities](#version-7x-utilities)
+  - [hidden attribute](#version-7x-hidden-attribute)
 
 <h2 id="version-7x-components">Components</h2>
 
@@ -62,6 +64,20 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 | iOS      | 14+                    |
 | Android  | 5.1+ with Chromium 79+ |
 
+<h2 id="version-7x-utilities">Utilities</h2>
+
+<h4 id="version-7x-hidden-attribute">`hidden` attribute</h4>
+
+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;
+}
+```
+
 
 ## Version 6.x
 
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index a71a60ff7a..40f7c7652f 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -195,8 +195,7 @@ ion-modal-controller,
 ion-picker-controller,
 ion-popover-controller,
 ion-toast-controller,
-.ion-page-hidden,
-[hidden] {
+.ion-page-hidden {
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
 }