fix(datetime): remove ion-buttons to fix CSP violations #30770
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
brandyscarney
force-pushed
the
FW-6912-datetime
branch
from
df13f40 to
340c060
Compare
brandyscarney
changed the title
There was a problem hiding this comment.
This test was renamed to custom-clear-button
There was a problem hiding this comment.
The before behavior for 1 custom button in the ionic theme was to align it to the left, however, I think this is more desired since when showing only the clear button by default it aligns center:
<ion-datetime value="2020-03-14" show-clear-button="true"></ion-datetime>
There was a problem hiding this comment.
This test is new - we were not previously capturing how it looks when passing more than 1 custom button.
There was a problem hiding this comment.
This test is new - we were not previously capturing how it looks when passing more than 1 custom button. You can compare how this looks to the docs example: https://ionicframework.com/docs/api/datetime#customizing-button-elements
There was a problem hiding this comment.
I renamed the existing test for custom buttons (one button passed) and then added 2 more tests showing how it looks when you pass 2 or 3 buttons to make sure the behavior was the same as before.
brandyscarney
changed the title
There was a problem hiding this comment.
I compared this test locally with what's on next and saw no differences so I think this might just be Playwright: https://ionic-framework-git-next-ionic1.vercel.app/src/components/datetime/test/custom
There was a problem hiding this comment.
Do we have a ticket to look into fixing the "Invalid Time"?
There was a problem hiding this comment.
It doesn't look like it but that is how every screenshot in this folder looks and not related to my PR: https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots
Issue number: N/A
What is the current behavior?
The Datetime component breaks CSP rules due to the following:
ion-buttonswhich usesscopedencapsulation.ionictheme, it imports Phosphor icons as data URIs, which are blocked byconnect-src 'self' blob:.What is the new behavior?
ion-buttons, removing the dependency on a scoped componention-buttonsion-buttonto change its styles based on being inside of anion-datetimePhosphor icons have not been removed because there is a workaround for it and we will remove its usage across all components in future work.
Does this introduce a breaking change?
This shouldn't cause breaking changes but because we are no longer recommending users use
ion-buttonswith custom buttons I am marking it as a breaking change.