docs: cleanup examples #69
Conversation
levithomason
requested review from
dvdzkwsk,
kuzhelov and
mnajdova
as code owners
| @@ -23,7 +23,7 @@ const ComponentControls: any = props => { | |||
| } = props | |||
|
|
|||
| return ( | |||
| <Menu color="green" icon="labeled" size="tiny" fitted compact text> | |||
| <Menu color="green" icon="labeled" size="tiny" compact text> | |||
| @@ -4,7 +4,7 @@ import * as React from 'react' | |||
| import { withRouter, RouteComponentProps } from 'react-router' | |||
| import { renderToStaticMarkup } from 'react-dom/server' | |||
| import { html } from 'js-beautify' | |||
| import copyToClipboard from 'copy-to-clipboard' | |||
| import * as copyToClipboard from 'copy-to-clipboard' | |||
There was a problem hiding this comment.
Missed import bug fix
| @@ -346,7 +346,7 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp | |||
| return Knobs ? <Knobs {...this.getKnobsValue()} onKnobChange={this.handleKnobChange} /> : null | |||
| } | |||
|
|
|||
| private getComponentName = () => this.props.examplePath.split('/')[1] | |||
| private getDisplayName = () => this.props.examplePath.split('/')[1] | |||
| @@ -175,7 +175,7 @@ class Sidebar extends React.Component<any, any> { | |||
| </small> | |||
| </strong> | |||
| </Menu.Item> | |||
| <Menu.Item as={NavLink} to="/" activeClassName="active"> | |||
| <Menu.Item as={NavLink} exact to="/" activeClassName="active"> | |||
There was a problem hiding this comment.
Item matches all routes if not exact, making the item highlighted
Codecov Report
@@ Coverage Diff @@
## master #69 +/- ##
=======================================
Coverage 85.92% 85.92%
=======================================
Files 74 74
Lines 1101 1101
Branches 216 225 +9
=======================================
Hits 946 946
Misses 149 149
Partials 6 6Continue to review full report at Codecov.
|
| @@ -1,7 +1,7 @@ | |||
| import React from 'react' | |||
| import { Header } from '@stardust-ui/react' | |||
|
|
|||
| const HeaderExampleSubheader = () => ( | |||
| const HeaderExampleDescriptionCustomization = () => ( | |||
There was a problem hiding this comment.
Note, all example names need to match file names, which should match the title of the example. We could use a conformance test around this.
| this.setState({ display: 'none' }) | ||
| hide = () => { | ||
| this.setState({ hidden: true }) | ||
| setTimeout(() => this.setState({ hidden: false }), 2000) |
There was a problem hiding this comment.
There was previously no way to try this example again after "dismissing" the label.
| display: 'inline-block', | ||
| } | ||
| } | ||
| class LabelExampleOnIconClickShorthand extends React.Component { |
There was a problem hiding this comment.
Do not use TS in examples, consumers are likely not running TS.
| return ( | ||
| <Label | ||
| circular | ||
| style={{ display }} | ||
| content="Removable label" |
There was a problem hiding this comment.
Do not use inline styles in examples. Our components and examples need to be exemplar, showing users how to accomplish tasks without inline styles. Using inline styles defeats one of the core purposes of Stardust.
| examplePath="components/Label/Variations/LabelExampleCircular" | ||
| /> | ||
| <ComponentExample | ||
| title="Icon" | ||
| description="The label can contain an icon" | ||
| description="The label can contain an icon." |
There was a problem hiding this comment.
Always use complete sentences and periods in example descriptions.
| title="The Icon inside Label can be customized" | ||
| description="The Icon component inside the Label can be defined with customizing it's prop" | ||
| examplePath="components/Label/Variations/LabelExampleIconAsShorthand" | ||
| title="Icon props" |
There was a problem hiding this comment.
Do not put sentences in example titles. Titles should be prop names. If no prop name is available then use a very concise title.
This is largely a breakout of #16.
This PR cleans up various doc site issues. Fixes console warnings / errors regarding props, bad imports, missing punctuation, mismatched filename/class name/example titles, etc.