refactor: split out pos-dialog

[josephguillaume]

Refactor to have dialog element with a common style

• [x] Create pos-dialog and use in pos-add-new-thing
• [x] Tests have been written
  • [x] all new code is covered by unit tests
  • [x] Change tests that the modal opens and closes for pos-add-new-thing
    • HTML now only shows pos-dialog
    • pos-add-new-thing unit test is no longer responsible for logic to close the dialog
  • [x] New unit test for pos-dialog
  • [x] the happy path of a new feature is covered by an end-to-end test
  • https://github.com/pod-os/PodOS/blob/main/apps/tests/add-new-thing.spec.ts still passes
  • [x] manual explorative tests have been performed
  • [x] Replicated existing behaviour of pos-add-new-thing
• [x] all dependencies are updated to the latest patch version at minimum
  • already done upstream
• [x] the CI pipeline passes
• [x] documentation is up-to-date
  • [x] TSDoc style comments on important functions, properties and events
  • [x] Readme.md files of PodOS elements have been re-generated
    • npm run build in elements
  • [x] stories for new PodOS elements have been added to storybook
    • [x] Add story to https://github.com/pod-os/PodOS/tree/main/storybook/stories/inputs
  • [x] architectural decisions are documented as an ADR
  • No new architectural decisions
  • [x] Changelogs are updated according to Keep a Changelog
• [x] Fix formatting of second slot - pos-add-new-thing's CSS for pos-new-thing-form needs to be generalised
  • Used a drop in replacement using ::slotted

[angelo-v]

Great start! Looks good so far. I will have more time on wednesday but you safe to continue with the outlined todos

[angelo-v]

I also added a (general) Definition of Done you need to consider. Some of those things you already have on the list. Let me know if anything is unclear. Great work so far!

[angelo-v]

I hate do say it, but there is a bug in your solution: The dialog does not close when the form is submitted successfully. I could not figure out why yet, perhaps you can take a look and let me know if you need help with it.

There is also an issue with the focus: The first field (type) should be focused. At least on chrome this worked so far. I know about issues with firefox, but now it is not working in either of them.

[angelo-v]

I hate do say it, but there is a bug in your solution: The dialog does not close when the form is submitted successfully. I could not figure out why yet, perhaps you can take a look and let me know if you need help with it.

There is also an issue with the focus: The first field (type) should be focused. At least on chrome this worked so far. I know about issues with firefox, but now it is not working in either of them.

While extending the e2e to cover the closing behaviour I just got aware that closing currently also only works in chrome but not in firefox or webkit, so I guess your refactoring only broke in chrome what is not really working right now in general. Perhaps we can fix it by doing both focussing and closing explicitly with javascript instead of relying on the default dialog behaviour that seems to be at least inconsistent among browsers. Are you willing to look into this?

[angelo-v]

superseded by https://github.com/pod-os/PodOS/pull/32