github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Update react style guide for jsx/object-curly-spacing never (#13889)

Browse source
This commit is contained in:
archana 2017-09-08 09:53:23 -05:00 • committed by archanid
parent b78c7b0732
commit 1dcc77e457
1 changed files with 13 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

26
style_guides/react_style_guide.md
View file

@ -5,14 +5,14 @@ Stateless function components are more concise, and there are plans for react to
Good:
```
export function KuiButton(props) {
return <button className="kuiButton" { ...props } />
return <button className="kuiButton" {...props} />
};
```
Bad:
```
export class KuiButton extends React.Component {
render() {
return <button className="kuiButton" { ...this.props } />
return <button className="kuiButton" {...this.props} />
}
}
```
@ -30,7 +30,7 @@ export class ClickCounter extends React.Component {
}
render() {
return <button className="kuiButton" onClick={ this.onClick } />
return <button className="kuiButton" onClick={this.onClick} />
}
}
```
@ -48,7 +48,7 @@ Bad:
}));
},
render() {
return <button className="kuiButton" onClick={ this.onClick } />
return <button className="kuiButton" onClick={this.onClick} />
}
});
```
@ -92,14 +92,14 @@ Good:
```
button.js:
export function KuiButton(props) {
return <button className="kuiButton" { ...props } />
return <button className="kuiButton" {...props} />
};
```
Bad:
```
button.js:
export function Button(props) {
return <button className="kuiButton" { ...props } />
return <button className="kuiButton" {...props} />
};
```
The filenames leave it off because snake casing already increases file name length.
@ -108,8 +108,8 @@ The filenames leave it off because snake casing already increases file name leng
Name action functions in the form of a strong verb and passed properties in the form of on<Subject><Change>. E.g:
```
<sort-button onClick={ action.sort }/>
<pagerButton onPageNext={ action.turnToNextPage } />
<sort-button onClick={action.sort}/>
<pagerButton onPageNext={action.turnToNextPage} />
```
### Avoid creating a function and passing that as a property, in render functions.
@ -124,7 +124,7 @@ export class ClickCounter extends React.Component {
}
render() {
return <button className="kuiButton" onClick={ this.onClick } />
return <button className="kuiButton" onClick={this.onClick} />
}
}
```
@ -141,7 +141,7 @@ export class ClickCounter extends React.Component {
}
render() {
return <button className="kuiButton" onClick={ this.onClick } />
return <button className="kuiButton" onClick={this.onClick} />
}
}
```
@ -156,7 +156,7 @@ export class ClickCounter extends React.Component {
}
render() {
return <button className="kuiButton" onClick={ () => this.onClick() } />
return <button className="kuiButton" onClick={() => this.onClick()} />
}
}
```
@ -193,13 +193,13 @@ this.setState({
### Favor spread operators
```
render() {
return <button className="kuiButton" { ...this.props } />
return <button className="kuiButton" {...this.props} />
}
```
```
export function Button({ className, ...rest }) {
const classNames = classNames('KuiButton', className);
return <button className={ classNames } { ...rest } />
return <button className={classNames} {...rest} />
};
```