From 4670098d207c888d7c0fddf4929bea23b152ec7a Mon Sep 17 00:00:00 2001 From: Oleg Stepura Date: Wed, 9 Aug 2017 12:27:02 +0200 Subject: [PATCH 01/31] Make checkbox border color according to spec --- components/checkbox/config.css | 1 + components/checkbox/theme.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/components/checkbox/config.css b/components/checkbox/config.css index fe33d1e8..7c3dff5a 100644 --- a/components/checkbox/config.css +++ b/components/checkbox/config.css @@ -8,6 +8,7 @@ --checkbox-focus-color: color(var(--color-black) a(1%)); --checkbox-focus-size: calc(var(--checkbox-size) * 2.3); --checkbox-text-color: var(--color-black); + --checkbox-border-color: var(--palette-grey-600); --checkbox-text-font-size: var(--font-size-small); --checkbox-total-height: calc(1.8 * var(--unit)); --checkbox-transition-duration: 0.2s; diff --git a/components/checkbox/theme.css b/components/checkbox/theme.css index 748c0926..5ab7609c 100644 --- a/components/checkbox/theme.css +++ b/components/checkbox/theme.css @@ -57,7 +57,7 @@ } .check { - border-color: var(--checkbox-text-color); + border-color: var(--checkbox-border-color); border-radius: 2px; border-style: solid; border-width: 2px; From 889e9ca08892a30b2b63eed00e6154573097c107 Mon Sep 17 00:00:00 2001 From: Oleg Stepura Date: Wed, 9 Aug 2017 12:40:58 +0200 Subject: [PATCH 02/31] Use hover effect on selected table row as well --- components/table/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/theme.css b/components/table/theme.css index 985380d6..30794623 100644 --- a/components/table/theme.css +++ b/components/table/theme.css @@ -40,7 +40,7 @@ transition-property: background-color; transition-timing-function: var(--animation-curve-default); - &:hover { background-color: var(--table-hover-color); } + &:hover, &.selected:hover { background-color: var(--table-hover-color); } &.selected { background-color: var(--table-selection-color); } } From a46f0956c54ba6a5728ec1909c2d99a4c8b65372 Mon Sep 17 00:00:00 2001 From: Oleg Stepura Date: Wed, 9 Aug 2017 12:55:09 +0200 Subject: [PATCH 03/31] Disabled input should be dashed not dotted --- components/input/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/input/theme.css b/components/input/theme.css index a39cb874..ee9c4ee6 100644 --- a/components/input/theme.css +++ b/components/input/theme.css @@ -158,7 +158,7 @@ } .disabled > .inputElement { - border-bottom-style: dotted; + border-bottom-style: dashed; color: var(--input-text-disabled-text-color); } From 478c9aedb80214e2982ffde0a30688ef6b0f3361 Mon Sep 17 00:00:00 2001 From: Oleg Stepura Date: Wed, 9 Aug 2017 13:01:03 +0200 Subject: [PATCH 04/31] Remove unknown prop multilineHint which React reports as passed to textarea --- spec/components/input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/components/input.js b/spec/components/input.js index d3e40c41..52e67e99 100644 --- a/spec/components/input.js +++ b/spec/components/input.js @@ -30,7 +30,7 @@ class InputTest extends React.Component { /> - + From d9a0d7eee3a2e27cda52ef16dd870b6a9df693a9 Mon Sep 17 00:00:00 2001 From: Oleg Stepura Date: Wed, 9 Aug 2017 13:54:34 +0200 Subject: [PATCH 05/31] Add transition to hover effect in list items --- components/list/theme.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/list/theme.css b/components/list/theme.css index 862ff19e..cce1de5b 100644 --- a/components/list/theme.css +++ b/components/list/theme.css @@ -64,6 +64,9 @@ min-height: var(--list-item-min-height); padding: 0 var(--list-horizontal-padding); position: relative; + transition-duration: 0.28s; + transition-property: background-color; + transition-timing-function: var(--animation-curve-default); &.selectable:not(.disabled):hover { background-color: var(--list-item-hover-color); From 31fac7b7792af5b4703161c5b1bfd057f8444b5f Mon Sep 17 00:00:00 2001 From: Paul Sastrasinh Date: Fri, 11 Aug 2017 10:54:03 -0400 Subject: [PATCH 06/31] fix: of -> or in documentation --- components/checkbox/readme.md | 2 +- components/radio/readme.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md index 5f7e21f6..cb22eef5 100644 --- a/components/checkbox/readme.md +++ b/components/checkbox/readme.md @@ -47,7 +47,7 @@ If you want to provide a theme via context, the component key is `RTCheckbox`. | `children` | `String`, `Element` or `Array` | | Children to pass through the component. | | `className` | `String` | `''` | Sets a class to give customized styles to the checkbox field.| | `disabled` | `Boolean` | `false` | If true, the checkbox shown as disabled and cannot be modified.| -| `label` | `String` of `node` | | Text label to attach next to the checkbox element.| +| `label` | `String` or `node` | | Text label to attach next to the checkbox element.| | `name` | `String` | `false` | The name of the field to set in the input checkbox.| | `onBlur` | `Function` | | Callback called when the checkbox is blurred.| | `onChange` | `Function` | | Callback called when the checkbox value is changed.| diff --git a/components/radio/readme.md b/components/radio/readme.md index 78f8df4f..78120b34 100644 --- a/components/radio/readme.md +++ b/components/radio/readme.md @@ -56,7 +56,7 @@ The inner component to compose radio selectors. They will be rendered as radio i | `checked` | `Boolean` | `false` | If true, the input element will be selected by default. Transferred from the parent. | | `className` | `String` | `''` | Set a class to give custom styles to the radio button.| | `disabled` | `Boolean` | `false` | If true, the item will be displayed as disabled.| -| `label` | `String` of `node` | `''` | Label for the radio button.| +| `label` | `String` or `node` | `''` | Label for the radio button.| | `name` | `String` | | Name for the input element. | | `onBlur` | `Function` | | Callback function that will be invoked when the input is blurred. | | `onChange` | `Function` | | Callback function that will be invoked when the value changes. | From 47d2f1893f39352f30a5a6ad535eaaf369b654d9 Mon Sep 17 00:00:00 2001 From: Zander Otavka Date: Sat, 12 Aug 2017 15:54:50 -0700 Subject: [PATCH 07/31] Fix mixed up type definitions for Dropdown `valueKey` and `labelKey` were listed as theme props. What's worse, `valueKey` was marked as required, when in fact it should not be present at all on the theme. --- components/dropdown/Dropdown.d.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/components/dropdown/Dropdown.d.ts b/components/dropdown/Dropdown.d.ts index 4d14eeb7..3ed67817 100644 --- a/components/dropdown/Dropdown.d.ts +++ b/components/dropdown/Dropdown.d.ts @@ -30,10 +30,6 @@ export interface DropdownTheme { * Used for the the label element. */ label?: string; - /** - * Used for setting the label from source - */ - labelKey?: string; /** * Used when dropdown has required attribute. */ @@ -58,10 +54,6 @@ export interface DropdownTheme { * Used for the list of values. */ values?: string; - /** - * Used for setting the value from source - */ - valueKey: string; } export interface DropdownProps extends ReactToolbox.Props { @@ -88,6 +80,10 @@ export interface DropdownProps extends ReactToolbox.Props { * The text string to use for the floating label element. */ label?: string; + /** + * Used for setting the label from source + */ + labelKey?: string; /** * Name for the input field. */ @@ -104,6 +100,11 @@ export interface DropdownProps extends ReactToolbox.Props { * Callback function that is fired when the component is focused. */ onFocus?: Function; + /** + * If true, the dropdown has a required attribute. + * @default false + */ + required?: boolean; /** * Array of data objects with the data to represent in the dropdown. */ @@ -121,10 +122,9 @@ export interface DropdownProps extends ReactToolbox.Props { */ value?: string | number; /** - * If true, the dropdown has a required attribute. - * @default false + * Used for setting the value from source */ - required?: boolean; + valueKey?: string; } export class Dropdown extends React.Component { } From 8b7fc07f82ca25e7df3bbebd7b9108a19aadfce2 Mon Sep 17 00:00:00 2001 From: Adam Date: Fri, 1 Sep 2017 11:43:03 -0400 Subject: [PATCH 08/31] Portal: Fix Invalid "style" PropType (#1664) * Fix bad prop. (cherry picked from commit 7d54ca0a30b6238195a9cfd6da19e8fa94655ae5) * fix prop-type. (cherry picked from commit f48a0e2881f6541e4acd4e9f7610bda629b0fcc8) --- components/hoc/Portal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/hoc/Portal.js b/components/hoc/Portal.js index f1ca7273..1a9a5357 100644 --- a/components/hoc/Portal.js +++ b/components/hoc/Portal.js @@ -1,13 +1,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; +import styleShape from 'react-style-proptype'; class Portal extends Component { static propTypes = { children: PropTypes.node, className: PropTypes.string, container: PropTypes.node, - style: PropTypes.style, + style: styleShape, } static defaultProps = { From 91cb46db845ad20c71bbe46f8338ebed87b71d51 Mon Sep 17 00:00:00 2001 From: Panjie Setiawan Wicaksono Date: Fri, 1 Sep 2017 22:51:41 +0700 Subject: [PATCH 09/31] Typescript definitions validation (#1163) * initial attempt to validate ts definitions * ignore .vscode * Add other spect & some fixes: - Add target prop to Button - Add value prop to MenuItem - Make label optional in Tab - Improve Tooltip types * Add tsc validation to travis * fix typo in travis build step --- .gitignore | 1 + .travis.yml | 1 + components/button/Button.d.ts | 7 +- components/input/Input.d.ts | 2 +- components/menu/MenuItem.d.ts | 4 + components/tabs/Tab.d.ts | 4 +- components/tooltip/index.d.ts | 17 ++- package.json | 8 +- spec/ts/app_bar.tsx | 22 +++ spec/ts/autocomplete.tsx | 96 +++++++++++++ spec/ts/avatar.tsx | 22 +++ spec/ts/button.tsx | 51 +++++++ spec/ts/card.tsx | 247 ++++++++++++++++++++++++++++++++++ spec/ts/checkbox.tsx | 56 ++++++++ spec/ts/chip.tsx | 67 +++++++++ spec/ts/dialog.tsx | 95 +++++++++++++ spec/ts/drawer.tsx | 50 +++++++ spec/ts/dropdown.tsx | 82 +++++++++++ spec/ts/font_icon.tsx | 17 +++ spec/ts/github_icon.tsx | 10 ++ spec/ts/icon_menu.tsx | 53 ++++++++ spec/ts/input.tsx | 43 ++++++ spec/ts/link.tsx | 13 ++ spec/ts/list.tsx | 190 ++++++++++++++++++++++++++ spec/ts/menu.tsx | 38 ++++++ spec/ts/navigation.tsx | 22 +++ spec/ts/pickers.tsx | 131 ++++++++++++++++++ spec/ts/progress.tsx | 59 ++++++++ spec/ts/radio.tsx | 39 ++++++ spec/ts/slider.tsx | 31 +++++ spec/ts/snackbar.tsx | 43 ++++++ spec/ts/switch.tsx | 41 ++++++ spec/ts/table.tsx | 91 +++++++++++++ spec/ts/tabs.tsx | 73 ++++++++++ spec/ts/tooltip.tsx | 49 +++++++ tsconfig.json | 22 +++ yarn.lock | 12 ++ 37 files changed, 1801 insertions(+), 8 deletions(-) create mode 100644 spec/ts/app_bar.tsx create mode 100644 spec/ts/autocomplete.tsx create mode 100644 spec/ts/avatar.tsx create mode 100644 spec/ts/button.tsx create mode 100644 spec/ts/card.tsx create mode 100644 spec/ts/checkbox.tsx create mode 100644 spec/ts/chip.tsx create mode 100644 spec/ts/dialog.tsx create mode 100644 spec/ts/drawer.tsx create mode 100644 spec/ts/dropdown.tsx create mode 100644 spec/ts/font_icon.tsx create mode 100644 spec/ts/github_icon.tsx create mode 100644 spec/ts/icon_menu.tsx create mode 100644 spec/ts/input.tsx create mode 100644 spec/ts/link.tsx create mode 100644 spec/ts/list.tsx create mode 100644 spec/ts/menu.tsx create mode 100644 spec/ts/navigation.tsx create mode 100644 spec/ts/pickers.tsx create mode 100644 spec/ts/progress.tsx create mode 100644 spec/ts/radio.tsx create mode 100644 spec/ts/slider.tsx create mode 100644 spec/ts/snackbar.tsx create mode 100644 spec/ts/switch.tsx create mode 100644 spec/ts/table.tsx create mode 100644 spec/ts/tabs.tsx create mode 100644 spec/ts/tooltip.tsx create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore index 5aba682b..6be2ae85 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ node_modules npm-debug.log .idea .DS_Store +.vscode diff --git a/.travis.yml b/.travis.yml index a2133b95..73da3307 100644 --- a/.travis.yml +++ b/.travis.yml @@ -8,4 +8,5 @@ node_js: script: - npm run lint + - npm run ts - npm test diff --git a/components/button/Button.d.ts b/components/button/Button.d.ts index 22eb2a69..6fcba2f7 100644 --- a/components/button/Button.d.ts +++ b/components/button/Button.d.ts @@ -1,8 +1,9 @@ import * as React from "react"; import ReactToolbox from "../index"; +import { RippleProps } from '../ripple/index'; import { ButtonBaseProps, ButtonTheme } from './base'; -export interface ButtonProps extends ButtonBaseProps { +export interface ButtonProps extends ButtonBaseProps, RippleProps { /** * If true, the button will have a flat look. * @default false @@ -31,6 +32,10 @@ export interface ButtonProps extends ButtonBaseProps { * @default false */ raised?: boolean; + /** + * Passed down to the root element + */ + target?: string; /** * Classnames object defining the component style. */ diff --git a/components/input/Input.d.ts b/components/input/Input.d.ts index 6bddadc5..dc12e0fc 100644 --- a/components/input/Input.d.ts +++ b/components/input/Input.d.ts @@ -132,7 +132,7 @@ export interface InputProps extends ReactToolbox.Props { /** * The number of rows the multiline input field has. */ - rows?:number; + rows?: number; /** * Classnames object defining the component style. */ diff --git a/components/menu/MenuItem.d.ts b/components/menu/MenuItem.d.ts index 265f0576..325e8505 100644 --- a/components/menu/MenuItem.d.ts +++ b/components/menu/MenuItem.d.ts @@ -59,6 +59,10 @@ export interface MenuItemProps extends ReactToolbox.Props { * Classnames object defining the component style. */ theme?: MenuItemTheme; + /** + * Passed down to the root element + */ + value?: any; } export class MenuItem extends React.Component { } diff --git a/components/tabs/Tab.d.ts b/components/tabs/Tab.d.ts index c7cf99b2..59c1e027 100644 --- a/components/tabs/Tab.d.ts +++ b/components/tabs/Tab.d.ts @@ -52,9 +52,9 @@ export interface TabProps extends ReactToolbox.Props { */ icon?: React.ReactNode; /** - * Label text for navigation header. Required. + * Label text for navigation header. */ - label: string; + label?: string; /** * Callback function that is fired when the tab is activated. */ diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts index 3b4cfae1..ad93abab 100644 --- a/components/tooltip/index.d.ts +++ b/components/tooltip/index.d.ts @@ -70,10 +70,21 @@ declare class TooltipComponent extends React.Component { props: P & TooltipProps; } -interface TooltippedComponentClass

extends TooltipProps { +declare interface TooltippedComponentClass

extends TooltipProps { new (props?: P, context?: any): TooltipComponent; } -export function Tooltip

(componentClass: React.ComponentClass

): TooltippedComponentClass

; +declare interface TooltipOptions { + className?: string; + delay?: number; + hideOnClick?: boolean; + passthrough?: boolean; + showOnClick?: boolean; + position?: 'bottom' | 'horizontal' | 'left' | 'right' | 'top' | 'vertical' +} -export default Tooltip; +declare type tooltipHOC

= (componentClass: React.ComponentClass

) => TooltippedComponentClass

+ +export function tooltipFactory

(options?: TooltipOptions): tooltipHOC

; + +export default function Tooltip

(component: React.ReactType): TooltippedComponentClass

; diff --git a/package.json b/package.json index 4081c22d..4d174de0 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,8 @@ "react-transition-group": "^1.1.3" }, "devDependencies": { + "@types/node": "^7.0.4", + "@types/react": "^15.0.0", "babel-cli": "^6.24.1", "babel-core": "^6.24.1", "babel-eslint": "^7.2.3", @@ -86,13 +88,15 @@ "react-transform-hmr": "^1.0.4", "redbox-react": "^1.3.6", "rimraf": "^2.6.1", + "sinon": "^2.0.0-pre.2", "style-loader": "^0.18.1", "stylelint": "^7.10.1", "stylelint-config-standard": "^16.0.0", "stylelint-order": "^0.4.4", + "typescript": "^2.1.5", "webpack": "^2.6.0", "webpack-dev-middleware": "^1.10.2", - "webpack-hot-middleware": "^2.18.0" + "webpack-hot-middleware": "^2.18.0" }, "engines": { "node": ">= 6" @@ -111,6 +115,8 @@ "prepublish": "npm run build", "release": "bumped release", "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server", + "ts": "tsc", + "tsd": "cpx \"./components/**/*.d.ts\" ./lib" "test": "jest", "test:watch": "jest --watch --no-watchman" }, diff --git a/spec/ts/app_bar.tsx b/spec/ts/app_bar.tsx new file mode 100644 index 00000000..14df0dc6 --- /dev/null +++ b/spec/ts/app_bar.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import AppBar, {AppBar as NamedAppBar} from 'components/app_bar'; + +const AppBarTest: React.SFC = () => ( +

+
AppBar
+
+ +
+ +
+ +
+ + Custom content + +
+ +
+) + +export default AppBarTest; diff --git a/spec/ts/autocomplete.tsx b/spec/ts/autocomplete.tsx new file mode 100644 index 00000000..edcfc42e --- /dev/null +++ b/spec/ts/autocomplete.tsx @@ -0,0 +1,96 @@ +import * as React from 'react'; +import Autocomplete from 'components/autocomplete'; + +class AutocompleteTest extends React.Component { + state: any = { + simple: 'Spain', + simpleShowAll: 'England', + multipleArray: ['ES-es', 'TH-th'], + multipleObject: {'ES-es': 'Spain', 'TH-th': 'Thailand'}, + countriesArray: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'], + countriesObject: { + 'EN-gb': 'England', + 'EN-en': 'United States of America', 'EN-nz': 'New Zealand' + } + }; + + handleFocus = (event: React.MouseEvent) => { + console.log('This is focused'); + console.log(event); + }; + + handleMultipleArrayChange = (value: any) => { + this.setState({ + multipleArray: value, + countriesObject: { + ...this.state.countriesObject, + ...(value[0] && !this.state.countriesObject[value[0]]) ? {[value[0]]: value[0]} : {} + } + }); + }; + + handleMultipleObjectChange = (value: any) => { + this.setState({ + multipleObject: value + }); + }; + + handleSimpleChange = (value: any) => { + this.setState({simple: value}); + }; + + handleSimpleShowAllChange = (value: any) => { + this.setState({simpleShowAll: value}); + }; + + render () { + return ( +
+
Autocomplete
+

You can have a multiple or simple autocomplete.

+ + + + + + + + +
+ ); + } +} + +export default AutocompleteTest; diff --git a/spec/ts/avatar.tsx b/spec/ts/avatar.tsx new file mode 100644 index 00000000..87dfab0e --- /dev/null +++ b/spec/ts/avatar.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Avatar from '../../components/avatar'; +import GithubIcon from './github_icon'; + +const AvatarTest = () => ( +
+
Avatars
+

Provide an image source or object, a font icon, children or a title to use its first letter.

+ + } /> + foobar + + + + +
+); + +export default AvatarTest; diff --git a/spec/ts/button.tsx b/spec/ts/button.tsx new file mode 100644 index 00000000..9a7c51ac --- /dev/null +++ b/spec/ts/button.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import GithubIcon from './github_icon'; +import { Button, IconButton, BrowseButton } from '../../components/button'; + +const ButtonTest = () => ( +
+
Buttons
+

lorem ipsum...

+ + +
+); + +function rippleEnded() { + console.log('Ripple animation ended!'); +} + +export default ButtonTest; diff --git a/spec/ts/card.tsx b/spec/ts/card.tsx new file mode 100644 index 00000000..a119f7aa --- /dev/null +++ b/spec/ts/card.tsx @@ -0,0 +1,247 @@ +/* eslint-disable react/prop-types */ +import * as React from 'react'; +import Button, { IconButton } from '../../components/button'; +import Card, { CardActions, CardMedia, CardText, CardTitle } from '../../components/card'; + +const style = require('../style.css'); + +const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'; + +const Spacer: React.SFC = () =>
; +const CardList: React.SFC = ({ children }) =>
    {children}
; +const CardListItem: React.SFC = ({ component, name }) => ( +
  • +
    {component}
    +
    {name}
    +
    • +); + +const cards: any = { + basic: [{ + name: 'Basic Card', + component: ( + + + {dummyText} + +