feat(dialog): custom top position #1226
Conversation
|
🚀 Latest successful build of the PR deployed here. 🚀 |
|
|
||
| :host([topPosition]) { | ||
| .mdc-dialog { | ||
| top: var(--dialog-top-position); |
There was a problem hiding this comment.
is this a wild card? do we want to maybe limit it to pre-defined tokens?
There was a problem hiding this comment.
do you mean this?:
$dialog-top-position: 100px;
top: var(#{$dialog-top-position}, --dialog-top-position);
There was a problem hiding this comment.
I mean be able to prevent arbitrary values. not sure what was the design decision eventually
There was a problem hiding this comment.
I've changed it to 4 predefined sizes
There was a problem hiding this comment.
setting top position which exceeds the viewport boundaries will not be scrollable and the content wont be accessed.
if dialog isn't closed by clicking on scrim, the page will be stuck like that. this is a major flaw.
@jshenkman is this ok from a design perspective?
| :host([topPosition='small']) & { | ||
| --_top-position: 40px; | ||
| } | ||
| :host([topPosition='medium']) & { | ||
| --_top-position: 80px; | ||
| } | ||
| :host([topPosition='large']) & { | ||
| --_top-position: 120px; | ||
| } | ||
| :host([topPosition='xlarge']) & { | ||
| --_top-position: 160px; | ||
| } |
There was a problem hiding this comment.
why aren't these interpolated from the const? as you defined above - #{$top-position}
There was a problem hiding this comment.
I'm still getting used to writing this this way :). I'll fix it
Co-authored-by: yinon <yinon@hotmail.com>
Co-authored-by: yinon <yinon@hotmail.com>
No, it's not a good experience if the user can't see the whole modal and the actions/footer.. |
No. It's unaware |
|
Kudos, SonarCloud Quality Gate passed!
|
No description provided.