From 5a91dbd6f95bb4165e064d5ba2a9444112fb6bc7 Mon Sep 17 00:00:00 2001
From: Bernardo Cardoso <32780808+BenOsodrac@users.noreply.github.com>
Date: Fri, 5 Dec 2025 18:34:13 +0000
Subject: [PATCH] fix(datetime): add temporary workaround for datetime-ready
 logic issue on Ionic theme. (#30841)

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. -->

Although the work done on
[FW-6931](https://outsystemsrd.atlassian.net/browse/FW-6931), there was
still a scenario on MobileUI, inside the ion-modal, where the datetime
would disappear. This seems to only happen on iOS 26+, as we were not
able to replicate it on version 18.*

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

As there's already task to better fix this issue across all themes, this
PR introduces a small css backdoor, to be able to override the opacity
value when necessary. This was done on ionic theme only and the css was
split, to have no impact on md and iOS.

* In `datetime.ionic.scss`, opacity is now controlled via CSS variables
(`--body-opacity`, `--year-opacity`) for `.calendar-body` and
`.datetime-year`.
* In `datetime.native.scss`, explicit opacity rules for `.calendar-body`
and `.datetime-year` are added, with visibility toggled based on the
`.datetime-ready` class.
* In `datetime.common.scss`, redundant and hard-coded opacity rules for
`.calendar-body` and `.datetime-year` are removed, deferring control to
theme-specific stylesheets.

A small fix was also done on IonHeader token used for the border-color,
to correctly reflect the value from Figma.

## 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.
-->




[FW-6931]:
https://outsystemsrd.atlassian.net/browse/FW-6931?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 .../components/datetime/datetime.common.scss  | 11 ---------
 .../components/datetime/datetime.ionic.scss   | 24 +++++++++++++++++++
 .../components/datetime/datetime.native.scss  | 16 +++++++++++++
 core/src/components/header/header.ionic.scss  |  2 +-
 4 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/core/src/components/datetime/datetime.common.scss b/core/src/components/datetime/datetime.common.scss
index a7532c4142..97730fa9eb 100644
--- a/core/src/components/datetime/datetime.common.scss
+++ b/core/src/components/datetime/datetime.common.scss
@@ -25,24 +25,13 @@
   width: 100%;
 }
 
-:host .calendar-body,
-:host .datetime-year {
-  opacity: 0;
-}
-
 :host(:not(.datetime-ready)) .datetime-year {
   position: absolute;
   pointer-events: none;
 }
 
-:host(.datetime-ready) .calendar-body {
-  opacity: 1;
-}
-
 :host(.datetime-ready) .datetime-year {
   display: none;
-
-  opacity: 1;
 }
 
 /**
diff --git a/core/src/components/datetime/datetime.ionic.scss b/core/src/components/datetime/datetime.ionic.scss
index 82f447f1a5..e1411eacb8 100644
--- a/core/src/components/datetime/datetime.ionic.scss
+++ b/core/src/components/datetime/datetime.ionic.scss
@@ -12,6 +12,30 @@
   --background: #{globals.$ion-bg-surface-default};
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-radius-025};
+  /**
+   * TODO(FW-6931): Remove these variables upon solving the root cause
+   */
+  --body-opacity: 0;
+  --year-opacity: 0;
+}
+
+/**
+   * TODO(FW-6931): Remove all this css related to opacity upon solving the root cause
+   */
+:host .calendar-body {
+  opacity: var(--body-opacity);
+}
+
+:host .datetime-year {
+  opacity: var(--year-opacity);
+}
+
+:host(.datetime-ready) .calendar-body {
+  --body-opacity: 1;
+}
+
+:host(.datetime-ready) .datetime-year {
+  --year-opacity: 1;
 }
 
 // Header
diff --git a/core/src/components/datetime/datetime.native.scss b/core/src/components/datetime/datetime.native.scss
index eee452f107..e000e20705 100644
--- a/core/src/components/datetime/datetime.native.scss
+++ b/core/src/components/datetime/datetime.native.scss
@@ -23,6 +23,22 @@
   max-width: 350px;
 }
 
+/**
+ * TODO(FW-6931): Move this back to common file upon solving the root cause
+ */
+:host .calendar-body,
+:host .datetime-year {
+  opacity: 0;
+}
+
+/**
+ * TODO(FW-6931): Move this back to common file upon solving the root cause
+ */
+:host(.datetime-ready) .calendar-body,
+:host(.datetime-ready) .datetime-year {
+  opacity: 1;
+}
+
 /**
  * This ensures that the picker is appropriately
  * sized and never truncates the text.
diff --git a/core/src/components/header/header.ionic.scss b/core/src/components/header/header.ionic.scss
index 0a216726a7..7591118498 100644
--- a/core/src/components/header/header.ionic.scss
+++ b/core/src/components/header/header.ionic.scss
@@ -8,7 +8,7 @@ ion-header {
   z-index: 10; // TODO(ROU-10853): replace this value with a layer token.
 
   &.header-divider {
-    border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-primitives-neutral-300;
+    border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-border-default;
   }
 }