From 27caadb182dc1b6f645a98d72be0ce13c8212756 Mon Sep 17 00:00:00 2001 From: Miguel San Segundo Date: Mon, 29 May 2017 13:46:38 +0200 Subject: [PATCH 001/174] Added required?: boolean; (#1491) --- components/date_picker/DatePicker.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/date_picker/DatePicker.d.ts b/components/date_picker/DatePicker.d.ts index b20b3dd47..ba72137c7 100644 --- a/components/date_picker/DatePicker.d.ts +++ b/components/date_picker/DatePicker.d.ts @@ -191,6 +191,10 @@ export interface DatePickerProps extends ReactToolbox.Props { * Date object with the currently selected date. */ value?: Date | string; + /** + * Used in case the input is required. + */ + required?: boolean; } export interface DatePickerLocale { From d6bdf2008ec4e6c10810e45cda23cada8c35b61b Mon Sep 17 00:00:00 2001 From: Ankur Patel Date: Thu, 13 Jul 2017 14:03:34 -0400 Subject: [PATCH 002/174] Allow to change FontIcon for Tab by passing it into the factory (#1439) --- components/tabs/Tab.js | 6 +++--- components/tabs/index.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js index eb35c2228..4b8487f8a 100644 --- a/components/tabs/Tab.js +++ b/components/tabs/Tab.js @@ -2,11 +2,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { themr } from 'react-css-themr'; -import { FontIcon } from '../font_icon'; import { TABS } from '../identifiers'; import rippleFactory from '../ripple/Ripple'; +import InjectFontIcon from '../font_icon/FontIcon'; -const factory = (ripple) => { +const factory = (ripple, FontIcon) => { class Tab extends Component { static propTypes = { active: PropTypes.bool, @@ -77,7 +77,7 @@ const factory = (ripple) => { return ripple(Tab); }; -const Tab = factory(rippleFactory({ centered: false })); +const Tab = factory(rippleFactory({ centered: false }), InjectFontIcon); export default themr(TABS)(Tab); export { factory as tabFactory }; export { Tab }; diff --git a/components/tabs/index.js b/components/tabs/index.js index fe79fd203..b5ebaaa5d 100644 --- a/components/tabs/index.js +++ b/components/tabs/index.js @@ -9,7 +9,7 @@ import theme from './theme.css'; const applyTheme = Component => themr(TABS, theme)(Component); const ThemedTabContent = applyTheme(TabContent); -const ThemedTab = applyTheme(tabFactory(themedRippleFactory({ centered: false }))); +const ThemedTab = applyTheme(tabFactory(themedRippleFactory({ centered: false }), FontIcon)); const ThemedTabs = applyTheme(tabsFactory(ThemedTab, ThemedTabContent, FontIcon)); export { ThemedTab as Tab }; From 4a13ff2541517c8c2772bcb1e97f723cdd8c44ec Mon Sep 17 00:00:00 2001 From: Aris Plakias Date: Thu, 13 Jul 2017 21:18:00 +0300 Subject: [PATCH 003/174] Fix media queries panel height calculations (#1467) --- components/layout/theme.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/components/layout/theme.css b/components/layout/theme.css index 33a36b0ce..db483ac71 100644 --- a/components/layout/theme.css +++ b/components/layout/theme.css @@ -70,19 +70,23 @@ } & .panel { + height: calc(100vh - var(--appbar-height)); + max-height: calc(100vh - var(--appbar-height)); top: var(--appbar-height); &:not(.bodyScroll) { - height: calc(100vh - var(--appbar-height)); - max-height: calc(100vh - var(--appbar-height)); overflow-y: scroll; } @media screen and (--xxs-viewport) and (--portrait) { + height: calc(100vh - var(--appbar-height-m-portrait)); + max-height: calc(100vh - var(--appbar-height-m-portrait)); top: var(--appbar-height-m-portrait); } @media screen and (--xs-viewport) and (--landscape) { + height: calc(100vh - var(--appbar-height-m-landscape)); + max-height: calc(100vh - var(--appbar-height-m-landscape)); top: var(--appbar-height-m-landscape); } } From 4722904d2500d6ddf176bb1feecf0315446bc27d Mon Sep 17 00:00:00 2001 From: kobanyan Date: Fri, 14 Jul 2017 03:19:16 +0900 Subject: [PATCH 004/174] Allow pass inverse to IconMenu (#1490) --- components/menu/IconMenu.d.ts | 5 +++++ components/menu/IconMenu.js | 1 + 2 files changed, 6 insertions(+) diff --git a/components/menu/IconMenu.d.ts b/components/menu/IconMenu.d.ts index 6fbab80fe..931bcfe02 100644 --- a/components/menu/IconMenu.d.ts +++ b/components/menu/IconMenu.d.ts @@ -27,6 +27,11 @@ export interface IconMenuProps extends ReactToolbox.Props { * @default true */ iconRipple?: boolean; + /** + * If true, the neutral colors are inverted. Useful if the icon is over a dark background. + * @default false + */ + inverse?: boolean; /** * Transferred to the Menu component. * @default true diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js index 3fd7341ce..e82e7fd47 100644 --- a/components/menu/IconMenu.js +++ b/components/menu/IconMenu.js @@ -16,6 +16,7 @@ const factory = (IconButton, Menu) => { PropTypes.element, ]), iconRipple: PropTypes.bool, + inverse: PropTypes.bool, menuRipple: PropTypes.bool, onClick: PropTypes.func, onHide: PropTypes.func, From a6eb5c53f3a4be5a668a91b7616f24167f8d4aea Mon Sep 17 00:00:00 2001 From: Oleg Stepura Date: Thu, 13 Jul 2017 20:20:33 +0200 Subject: [PATCH 005/174] ListItem legend may be a node as well (#1496) Currently it works, but produces a warning by react typechecking --- components/list/ListItemContent.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/list/ListItemContent.js b/components/list/ListItemContent.js index 561be3266..60e38293c 100644 --- a/components/list/ListItemContent.js +++ b/components/list/ListItemContent.js @@ -15,7 +15,10 @@ const factory = (ListItemText) => { PropTypes.node, ]), children: PropTypes.node, - legend: PropTypes.string, + legend: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.node, + ]), theme: PropTypes.shape({ auto: PropTypes.string, itemContentRoot: PropTypes.string, From 7db3e34350274fc32807619e63e65671396176ab Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Thu, 13 Jul 2017 20:27:50 +0200 Subject: [PATCH 006/174] Avoid undefined className when ProgressBar mode is determinate --- components/progress_bar/ProgressBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/progress_bar/ProgressBar.js b/components/progress_bar/ProgressBar.js index b8957fc6f..dd6e79d7d 100644 --- a/components/progress_bar/ProgressBar.js +++ b/components/progress_bar/ProgressBar.js @@ -82,7 +82,7 @@ class ProgressBar extends Component { render() { const { className, disabled, max, min, mode, multicolor, type, theme, value } = this.props; const _className = classnames(theme[type], { - [theme[mode]]: mode, + [theme.indeterminate]: mode === 'indeterminate', [theme.multicolor]: multicolor, }, className); From 6290cf5ab2904423664edbdfbc912ae273b791c3 Mon Sep 17 00:00:00 2001 From: Nathan Miranda Date: Thu, 13 Jul 2017 14:29:33 -0400 Subject: [PATCH 007/174] Added label to InputTheme interface (#1501) --- components/input/Input.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/input/Input.d.ts b/components/input/Input.d.ts index f3c9dc9f4..6bddadc53 100644 --- a/components/input/Input.d.ts +++ b/components/input/Input.d.ts @@ -42,6 +42,10 @@ export interface InputTheme { * Used for the HTML input element. */ inputElement?: string; + /** + * Used for the label when the input has a label. + */ + label?: string; /** * Used in case the input is required. */ From 0e299a65b18cf93bf10089b7c540008f7f7faf20 Mon Sep 17 00:00:00 2001 From: Pablo Lacerda de Miranda Date: Thu, 13 Jul 2017 11:43:14 -0700 Subject: [PATCH 008/174] allows the Portal HOC root element to receive a style props. This allows coordinate runtime positioning of the portal element using top/left/bottom/right values (#1502) --- components/hoc/Portal.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/hoc/Portal.js b/components/hoc/Portal.js index 99769747e..f1ca7273d 100644 --- a/components/hoc/Portal.js +++ b/components/hoc/Portal.js @@ -7,6 +7,7 @@ class Portal extends Component { children: PropTypes.node, className: PropTypes.string, container: PropTypes.node, + style: PropTypes.style, } static defaultProps = { @@ -55,7 +56,11 @@ class Portal extends Component { _getOverlay() { if (!this.props.children) return null; - return
{this.props.children}
; + return ( +
+ {this.props.children} +
+ ); } _renderOverlay() { From df175e7f0df71d33237d829423c47748a2d50f0c Mon Sep 17 00:00:00 2001 From: TeoMatthew Date: Wed, 2 Aug 2017 18:08:28 +0200 Subject: [PATCH 009/174] fix #1611 (#1612) Added correct proptypes on `ListItemLayout` and updated documentation for ListItem's fields `legend` and `caption`. --- components/list/ListItemLayout.js | 10 ++++++++-- components/list/readme.md | 4 ++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/components/list/ListItemLayout.js b/components/list/ListItemLayout.js index 0ee7f1996..932231624 100644 --- a/components/list/ListItemLayout.js +++ b/components/list/ListItemLayout.js @@ -43,7 +43,10 @@ const factory = (Avatar, ListItemContent, ListItemActions) => { PropTypes.string, PropTypes.element, ]), - caption: PropTypes.string, + caption: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.node, + ]), className: PropTypes.string, disabled: PropTypes.bool, itemContent: PropTypes.element, @@ -52,7 +55,10 @@ const factory = (Avatar, ListItemContent, ListItemActions) => { PropTypes.string, PropTypes.element, ]), - legend: PropTypes.string, + legend: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.node, + ]), rightActions: PropTypes.arrayOf(PropTypes.node), rightIcon: PropTypes.oneOfType([ PropTypes.string, diff --git a/components/list/readme.md b/components/list/readme.md index afcc16e6e..54b5a1acc 100644 --- a/components/list/readme.md +++ b/components/list/readme.md @@ -64,13 +64,13 @@ Represents a list item that can have avatar, icons, title, subtitle, etc. Note: | Name | Type | Default | Description| |:-----|:-----|:-----|:-----| | `avatar` | `String` or `Element` | | A string URL to specify an avatar in the left side of the item.| -| `caption` | `String` | | Main text of the item.| +| `caption` | `String` or `Element` | | Main text of the item.| | `className` | `String` | `''` | Set a class to give custom styles to the list item.| | `disabled` | `String` | `false` | If true, the item is displayed as disabled and is not clickable.| | `itemContent` | `Element` | | An element that will be displayed as the item. If set, this will override `caption` and `legend`.| | `leftActions` | `Array of Elements` | | A list of elements that are placed on the left side of the item and after the avatar attribute.| | `leftIcon` | `String` or `Element` | | A string key of a font icon or element to display an icon in the left side of the item. | -| `legend` | `String` | | Secondary text to display under the caption.| +| `legend` | `String` or `Element` | | Secondary text to display under the caption.| | `onClick` | `Function` | | Callback the is invoked when the item is clicked if it's not disabled. | | `rightIcon` | `String` or `Element` | | The same as the `leftIcon` but in this case the icon is displayed in the right side.| | `rightActions` | `Array of Elements` | | A list of elements that are placed on the right side of the item and after the rightIcon attribute.| From fb5d0e1ffc79606eefddae550b9b1044f4ccc63b Mon Sep 17 00:00:00 2001 From: Robin Larson Date: Wed, 2 Aug 2017 12:11:37 -0400 Subject: [PATCH 010/174] requestAnimationFrame will only trigger if the browser window is visible. If the browser tab is put to the background, requestAnimationFrame will trigger when the tab returned to the foreground. When the Tabs Component is removed from the DOM when in the background, the requestAnimationFrame must be canceled to prevent attempting to use a unmounted Component. (#1604) --- components/tabs/Tabs.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js index 81c734589..53341ccd4 100644 --- a/components/tabs/Tabs.js +++ b/components/tabs/Tabs.js @@ -64,6 +64,7 @@ const factory = (Tab, TabContent, FontIcon) => { componentWillUnmount() { window.removeEventListener('resize', this.handleResize); clearTimeout(this.resizeTimeout); + if (this.updatePointerAnimationFrame) cancelAnimationFrame(this.updatePointerAnimationFrame); } handleHeaderClick = (idx) => { @@ -82,7 +83,7 @@ const factory = (Tab, TabContent, FontIcon) => { updatePointer = (idx) => { if (this.navigationNode && this.navigationNode.children[idx]) { - requestAnimationFrame(() => { + this.updatePointerAnimationFrame = requestAnimationFrame(() => { const nav = this.navigationNode.getBoundingClientRect(); const label = this.navigationNode.children[idx].getBoundingClientRect(); const scrollLeft = this.navigationNode.scrollLeft; From 16ae9bff7d88fa6fea48567b40cb871b52672bd9 Mon Sep 17 00:00:00 2001 From: Bruno Bigras Date: Wed, 2 Aug 2017 12:12:20 -0400 Subject: [PATCH 011/174] Remove discord link in README.md (#1593) The channel doesn't exist anymore related to #107 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 61c5bb4b5..f58fb425f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # -[![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox) [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox) [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox) [![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW9FLzM) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco) [![OpenCollective](https://opencollective.com/react-toolbox/backers/badge.svg)](#backers) +[![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox) [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox) [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco) [![OpenCollective](https://opencollective.com/react-toolbox/backers/badge.svg)](#backers) [![OpenCollective](https://opencollective.com/react-toolbox/sponsors/badge.svg)](#sponsors) React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://material.google.com/). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live! From 843b88a311b82497f0530f8498eb25ab6ba6b3ad Mon Sep 17 00:00:00 2001 From: the1900 Date: Thu, 3 Aug 2017 01:13:48 +0900 Subject: [PATCH 012/174] solve #1444 and #1359. (#1587) * update webpack config to make "Basic usage" work. I use webpack version 2.6 and new configure syntax rather than 1.x. When I follow the instruction on `readme.md`. It always failed on *Basic Usage* with the message below. ``` bash ERROR in ./~/css-loader?{"modules":false,"importLoaders":1,"localIdentName":"[name]--[local]--[hash:base64:8]"}!./~/postcss-loader/lib!./~/react-toolbox/lib/button/theme.css Module build failed: Error: composition is only allowed when selector is single :local class name not in ".raised", ".raised" is weird ``` So I figured out what's wrong and update `reame.md` to notify others. * edit multiple number. According to docs, the width is larger than 320px and if the device is mobile than 280px. To follow this specification It should be 5, not 4. --- README.md | 20 ++++++++++++++++++++ components/drawer/config.css | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f58fb425f..6287e2da9 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,26 @@ Declare plugins to be used by postcss (as part of webpack's config object): }, ``` +Configure webpack 2.x or 3.x loader for .css files to use postcss: +```js + { + test: /\.css$/, + use: [ + "style-loader", + { + loader: "css-loader", + options: { + modules: true, // default is false + sourceMap: true, + importLoaders: 1, + localIdentName: "[name]--[local]--[hash:base64:8]" + } + }, + "postcss-loader" + ] + } +``` + ## Basic usage In this minimal example, we import a `Button` with styles already bundled: diff --git a/components/drawer/config.css b/components/drawer/config.css index afbdcfbf0..dd12d7a37 100644 --- a/components/drawer/config.css +++ b/components/drawer/config.css @@ -3,6 +3,6 @@ --drawer-border-color: var(--palette-grey-300); --drawer-text-color: var(--palette-grey-800); --drawer-width: calc(24 * var(--unit)); - --drawer-desktop-width: calc(4 * var(--standard-increment-desktop)); + --drawer-desktop-width: calc(5 * var(--standard-increment-desktop)); --drawer-mobile-width: calc(5 * var(--standard-increment-mobile)); } From 54d0cb5c62fa79d0053ad7f30c6584f4531943b6 Mon Sep 17 00:00:00 2001 From: AlexPrinz Date: Wed, 2 Aug 2017 18:14:23 +0200 Subject: [PATCH 013/174] Fix date-picker animation in IE11 (#1586) --- components/date_picker/theme.css | 1 + 1 file changed, 1 insertion(+) diff --git a/components/date_picker/theme.css b/components/date_picker/theme.css index ded096874..bfac22efe 100644 --- a/components/date_picker/theme.css +++ b/components/date_picker/theme.css @@ -180,6 +180,7 @@ .month { background-color: var(--calendar-primary-contrast-color); + width: 100%; } .slideRightEnter, From f8f528cbcd1d1e58bc98aa5deececc9442c08fab Mon Sep 17 00:00:00 2001 From: Kristoffer Rene Eckhoff Date: Wed, 2 Aug 2017 18:15:55 +0200 Subject: [PATCH 014/174] Do not show scrollbar on autocomplete component IE11 (#1515) Scrollbars are shown on the autocomplete component in IE11. It is not possible to use the scrollbar after it appears which confuses my users. I am not sure IE implementations are wanted, but this in any case disables the scrollbar so that the autocomplete looks more like in chrome. --- components/autocomplete/theme.css | 1 + 1 file changed, 1 insertion(+) diff --git a/components/autocomplete/theme.css b/components/autocomplete/theme.css index f6c943cd6..5a7f88c97 100644 --- a/components/autocomplete/theme.css +++ b/components/autocomplete/theme.css @@ -14,6 +14,7 @@ box-shadow: var(--zdepth-shadow-1); max-height: var(--autocomplete-overflow-max-height); visibility: visible; + -ms-overflow-style:none; } } } From f44833a5dce49942fca95794c4610604e61b76fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Moya?= Date: Wed, 2 Aug 2017 18:17:17 +0200 Subject: [PATCH 015/174] Apply padding 0 to everything but buttons in ListItemAction (#1571) --- components/list/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/list/theme.css b/components/list/theme.css index 281181847..862ff19eb 100644 --- a/components/list/theme.css +++ b/components/list/theme.css @@ -116,7 +116,7 @@ display: flex; margin: var(--list-item-child-margin) var(--list-horizontal-padding) var(--list-item-child-margin) 0; - & > * { + & > :not(button) { padding: 0; } From 7403d5d2d800ccc73689176c07992a0c242f20f7 Mon Sep 17 00:00:00 2001 From: Rasmus Eneman Date: Wed, 2 Aug 2017 18:18:51 +0200 Subject: [PATCH 016/174] Add ThemeProvider Typescript type (#1576) --- components/ThemeProvider.d.ts | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 components/ThemeProvider.d.ts diff --git a/components/ThemeProvider.d.ts b/components/ThemeProvider.d.ts new file mode 100644 index 000000000..f3884c411 --- /dev/null +++ b/components/ThemeProvider.d.ts @@ -0,0 +1,3 @@ +import {ThemeProvider} from 'react-css-themr' + +export default ThemeProvider From 2124c8c6a34430e066436fcb66e13c6603cb207b Mon Sep 17 00:00:00 2001 From: gima Date: Wed, 2 Aug 2017 19:19:18 +0300 Subject: [PATCH 017/174] Docs/Install: Fix typos, clarify language (#1566) --- docs/app/components/layout/install/install.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md index 716ecf928..d4302ea9b 100644 --- a/docs/app/components/layout/install/install.md +++ b/docs/app/components/layout/install/install.md @@ -16,7 +16,7 @@ React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by Although we recommend [webpack](https://webpack.github.io/), you are free to use whatever module bundler you want as long as it can compile and require SASS files located in your `node_modules`. If you are experiencing require errors, make sure your configuration satisfies this requirement. -Of course this is a set of React components so you should be familiar with [React](https://facebook.github.io/react/). If want to customize your components via themes, you may want to take a look to [react-css-themr](https://github.com/javivelasco/react-css-themr) which is used by React Toolbox to make component easily themeable. +Of course this is a set of React components so you should be familiar with [React](https://facebook.github.io/react/). If want to customize your components via themes, you may want to take a look at [react-css-themr](https://github.com/javivelasco/react-css-themr) which is used by React Toolbox to make component easily themeable. ## Basic usage @@ -68,7 +68,7 @@ import AppBar from 'react-toolbox/lib/app_bar/AppBar.js'; ## Customizing components -Every component accepts a `theme` property intended to provide a [CSS Module import object](https://github.com/css-modules/css-modules) that will be used by the component to assign local classnames to its DOM nodes. Therefore, each one implements a documented **classname API** so if you want to customize a component, you just need to provide a theme object with the appropriated classname mapping. +Every component accepts a `theme` property intended to provide a [CSS Module import object](https://github.com/css-modules/css-modules) that will be used by the component to assign local classnames to its DOM nodes. Therefore, each one implements a documented **classname API** so if you want to customize a component, you just need to provide a theme object with the appropriate classname mapping. If the component has already a theme injected, the properties you pass will be merged with the injected. In this way, you can **add** classnames to the nodes of a specific component and use them to add or to override styles. For example, if you want to customize the `AppBar` to be purple: @@ -97,7 +97,7 @@ If the component has no styles injected, you should provide a theme object imple ## Theming -You can afford theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written in SASS and configured using the **config** files we saw earlier. Also you may want to check [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/colors.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.css) files to get an overview on the **variables** you have to override to get the results you want. +You can afford theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written in SASS and configured using the **config** files we saw earlier. Also you may want to check [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/colors.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.css) files to get an overview of the **variables** you have to override to get the results you want. In most scenarios you can get more customized themes by overriding those variables and compiling stylesheets with them. For example, you can create a `_theme.scss` SASS file: @@ -108,7 +108,7 @@ $color-primary: $palette-blue-500; $color-primary-dark: $palette-blue-700; ``` -This file should be prepended to each stylesheet compilation which be achieved in multiple ways. +This file should be prepended to each stylesheet compilation which can be achieved in multiple ways. ### Using SASS Loader @@ -131,7 +131,7 @@ Remember that you can import components without styles and provide those styles @import "http://github.com/~react-toolbox/lib/button/theme"; ``` -Then, when you use a button you can inject the appropriated theme: +Then, when you use a button you can inject the appropriate theme: ```js import Button from 'react-toolbox/lib/button/Button'; @@ -148,7 +148,7 @@ With this technique you have to create wrappers for every component and this is ### Using SASS imports and context -This is a good moment to check out [react-css-themr](http://github.com/javivelasco/react-css-themr) if you still didn't. Every component in React Toolbox has a key assigned that can be used to provide a default CSS Module. You can create a theme like: +This is a good moment to check out [react-css-themr](http://github.com/javivelasco/react-css-themr) if you still haven't. Every component in React Toolbox has a key assigned that can be used to provide a default CSS Module. You can create a theme like: ```js export default { @@ -157,7 +157,7 @@ export default { } ``` -Check for each component what key uses. Then, when you have a theme object fully imported and customized for each component your application uses, you can use it like we list here: +Check for each component what key to use. Then, when you have a theme object fully imported and customized for each component your application uses, you can use it like we list here: ```js import React from 'react'; @@ -173,7 +173,7 @@ render( , document.getElementById('app')) ``` -A couple of things here. First you need to use raw components to get this styles properly applied. Second, you have to add dependency themes by yourself. For example, the `Button` requires `Ripple` so you have to provide styles for both of them. +A couple of things here. First you need to use raw components to get the styles properly applied. Second, you have to add dependency themes by yourself. For example, the `Button` requires `Ripple` so you have to provide styles for both of them. ## Roboto Font and Material Design Icons @@ -193,7 +193,7 @@ The only requirement for SSR is to be able to require ES6 and CSS Modules in the ## Examples -For now we have a [repository example](https://github.com/react-toolbox/react-toolbox-example) demonstrating configuration and some basic customization. For now it's not using SSR rendering but it shouldn't be difficult to implement an example so it will come soon. Feel free to PR your example project or to add some use cases to the repository. +We have an [example repository](https://github.com/react-toolbox/react-toolbox-example) demonstrating configuration and some basic customization. For now it's not using SSR rendering but it shouldn't be difficult to implement an example so it will come soon. Feel free to PR your example project or to add some use cases to the repository. ## TypeScript From 431abb1bdedb5caf291d2a53df251cac35e34493 Mon Sep 17 00:00:00 2001 From: Tom Chen Date: Thu, 3 Aug 2017 00:19:53 +0800 Subject: [PATCH 018/174] Add workaround to `is-component-of-type` for `react-hot-loader@^3` (#1569) --- components/utils/is-component-of-type.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/components/utils/is-component-of-type.js b/components/utils/is-component-of-type.js index 1cdf953f0..794b10716 100644 --- a/components/utils/is-component-of-type.js +++ b/components/utils/is-component-of-type.js @@ -1,3 +1,5 @@ +import React from 'react'; + let customChecker; /** @@ -16,6 +18,10 @@ export function overrideComponentTypeChecker(providedChecker) { * @param reactElement {ReactElement} - any React Element (not a real DOM node) */ export function defaultChecker(classType, reactElement) { + if (process.env.NODE_ENV !== 'production') { + // https://github.com/gaearon/react-hot-loader/blob/v3.0.0-beta.7/docs/Known%20Limitations.md#checking-element-types + classType = React.createElement(classType).type;// eslint-disable-line no-param-reassign + } return reactElement && reactElement.type === classType; } From fc9c1802c76a9cba24fdedf6c6c9a20fd676ca66 Mon Sep 17 00:00:00 2001 From: Jonas Knutsen Date: Wed, 2 Aug 2017 18:22:05 +0200 Subject: [PATCH 019/174] Made role on input field a property (#1553) --- components/input/Input.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/input/Input.js b/components/input/Input.js index 9d3216be1..0ff8e1903 100644 --- a/components/input/Input.js +++ b/components/input/Input.js @@ -37,6 +37,7 @@ const factory = (FontIcon) => { onFocus: PropTypes.func, onKeyPress: PropTypes.func, required: PropTypes.bool, + role: PropTypes.string, rows: PropTypes.number, theme: PropTypes.shape({ bar: PropTypes.string, @@ -67,6 +68,7 @@ const factory = (FontIcon) => { floating: true, multiline: false, required: false, + role: 'input', type: 'text', }; @@ -166,7 +168,7 @@ const factory = (FontIcon) => { render() { const { children, defaultValue, disabled, error, floating, hint, icon, - name, label: labelText, maxLength, multiline, required, + name, label: labelText, maxLength, multiline, required, role, theme, type, value, onKeyPress, rows = 1, ...others } = this.props; const length = maxLength && value ? value.length : 0; const labelClassName = classnames(theme.label, { [theme.fixed]: !floating }); @@ -185,7 +187,7 @@ const factory = (FontIcon) => { className: classnames(theme.inputElement, { [theme.filled]: valuePresent }), onChange: this.handleChange, ref: (node) => { this.inputNode = node; }, - role: 'input', + role, name, defaultValue, disabled, From c1a2dba4b47afb579eca678fb1f48c8976b5ada8 Mon Sep 17 00:00:00 2001 From: Nicolas Jiang Date: Thu, 3 Aug 2017 04:25:19 +1200 Subject: [PATCH 020/174] fixed browser button fires onChange event twice (#1557) --- components/button/BrowseButton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/button/BrowseButton.js b/components/button/BrowseButton.js index 662de5c8b..d6f52ccb4 100644 --- a/components/button/BrowseButton.js +++ b/components/button/BrowseButton.js @@ -112,6 +112,7 @@ const factory = (ripple, FontIcon) => { const props = { ...others, ref: (node) => { this.labelNode = node; }, + onChange: null, className: classes, disabled: this.props.disabled, onMouseUp: this.handleMouseUp, From de69a1414f3dff13e5fd93a095bd53180a84f549 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ingo=20B=C3=BCrk?= Date: Wed, 2 Aug 2017 18:25:45 +0200 Subject: [PATCH 021/174] Fix typescript bindings. (#1564) This has been overlooked in PR #1407. --- components/app_bar/AppBar.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/app_bar/AppBar.d.ts b/components/app_bar/AppBar.d.ts index 9fc3e680c..3df288673 100644 --- a/components/app_bar/AppBar.d.ts +++ b/components/app_bar/AppBar.d.ts @@ -43,7 +43,7 @@ export interface AppBarProps extends ReactToolbox.Props { */ fixed?: boolean; /** - * If true, the AppBar shows a shadow. + * If true, the AppBar doesn't show a shadow. * @default false */ flat?: boolean; From 934ffd20008e22e21f7947c69843ce7c57608521 Mon Sep 17 00:00:00 2001 From: Daniel Barreiro Date: Wed, 2 Aug 2017 18:26:20 +0200 Subject: [PATCH 022/174] Add `accept` property to `BrowseButton` (#1533) * Corresponds to `accept` attribute on ` { class SimpleBrowseButton extends Component { static propTypes = { accent: PropTypes.bool, + accept: PropTypes.string, children: PropTypes.node, className: PropTypes.string, disabled: PropTypes.bool, @@ -47,6 +48,7 @@ const factory = (ripple, FontIcon) => { static defaultProps = { accent: false, + accept: '*/*', className: '', flat: false, floating: false, @@ -85,6 +87,7 @@ const factory = (ripple, FontIcon) => { render() { const { accent, // eslint-disable-line + accept, children, className, flat, // eslint-disable-line @@ -123,7 +126,12 @@ const factory = (ripple, FontIcon) => { return React.createElement(element, props, icon ? : null, {label}, - , + , children, ); } From 6fd1421143c0f683b6b9c318b79eccd55118086a Mon Sep 17 00:00:00 2001 From: Nilansh Arora Date: Wed, 2 Aug 2017 21:56:34 +0530 Subject: [PATCH 023/174] Event passed for Radiogroup (#1544) --- components/radio/RadioGroup.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/radio/RadioGroup.js b/components/radio/RadioGroup.js index 13d8b3df6..02e667ee6 100644 --- a/components/radio/RadioGroup.js +++ b/components/radio/RadioGroup.js @@ -20,8 +20,8 @@ const factory = (RadioButton) => { disabled: false, }; - handleChange = (value) => { - if (this.props.onChange) this.props.onChange(value); + handleChange = (value, event) => { + if (this.props.onChange) this.props.onChange(value, event); }; renderRadioButtons() { From 736f23eaa5dae45c1fa5d1c432601291199123cc Mon Sep 17 00:00:00 2001 From: Patrick Torpey Date: Wed, 2 Aug 2017 12:27:14 -0400 Subject: [PATCH 024/174] Issue 1459: Replace onClick handler in Dropdown component to onMouseDown (#1521) --- components/dropdown/Dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js index d31e7e4d7..075bb0860 100644 --- a/components/dropdown/Dropdown.js +++ b/components/dropdown/Dropdown.js @@ -181,7 +181,7 @@ const factory = (Input) => {
  • {this.props.template ? this.props.template(item) : item[labelKey]}
    • From cd6a130bac655bbd52a0f3872d09dcfce2a898a4 Mon Sep 17 00:00:00 2001 From: Osmel Mora Date: Wed, 2 Aug 2017 12:28:39 -0400 Subject: [PATCH 025/174] Change tab style for ripple to work with Tabs (#1519) * Change tab style for ripple to work Changing element position to relative and overflow hidden. * Changing CSS props order --- components/tabs/theme.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/tabs/theme.css b/components/tabs/theme.css index 72245d2e1..c58864064 100644 --- a/components/tabs/theme.css +++ b/components/tabs/theme.css @@ -103,7 +103,9 @@ .tab { display: flex; flex-direction: column; + overflow: hidden; padding: var(--tab-label-v-padding) var(--tab-label-h-padding); + position: relative; &:not(.active) { display: none; From f93040ee4d06d833a07d1f55d1b011c83390270f Mon Sep 17 00:00:00 2001 From: Jared Tarnasky Date: Wed, 2 Aug 2017 11:29:04 -0500 Subject: [PATCH 026/174] Add variables for the App Bar's font size and weight. (#1518) Add variables for the App Bar's font size and weight and align the defaults to Google's Material Design specs, which say "Across form factors, text that appears in the app bar should use the Title style, Medium 20sp." (see https://material.io/guidelines/style/typography.html). --- components/app_bar/config.css | 2 ++ components/app_bar/theme.css | 9 ++------- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/components/app_bar/config.css b/components/app_bar/config.css index ca3ba1b48..a3851e20b 100644 --- a/components/app_bar/config.css +++ b/components/app_bar/config.css @@ -1,6 +1,8 @@ :root { --appbar-color: var(--color-primary-dark); --appbar-contrast: var(--color-primary-contrast); + --appbar-title-font-size: calc(2 * var(--unit)); + --appbar-title-font-weight: 500; --appbar-title-total-distance: calc(8 * var(--unit)); --appbar-height: calc(6.4 * var(--unit)); --appbar-height-m-portrait: calc(5.6 * var(--unit)); diff --git a/components/app_bar/theme.css b/components/app_bar/theme.css index 8b9282b40..3f1836817 100644 --- a/components/app_bar/theme.css +++ b/components/app_bar/theme.css @@ -54,16 +54,11 @@ .title { flex-grow: 1; - font-size: calc(1.8 * var(--unit)); - font-weight: bold; + font-size: var(--appbar-title-font-size); + font-weight: var(--appbar-title-font-weight); overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - - & > small { - font-size: calc(1.8 * var(--unit)); - font-weight: normal; - } } .leftIcon { From 79e031e1496441d4b263c1d1bf799100f0693098 Mon Sep 17 00:00:00 2001 From: Rasmus Eneman Date: Wed, 2 Aug 2017 18:29:19 +0200 Subject: [PATCH 027/174] Add default export TypeScript type to IconButton (#1577) --- components/button/IconButton.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/button/IconButton.d.ts b/components/button/IconButton.d.ts index 9032e5439..1c42b3702 100644 --- a/components/button/IconButton.d.ts +++ b/components/button/IconButton.d.ts @@ -49,3 +49,5 @@ export interface IconButtonProps extends ButtonBaseProps { } export class IconButton extends React.Component { } + +export default IconButton From 94f649363ae72ca8b1a947af6e3651ceed5c6e8d Mon Sep 17 00:00:00 2001 From: Connor Schlesiger Date: Wed, 2 Aug 2017 12:30:41 -0400 Subject: [PATCH 028/174] Feature/tabs a11y (#1513) * Update tabs for a11y * Use transition for background and set a11y for tab content * Remove unneccessary tabIndex from tab content * Fix lint issues --- components/tabs/Tab.js | 2 +- components/tabs/TabContent.js | 5 +++-- components/tabs/Tabs.js | 4 ++-- components/tabs/config.css | 1 + components/tabs/theme.css | 7 ++++++- 5 files changed, 13 insertions(+), 6 deletions(-) diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js index 4b8487f8a..381539c87 100644 --- a/components/tabs/Tab.js +++ b/components/tabs/Tab.js @@ -65,7 +65,7 @@ const factory = (ripple, FontIcon) => { }, className); return ( -
    +
    {icon && } {label} {children} diff --git a/components/tabs/TabContent.js b/components/tabs/TabContent.js index b9c98beac..c86f6f4c7 100644 --- a/components/tabs/TabContent.js +++ b/components/tabs/TabContent.js @@ -9,7 +9,7 @@ class TabContent extends Component { active: PropTypes.bool, children: PropTypes.node, className: PropTypes.string, - tabIndex: PropTypes.number, + hidden: PropTypes.bool, theme: PropTypes.shape({ active: PropTypes.string, tab: PropTypes.string, @@ -19,6 +19,7 @@ class TabContent extends Component { static defaultProps = { active: false, className: '', + hidden: true, }; render() { @@ -27,7 +28,7 @@ class TabContent extends Component { }, this.props.className); return ( -
    +
    {this.props.children}
    ); diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js index 53341ccd4..603c67998 100644 --- a/components/tabs/Tabs.js +++ b/components/tabs/Tabs.js @@ -198,10 +198,10 @@ const factory = (Tab, TabContent, FontIcon) => { {hasLeftArrow &&
    } - +
    {hasRightArrow &&
    } diff --git a/components/tabs/config.css b/components/tabs/config.css index 957a9c87e..b7902b9d1 100644 --- a/components/tabs/config.css +++ b/components/tabs/config.css @@ -9,6 +9,7 @@ --tab-navigation-border-color: var(--color-divider); --tab-pointer-color: var(--color-primary); --tab-pointer-height: calc(0.2 * var(--unit)); + --tab-focus-color: color(var(--color-primary-contrast) a(10%)); --tab-text: var(--color-black); --tab-text-color: var(--tab-text); --tab-text-inactive-color: color(var(--tab-text) a(70%)); diff --git a/components/tabs/theme.css b/components/tabs/theme.css index c58864064..76acc1fd8 100644 --- a/components/tabs/theme.css +++ b/components/tabs/theme.css @@ -46,9 +46,14 @@ position: relative; text-transform: uppercase; transition-duration: var(--animation-duration); - transition-property: box-shadow, color; + transition-property: background-color, box-shadow, color; transition-timing-function: var(--animation-curve-default); + &:focus { + background-color: var(--tab-focus-color); + outline: none; + } + & > .rippleWrapper { overflow: hidden; } From e15ee8ee056f3c0723d43224765ee0346cd28f76 Mon Sep 17 00:00:00 2001 From: Izak Filmalter Date: Wed, 2 Aug 2017 12:31:46 -0400 Subject: [PATCH 029/174] Fix Mobile Safari issues. (#1282) * Add $input-icon-right-space var to add the correct spacing to the input based on Material Spec. https://material.io/guidelines/components/text-fields.html#text-fields-s ingle-line-text-field * Fix Mobile Safari Issues. Remove added border-radius for inputs from Safari. Fix `Object.entries is not a function` for autocomplete. * Remove new line. * Add callback functions to slider for when slider starts being dragged, and when it stops. --- components/input/theme.css | 1 + docs/webpack.config.development.js | 1 + webpack/webpack.config.dev.js | 1 + 3 files changed, 3 insertions(+) diff --git a/components/input/theme.css b/components/input/theme.css index 512e25e9e..a39cb8741 100644 --- a/components/input/theme.css +++ b/components/input/theme.css @@ -31,6 +31,7 @@ background-color: var(--input-text-background-color); border-bottom: 1px solid var(--input-text-bottom-border-color); border-left: 0; + border-radius: 0; border-right: 0; border-top: 0; color: var(--color-text); diff --git a/docs/webpack.config.development.js b/docs/webpack.config.development.js index 3ed87542c..813fab573 100644 --- a/docs/webpack.config.development.js +++ b/docs/webpack.config.development.js @@ -9,6 +9,7 @@ module.exports = { devtool: 'inline-source-map', entry: [ 'webpack-hot-middleware/client', + 'babel-polyfill', './app/index.js' ], output: { diff --git a/webpack/webpack.config.dev.js b/webpack/webpack.config.dev.js index 8db6d8e33..d252d175d 100644 --- a/webpack/webpack.config.dev.js +++ b/webpack/webpack.config.dev.js @@ -9,6 +9,7 @@ module.exports = { devtool: 'cheap-module-eval-source-map', entry: [ 'webpack-hot-middleware/client', + 'babel-polyfill', './spec/index.js' ], output: { From 13520e31111e89181b3d3e76d70e8424781c79bb Mon Sep 17 00:00:00 2001 From: Tobias Andersen Date: Wed, 2 Aug 2017 18:34:52 +0200 Subject: [PATCH 030/174] Fix bug where dropdowns don't close (#1548) --- components/dropdown/Dropdown.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js index 075bb0860..dce8e6485 100644 --- a/components/dropdown/Dropdown.js +++ b/components/dropdown/Dropdown.js @@ -130,7 +130,6 @@ const factory = (Input) => { const client = event.target.getBoundingClientRect(); const screenHeight = window.innerHeight || document.documentElement.offsetHeight; const up = this.props.auto ? client.top > ((screenHeight / 2) + client.height) : false; - if (this.inputNode) this.inputNode.blur(); this.setState({ active: true, up }); }; @@ -207,6 +206,7 @@ const factory = (Input) => { data-react-toolbox="dropdown" onBlur={this.handleBlur} onFocus={this.handleFocus} + tabIndex="-1" > { onClick={this.handleClick} required={this.props.required} readOnly - ref={(node) => { this.inputNode = node && node.getWrappedInstance(); }} type={template && selected ? 'hidden' : null} theme={theme} themeNamespace="input" From 2eb27c71a837e9406c15946c64edc680c2467d73 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Tue, 8 Aug 2017 18:52:52 +0200 Subject: [PATCH 031/174] Remove max-height from dialog along with hidden overflow --- components/dialog/config.css | 2 +- components/dialog/theme.css | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/components/dialog/config.css b/components/dialog/config.css index e3c1ccb98..01542e589 100644 --- a/components/dialog/config.css +++ b/components/dialog/config.css @@ -5,5 +5,5 @@ --dialog-content-padding: calc(2.4 * var(--unit)); --dialog-navigation-padding: calc(0.8 * var(--unit)); --dialog-translate-y: calc(4 * var(--unit)); - --overflow: hidden; + --overflow: inherit; } diff --git a/components/dialog/theme.css b/components/dialog/theme.css index 294255ce1..083b74feb 100644 --- a/components/dialog/theme.css +++ b/components/dialog/theme.css @@ -22,7 +22,6 @@ box-shadow: var(--zdepth-shadow-5); display: flex; flex-direction: column; - max-height: 96vh; max-width: 96vw; opacity: 0; overflow: var(--overflow); From 4670098d207c888d7c0fddf4929bea23b152ec7a Mon Sep 17 00:00:00 2001 From: Oleg Stepura Date: Wed, 9 Aug 2017 12:27:02 +0200 Subject: [PATCH 032/174] 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 fe33d1e88..7c3dff5a8 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 748c09265..5ab7609c3 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 033/174] 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 985380d6f..30794623d 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 034/174] 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 a39cb8741..ee9c4ee67 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 035/174] 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 d3e40c412..52e67e99a 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 036/174] 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 862ff19eb..cce1de5b3 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 b660bcc2e1536686fb7358737527714eb631328b Mon Sep 17 00:00:00 2001 From: Oleg Stepura Date: Wed, 9 Aug 2017 15:21:17 +0200 Subject: [PATCH 037/174] Make checkbox centered between table edge and next column start --- components/table/theme.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/table/theme.css b/components/table/theme.css index 985380d6f..b23edae40 100644 --- a/components/table/theme.css +++ b/components/table/theme.css @@ -63,6 +63,7 @@ &.checkboxCell { width: calc(1.8 * var(--unit)); + padding-right: 5px; & > * { margin: 0; @@ -82,6 +83,7 @@ &.checkboxCell { width: calc(1.8 * var(--unit)); + padding-right: 5px; & > * { margin: 0 0 3px; From 31fac7b7792af5b4703161c5b1bfd057f8444b5f Mon Sep 17 00:00:00 2001 From: Paul Sastrasinh Date: Fri, 11 Aug 2017 10:54:03 -0400 Subject: [PATCH 038/174] 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 5f7e21f62..cb22eef5e 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 78f8df4f5..78120b343 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 039/174] 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 4d14eeb79..3ed678170 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 0f51c06c3bc7b44799facada84818a6214d08de0 Mon Sep 17 00:00:00 2001 From: adamhenson Date: Sun, 27 Aug 2017 17:17:53 -0400 Subject: [PATCH 040/174] IconMenu: active prop (fixes #1662). --- components/menu/IconMenu.js | 14 ++++++++--- components/menu/__test__/index.spec.js | 34 +++++++++++++++++++++++++- components/menu/readme.md | 1 + 3 files changed, 45 insertions(+), 4 deletions(-) diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js index e82e7fd47..6f8ca0800 100644 --- a/components/menu/IconMenu.js +++ b/components/menu/IconMenu.js @@ -9,6 +9,7 @@ import InjectMenu from './Menu'; const factory = (IconButton, Menu) => { class IconMenu extends Component { static propTypes = { + active: PropTypes.bool, children: PropTypes.node, className: PropTypes.string, icon: PropTypes.oneOfType([ @@ -32,6 +33,7 @@ const factory = (IconButton, Menu) => { }; static defaultProps = { + active: false, className: '', icon: 'more_vert', iconRipple: true, @@ -41,7 +43,13 @@ const factory = (IconButton, Menu) => { }; state = { - active: false, + active: this.props.active, + } + + componentWillReceiveProps(nextProps) { + if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) { + this.setState({ active: nextProps.active }); + } } handleButtonClick = (event) => { @@ -56,8 +64,8 @@ const factory = (IconButton, Menu) => { render() { const { - children, className, icon, iconRipple, inverse, menuRipple, onHide, // eslint-disable-line - onSelect, onShow, position, selectable, selected, theme, ...other + active, children, className, icon, iconRipple, inverse, menuRipple, // eslint-disable-line + onHide, onSelect, onShow, position, selectable, selected, theme, ...other } = this.props; return (
    diff --git a/components/menu/__test__/index.spec.js b/components/menu/__test__/index.spec.js index be98b9437..f11ab1efd 100644 --- a/components/menu/__test__/index.spec.js +++ b/components/menu/__test__/index.spec.js @@ -1,8 +1,40 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, shallow } from 'enzyme'; +import { IconMenu } from '../IconMenu'; import { Menu } from '../Menu'; import { MenuItem } from '../MenuItem'; +describe('IconMenu', () => { + describe('#on mount', () => { + describe('when \'active\' prop is not set', () => { + it('sets \'active\' Menu prop correctly', () => { + const wrapper = shallow(); + expect(wrapper.find('Menu').props().active).toBe(false); + }); + }); + + describe('when \'active\' prop is set to false', () => { + it('sets \'active\' Menu prop correctly', () => { + const wrapper = shallow(); + expect(wrapper.find('Menu').props().active).toBe(false); + }); + }); + + describe('when \'active\' prop is set to true', () => { + it('sets \'active\' Menu prop correctly', () => { + const wrapper = shallow(); + expect(wrapper.find('Menu').props().active).toBe(true); + }); + + it('sets \'active\' Menu prop correctly after IconButton click', () => { + const wrapper = mount(); + wrapper.find('IconButton').simulate('click'); + expect(wrapper.find('Menu').props().active).toBe(false); + }); + }); + }); +}); + describe('MenuItem', () => { describe('#onClick', () => { it('passes to listener the event', () => { diff --git a/components/menu/readme.md b/components/menu/readme.md index 8bf58b993..a897042f1 100644 --- a/components/menu/readme.md +++ b/components/menu/readme.md @@ -61,6 +61,7 @@ As the most usual scenario will be to open the menu from a click in an Icon, we | Name | Type | Default | Description| |:-----|:-----|:-----|:-----| +| `active` | `Boolean` | `false` | If true, the inner `Menu` component will be active. | | `className` | `String` | `''` | Set a class to give custom styles to the icon wrapper.| | `icon` | `String` or `Element` | `more_vert` | Icon font key string or Element to display the opener icon. | | `iconRipple` | `Boolean` | `true` | If true, the icon will show a ripple when is clicked. | From 74bd2dc77bd0a09245694be15e479ae6722f11af Mon Sep 17 00:00:00 2001 From: adamhenson Date: Sun, 27 Aug 2017 19:10:01 -0400 Subject: [PATCH 041/174] IconMenu: active prop (#1662). --- components/menu/IconMenu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js index 6f8ca0800..2b3bad2d6 100644 --- a/components/menu/IconMenu.js +++ b/components/menu/IconMenu.js @@ -64,8 +64,8 @@ const factory = (IconButton, Menu) => { render() { const { - active, children, className, icon, iconRipple, inverse, menuRipple, // eslint-disable-line - onHide, onSelect, onShow, position, selectable, selected, theme, ...other + active, children, className, icon, iconRipple, inverse, menuRipple, onHide, // eslint-disable-line + onSelect, onShow, position, selectable, selected, theme, ...other } = this.props; return (
    From bf790d7b867076798297a031c65a0bc6412fc870 Mon Sep 17 00:00:00 2001 From: Adam Henson Date: Sun, 27 Aug 2017 23:47:09 -0400 Subject: [PATCH 042/174] IconMenu: active prop (#1662). more tests. --- components/menu/IconMenu.js | 2 +- components/menu/__test__/index.spec.js | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js index 2b3bad2d6..d00fd3f59 100644 --- a/components/menu/IconMenu.js +++ b/components/menu/IconMenu.js @@ -47,7 +47,7 @@ const factory = (IconButton, Menu) => { } componentWillReceiveProps(nextProps) { - if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) { + if (this.state.active !== nextProps.active) { this.setState({ active: nextProps.active }); } } diff --git a/components/menu/__test__/index.spec.js b/components/menu/__test__/index.spec.js index f11ab1efd..59624fcf7 100644 --- a/components/menu/__test__/index.spec.js +++ b/components/menu/__test__/index.spec.js @@ -18,6 +18,19 @@ describe('IconMenu', () => { const wrapper = shallow(); expect(wrapper.find('Menu').props().active).toBe(false); }); + + it('sets \'active\' Menu prop correctly after IconButton click', () => { + const wrapper = mount(); + wrapper.find('IconButton').simulate('click'); + expect(wrapper.find('Menu').props().active).toBe(true); + }); + + it('sets \'active\' Menu prop correctly when prop is set after IconButton click', () => { + const wrapper = mount(); + wrapper.find('IconButton').simulate('click'); + wrapper.setProps({ active: false }); + expect(wrapper.find('Menu').props().active).toBe(false); + }); }); describe('when \'active\' prop is set to true', () => { @@ -31,6 +44,13 @@ describe('IconMenu', () => { wrapper.find('IconButton').simulate('click'); expect(wrapper.find('Menu').props().active).toBe(false); }); + + it('sets \'active\' Menu prop correctly when prop is set after IconButton click', () => { + const wrapper = mount(); + wrapper.find('IconButton').simulate('click'); + wrapper.setProps({ active: true }); + expect(wrapper.find('Menu').props().active).toBe(true); + }); }); }); }); From 0103d955b051f30ee48f56b0ab60371d23d4ba8c Mon Sep 17 00:00:00 2001 From: Adam Henson Date: Mon, 28 Aug 2017 00:00:21 -0400 Subject: [PATCH 043/174] IconMenu: active prop (#1662). --- components/menu/IconMenu.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/menu/IconMenu.d.ts b/components/menu/IconMenu.d.ts index 931bcfe02..f7140965d 100644 --- a/components/menu/IconMenu.d.ts +++ b/components/menu/IconMenu.d.ts @@ -13,6 +13,11 @@ export interface IconMenuTheme { } export interface IconMenuProps extends ReactToolbox.Props { + /** + * If true, the inner Menu component will be active. + * @default false + */ + active?: boolean; /** * Children to pass through the component. */ From 8b7fc07f82ca25e7df3bbebd7b9108a19aadfce2 Mon Sep 17 00:00:00 2001 From: Adam Date: Fri, 1 Sep 2017 11:43:03 -0400 Subject: [PATCH 044/174] 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 f1ca7273d..1a9a5357d 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 045/174] 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 5aba682b1..6be2ae859 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 a2133b959..73da33078 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 22eb2a691..6fcba2f75 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 6bddadc53..dc12e0fcf 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 265f05766..325e85057 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 c7cf99b23..59c1e0274 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 3b4cfae1c..ad93abab6 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' +} + +declare type tooltipHOC

    = (componentClass: React.ComponentClass

    ) => TooltippedComponentClass

    + +export function tooltipFactory

    (options?: TooltipOptions): tooltipHOC

    ; -export default Tooltip; +export default function Tooltip

    (component: React.ReactType): TooltippedComponentClass

    ; diff --git a/package.json b/package.json index 4081c22dc..4d174de07 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 000000000..14df0dc64 --- /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 000000000..edcfc42e2 --- /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 000000000..87dfab0e3 --- /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 000000000..9a7c51ac7 --- /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 000000000..a119f7aac --- /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} + +