+#
-[](https://www.npmjs.com/package/react-toolbox) [](https://travis-ci.org/react-toolbox/react-toolbox) [](https://www.npmjs.org/package/react-toolbox) [](https://discord.gg/0ZcbPKXt5bW9FLzM) [](https://paypal.me/javivelasco) [](#backers)
+[](https://www.npmjs.com/package/react-toolbox) [](https://travis-ci.org/react-toolbox/react-toolbox) [](https://www.npmjs.org/package/react-toolbox) [](https://paypal.me/javivelasco) [](#backers)
[](#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!
@@ -17,18 +17,23 @@ $ npm install --save react-toolbox
## Prerequisites
-React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written using PostCSS/[cssnext](http://cssnext.io/) features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules.
+React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written using [PostCSS](https://github.com/postcss/postcss) & [postcss-preset-env](https://preset-env.cssdb.org/) features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules.
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 PostCSS 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 components easily themeable.
-### Setting up PostCSS+cssnext in Webpack:
+### Usage in Create React App Projects
+
+[Create React App](https://github.com/facebookincubator/create-react-app) does not allow to change the default configuration, so you need an additional build step to configure `react-toolbox` in its project.
+
+Follow [these instructions](https://github.com/react-toolbox/react-toolbox-themr) to add `react-toolbox` to a project created with Create React App.
+
+### Usage in Webpack Projects (*Not* Create React App)
```bash
npm install postcss-loader --save-dev
-npm install postcss --save
-npm install postcss-cssnext --save
+npm install postcss postcss-preset-env postcss-calc --save
```
Configure webpack 1.x loader for .css files to use postcss:
@@ -43,15 +48,46 @@ Configure webpack 1.x loader for .css files to use postcss:
```
Declare plugins to be used by postcss (as part of webpack's config object):
```js
+ // webpack.config.js
postcss: () => {
return [
/* eslint-disable global-require */
- require('postcss-cssnext'),
+ require('postcss-preset-env')({
+ stage: 0, // required to get all features that were from cssnext without enabling them one by one
+ features: {
+ 'custom-properties': {
+ preserve: false, // required to output values instead of variables
+ },
+ 'color-mod-function': true, // required to use color-mod()
+ }
+ }),
+ require('postcss-calc'), // required as postcss-preset-env doesn't have a reduce calc() funtion that cssnext did
/* eslint-enable global-require */
];
},
```
+Configure webpack 2.x or 3.x loader for .css files to use postcss:
+```js
+ // webpack.config.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:
@@ -67,6 +103,13 @@ ReactDOM.render(
);
```
+>**Note:** if you use it with Create React App, you need to make this additional change:
+>
+>```diff
+>- import {Button} from 'react-toolbox/lib/button';
+>+ import Button from 'react-toolbox/lib/button/Button';
+>```
+
Take into account that any required style will be included in the final CSS so your final CSS would include `Button` styles in this case. It's more efficient to import components this way (`from 'react-toolbox/lib/button'`) (or with raw imports) because if you require from the project root (i.e. `from 'react-toolbox'`), every stylesheet of React Toolbox will be included, even if you don't use it.
## Importing components
@@ -82,7 +125,7 @@ First let's take a look on how the components are structured in the project. The
|---- theme.css
```
-As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme PostCSS/cssnext stylesheet and a config.css with configuration variables (CSS Custom Properties). Depending on whether you want the styles to be directly bundled or not, you can import components in **two** different ways.
+As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme PostCSS/preset-env stylesheet and a config.css with configuration variables (CSS Custom Properties). Depending on whether you want the styles to be directly bundled or not, you can import components in **two** different ways.
### Bundled component
@@ -179,14 +222,13 @@ export default App;
## Theming (configuration variables)
-You can apply theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written using PostCSS with cssnext features and use CSS Custom Properties from the **config** files we saw earlier. In addition, there are some global CSS Properties imported by each component: [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). You can override both the global and component-specific **variables** to get the results you want using one of the methods below.
+You can apply theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written using PostCSS with postcss-preset-env features and use CSS Custom Properties from the **config** files we saw earlier. In addition, there are some global CSS Properties imported by each component: [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/colors.module.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.module.css). You can override both the global and component-specific **variables** to get the results you want using one of the methods below.
### Settings configuration variables in JavaScript
-You can override both the global and component-specific CSS Custom Properties at build-time by supplying an object with these variable names and your desired values to the PostCSS customProperties plugin. i.e. if using postcss-next in webpack:
+You can override both the global and component-specific CSS Custom Properties at build-time by supplying an object with these variable names and your desired values to the PostCSS `custom-properties` plugin. i.e. if using [postcss-preset-env](https://github.com/csstools/postcss-preset-env) in webpack:
```js
-
// This can also be stored in a separate file:
const reactToolboxVariables = {
'color-text': '#444548',
@@ -195,31 +237,34 @@ const reactToolboxVariables = {
'button-height': '30px',
};
-// webpack's config object:
+// webpack's config object: (webpack.config.js)
const config = {
...
postcss: () => {
return [
/* eslint-disable global-require */
- require('postcss-cssnext')({
+ require('postcss-preset-env')({
+ stage: 0, // required to get all features that were from cssnext without enabling them one by one
features: {
- customProperties: {
- variables: reactToolboxVariables,
+ 'custom-properties': {
+ preserve: false, // required to output values instead of variables
+ importFrom: reactToolboxVariables, // see postcss-preset-env for config options
},
- },
+ 'color-mod-function': true, // required to use color-mod()
+ }
}),
+ require('postcss-calc'), // required as postcss-preset-env doesn't have a reduce calc() funtion that cssnext did
/* optional - see next section */
require('postcss-modules-values'),
/* eslint-enable global-require */
];
},
}
-
```
### Settings configuration variables using CSS Module Values
-Instead of using a JavaScript object for variables, you can use [CSS Module Values](https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md) (`npm install postcss-modules-values --save`) and the [modules-values-extract](https://github.com/alexhisen/modules-values-extract) utility to declare these variables in component-specific theme .css files, where you would typically store additional style overrides.
+Instead of using a JavaScript object for variables, you can use [CSS Module Values](https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md) (`npm install postcss-modules-values --save`) and the [modules-values-extract](https://github.com/alexhisen/modules-values-extract) utility to declare these variables in component-specific theme `.css` files, where you would typically store additional style overrides.
CSS Module Values also offer the advantage that importing a css file with @value declarations makes these values properties of the imported style object, i.e.:
@@ -235,7 +280,7 @@ import styleVariables from './css/variables.css';
styleVariables.buttonPrimaryBackgroundColor
```
-In [this demo project](https://github.com/alexhisen/mobx-forms-demo), modules-values-extract utility is used to extract all @values with dashes in their name from all css files in the /css folder and to feed them to customProperties in [webpack](https://github.com/alexhisen/mobx-forms-demo/blob/master/webpack.config.js). In the demo project, variables that are not specific to a particular component are in [variables.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/variables.css) and button-specific variables are in [button.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/button.css). Note that button.css also imports certain values from variables.css just to demonstrate this capability \(the import can also be used in a @value declaration\) and it uses CSS overrides instead of color variables that exist in the React-Toolbox Button component to show an alternative method if the variables are not sufficient.
+In [this demo project](https://github.com/alexhisen/mobx-forms-demo), modules-values-extract utility is used to extract all @values with dashes in their name from all css files in the `/css` folder and to feed them to customProperties in [webpack](https://github.com/alexhisen/mobx-forms-demo/blob/master/webpack.config.js). In the demo project, variables that are not specific to a particular component are in [variables.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/variables.css) and button-specific variables are in [button.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/button.css). Note that button.css also imports certain values from variables.css just to demonstrate this capability \(the import can also be used in a @value declaration\) and it uses CSS overrides instead of color variables that exist in the React-Toolbox Button component to show an alternative method if the variables are not sufficient.
> **IMPORTANT: Changes to the module values do not take effect immediately with Webpack Hot-Module-Reload - webpack / webpack-dev-server must be restarted!**
@@ -251,9 +296,9 @@ The only requirement for SSR is to be able to require ES6 and CSS Modules in the
## Examples
-For now we have a [1.x repository example](https://github.com/react-toolbox/react-toolbox-example) demonstrating configuration and some basic customization. It hasn't yet been updated for 2.0! 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:
+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:
-2.x demo project - https://github.com/alexhisen/mobx-forms-demo
+Another 2.x demo project is https://github.com/alexhisen/mobx-forms-demo
## TypeScript
diff --git a/ROADMAP.md b/ROADMAP.md
index 8e9821217..2b1ff11af 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -1,4 +1,4 @@
-This document defines a manifesto and the main Roadmap 🚵 ideas for [React Toolbox](www.react-toolbox.com). It's not a fixed document and of course it's open to change. You can leave your feedback in [this gist](https://gist.github.com/javivelasco/259d2087c2a8c3e8f2c5c720d1fd3f2e) or you can also do it [through an issue](https://github.com/react-toolbox/react-toolbox/issues/new).
+This document defines a manifesto and the main Roadmap 🚵 ideas for [React Toolbox](www.react-toolbox.io). It's not a fixed document and of course it's open to change. You can leave your feedback in [this gist](https://gist.github.com/javivelasco/259d2087c2a8c3e8f2c5c720d1fd3f2e) or you can also do it [through an issue](https://github.com/react-toolbox/react-toolbox/issues/new).
## The Manifesto
@@ -68,7 +68,7 @@ There is no fixed date, sorry. Being an open source project, it depends on contr
### Is there any migration guide to 2.0?
-Not really. At the end we are just providing components and there are no big changes on them apart from huge refactors of some specific components that will be coming. If should be enough by checking changelogs and new documentation. In any case if you feel like a migration guide is needed, feel free to leave for feedback.
+There is a [migration guide](https://github.com/react-toolbox/react-toolbox/wiki/Migrating-from-version-1.3-to-2.0) in the wiki.
### When will be released the new playground?
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 000000000..0b2856212
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,35 @@
+module.exports = function (api) {
+ const env = api.env();
+ api.cache.using(() => env === 'development');
+
+ return {
+ presets: ['@babel/preset-env', '@babel/preset-react'],
+ plugins: [
+ '@babel/plugin-transform-runtime',
+ // Stage 0
+ '@babel/plugin-proposal-function-bind',
+
+ // Stage 1
+ '@babel/plugin-proposal-export-default-from',
+ '@babel/plugin-proposal-logical-assignment-operators',
+ ['@babel/plugin-proposal-optional-chaining', { loose: false }],
+ ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
+ ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
+ '@babel/plugin-proposal-do-expressions',
+
+ // Stage 2
+ ['@babel/plugin-proposal-decorators', { legacy: true }],
+ '@babel/plugin-proposal-function-sent',
+ '@babel/plugin-proposal-export-namespace-from',
+ '@babel/plugin-proposal-numeric-separator',
+ '@babel/plugin-proposal-throw-expressions',
+
+ // Stage 3
+ '@babel/plugin-syntax-dynamic-import',
+ '@babel/plugin-syntax-import-meta',
+ ['@babel/plugin-proposal-class-properties', { loose: false }],
+ '@babel/plugin-proposal-json-strings',
+ 'react-hot-loader/babel',
+ ],
+ };
+};
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
diff --git a/components/__mocks__/react-css-themr.js b/components/__mocks__/react-css-themr.js
index 0db02aaf4..749303b52 100644
--- a/components/__mocks__/react-css-themr.js
+++ b/components/__mocks__/react-css-themr.js
@@ -1,6 +1,6 @@
export function themr() {
return (Component) => {
- Component.defaultProps = Component.defaultProps || {}; // eslint-disable-line no-param-reassign
+ Component.defaultProps = Component.defaultProps || {}; // eslint-disable-line no-param-reassign
Component.defaultProps.theme = {}; // eslint-disable-line no-param-reassign
return Component;
};
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;
diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index d4421b87d..93627fc07 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -25,9 +25,9 @@ const factory = (IconButton) => {
scrollHide: PropTypes.bool,
theme: PropTypes.shape({
appBar: PropTypes.string,
- inner: PropTypes.string,
fixed: PropTypes.string,
flat: PropTypes.string,
+ inner: PropTypes.string,
leftIcon: PropTypes.string,
rightIcon: PropTypes.string,
scrollHide: PropTypes.string,
@@ -46,7 +46,7 @@ const factory = (IconButton) => {
scrollHide: false,
};
- state = { hidden: false, height: 0 };
+ state = { hidden: false, height: 0 }; // eslint-disable-line react/no-unused-state
componentDidMount() {
if (this.props.scrollHide) {
@@ -70,26 +70,27 @@ const factory = (IconButton) => {
}
}
- initializeScroll() {
+ handleScroll = () => {
+ const scrollDiff = this.curScroll - window.scrollY;
+ this.setState(state => ({
+ hidden: scrollDiff < 0
+ && window.scrollY !== undefined
+ && window.scrollY > state.height,
+ }));
+ this.curScroll = window.scrollY;
+ };
+
+ initializeScroll = () => {
window.addEventListener('scroll', this.handleScroll);
const { height } = this.rootNode.getBoundingClientRect();
this.curScroll = window.scrollY;
- this.setState({ height });
+ this.setState({ height }); // eslint-disable-line react/no-unused-state
}
endScroll() {
window.removeEventListener('scroll', this.handleScroll);
}
- handleScroll = () => {
- const scrollDiff = this.curScroll - window.scrollY;
- const hidden = scrollDiff < 0
- && window.scrollY !== undefined
- && window.scrollY > this.state.height;
- this.setState({ hidden });
- this.curScroll = window.scrollY;
- };
-
render() {
const {
children,
diff --git a/components/app_bar/config.css b/components/app_bar/config.module.css
similarity index 84%
rename from components/app_bar/config.css
rename to components/app_bar/config.module.css
index ca3ba1b48..a3851e20b 100644
--- a/components/app_bar/config.css
+++ b/components/app_bar/config.module.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/index.js b/components/app_bar/index.js
index ac09b55cc..2fd50cbbd 100644
--- a/components/app_bar/index.js
+++ b/components/app_bar/index.js
@@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
import { APP_BAR } from '../identifiers';
import { appBarFactory } from './AppBar';
import { IconButton } from '../button';
-import theme from './theme.css';
+import theme from './theme.module.css';
const AppBar = appBarFactory(IconButton);
const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
diff --git a/components/app_bar/theme.css b/components/app_bar/theme.module.css
similarity index 82%
rename from components/app_bar/theme.css
rename to components/app_bar/theme.module.css
index 8b9282b40..fe8986f4e 100644
--- a/components/app_bar/theme.css
+++ b/components/app_bar/theme.module.css
@@ -1,7 +1,7 @@
-@import 'http://github.com/colors.css';
-@import 'http://github.com/media.css';
-@import 'http://github.com/variables.css';
-@import 'http://github.com/config.css';
+@import 'http://github.com/colors.module.css';
+@import 'http://github.com/media.module.css';
+@import 'http://github.com/variables.module.css';
+@import 'http://github.com/config.module.css';
.appBar {
background: var(--appbar-color);
@@ -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 {
diff --git a/components/autocomplete/Autocomplete.d.ts b/components/autocomplete/Autocomplete.d.ts
index b7d98d82e..9eddafa1c 100644
--- a/components/autocomplete/Autocomplete.d.ts
+++ b/components/autocomplete/Autocomplete.d.ts
@@ -88,6 +88,14 @@ export interface AutocompleteProps extends InputProps {
* Callback function that is fired when component is focused.
*/
onFocus?: Function;
+ /**
+ * Callback function that is fired when a key is pressed down.
+ */
+ onKeyDown?: Function;
+ /**
+ * Callback function that is fired when a key is lifted up.
+ */
+ onKeyUp?: Function;
/**
* Callback function that is fired when the components's query value changes.
*/
diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 099a03378..ab0ad3096 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
+import { isValuePresent } from '../utils/utils';
import { AUTOCOMPLETE } from '../identifiers.js';
import InjectChip from '../chip/Chip.js';
import InjectInput from '../input/Input.js';
@@ -35,6 +36,8 @@ const factory = (Chip, Input) => {
onBlur: PropTypes.func,
onChange: PropTypes.func,
onFocus: PropTypes.func,
+ onKeyDown: PropTypes.func,
+ onKeyUp: PropTypes.func,
onQueryChange: PropTypes.func,
query: PropTypes.string,
selectedPosition: PropTypes.oneOf(['above', 'below', 'none']),
@@ -132,7 +135,7 @@ const factory = (Chip, Input) => {
};
handleQueryFocus = (event) => {
- this.suggestionsNode.scrollTop = 0;
+ event.target.scrollTop = 0;
this.setState({ active: '', focus: true });
if (this.props.onFocus) this.props.onFocus(event);
};
@@ -148,6 +151,8 @@ const factory = (Chip, Input) => {
if (event.which === 13) {
this.selectOrCreateActiveItem(event);
}
+
+ if(this.props.onKeyDown) this.props.onKeyDown(event);
};
handleQueryKeyUp = (event) => {
@@ -160,6 +165,8 @@ const factory = (Chip, Input) => {
if (index >= suggestionsKeys.length) index = 0;
this.setState({ active: suggestionsKeys[index] });
}
+
+ if(this.props.onKeyUp) this.props.onKeyUp(event);
};
handleSuggestionHover = (event) => {
@@ -178,7 +185,7 @@ const factory = (Chip, Input) => {
query(key) {
let query_value = '';
- if (!this.props.multiple && key) {
+ if (!this.props.multiple && isValuePresent(key)) {
const source_value = this.source().get(`${key}`);
query_value = source_value || key;
}
@@ -375,7 +382,6 @@ const factory = (Chip, Input) => {
return (
{children}
: children}extends TooltipProps { +declare interface TooltippedComponentClass
extends TooltipProps {
new (props?: P, context?: any): TooltipComponent (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/components/tooltip/index.js b/components/tooltip/index.js
index 6cedcaffc..48421c38f 100644
--- a/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -1,5 +1,5 @@
import tooltipFactory from './Tooltip';
-import theme from './theme.css';
+import theme from './theme.module.css';
const themedTooltipFactory = options => tooltipFactory({ ...options, theme });
export default tooltipFactory({ theme });
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index 98c4e3a36..59ab4cafc 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -5,8 +5,9 @@ A Tooltip is useful to show information on hover in any kind of component. We ha
```jsx
import Button from 'react-toolbox/lib/button';
-import Tooltip from 'react-toolbox/lib/tooltip';
+import Input from 'react-toolbox/lib/input';
import Link from 'react-toolbox/lib/link';
+import Tooltip from 'react-toolbox/lib/tooltip';
const TooltipButton = Tooltip(Button);
const TooltipInput = Tooltip(Input);
@@ -31,11 +32,11 @@ In any component you decorate with the Tooltip you'd get some additional props:
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `className` | `String` | `''` | Sets a class to give customized styles to the tooltip.|
-| `onClick` | `Function` | | Callback to be invoked when Component is clicked.|
-| `onMouseEnter` | `Function` | | Callback called when the mouse enters the Component.|
-| `onMouseLeave` | `Function` | | Callback called when the mouse leaves the Component.|
-| `tooltip` | `String` | | The text string to use for the tooltip.|
-| `tooltipDelay` | `Number` | | Amount of time in miliseconds spent before the tooltip is visible.|
+| `onClick` | `Function` | | Callback to be invoked when Component is clicked.|
+| `onMouseEnter` | `Function` | | Callback called when the mouse enters the Component.|
+| `onMouseLeave` | `Function` | | Callback called when the mouse leaves the Component.|
+| `tooltip` | `String` | | The text string to use for the tooltip.|
+| `tooltipDelay` | `Number` | | Amount of time in miliseconds spent before the tooltip is visible.|
| `tooltipHideOnClick` | `Boolean` | `true` | If true, the Tooltip hides after a click in the host component.|
| `tooltipPosition` | `String` | `vertical` | Determines the position of the tooltip. It can be automatic with `vertical` and `horizontal` values or forced with `bottom`, `top`, `left` or `right`.|
| `tooltipShowOnClick` | `Boolean` | `false` | Determines the tooltip should be toggled when clicked. This is useful for mobile where there is no mouse enter.|
diff --git a/components/tooltip/theme.css b/components/tooltip/theme.module.css
similarity index 93%
rename from components/tooltip/theme.css
rename to components/tooltip/theme.module.css
index 57ae37d19..b16f66d17 100644
--- a/components/tooltip/theme.css
+++ b/components/tooltip/theme.module.css
@@ -1,6 +1,6 @@
-@import 'http://github.com/colors.css';
-@import 'http://github.com/variables.css';
-@import 'http://github.com/config.css';
+@import 'http://github.com/colors.module.css';
+@import 'http://github.com/variables.module.css';
+@import 'http://github.com/config.module.css';
.tooltip {
display: block;
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;
}
diff --git a/components/utils/prefixer.js b/components/utils/prefixer.js
index ef4486d6c..8c121235d 100644
--- a/components/utils/prefixer.js
+++ b/components/utils/prefixer.js
@@ -29,7 +29,7 @@ function addPrefixesTo(style, property, value) {
function prefixer(style, defaultValue = {}) {
const _style = defaultValue;
- for (const property in style) { // eslint-disable-line no-restricted-syntax
+ for (const property in style) { // eslint-disable-line no-restricted-syntax
if ({}.hasOwnProperty.call(style, property)) {
_style[property] = style[property];
if (properties[property]) {
diff --git a/components/utils/testing.js b/components/utils/testing.js
index baa2f8a00..87f61232b 100644
--- a/components/utils/testing.js
+++ b/components/utils/testing.js
@@ -1,5 +1,5 @@
import React from 'react';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
export default {
renderComponent(Component, props = {}, state = {}) {
@@ -12,8 +12,7 @@ export default {
const shallowRenderer = TestUtils.createRenderer();
shallowRenderer.render(React.createElement(component, props, children.length > 1
? children
- : children[0],
- ));
+ : children[0]));
return shallowRenderer.getRenderOutput();
},
};
diff --git a/components/utils/utils.js b/components/utils/utils.js
index 38b05dd71..450a7f8e4 100644
--- a/components/utils/utils.js
+++ b/components/utils/utils.js
@@ -30,7 +30,7 @@ export const range = (start = 0, stop = null, step = 1) => {
};
export const round = (number, decimals) => {
- if (!isNaN(parseFloat(number)) && isFinite(number)) {
+ if (!Number.isNaN(parseFloat(number)) && Number.isFinite(number)) {
const decimalPower = 10 ** decimals;
return Math.round(parseFloat(number) * decimalPower) / decimalPower;
}
@@ -42,8 +42,7 @@ export const getViewport = () => ({
width: window.innerWidth || document.documentElement.offsetWidth,
});
-export const cloneObject = object =>
- JSON.parse(JSON.stringify(object));
+export const cloneObject = object => JSON.parse(JSON.stringify(object));
export const inputTypeForPrototype = (prototype) => {
if (prototype === Date) return 'date';
@@ -74,3 +73,10 @@ export const getAnimationModule = (animation, theme) => compose(
transformKeys(removeNamespace(animation)),
pickBy((v, k) => k.startsWith(animation)),
)(theme);
+
+export const isValuePresent = value => (
+ value !== null
+ && value !== undefined
+ && value !== ''
+ && !(typeof value === 'number' && Number.isNaN(value))
+);
diff --git a/components/variables.css b/components/variables.module.css
similarity index 100%
rename from components/variables.css
rename to components/variables.module.css
diff --git a/docs/.babelrc b/docs/.babelrc
index 4ef551af4..12d96ef45 100644
--- a/docs/.babelrc
+++ b/docs/.babelrc
@@ -1,18 +1,35 @@
{
- "presets": ["es2015", "stage-0", "react"],
+ "presets": [
+ "env",
+ "stage-0",
+ "react"
+ ],
"env": {
"development": {
"plugins": [
- ["react-transform", {
- "transforms": [{
- "transform": "react-transform-hmr",
- "imports": ["react"],
- "locals": ["module"]
- }, {
- "transform": "react-transform-catch-errors",
- "imports": ["react", "redbox-react"]
- }]
- }]
+ [
+ "react-transform",
+ {
+ "transforms": [
+ {
+ "transform": "react-transform-hmr",
+ "imports": [
+ "react"
+ ],
+ "locals": [
+ "module"
+ ]
+ },
+ {
+ "transform": "react-transform-catch-errors",
+ "imports": [
+ "react",
+ "redbox-react"
+ ]
+ }
+ ]
+ }
+ ]
]
}
}
diff --git a/docs/app/components/appbar/style.css b/docs/app/components/appbar/style.css
deleted file mode 100644
index 14636cb4c..000000000
--- a/docs/app/components/appbar/style.css
+++ /dev/null
@@ -1,63 +0,0 @@
-@import 'http://github.com/colors.css';
-@import 'http://github.com/variables.css';
-
-:root {
- --appbar-height: calc(6.4 * var(--unit));
- --appbar-logo-size: calc(3.6 * var(--unit));
- --appbar-shadow: 0 1px rgba(255, 255, 255, 0.65);
- --appbar-navigation-offset: calc(6.5 * var(--unit));
-}
-
-.appbar {
- align-items: flex-start;
- box-shadow: var(--appbar-shadow);
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- min-height: var(--appbar-height);
- z-index: var(--z-index-higher);
-}
-
-.logo {
- display: block;
- fill: var(--color-primary-contrast);
- height: var(--appbar-logo-size);
- margin-top: calc((var(--appbar-height) - var(--appbar-logo-size)) / 2);
- width: var(--appbar-logo-size);
-}
-
-.navigation {
- flex-grow: 1;
- text-align: right;
-
- & > ul {
- list-style: none;
-
- & > li {
- display: inline-block;
-
- & > a {
- color: var(--color-primary-contrast);
- display: inline-block;
- font-size: 1.4rem;
- font-weight: 500;
- letter-spacing: 0;
- line-height: var(--appbar-height);
- margin-right: var(--unit);
- padding: 0 calc(1.5 * var(--unit));
- position: relative;
-
- &.active::after {
- background-color: var(--color-accent);
- bottom: 0;
- content: '';
- display: block;
- height: calc(0.3 * var(--unit));
- left: 0;
- position: absolute;
- width: 100%;
- }
- }
- }
- }
-}
diff --git a/docs/app/components/editor/one-dark.css b/docs/app/components/editor/one-dark.css
deleted file mode 100644
index b2c9802aa..000000000
--- a/docs/app/components/editor/one-dark.css
+++ /dev/null
@@ -1,114 +0,0 @@
-:global .cm-s-one-dark {
- &.CodeMirror {
- background: #282c34;
- color: #abb2bf;
- }
-
- & div.CodeMirror-selected {
- background: #3e4451;
- }
-
- & .CodeMirror-line::selection,
- & .CodeMirror-line > span::selection,
- & .CodeMirror-line > span > span::selection {
- background: rgba(73, 72, 62, 0.99);
- }
-
- & .CodeMirror-line::-moz-selection,
- & .CodeMirror-line > span::-moz-selection,
- & .CodeMirror-line > span > span::-moz-selection {
- background: rgba(73, 72, 62, 0.99);
- }
-
- & .CodeMirror-gutters {
- background: #282c34;
- border-right: 1px solid #282c34;
- }
-
- & .CodeMirror-guttermarker {
- color: white;
- }
-
- & .CodeMirror-guttermarker-subtle {
- color: #d0d0d0;
- }
-
- & .CodeMirror-linenumber {
- color: #4b5363;
- }
-
- & .CodeMirror-cursor {
- border-left: 1px solid #528bff;
- }
-
- & span.cm-comment {
- color: #667689;
- }
-
- & span.cm-atom {
- color: #64b6c3;
- }
-
- & span.cm-number {
- color: #d19a66;
- }
-
- & span.cm-property,
- & span.cm-attribute {
- color: #abb2bf;
- }
-
- & span.cm-keyword {
- color: #d86c74;
- }
-
- & span.cm-string {
- color: #98c379;
- }
-
- & span.cm-variable {
- color: #abb2bf;
- }
-
- & span.cm-variable-2 {
- color: #c678dd;
- }
-
- & span.cm-variable-3 {
- color: #64b6c3;
- }
-
- & span.cm-def {
- color: #6caff2;
- }
-
- & span.cm-bracket {
- color: #abb2bf;
- }
-
- & span.cm-tag {
- color: #d86c74;
- }
-
- & span.cm-header {
- color: #abb2bf;
- }
-
- & span.cm-link {
- color: #98c379;
- }
-
- & span.cm-error {
- background: #f92672;
- color: red;
- }
-
- & .CodeMirror-activeline-background {
- background: #2c323b;
- }
-
- & .CodeMirror-matchingbracket {
- color: #abb2bf !important;
- text-decoration: underline;
- }
-}
diff --git a/docs/app/components/editor/style.css b/docs/app/components/editor/style.css
deleted file mode 100644
index eef4dfe1f..000000000
--- a/docs/app/components/editor/style.css
+++ /dev/null
@@ -1,33 +0,0 @@
-@import 'http://github.com/variables.css';
-
-:root {
- --editor-height: 28 * var(--unit);
- --editor-padding: var(--unit);
-}
-
-:global {
- & div.CodeMirror {
- flex-grow: 1;
- height: var(--editor-height);
- }
-
- & .CodeMirror-lines {
- padding: var(--editor-padding) 0;
- }
-
- & pre.CodeMirror-line {
- padding: 0 var(--editor-padding);
- }
-
- & div.CodeMirror pre,
- & div.CodeMirror-linenumber,
- & code {
- font-family: source-code-pro, Menlo, Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
- font-size: 13px;
- line-height: 1.4;
- }
-}
-
-.editor {
- position: relative;
-}
diff --git a/docs/app/components/layout/home/style.css b/docs/app/components/layout/home/style.css
deleted file mode 100644
index 60a292f53..000000000
--- a/docs/app/components/layout/home/style.css
+++ /dev/null
@@ -1,220 +0,0 @@
-@import 'http://github.com/colors.css';
-@import 'http://github.com/variables.css';
-
-:root {
- --hero-gradient-dark: var(--color-primary-dark);
- --hero-gradient-light: var(--color-primary-light);
- --hero-text-color: var(--color-primary-contrast);
- --hero-max-width: calc(62 * var(--unit));
- --hero-text-secondary-opacity: 0.75;
- --hero-item-spacing: calc(5 * var(--unit));
- --hero-logo-size: calc(12 * var(--unit));
- --hero-logo-opacity: 0.85;
- --github-buttons-height: calc(4 * var(--unit));
- --twitter-color: #55acee;
- --content-offset: calc(4.8 * var(--unit));
- --content-width: 740px;
- --color-content: #fafafa;
-}
-
-.header {
- background: linear-gradient(45deg, var(--hero-gradient-dark) 0%, var(--hero-gradient-light) 100%);
- background-position: top right;
- background-size: 120%;
- color: var(--hero-text-color);
- padding: 0 calc((100% - var(--hero-max-width)) / 2);
- text-align: center;
-
- & .logo {
- fill: var(--hero-text-color);
- height: var(--hero-logo-size);
- margin-top: calc(var(--hero-item-spacing) + var(--github-buttons-height));
- opacity: var(--hero-logo-opacity);
- width: var(--hero-logo-size);
- }
-
- & .title {
- font-size: calc(5.6 * var(--unit));
- font-weight: 400;
- letter-spacing: -0.02em;
- line-height: 1.35;
- margin-top: var(--hero-item-spacing);
- }
-
- & .subtitle {
- font-size: calc(2.4 * var(--unit));
- font-weight: 400;
- line-height: 1.2;
- margin-top: var(--unit);
- opacity: var(--hero-text-secondary-opacity);
- }
-
- & .github {
- left: calc(2 * var(--unit));
- position: fixed;
- text-align: center;
- top: calc(2 * var(--unit));
- z-index: var(--z-index-higher);
-
- & iframe {
- display: inline-block;
- height: calc(2 * var(--unit));
- vertical-align: top;
- width: calc(10 * var(--unit));
- }
- }
-
- & .navigation > ul {
- list-style: none;
- margin-top: var(--hero-item-spacing);
-
- & li {
- display: inline-block;
- position: relative;
-
- &:not(:last-child) > a::after {
- content: '·';
- display: inline-block;
- font-size: 50px;
- line-height: 60px;
- margin: 0 10px;
- vertical-align: middle;
- }
-
- & > a {
- color: var(--hero-text-color);
- display: inline-block;
- font-size: calc(2 * var(--unit));
- font-weight: 400;
- letter-spacing: 0.02em;
- line-height: 60px;
- opacity: var(--hero-text-secondary-opacity);
- position: relative;
- vertical-align: middle;
-
- &:hover {
- opacity: 1;
- }
- }
- }
- }
-}
-
-.twitterButton {
- &.neutral.flat:not([disabled]) {
- color: var(--twitter-color);
- }
-}
-
-.content {
- align-items: center;
- background-color: var(--color-content);
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- padding: var(--content-offset);
-
- &:nth-child(3) {
- background-color: color(var(--color-content) blackness(5%));
- }
-
- & > .authors {
- align-items: flex-start;
- display: flex;
- justify-content: center;
-
- & > * {
- flex: 1 auto;
- margin: 0 var(--unit);
- max-width: calc(32 * var(--unit));
- }
- }
-
- & > p {
- font-size: calc(1.8 * var(--unit));
- line-height: 1.5;
- margin-bottom: var(--content-offset);
- max-width: var(--content-width);
- opacity: 0.6;
- text-align: justify;
- }
-
- & > h2 {
- color: var(--hero-gradient-dark);
- font-size: calc(2 * var(--unit));
- margin-bottom: var(--content-offset);
- }
-
- & > h3 {
- color: var(--color-primary-dark);
- font-size: calc(2.4 * var(--unit));
- margin-bottom: calc(var(--content-offset) / 2);
- }
-}
-
-.footer {
- background-color: var(--color-text);
- color: var(--color-content);
- padding: calc(2 * var(--unit)) 0;
- text-align: center;
-
- & .love {
- color: var(--color-accent);
- font-size: var(--font-size-normal);
- }
-
- & small {
- color: rgba(255, 255, 255, 0.5);
- }
-}
-
-.donate {
- border-radius: 3px;
- color: #fff;
- display: inline-block;
- font-size: calc(1.1 * var(--unit));
- overflow: hidden;
- vertical-align: top;
-
- & .legend {
- background-color: #555;
- display: inline-block;
- line-height: calc(2 * var(--unit));
- padding: 0 calc(0.5 * var(--unit));
- }
-
- & .paypal {
- background-color: #007ec6;
- display: inline-block;
- line-height: calc(2 * var(--unit));
- padding: 0 calc(0.5 * var(--unit));
- }
-}
-
-@media all and (max-width: 768px) {
- & .header {
- & .github {
- position: absolute;
- }
- }
-
- & .content {
- padding: calc(var(--content-offset) / 2);
-
- & > .authors {
- flex-direction: column;
-
- & > * {
- margin: var(--unit) 0;
- }
- }
-
- & > p {
- max-width: 100%;
- }
- }
-
- & .second-content {
- background-color: transparent;
- }
-}
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index 716ecf928..648498249 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.module.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.module.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
diff --git a/docs/app/components/layout/install/style.css b/docs/app/components/layout/install/style.css
deleted file mode 100644
index eb7e6cc68..000000000
--- a/docs/app/components/layout/install/style.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@import 'http://github.com/variables.css';
-@import 'http://github.com/app_bar/config.css';
-
-.install {
- margin-top: var(--appbar-height);
-}
diff --git a/docs/app/components/layout/main/components/navigation.css b/docs/app/components/layout/main/components/navigation.css
deleted file mode 100644
index 0d203027d..000000000
--- a/docs/app/components/layout/main/components/navigation.css
+++ /dev/null
@@ -1,48 +0,0 @@
-@import 'http://github.com/colors.css';
-@import 'http://github.com/variables.css';
-@import 'http://github.com/config.css';
-
-.root {
- background-color: var(--color-background);
- display: flex;
- flex-direction: column;
- width: var(--navigation-width);
-}
-
-.list {
- flex-grow: 1;
- overflow-y: auto;
-
- &::-webkit-scrollbar {
- height: 0;
- width: 0;
- }
-}
-
-.item {
- & > span {
- padding: var(--navigation-v-padding) var(--navigation-h-padding);
- }
-
- & [data-react-toolbox='list-item-text'] {
- font-size: var(--font-size-small);
- font-weight: var(--font-weight-semi-bold);
- }
-}
-
-.active {
- background: $color-divider;
-}
-
-.footer {
- border-top: var(--navigation-footer-border);
- color: var(--color-text-secondary);
- flex-grow: 0;
- font-size: var(--font-size-small);
- overflow: hidden;
- padding: var(--navigation-h-padding);
-
- & > * {
- display: block;
- }
-}
diff --git a/docs/app/components/layout/main/components/playground.css b/docs/app/components/layout/main/components/playground.css
deleted file mode 100644
index d059090c7..000000000
--- a/docs/app/components/layout/main/components/playground.css
+++ /dev/null
@@ -1,37 +0,0 @@
-@import 'http://github.com/colors.css';
-@import 'http://github.com/variables.css';
-@import 'http://github.com/config.css';
-
-.editor,
-.preview {
- overflow-y: auto;
- position: absolute;
- right: 0;
-
- &::-webkit-scrollbar {
- height: 0;
- width: 0;
- }
-}
-
-.editor {
- bottom: 50%;
- left: 0;
- top: 0;
-
- & div:global(.CodeMirror) {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- height: 100%;
- max-height: 100%;
- min-height: 100%;
- }
-}
-
-.preview {
- bottom: 0;
- display: flex;
- left: 0;
- top: 50%;
-}
diff --git a/docs/app/components/layout/main/config.css b/docs/app/components/layout/main/config.css
deleted file mode 100644
index 145f4fcb1..000000000
--- a/docs/app/components/layout/main/config.css
+++ /dev/null
@@ -1,14 +0,0 @@
-:root {
- --media-min-width: 1440px;
- --playground-max-width: calc(var(--media-min-width) / 2);
- --playground-width: 50%;
- --navigation-width: calc(22 * var(--unit));
- --navigation-h-padding: calc(2.4 * var(--unit));
- --navigation-v-padding: calc(1.2 * var(--unit));
- --navigation-footer-border: solid 1px rgb(224, 224, 224);
- --documentation-left-shadow:
- 0 4px 5px 0 color(var(--color-black) a(14%)),
- 0 1px 10px 0 color(var(--color-black) a(12%)),
- 0 2px 4px -1px color(var(--color-black) a(20%));
- --documentation-right-shadow: -2px 0 4px color(var(--color-black) a(14%));
-}
diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index 80cdde523..89865b2a4 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -1,21 +1,22 @@
class InputTest extends React.Component {
- state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '' };
+ state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '', error: '' };
- handleChange = (name, value) => {
- this.setState({...this.state, [name]: value});
+ handleChange = (value, ev) => {
+ this.setState({[ev.target.name]: value});
};
render () {
return (
Provide an image source or object, a font icon, children or a title to use its first letter. lorem ipsum...Avatars
Give information on :hover
+An example with
Multiline!
You can have a multiple or simple autocomplete.
+ +Provide an image source or object, a font icon, children or a title to use its first letter.
+lorem ipsum...
+ + + + + + + + + + ++ Icon Buttons should align in the vertical center, to see this we need to + put them next to text or highlight thier background color. +
+You have multiple options for cards. Combine different subcomponents to create your own:
+ +Lorem ipsum...
+ +Chips can be deletable and have an avatar.
+ +lorem ipsum...
+This message comes from a parent: {this.context.message}
; + } +} + +export default DialogTest; diff --git a/spec/ts/drawer.tsx b/spec/ts/drawer.tsx new file mode 100644 index 000000000..629c21d8b --- /dev/null +++ b/spec/ts/drawer.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import Button from '../../components/button'; +import Drawer from '../../components/drawer'; + +const style = require('../style.module.css'); + +class DrawerTest extends React.ComponentYou can navigate using a drawer to the left or right.
+ +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+lorem ipsum...
+ +lorem ipsum...
+ +Although a menu can be used indepently with any component, we are providing a common use case with the icon menu.
+lorem ipsum...
+ + + + + + + + + +lorem ipsum...
+ + +This list can be used inside a Drawer for a list of options or as navigation.
+Useful for a list of contacts or similar.
+It can be used to embed little checkboxes in the list. These behave as checkboxes.
+Similar to a previous one but only with one text line
+The most simple list.
+Using custom components in list item
+This tabs can be disabled or hidden
+ + +lorem ipsum...
+Date pickers and time pickers with Material flavour.
+ +Determinate
+Indeterminate...
+Circular
+Circular with custom size
+Lorem ipsum...
+ +Normal slider
+With steps, initial value and editable
+Pinned and with snaps
+Disabled status
+lorem ipsum...
+ +This is more beautiful than the old fashion checkboxes...
+Organized data.
+ +This tabs can be disabled or hidden
+These tabs fill the given space.
+These tabs have an inverted theme.
+Give information on :hover
+An example with
Multiline!
Lorem ipsum dolor sit amet,
+ Click this next word to show and hide on click:
+ {' '}
+