Finish IconButton
parent
6495af36bd
commit
69521f878f
|
@ -225,7 +225,7 @@
|
||||||
"react/no-danger": 0,
|
"react/no-danger": 0,
|
||||||
"react/no-did-mount-set-state": 0,
|
"react/no-did-mount-set-state": 0,
|
||||||
"react/no-did-update-set-state": 1,
|
"react/no-did-update-set-state": 1,
|
||||||
"react/no-multi-comp": 1,
|
"react/no-multi-comp": 0,
|
||||||
"react/no-unknown-property": 1,
|
"react/no-unknown-property": 1,
|
||||||
"react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
|
"react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
|
||||||
"react/react-in-jsx-scope": 1,
|
"react/react-in-jsx-scope": 1,
|
||||||
|
|
|
@ -23,7 +23,6 @@ class Button extends React.Component {
|
||||||
primary: React.PropTypes.bool,
|
primary: React.PropTypes.bool,
|
||||||
raised: React.PropTypes.bool,
|
raised: React.PropTypes.bool,
|
||||||
ripple: React.PropTypes.bool,
|
ripple: React.PropTypes.bool,
|
||||||
toggle: React.PropTypes.bool,
|
|
||||||
tooltip: React.PropTypes.string,
|
tooltip: React.PropTypes.string,
|
||||||
tooltipDelay: React.PropTypes.number,
|
tooltipDelay: React.PropTypes.number,
|
||||||
type: React.PropTypes.string
|
type: React.PropTypes.string
|
||||||
|
@ -38,8 +37,7 @@ class Button extends React.Component {
|
||||||
mini: false,
|
mini: false,
|
||||||
primary: false,
|
primary: false,
|
||||||
raised: false,
|
raised: false,
|
||||||
ripple: true,
|
ripple: true
|
||||||
toggle: false
|
|
||||||
};
|
};
|
||||||
|
|
||||||
handleMouseDown = (event) => {
|
handleMouseDown = (event) => {
|
||||||
|
@ -48,19 +46,13 @@ class Button extends React.Component {
|
||||||
if (this.props.onMouseDown) this.props.onMouseDown(event);
|
if (this.props.onMouseDown) this.props.onMouseDown(event);
|
||||||
};
|
};
|
||||||
|
|
||||||
handleTouchStart = (event) => {
|
|
||||||
events.pauseEvent(event);
|
|
||||||
if (this.refs.ripple) this.refs.ripple.start(event.touches[0], true);
|
|
||||||
if (this.props.onTouchStart) this.props.onTouchStart(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const {accent, className, flat, floating, href, icon, inverse, label,
|
const {accent, className, flat, floating, href, icon, inverse, label,
|
||||||
loading, mini, primary, raised, ripple, toggle,
|
loading, mini, primary, raised, ripple,
|
||||||
tooltip, tooltipDelay, ...others} = this.props;
|
tooltip, tooltipDelay, ...others} = this.props;
|
||||||
const element = href ? 'a' : 'button';
|
const element = href ? 'a' : 'button';
|
||||||
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||||
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
|
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
|
||||||
|
|
||||||
const classes = ClassNames([ style[shape], style[level] ], {
|
const classes = ClassNames([ style[shape], style[level] ], {
|
||||||
[style.mini]: mini,
|
[style.mini]: mini,
|
||||||
|
@ -72,8 +64,7 @@ class Button extends React.Component {
|
||||||
href,
|
href,
|
||||||
className: classes,
|
className: classes,
|
||||||
disabled: this.props.disabled || this.props.loading,
|
disabled: this.props.disabled || this.props.loading,
|
||||||
onMouseDown: this.handleMouseDown,
|
onMouseDown: this.handleMouseDown
|
||||||
onTouchStart: this.handleTouchStart
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return React.createElement(element, props,
|
return React.createElement(element, props,
|
||||||
|
|
|
@ -26,7 +26,6 @@ class Button extends React.Component {
|
||||||
accent: false,
|
accent: false,
|
||||||
className: '',
|
className: '',
|
||||||
primary: false,
|
primary: false,
|
||||||
raised: false,
|
|
||||||
ripple: true
|
ripple: true
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -41,10 +40,7 @@ class Button extends React.Component {
|
||||||
primary, ripple, tooltip, tooltipDelay, ...others} = this.props;
|
primary, ripple, tooltip, tooltipDelay, ...others} = this.props;
|
||||||
const element = href ? 'a' : 'button';
|
const element = href ? 'a' : 'button';
|
||||||
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||||
|
const classes = ClassNames([style.toggle, style[level]], {[style.inverse]: inverse}, className);
|
||||||
const classes = ClassNames([ style.toggle, style[level] ], {
|
|
||||||
[style.inverse]: inverse
|
|
||||||
}, className);
|
|
||||||
|
|
||||||
const props = {
|
const props = {
|
||||||
...others,
|
...others,
|
||||||
|
|
|
@ -7,17 +7,14 @@ $button-primary-color: $color-primary !default;
|
||||||
$button-accent-color-contrast: $color-primary-contrast !default;
|
$button-accent-color-contrast: $color-primary-contrast !default;
|
||||||
$button-accent-color-hover: rgba($color-accent, 0.20) !default;
|
$button-accent-color-hover: rgba($color-accent, 0.20) !default;
|
||||||
$button-accent-color: $color-accent !default;
|
$button-accent-color: $color-accent !default;
|
||||||
$button-default-text-color: $color-black !default;
|
|
||||||
$button-disabled-text-color: rgba($color-black, 0.26) !default;
|
$button-disabled-text-color: rgba($color-black, 0.26) !default;
|
||||||
$button-flat-color-hover: rgba($color-black, 0.26) !default;
|
$button-disabled-background-color: rgba($color-black, 0.12) !default;
|
||||||
$button-border-radius: 0.2 * $unit;
|
$button-border-radius: 0.2 * $unit;
|
||||||
$button-floating-font-size: $unit * 2.4;
|
$button-floating-font-size: $unit * 2.4;
|
||||||
$button-floating-height-mini: $unit * 4;
|
|
||||||
$button-floating-mini-font-size: $button-floating-height-mini / 2.25;
|
|
||||||
$button-floating-height: $unit * 5.6;
|
$button-floating-height: $unit * 5.6;
|
||||||
|
$button-floating-mini-height: $unit * 4;
|
||||||
|
$button-floating-mini-font-size: $button-floating-mini-height / 2.25;
|
||||||
$button-height: $unit * 3.6;
|
$button-height: $unit * 3.6;
|
||||||
$button-solid-background-color: rgba($palette-grey-500, 0.20) !default;
|
|
||||||
$button-solid-disabled-background-color: rgba($color-black, 0.12) !default;
|
|
||||||
$button-squared-icon-margin: $unit * .6;
|
$button-squared-icon-margin: $unit * .6;
|
||||||
$button-squared-min-width: 9 * $unit;
|
$button-squared-min-width: 9 * $unit;
|
||||||
$button-squared-padding: 0 $unit * 1.2;
|
$button-squared-padding: 0 $unit * 1.2;
|
||||||
|
|
|
@ -4,7 +4,7 @@ A [button](https://www.google.com/design/spec/components/buttons.html) clearly c
|
||||||
|
|
||||||
<!-- example -->
|
<!-- example -->
|
||||||
```jsx
|
```jsx
|
||||||
import Button from 'react-toolbox/lib/button';
|
import {Button, IconButton} from 'react-toolbox/lib/button';
|
||||||
|
|
||||||
const GithubIcon = () => (
|
const GithubIcon = () => (
|
||||||
<svg viewBox="0 0 284 277">
|
<svg viewBox="0 0 284 277">
|
||||||
|
@ -22,10 +22,8 @@ const TestButtons = () => (
|
||||||
<Button icon='inbox' label='Inbox' flat />
|
<Button icon='inbox' label='Inbox' flat />
|
||||||
<Button icon='add' floating />
|
<Button icon='add' floating />
|
||||||
<Button icon='add' floating accent mini />
|
<Button icon='add' floating accent mini />
|
||||||
<Button icon='mood' toggle />
|
<IconButton icon='favorite' accent />
|
||||||
<Button toggle primary>
|
<IconButton primary><GithubIcon /></IconButton>
|
||||||
<GithubIcon />
|
|
||||||
</Button>
|
|
||||||
<Button icon='add' label='Add this' flat primary />
|
<Button icon='add' label='Add this' flat primary />
|
||||||
<Button icon='add' label='Add this' flat disabled />
|
<Button icon='add' label='Add this' flat disabled />
|
||||||
</div>
|
</div>
|
||||||
|
@ -42,17 +40,22 @@ const TestButtons = () => (
|
||||||
| `flat` | `Boolean` | `false` | If true, the button will have a flat look. |
|
| `flat` | `Boolean` | `false` | If true, the button will have a flat look. |
|
||||||
| `floating` | `Boolean` | `false` | If true, the button will have a floating look. |
|
| `floating` | `Boolean` | `false` | If true, the button will have a floating look. |
|
||||||
| `icon` | `String` | | Value of the icon (See icon component). |
|
| `icon` | `String` | | Value of the icon (See icon component). |
|
||||||
|
| `inverse` | `Boolean` | | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
|
||||||
| `label` | `String` | | The text string to use for the name of the button.|
|
| `label` | `String` | | The text string to use for the name of the button.|
|
||||||
| `loading` | `Boolean` | `false` | If true, component will be disabled and show a loading animation.|
|
| `loading` | `Boolean` | `false` | If true, component will be disabled and show a loading animation.|
|
||||||
| `mini` | `Boolean` | `false` | To be used with floating button. If true the button will be smaller.|
|
| `mini` | `Boolean` | `false` | To be used with floating button. If true the button will be smaller.|
|
||||||
| `onClick` | `Function` | | Callback called when the button is clicked.|
|
|
||||||
| `primary` | `false` | `false` | Indicates if the button should have primary color.|
|
| `primary` | `false` | `false` | Indicates if the button should have primary color.|
|
||||||
| `raised` | `Boolean` | `false` | If true, the button will have a raised look. |
|
| `raised` | `Boolean` | `false` | If true, the button will have a raised look. |
|
||||||
| `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|
|
| `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|
|
||||||
| `toggle` | `Boolean` | `false` | If true, the button will have a toggle icon look. |
|
|
||||||
| `tooptip` | `String` | | The value will be shown as a tooltip when the button is hovered. |
|
| `tooptip` | `String` | | The value will be shown as a tooltip when the button is hovered. |
|
||||||
| `tooltipDelay` | `Number` | | Amount of time in milliseconds before the tooltip is visible.|
|
| `tooltipDelay` | `Number` | | Amount of time in milliseconds before the tooltip is visible.|
|
||||||
|
|
||||||
By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
|
By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
|
||||||
|
|
||||||
The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
|
The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
|
||||||
|
|
||||||
|
## Icon Button
|
||||||
|
|
||||||
|
Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles.
|
||||||
|
|
||||||
|
We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding aspect properties.
|
||||||
|
|
|
@ -11,7 +11,6 @@
|
||||||
align-content: center;
|
align-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: $button-default-text-color;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -33,6 +32,7 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
|
font-size: 120%;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
@ -42,6 +42,11 @@
|
||||||
[data-react-toolbox="ripple"] {
|
[data-react-toolbox="ripple"] {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
&[disabled] {
|
||||||
|
color: $button-disabled-text-color;
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
%squared {
|
%squared {
|
||||||
|
@ -58,71 +63,55 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
%disabled {
|
%solid {
|
||||||
color: $button-disabled-text-color;
|
&[disabled] {
|
||||||
pointer-events: none;
|
@include shadow-2dp();
|
||||||
cursor: auto;
|
background-color: $button-disabled-background-color;
|
||||||
}
|
}
|
||||||
|
&:active {
|
||||||
.flat {
|
@include shadow-4dp();
|
||||||
@extend %button;
|
|
||||||
@extend %squared;
|
|
||||||
background: transparent;
|
|
||||||
&:hover {
|
|
||||||
background: $button-flat-color-hover;
|
|
||||||
}
|
}
|
||||||
&:focus:not(:active) {
|
&:focus:not(:active) {
|
||||||
background: $button-flat-color-hover;
|
@include focus-shadow();
|
||||||
}
|
|
||||||
&[disabled] {
|
|
||||||
@extend %disabled;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.raised {
|
.raised {
|
||||||
@extend %button;
|
@extend %button;
|
||||||
@extend %squared;
|
@extend %squared;
|
||||||
|
@extend %solid;
|
||||||
@include shadow-2dp();
|
@include shadow-2dp();
|
||||||
background: $button-solid-background-color;
|
}
|
||||||
&:active {
|
|
||||||
@include shadow-4dp();
|
.flat {
|
||||||
}
|
@extend %button;
|
||||||
&:focus:not(:active) {
|
@extend %squared;
|
||||||
@include focus-shadow();
|
background: transparent;
|
||||||
}
|
|
||||||
&[disabled] {
|
|
||||||
@extend %disabled;
|
|
||||||
@include shadow-2dp();
|
|
||||||
background-color: $button-solid-disabled-background-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.floating {
|
.floating {
|
||||||
@extend %button;
|
@extend %button;
|
||||||
|
@extend %solid;
|
||||||
width: $button-floating-height;
|
width: $button-floating-height;
|
||||||
height: $button-floating-height;
|
height: $button-floating-height;
|
||||||
font-size: $button-floating-font-size;
|
font-size: $button-floating-font-size;
|
||||||
background: $button-solid-background-color;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12),
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12),
|
||||||
0 1px 1px 0 rgba(0, 0, 0, .24);
|
0 1px 1px 0 rgba(0, 0, 0, .24);
|
||||||
&:active {
|
|
||||||
@include shadow-4dp();
|
|
||||||
}
|
|
||||||
&:focus:not(:active) {
|
|
||||||
@include focus-shadow();
|
|
||||||
}
|
|
||||||
&[disabled] {
|
|
||||||
@extend %disabled;
|
|
||||||
@include shadow-2dp();
|
|
||||||
background-color: $button-solid-disabled-background-color;
|
|
||||||
}
|
|
||||||
.icon {
|
.icon {
|
||||||
line-height: $button-floating-height;
|
line-height: $button-floating-height;
|
||||||
}
|
}
|
||||||
[data-react-toolbox="ripple"] {
|
[data-react-toolbox="ripple"] {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
&.mini {
|
||||||
|
width: $button-floating-mini-height;
|
||||||
|
height: $button-floating-mini-height;
|
||||||
|
font-size: $button-floating-mini-font-size;
|
||||||
|
.icon {
|
||||||
|
line-height: $button-floating-mini-height;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle {
|
.toggle {
|
||||||
|
@ -130,10 +119,7 @@
|
||||||
width: $button-height;
|
width: $button-height;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
&[disabled] {
|
> .icon, svg {
|
||||||
@extend %disabled;
|
|
||||||
}
|
|
||||||
> .icon {
|
|
||||||
font-size: $button-toggle-font-size;
|
font-size: $button-toggle-font-size;
|
||||||
line-height: $button-height;
|
line-height: $button-height;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
@ -143,38 +129,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary:not([disabled]) {
|
|
||||||
&.raised, &.floating {
|
|
||||||
color: $button-primary-color-contrast;
|
|
||||||
background: $button-primary-color;
|
|
||||||
}
|
|
||||||
&.flat, &.toggle {
|
|
||||||
color: $button-primary-color;
|
|
||||||
&:focus:not(:active) {
|
|
||||||
background: $button-primary-color-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.flat:hover {
|
|
||||||
background: $button-primary-color-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent:not([disabled]) {
|
|
||||||
&.raised, &.floating {
|
|
||||||
color: $button-accent-color-contrast;
|
|
||||||
background-color: $button-accent-color;
|
|
||||||
}
|
|
||||||
&.flat, &.toggle {
|
|
||||||
color: $button-accent-color;
|
|
||||||
&:focus:not(:active) {
|
|
||||||
background: $button-accent-color-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.flat:hover {
|
|
||||||
background: $button-accent-color-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.neutral:not([disabled]) {
|
.neutral:not([disabled]) {
|
||||||
&:not(.inverse) {
|
&:not(.inverse) {
|
||||||
&.raised, &.floating {
|
&.raised, &.floating {
|
||||||
|
@ -209,11 +163,23 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mini.floating {
|
@mixin btn-colors($name, $color, $background, $hover) {
|
||||||
width: $button-floating-height-mini;
|
.#{$name}:not([disabled]) {
|
||||||
height: $button-floating-height-mini;
|
&.raised, &.floating {
|
||||||
font-size: $button-floating-mini-font-size;
|
color: $color;
|
||||||
.icon {
|
background: $background;
|
||||||
line-height: $button-floating-height-mini;
|
}
|
||||||
|
&.flat, &.toggle {
|
||||||
|
color: $background;
|
||||||
|
&:focus:not(:active) {
|
||||||
|
background: $hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.flat:hover {
|
||||||
|
background: $hover;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include btn-colors('primary', $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
|
||||||
|
@include btn-colors('accent', $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
|
||||||
|
|
|
@ -2,7 +2,8 @@ import './utils/polyfills'; // Import polyfills for IE11
|
||||||
export App from './app';
|
export App from './app';
|
||||||
export AppBar from './app_bar';
|
export AppBar from './app_bar';
|
||||||
export Autocomplete from './autocomplete';
|
export Autocomplete from './autocomplete';
|
||||||
export Button from './button';
|
export Button from './button/Button';
|
||||||
|
export IconButton from './button/IconButton';
|
||||||
export * from './card';
|
export * from './card';
|
||||||
export Checkbox from './checkbox';
|
export Checkbox from './checkbox';
|
||||||
export DatePicker from './date_picker';
|
export DatePicker from './date_picker';
|
||||||
|
|
|
@ -13,16 +13,11 @@ const ButtonsTest = () => (
|
||||||
<Button icon='bookmark' label='Bookmark' raised primary />
|
<Button icon='bookmark' label='Bookmark' raised primary />
|
||||||
<Button icon='inbox' label='Inbox' flat />
|
<Button icon='inbox' label='Inbox' flat />
|
||||||
<Button icon='add' floating />
|
<Button icon='add' floating />
|
||||||
<Button icon='add' floating primary />
|
|
||||||
<Button icon='add' floating primary disabled />
|
|
||||||
<Button icon='add' floating accent mini />
|
<Button icon='add' floating accent mini />
|
||||||
<Button icon='mood' toggle />
|
<IconButton icon='favorite' accent />
|
||||||
<Button toggle primary>
|
<IconButton primary><GithubIcon /></IconButton>
|
||||||
<GithubIcon />
|
|
||||||
</Button>
|
|
||||||
<Button icon='add' label='Add this' flat primary />
|
<Button icon='add' label='Add this' flat primary />
|
||||||
<Button icon='add' label='Add this' flat disabled />
|
<Button icon='add' label='Add this' flat disabled />
|
||||||
<Button icon='bookmark' label='Bookmark' raised primary loading />
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,12 @@ const ButtonTest = () => (
|
||||||
<Button icon='add' floating primary disabled />
|
<Button icon='add' floating primary disabled />
|
||||||
<Button icon='add' floating accent mini />
|
<Button icon='add' floating accent mini />
|
||||||
<IconButton icon='favorite' accent />
|
<IconButton icon='favorite' accent />
|
||||||
<IconButton primary><GithubIcon/></IconButton>
|
<IconButton icon='favorite' inverse />
|
||||||
|
<IconButton icon='favorite' />
|
||||||
|
<IconButton icon='favorite' disabled />
|
||||||
|
<IconButton primary tooltip='Bookmark Tooltip' tooltipDelay={1000}>
|
||||||
|
<GithubIcon/>
|
||||||
|
</IconButton>
|
||||||
<Button icon='add' label='Add this' flat primary />
|
<Button icon='add' label='Add this' flat primary />
|
||||||
<Button icon='add' label='Add this' flat disabled />
|
<Button icon='add' label='Add this' flat disabled />
|
||||||
<Button icon='bookmark' label='Bookmark' raised primary loading />
|
<Button icon='bookmark' label='Bookmark' raised primary loading />
|
||||||
|
|
Loading…
Reference in New Issue