Skip to content

Commit 1877ac5

Browse files
feat(datetime): fix height when presentation='time' (#30416)
Issue number: resolves #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? The `datetime` component had a broken display for the `ionic` theme, because the `height` defined for that component was too small. ![image](https://github.com/user-attachments/assets/9d4c0c0b-8648-4ea9-88f9-9562190d5498) ## What is the new behavior? The CSS code limiting the `height` was removed. Now, the height is set automatically. ![image](https://github.com/user-attachments/assets/ad6de967-bba2-47fa-9f12-835e35565c1c) ## 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. --> --------- Co-authored-by: ionitron <[email protected]>
1 parent f7a2d34 commit 1877ac5

File tree

26 files changed

+3
-3
lines changed

26 files changed

+3
-3
lines changed

core/src/components/datetime/datetime.ionic.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,8 +178,6 @@
178178
// -----------------------------------
179179
:host .datetime-time {
180180
@include globals.padding(globals.$ion-space-100, globals.$ion-space-400);
181-
182-
height: globals.$ion-scale-800;
183181
}
184182

185183
:host .datetime-time .time-header {
@@ -197,6 +195,8 @@
197195

198196
align-items: center;
199197

198+
height: globals.$ion-scale-800;
199+
200200
background-color: globals.$ion-primitives-neutral-100;
201201
color: globals.$ion-primitives-neutral-1200;
202202
}

core/src/components/datetime/test/display/datetime.e2e.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { configs, test } from '@utils/test/playwright';
55
* This behavior does not vary across directions
66
* since it is texting fixed vs fluid widths.
77
*/
8-
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
8+
configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
99
test.describe(title('datetime: rendering'), () => {
1010
test.describe('fixed sizes', () => {
1111
test('date-time should not have any visual regressions', async ({ page }) => {
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading

0 commit comments

Comments
 (0)