Skip to content

fix(datetime-button): buttons wrap instead of truncate - #27872

Merged
liamdebeasi merged 8 commits into
FW-4146from
fix-datetime-button-dt
Jul 31, 2023
Merged

fix(datetime-button): buttons wrap instead of truncate#27872
liamdebeasi merged 8 commits into
FW-4146from
fix-datetime-button-dt

Conversation

@liamdebeasi

@liamdebeasi liamdebeasi commented Jul 27, 2023

Copy link
Copy Markdown
Contributor

Issue number: N/A


What is the current behavior?

During the design phase of Dynamic Type, I mistakenly wrote the datetime button requirements based off an outdated version of iOS.

On iOS 15, the text inside of the buttons for the native datetime button get truncated with ellipsis.

On iOS 16, the buttons themselves wrap to the next line and the text does not get truncated.

ios 15 ios 16
IMG_8802 IMG_0067

What is the new behavior?

  • Datetime buttons now wrap to the next line instead of truncating the text inside of it

Does this introduce a breaking change?

  • Yes
  • No

Other information

https://github.com/ionic-team/ionic-framework-design-documents/pull/131

@bolt-new-by-stackblitz

Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions github-actions Bot added the package: core @ionic/core package label Jul 27, 2023
@liamdebeasi liamdebeasi changed the title Fix datetime button dt fix(datetime-button): buttons wrap instead of truncate Jul 27, 2023
@liamdebeasi
liamdebeasi marked this pull request as ready for review July 27, 2023 18:58
@liamdebeasi
liamdebeasi requested review from a team and averyrousseau and removed request for a team July 28, 2023 17:35
});

test('should truncate text on larger font sizes inside of an item', async ({ page }) => {
test('should wrap text on larger font sizes inside of an item', async ({ page }) => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optional: We might be able to remove this test if the behavior doesn't need any special CSS rules to work. I added it because the item specifically needed that min-width: 0 added in order to truncate.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh ok good to know! I'll remove it then

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed in bac8632

@liamdebeasi
liamdebeasi merged commit a62040f into FW-4146 Jul 31, 2023
@liamdebeasi
liamdebeasi deleted the fix-datetime-button-dt branch July 31, 2023 14:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants