Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

docs(components): tab UI #1784

Merged
merged 22 commits into from
Aug 20, 2019
Merged

docs(components): tab UI #1784

merged 22 commits into from
Aug 20, 2019

Conversation

lucivpav
Copy link
Contributor

@lucivpav lucivpav commented Aug 12, 2019

This PR changes the way component pages are rendered. The long page is no longer present, instead it is organized into the following categories: Definition, Usage, Props, Accessibility.

image

image

TODO:
tabBehavior, tabListBehavior => to make it accessible ✅
Usage.TryIt is broken ✅
fix links to sections ✅
when loading the component docs for the first time, the definition tab is empty ✅
fix highlight left sidebar item ✅

@codecov
Copy link

codecov bot commented Aug 13, 2019

Codecov Report

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

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #1784   +/-   ##
=======================================
  Coverage   69.56%   69.56%           
=======================================
  Files         875      875           
  Lines        7596     7596           
  Branches     2219     2246   +27     
=======================================
  Hits         5284     5284           
  Misses       2304     2304           
  Partials        8        8

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 881d670...f6c1e8c. Read the comment docs.

@vercel vercel bot temporarily deployed to staging August 15, 2019 08:52 Inactive
@vercel vercel bot temporarily deployed to staging August 15, 2019 15:53 Inactive
Copy link
Member

@levithomason levithomason left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Props and Accessibility tabs look good 👍 The Definition and Usage tabs need a little more organization.

The "Definition" of the component includes the default example and an example for each prop. You can think of the definition as showing one and only one example for each thing the component is capable of.

Example, imagine the Button component which has props like primary, disabled and loading. Each prop is a part of the definition of the component, defining the boundaries of the component's features. The definition tab then would show one example for each prop.

Examples that are not showing a single prop, like those in https://stardust-react-bre8h5b64.now.sh/components/button/usage#usage, show ways of using the component that are beyond showing the definition of the component.

One other way to look at it is that the Definition tab should tell you, "Here's the component, its definition, and each thing it can do", while, the usage tab should tell you, "Here are some real world use cases you might need to know how to implement".

A good start would be moving all of the examples in the Usage section:
image

...to the Usage tab and leaving the examples under Types/States/Variations/Slots/etc under the Definition tab.

@vercel vercel bot temporarily deployed to staging August 19, 2019 08:12 Inactive
@lucivpav
Copy link
Contributor Author

@levithomason I have moved the Usage examples under Usage tab, while keeping the rest under Definition tab.

Copy link
Member

@levithomason levithomason left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like a good start that we can iterate on 👍 well done!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants