[Project] Update core components storybook doc #253
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There are 2 questions in previous modal stories: 1. All the modals is default to open(some are not closable), which will block the docs page. 2. we cannot see the implementation in "Show code" section. You can see <ClosableExample> but can't know how it work inside through storybook, unless reading the source code. This commit try to solve them by: 1. Use `<ClosableModal>` (Rewrite as functional component) as basic usage. 2. In each example, we just use `<ClosableModal>`, add comment to tell user read the closable modal example code. I know the result is not satisfying -- It's still hard to read the code at a glance. But at least it solve question (1) and also help question (2) a little. code section.
Anchored popover is a <Popover> wrapped with two HOCs:
`closable()(anchored()(Popover)`
Before this commit it will form following DOM structure:
```html
<body>
<div class="gyp-base-layer">
<div class="gyp-closable>
<div class="gyp-popover gyp-popover--top">
</div>
</div>
</body>
```
`gyp-popover` is absolutely positioned, with `top` value which
is relative to its document top left corner. `gyp-closable` is
`position: fixed` with `width: 100vw` and `height: 100vh`.
It works when document is too short to scroll, such as previous
storybook doc canvas. But when the element triggering popover is
over the screen(i.e. we have to scroll to click it), the position
of anchored popover will be wrong because the `position: absoulte`
of `gyp-popover` is relative to `gyp-closable`, which is
`position: fixed`, so the `top` value is wrong.
The position of `gyp-popover` should always be relative to the
document. So in this fix we change the `closable` HOC code to change
DOM structure as:
```html
<body>
<div class="gyp-base-layer">
<div class="gyp-closable" />
<div class="gyp-popover" />
</div>
</body>
```
Let the `gyp-popover` be relative to `gyp-base-layer`, which is absolute
to `document.body`.
Note that this bug won't happen on Cloud2 since on Cloud2 the
`document.body` height is always `100vh`, which is not scrollable.
Revamp core components storybook doc(pt. 1)
Revamp core components storybook doc(pt. 2)
chenesan
changed the title
Revamp core components storybook doc(pt. 3)
…ew-storybook Fix anchored popover top position when document is scrollable
…l-width Fix centered modal width
Revamp core components storybook doc(pt. 4)
Revamp core components storybook doc(pt. 6)
Revamp core components storybook doc(pt. 5)
kyoyadmoon
reviewed
Feb 17, 2020
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Purpose
Merge new storybook docs(#246 #247 #248 #249 #251 #252) into develop branch.
Also fix anchored popover position in #249 .
Asana: https://app.asana.com/0/347798529122928/1156749765218241
I will open this PR once the above PRs are into the project branch.
Changes
packages/storybook/examples/corewith new storybook addon-docsRisk
None.
TODOs