DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Go over property descriptions and add documentation links

Browse Source 
Reviewed By: danielbuechele

Differential Revision: D6977090

fbshipit-source-id: cc8a6acda8b9b7f007ad0a2f83249d4e6037bb0f
This commit is contained in:
Emil Sjölander
2018-02-13 11:27:37 -08:00
committed by Facebook Github Bot
parent e50308e823
commit a6b7e34187
3 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
website/src/components/Playground/Editor.js
View File

@@ -58,10 +58,7 @@ export default class Editor extends Component<Props> {
<TabPane tab="Flex" key="1"> <TabPane tab="Flex" key="1">
<h2> <h2>
Direction Direction
<InfoText> <InfoText doclink="/docs/layout-direction">Defines the direction of which text and items are laid out</InfoText>
The direction property specifies the text direction/writing
direction
</InfoText>
</h2> </h2>
<EditValue <EditValue
property="direction" property="direction"
@@ -70,7 +67,7 @@ export default class Editor extends Component<Props> {
/> />
<h2> <h2>
Flex direction Flex direction
<InfoText>Defining the direction of the main-axis</InfoText> <InfoText doclink="/docs/flex-direction">Defines the direction of the main-axis</InfoText>
</h2> </h2>
<EditValue <EditValue
disabled={disabled} disabled={disabled}
@@ -83,10 +80,7 @@ export default class Editor extends Component<Props> {
<Col span={12}> <Col span={12}>
<h2> <h2>
Flex grow Flex grow
<InfoText> <InfoText doclink="/docs/flex">The factor of remaining space should be given to this node</InfoText>
Grow factor defined how much space this element should take
up, relative to it's siblings
</InfoText>
</h2> </h2>
<EditValue <EditValue
type="text" type="text"
@@ -99,10 +93,7 @@ export default class Editor extends Component<Props> {
<Col span={12}> <Col span={12}>
<h2> <h2>
Flex shrink Flex shrink
<InfoText> <InfoText doclink="/docs/flex">The shrink factor of this element if parent has no space left</InfoText>
Shrink factor if elements don't fit into the parent node
anymore.
</InfoText>
</h2> </h2>
<EditValue <EditValue
type="text" type="text"
@@ -116,9 +107,7 @@ export default class Editor extends Component<Props> {
<h2> <h2>
Flex wrap Flex wrap
<InfoText> <InfoText doclink="/docs/flex-wrap">Wrapping behaviour when child nodes don't fit into a single line</InfoText>
Wrapping behaviour when child nodes don't fit into a single line
</InfoText>
</h2> </h2>
<EditValue <EditValue
disabled={disabled} disabled={disabled}
@@ -130,7 +119,7 @@ export default class Editor extends Component<Props> {
<TabPane tab="Alignment" key="2"> <TabPane tab="Alignment" key="2">
<h2> <h2>
Justify content Justify content
<InfoText>Aligns child nodes along the main-axis</InfoText> <InfoText doclink="/docs/justify-content">Aligns child nodes along the main-axis</InfoText>
</h2> </h2>
<EditValue <EditValue
disabled={disabled} disabled={disabled}
@@ -141,7 +130,7 @@ export default class Editor extends Component<Props> {
<h2> <h2>
Align items Align items
<InfoText>Aligns child nodes along the cross-axis</InfoText> <InfoText doclink="/docs/align-items">Aligns child nodes along the cross-axis</InfoText>
</h2> </h2>
<EditValue <EditValue
disabled={disabled} disabled={disabled}
@@ -152,9 +141,7 @@ export default class Editor extends Component<Props> {
<h2> <h2>
Align self Align self
<InfoText> <InfoText doclink="/docs/align-items">Override align items of parent</InfoText>
Specifies alignment on the cross-axis for the node itself
</InfoText>
</h2> </h2>
<EditValue <EditValue
disabled={disabled || selectedNodeIsRoot} disabled={disabled || selectedNodeIsRoot}
@@ -165,9 +152,7 @@ export default class Editor extends Component<Props> {
<h2> <h2>
Align content Align content
<InfoText> <InfoText doclink="/docs/align-content">Alignment of lines along the cross-axis when wrapping</InfoText>
Alignment of lines along the cross-axis when wrapping
</InfoText>
</h2> </h2>
<EditValue <EditValue
disabled={disabled} disabled={disabled}
@@ -179,7 +164,7 @@ export default class Editor extends Component<Props> {
<TabPane tab="Layout" key="3"> <TabPane tab="Layout" key="3">
<h2> <h2>
Width &times; height Width &times; height
<InfoText>Dimensions of the node</InfoText> <InfoText doclink="/docs/width-height">Dimensions of the node</InfoText>
</h2> </h2>
<Row gutter={15}> <Row gutter={15}>
<Col span={12}> <Col span={12}>
@@ -206,10 +191,7 @@ export default class Editor extends Component<Props> {
<h2> <h2>
Aspect ratio Aspect ratio
<InfoText> <InfoText doclink="/docs/aspect-ratio">Width/Height aspect ratio of node</InfoText>
Aspect radio is an additon by Yoga which is handy e.g. for nodes
displaying videos
</InfoText>
</h2> </h2>
<EditValue <EditValue
type="text" type="text"
@@ -231,7 +213,7 @@ export default class Editor extends Component<Props> {
))} ))}
<h2> <h2>
Position Position
<InfoText> <InfoText doclink="/docs/absolute-position">
Relative position offsets the node from it's calculated Relative position offsets the node from it's calculated
position. Absolute position removes the node from the flexbox position. Absolute position removes the node from the flexbox
flow and positions it at the given position. flow and positions it at the given position.

6
website/src/components/Playground/InfoText.css
View File

@@ -12,6 +12,12 @@
line-height: 130%; line-height: 130%;
} }
.InfoText .docs-link {
margin-top: 0px;
font-size: 12px;
font-weight: 600;
}
.InfoTextIcon { .InfoTextIcon {
margin-left: 5px; margin-left: 5px;
opacity: 0.5; opacity: 0.5;

12
website/src/components/Playground/InfoText.js
View File

@@ -12,17 +12,27 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Popover, Icon} from 'antd'; import {Popover, Icon} from 'antd';
import Link from 'gatsby-link';
import './InfoText.css'; import './InfoText.css';
type Props = { type Props = {
children: any, children: any,
doclink: string,
}; };
export default class InfoText extends Component<Props> { export default class InfoText extends Component<Props> {
render() { render() {
return ( return (
<Popover <Popover
content={<div className="InfoText">{this.props.children}</div>} content={
<div className="InfoText">
{
[
<p>{[...this.props.children]}</p>,
<Link className="docs-link" to={this.props.doclink}>DOCUMENTATION</Link>]
}
</div>
}
trigger="hover"> trigger="hover">
<Icon className="InfoTextIcon" type="info-circle-o" /> <Icon className="InfoTextIcon" type="info-circle-o" />
</Popover> </Popover>