[Page Templates Feature] EuiPage docs & toggles#5662
Conversation
Setup pattern for demo toggles
| }: EuiPageProps & { | ||
| content: ReactElement; | ||
| sideBar: ReactElement; |
There was a problem hiding this comment.
This example extends all of EuiPageProps in order to allow the pass through from the file with the toggles while creating custom ones for what would be user-generated content.
| direction={horizontal ? 'row' : 'column'} | ||
| /> | ||
| </div> | ||
| <EuiPanel style={{ borderWidth: '1px 0' }} hasBorder borderRadius="none"> |
There was a problem hiding this comment.
I'm up for design thoughts on the visual of this. I was having trouble deciding if the toggles should be outside of the example panel, above the example, or here (between the example and the code).
There was a problem hiding this comment.
I was having trouble deciding if the toggles should be outside of the example panel, above the example, or here (between the example and the code).
IMO it looks better to have the toggles as part of the demo panel. In the following examples, the controls/toggles seem a little bit lost.
No preference if they should be above or between the example and the code but not outside. I just think we should establish a pattern and then we can update the other examples in EUI.
There was a problem hiding this comment.
Agreed. Ok I think I'll leave them where they are for now and see if in the next PR I can create a re-usable component that would allow us to easily swap the position if we want to later for all them at once.
There was a problem hiding this comment.
I added this ability to the GuideSection component for reusability and updated this usage in d5e031e. It does mean that any example that wants toggles needs to use <GuideSection> directly, and not through the example object. But I feel like we're headed more and more in that direction anyway.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5662/ |
|
jenkins test this |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5662/ |
|
Shoot, I'm an idiot, sorry, I accidentally clicked the 'delete branch' button on another PR and frantically undeleted it, but it accidentally closed this PR 🤦♀️ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5662/ |
…tes/page_docs_toggles # Conflicts: # scripts/a11y-testing.js # src-docs/src/views/page/page_template_example.js # src-docs/src/views/panel/panel_example.js
…eature_page_templates/page_docs_toggles # Conflicts: # scripts/a11y-testing.js # src-docs/src/views/page/page_template_example.js # src-docs/src/views/panel/panel_example.js
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5662/ |
|
Opening this up for actual review (note, this is going into a feature branch). Also, the |
|
Oh I meant to also say that I'm opening for review because I have a final process nailed down and want to get this effort finalized. |
elizabetdev
left a comment
There was a problem hiding this comment.
LGTM! 🎉
Tested in Chrome, Safari, Edge, and Firefox.
| direction={horizontal ? 'row' : 'column'} | ||
| /> | ||
| </div> | ||
| <EuiPanel style={{ borderWidth: '1px 0' }} hasBorder borderRadius="none"> |
There was a problem hiding this comment.
I was having trouble deciding if the toggles should be outside of the example panel, above the example, or here (between the example and the code).
IMO it looks better to have the toggles as part of the demo panel. In the following examples, the controls/toggles seem a little bit lost.
No preference if they should be above or between the example and the code but not outside. I just think we should establish a pattern and then we can update the other examples in EUI.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5662/ |
…page_now/page_docs_toggles
c7baa69 to
c305078
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5662/ |
…ugh custom controls Update EuiPage’s example usage to use GuideSection directly
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5662/ |
breehall
left a comment
There was a problem hiding this comment.
This looks good to me! I love the addition of toggles at the bottom of the code snippets.
breehall
left a comment
There was a problem hiding this comment.
LGTM! My comments have been addressed and this is ready to go!
|
🙌 Merging! CI says "no" but it's because of a known Axe failure that I'll be fixing later when I update the actual components. This is just a feature branch merge anyway. |
Summary
This PR fills out the new EuiPage specific doc section under
Page components. It also is one example of setting up a demo example pattern that creates outside toggles and passes these through as props. It would be a good example PR to iterate on this behavior and the UI supporting it.[Docs only] Checklist
^^ In the codesandbox the content is blank because the default values are just fragments. I think this is ok because the consumer can then just replace with their own content but the code doesn't break.