Add app bar documentation #108
Conversation
khangmach
commented
Sep 22, 2020
khangmach
commented
- Adds documentation
- Adds support graphics
- Adds documentation - Adds support graphics
Fix wording
| <h3>Form bars</h3> | ||
| <p>Form bars allows users to dismiss a full-screen form and land on the previous page</p> | ||
| <DocsShow> | ||
| <img class="modal-img" src="./form-1.png"> |
There was a problem hiding this comment.
Should we have specifications on when to use black color vs purple? Or is this something we're looking to deprecate? It looks like there's a spec for the content renderer without its black app bar
There was a problem hiding this comment.
We decided during documentation phase that black is just for pages with editing functionality (single-task pages)
docs/pages/appbars/index.vue
Outdated
| </DocsShow> | ||
|
|
||
| <h3>Bottom bars</h3> | ||
| <p>Bottom bars are placed on pages that house editing, content selection, or multi-step processes. They may contain buttons that allow the user to submit specific action(s) or continue with the process. Bottom bars can also contain contextual information and error messaging relevant to the task</p> |
There was a problem hiding this comment.
I think it'd be helpful to specify when we should and shouldn't use a bottom bar, and also what type of metadata is and isn't allowed here. I remember you mentioned there's specific kind of metadata that would go on the left side of the bottom bar vs the metadata that would appear right next to the submit/cancel buttons
There was a problem hiding this comment.
We decided that further bottom bar specifications would be housed in the single task page pattern doc (on the way). This is why I generalized it here as "contextual information". See more here: https://docs.google.com/document/d/1wQa3MitsbjLnF4_POvXO6v2X-dGKru52RmIkOZHzkko/edit#heading=h.og8271ldbw4c
There was a problem hiding this comment.
I can a few layout pointers in the layout section. But as for "when to use", they should only be used on single task pages
docs/pages/appbars/index.vue
Outdated
| <template v-slot:do> | ||
| <img src="./exception-4.png"> | ||
| <p class="do-dont"> | ||
| For resource pages in the Learn app, use a back link at the top of the page instead of an app bar |
There was a problem hiding this comment.
Is this tracked as an issue? I know this is what we want to move towards, but we should make sure it describes the current, or soon to be, state of things
There was a problem hiding this comment.
This will be a tracked issue once I finalize all the documentation related to it. Will comment out in the meantime
|
I'm not sure what happened, but somehow all the feedback comments were marked as 'resolved' |
|
@indirectlylit I resolve comments while I work on the code. It helps me keep track of changes I need to make. I haven't committed my changes yet as I was still working on this last night. |
- Updates verbiage - Adds responveiness notes - Incorporate Devon's text changes - More consistency with appbar/topbar distinctions
|
Ah I see, that makes sense. Note though that this will be confusing for collaborators who see their comments preemptively resolved. One strategy some devs use is to push commits to github more incrementally/granularly, so the change and the resolution happen simultaneously. |
