docs(ComponentSidebar): add sidebar navigation #2070

layershifter · 2017-09-12T08:44:56Z

This PR is part of work (#1981, #2012) that improves docs usability and performance.

sidebar

This PR will also add the navigation sidebar like on SUI website.

TODO

codecov-io · 2017-09-12T12:55:04Z

Codecov Report

Merging #2070 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #2070   +/-   ##
=======================================
  Coverage   99.73%   99.73%           
=======================================
  Files         152      152           
  Lines        2656     2656           
=======================================
  Hits         2649     2649           
  Misses          7        7

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6ef5af5...206b54c. Read the comment docs.

levithomason · 2017-09-18T00:07:31Z

This is great, been on my list for a long :)

I think this can be done by using the already existent exampleContext in docs/app/utils.js. We may not need menuInfo.json.

Note, in the future, I've been considering the use of dynamic imports for each component route. This way, we only load the docs people need. It will make the docs much lighter and faster to load. Along with this change, I'd like to split up docInfo.json and output a json file to each component directory.

…React into docs/sidebar # Conflicts: # .gitignore # docs/app/Components/ComponentDoc/ComponentProp/ComponentPropEnum.js # gulp/plugins/util/index.js

layershifter · 2017-09-25T13:34:00Z

docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -70,6 +75,10 @@ class ComponentExample extends Component {
    })
  }

+  shouldComponentUpdate(nextProps, nextState) {


Small optimization. Without it, all examples will be rerendered

layershifter · 2017-09-25T13:58:11Z

Naming

Moved to #2123.

`menuInfo.json`

I really want to avoid it, but I do not know another way to collect information for the sidebar. @levithomason do you have any better ideas?

levithomason · 2017-09-25T14:56:43Z

I will try to take a look and comment. I've marked this PR for review to remind me.

layershifter · 2017-09-27T09:58:45Z

@levithomason Don't pay attention to the refactoring, I moved it into #2123. However, question about menuInfo.json is still open.

…React into docs/sidebar # Conflicts: # docs/app/Components/ComponentDoc/ComponentDoc.js # docs/app/Components/ComponentDoc/ComponentDocHeader.js # docs/app/Components/ComponentDoc/ComponentDocLinks.js # docs/app/Components/ComponentDoc/ComponentDocSee.js # docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js # docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponents.js # docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsDescription.js # docs/app/Components/ComponentDoc/ComponentTable/ComponentTable.js # docs/app/utils/index.js # yarn.lock

layershifter

@levithomason I merged this PR with and made the cleanup there. it's ready for review ✌️

However, I can't fix the problem with scrollToAnchor(). It's easy to reproduce, just pull this branch and try to click on different sidebar items on the Header page. The scroll sometime will not reach the matching position and the wrong sidebar item will be active. There is a rounding problem, but I don't have any idea how to fix it 🤔

levithomason · 2017-10-22T19:11:14Z

I've pushed some usability fixes and would like to do more.

The issue you stated still persists. It seems to me the cause is that Visibility expects the element to be passed, while scrollToAnchor does not pass the element but scrolls directly to the element. This could be due to Visibility's use of getBoundingClientRect, which returns fractional values for top/bottom/left/right.

I will come back to this again. I am out of time for today. 👋

…React into docs/sidebar # Conflicts: # docs/app/Components/ComponentDoc/ComponentDoc.js

layershifter · 2017-11-12T20:15:48Z

Solved merge conflict there 👍

levithomason · 2017-11-25T16:38:38Z

I'm going to merge this and we can iterate on it. Maybe someone will feel motivated and submit a PR as well.

levithomason · 2017-11-25T19:00:54Z

Released in semantic-ui-react@0.77.0

layershifter added the docs label Sep 12, 2017

layershifter force-pushed the docs/sidebar branch from 4e5dc6c to f51296b Compare September 12, 2017 12:54

layershifter force-pushed the docs/sidebar branch 4 times, most recently from 4adc6fa to 6de75d0 Compare September 15, 2017 14:53

docs(ComponentDoc): refactor, add sidebar navigation

c9740a2

layershifter force-pushed the docs/sidebar branch from 6de75d0 to c9740a2 Compare September 18, 2017 16:07

layershifter added the blocked label Sep 19, 2017

layershifter mentioned this pull request Sep 19, 2017

fix(Visibility): fix behaviour of reverse calls #2088

Merged

layershifter added needs author feedback and removed blocked labels Sep 22, 2017

Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…

b73631e

…React into docs/sidebar # Conflicts: # .gitignore # docs/app/Components/ComponentDoc/ComponentProp/ComponentPropEnum.js # gulp/plugins/util/index.js

layershifter commented Sep 25, 2017

View reviewed changes

docs(ComponentDoc): refactor, add sidebar navigation

0dafcf9

layershifter force-pushed the docs/sidebar branch from dd1497b to 0dafcf9 Compare September 25, 2017 13:58

levithomason added the ready for review label Sep 25, 2017

layershifter force-pushed the docs/sidebar branch from 841249b to 0edc433 Compare September 26, 2017 09:40

docs(ComponentDoc): refactor, add sidebar navigation

da68908

layershifter force-pushed the docs/sidebar branch from 0edc433 to da68908 Compare September 26, 2017 11:30

layershifter added blocked and removed needs author feedback labels Sep 26, 2017

layershifter mentioned this pull request Sep 26, 2017

docs(ComponentDoc): refactor and optimize #2123

Merged

layershifter changed the title ~~docs(ComponentDoc): refactor, add sidebar navigation~~ docs(ComponentSidebar): add sidebar navigation Sep 28, 2017

layershifter added the needs author feedback label Oct 20, 2017

layershifter removed blocked ready for review labels Oct 20, 2017

layershifter force-pushed the docs/sidebar branch from 3376baf to e1f6628 Compare October 21, 2017 16:13

docs(Sidebar): merge changes, cleanups

5a483cf

layershifter force-pushed the docs/sidebar branch from e1f6628 to 5a483cf Compare October 21, 2017 16:14

layershifter added ready for review and removed needs author feedback labels Oct 21, 2017

layershifter commented Oct 21, 2017

View reviewed changes

levithomason added 10 commits October 22, 2017 08:52

refactor(DocsLayout): make sidebar opt-in

7ecadac

fix(ComponentExample): use props.location vs window

411c2bd

fix(DocsLayout): use props.location vs window

310c6b1

feat(ComponentControls): snappier menu hover transition

a72b89a

feat(ComponentDoc): more whitespace for examples

38aef16

fix(scrollToAnchor): stop scrolling when unable to scroll

c34bd61

fix(ComponentExample): toggle isActive on hash change

4dfed3b

feat(ComponentSidebar): allow toggle open

fc8e626

fix(ComponentExample): no hash only if !code && !html

3de7577

fix(ComponentExample): show controls on mouse move

1b1f5b3

levithomason force-pushed the docs/sidebar branch from eea1e98 to 1b1f5b3 Compare October 22, 2017 19:08

Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…

206b54c

…React into docs/sidebar # Conflicts: # docs/app/Components/ComponentDoc/ComponentDoc.js

levithomason merged commit c2cf18d into master Nov 25, 2017

levithomason deleted the docs/sidebar branch November 25, 2017 16:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(ComponentSidebar): add sidebar navigation #2070

docs(ComponentSidebar): add sidebar navigation #2070

layershifter commented Sep 12, 2017 •

edited

Loading

codecov-io commented Sep 12, 2017 •

edited

Loading

levithomason commented Sep 18, 2017

layershifter Sep 25, 2017 •

edited

Loading

layershifter commented Sep 25, 2017 •

edited

Loading

levithomason commented Sep 25, 2017

layershifter commented Sep 27, 2017

layershifter left a comment

levithomason commented Oct 22, 2017

layershifter commented Nov 12, 2017

levithomason commented Nov 25, 2017

levithomason commented Nov 25, 2017

docs(ComponentSidebar): add sidebar navigation #2070

docs(ComponentSidebar): add sidebar navigation #2070

Conversation

layershifter commented Sep 12, 2017 • edited Loading

sidebar

TODO

codecov-io commented Sep 12, 2017 • edited Loading

Codecov Report

levithomason commented Sep 18, 2017

layershifter Sep 25, 2017 • edited Loading

Choose a reason for hiding this comment

layershifter commented Sep 25, 2017 • edited Loading

Naming

menuInfo.json

levithomason commented Sep 25, 2017

layershifter commented Sep 27, 2017

layershifter left a comment

Choose a reason for hiding this comment

levithomason commented Oct 22, 2017

layershifter commented Nov 12, 2017

levithomason commented Nov 25, 2017

levithomason commented Nov 25, 2017

layershifter commented Sep 12, 2017 •

edited

Loading

codecov-io commented Sep 12, 2017 •

edited

Loading

layershifter Sep 25, 2017 •

edited

Loading

layershifter commented Sep 25, 2017 •

edited

Loading

`menuInfo.json`