Add "collapsibleTitle" field to modal config #2155
Conversation
I will have to introduce a new child element to the start of 'ion-content'. I've changed the function to search from the last element and then go to the previous sibling instead.
The modal long title feature requires that the title is inserted in both the content & the ion-header element. Therefore extend with ability to use a list and allow it to be cloned to multiple new places.
This applies the setting to every page in the modal. If we need to control it on a per page basis we should allow kirby-page-title to control it.
The previous implementation caused tests to be flakey. This does not do so in my experience.
The testing problem stemmed from the testbuilders config.component field carrying it's value across tests. Causing config.component to sometimes be null other times to be a component.
Due to ModalConfig.component having type 'any' well... Any value is valid causing the function to occasionally return null. This is not explicit in the code or properly handled. The getEmbeddedComponentElement could handle that before as it used 'lastElementSibling' & 'firstElementSibling' causing an element to always be returned as there will always be a single element (router-outlet). This has now been made explicit and is handled by both the tests and the code itself.
MadsBuchmann
changed the title
This reverts commit d16c9d4.
| --padding-top: 0px; | ||
|
|
||
| ion-header ion-toolbar:first-of-type { | ||
| padding-top: 0px; |
There was a problem hiding this comment.
Note to self: We should merge main into v6, so we get prettier and stylelint update onto this.
0px should be 0 here.
0px is okay for custom props though!
There was a problem hiding this comment.
Hmm, it actually looks like this already has those changes because it was rebased at some point.
So maybe the commit happened before that rebase, and we should run npx prettier --write . and npx stylelint "**/*.scss" --fix to be sure everything is formatted correctly.
And still, we should rebase onto v6 once main has been merged into that, for a cleaner diff.
There was a problem hiding this comment.
Should i do anything specific here 👀?
There was a problem hiding this comment.
Could you try to run npm run prettier:fix and npm run lint:designsystem:css?
There was a problem hiding this comment.
It results in no changes
|
Note to self: There's a bunch of branches related to 843. Remember to delete them after this has been merged. |
libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.spec.ts
Show resolved
Hide resolved
libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.spec.ts
Outdated
Show resolved
Hide resolved
libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.ts
Outdated
Show resolved
Hide resolved
|
I love it! Seems to work like a charm ❤️ |
Just writing 'e' makes it seem like some kind of error handling where that notation often is used.
|
Do you know what happened for the diff to suddenly be this large? Is it related to the merge-commit from yesterday? |
|
The diff got absolutely ruined for some reason. I've played around with it and the only solution i found was to cherry-pick the changes. So the review will continue in a new PR: #2174 |
Which issue does this PR close?
This PR closes # 843
This PR closes # 2060
What is the new behavior?
The field
collapseTitlehas been added to theModalConfigtype.When that is
truethe title will initially be part of the content. When scrolled out of view it will appear in the toolbar.While i was in there i took the liberty documenting the inline footer from #958.
Does this PR introduce a breaking change?
Checklist:
The following tasks should be carried out in sequence in order to follow the process of contributing correctly.
Reminders
Review
When the pull request has been approved it will be automatically merged to
stablevia automerge.