I wanted to create a ticket to track some things I have learned from developing profile-pane as well as some developer standards that we have discussed along the way so that we can discuss here and then be able to write a developer standards document at some point maybe sooner if possible rather than later.
Learnings
- We need all 3 responsive rules when working on our panes in order to work in mashlib. data-layout=mobile, container and media. Container is particularly important especially when using panes in panes for instance the profile-pane inside contacts-pane. It is also need to combat the table structure above it.
My research said this
Media queries are used for
- [ ] environmental/device concerns
- [ ] accessibility preferences
- [ ] viewport-level app shell``` but I found that media queries are used in the rolled up mashlib. I would like to investigate this further as we have duplicated logic between all 3 sections at this time. My thoughts were media for standalone, container for mashlib and data-layout=mobile for mobile only.
where should we attach input dialogs
not sure about this, needs more research currently it is attached to the body
The dialogs need to be attached to the pane root in our setup so that the container queries can work. If you attach to the body in our scenario the embedded app can suddenly render:
* huge desktop dialogs
* wrong breakpoints
* incorrect mobile layout
Developer style from conversations in tickets from Noel and in meetings
- We want to use typescript
- Style sheets should live next to the typescript file they style
- Style sheets that style multiple typescript files will reside in a styles folder.
- We shouldn't use utility classes on sr-only and hidden.
- Right now I have used BEM in profile-pane, but this is up for discussion there is another system Noel found here and because we are using web components the styles exist in those.
- Need to add copilot prompt etc in commits.
Things that would be good to do
I wanted to create a ticket to track some things I have learned from developing profile-pane as well as some developer standards that we have discussed along the way so that we can discuss here and then be able to write a developer standards document at some point maybe sooner if possible rather than later.
Learnings
My research said this
where should we attach input dialogs
not sure about this, needs more research currently it is attached to the body
The dialogs need to be attached to the pane root in our setup so that the container queries can work. If you attach to the body in our scenario the embedded app can suddenly render:
* huge desktop dialogs
* wrong breakpoints
* incorrect mobile layout
Developer style from conversations in tickets from Noel and in meetings
Things that would be good to do