[Storybook] Create Stories for EuiSideNav
#7174
Conversation
…d and example specific to EuiSideNavHeader
|
hmm, not sure why tests failed... |
|
buildkite test this |
| }; | ||
|
|
||
| const StatefulSideNav = (props: Partial<EuiSideNavProps>) => { | ||
| const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false); |
There was a problem hiding this comment.
This should inherit from the storybook controls on initial mount/render
| const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false); | |
| const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(props.isOpenOnMobile); |
| render: ({ ...args }) => <StatefulSideNav {...args} />, | ||
| }; | ||
|
|
||
| export const SideNavHeader: Story = { |
There was a problem hiding this comment.
I'm not totally clear on why header props need their own story. The heading props are equally as configurable in the playground story as they are in this story. Am I missing something?
| isOpenOnMobile: false, | ||
| truncate: false, | ||
| }, | ||
| render: ({ ...args }) => <StatefulSideNav {...args} />, |
There was a problem hiding this comment.
I'm not a super huge fan of the stateful side nav being the default playground story. I'd much rather have the following stories:
-
Non-stateful playground with items set via
args.items, not viarender, that allows developers to configure the item array/object via storybook controls. Using theitemsin the current stateful component as a static array would be fine, although I would not have statefulisSelectedbehavior. You can have 1 item with a staticisSelected: trueproperty just to show the visual behavior of it, but it doesn't need to be controlled via state. -
Story with stateful
isOpenOnMobile/toggleOpenOnMobile. Note that the control fortoggleOpenOnMobileshould be set to{ control: false }so that it can't be override in the control panel. I would only show those 2 props andmobileBreakpointsandmobileTitleon this story to keep the focus on mobile nav QA. I would also tweak the parameters of the storybook to start in small mobile view (https://storybook.js.org/docs/react/essentials/viewport) -
Story with custom
renderItemcallback
…s on playgrounds and stories for components
…into storybook/side-nav Merge code changes made in GH UI
|
Preview staging links for this PR:
|
💚 Build Succeeded
History
|
PR 1/2 for #7176
Summary
This story creates a Storybook playground and example for
EuiSideNav. The playground is a kitchen sink example meant to demonstrate the nesting capability, mobile view, and truncation forEuiSideNav. TheHeaderstory is meant to provide a basic playground dedicated toEuiSideNavHeaderProps.QA
gh pr checkout 7174yarn && yarn storybooktruncation,isOpenOnMobile, andmobileBreakpointschange as expected