Button Ripple effect strange behaviour

[raza2022]

Edit: here is my repo link https://github.com/raza2022/final-react @mjurincic @drhayes @okonet @owais @Rendez Thanks for the great work. I tried the tool box with a already scofoled project with https://github.com/stylesuxx/generator-react-webpack-redux after hours i successfully solved all errors link toloaders webpack configand bla bla. now the issue is that it's misbehavior some styles for example ripple effect ( when click on button ) it creates a big black circle instead of ripple effect. and after click on button it looks like :(

here is my updated webpackconfig dev file

'use strict';
const fs = require('fs');
const path = require('path');
const npmBase = path.join(__dirname, '../../node_modules');
class WebpackBaseConfig {
  constructor() {
    this._config = {};
  }
  get includedPackages() {
    return [].map(pkg => fs.realpathSync(path.join(npmBase, pkg)));
  }
  set config(data) {
    this._config = Object.assign({}, this.defaultSettings, data);
    return this._config;
  }
  get config() {
    return this._config;
  }
  get env() {
    return 'dev';
  }
  get srcPathAbsolute() {
    return path.resolve('./src');
  }
  get testPathAbsolute() {
    return path.resolve('./test');
  }
  get defaultSettings() {
    const cssModulesQuery = {
      modules: true,
      importLoaders: 1,
      localIdentName: '[name]-[local]-[hash:base64:5]'
    };
    return {
      context: this.srcPathAbsolute,
      devtool: 'eval',
      devServer: {
        contentBase: './src/',
        publicPath: '/assets/',
        historyApiFallback: true,
        hot: true,
        inline: true,
        port: 8000
      },
      entry: './index.js',
      module: {
        rules: [
          {
            enforce: 'pre',
            test: /\.js?$/,
            include: this.srcPathAbsolute,
            loader: 'babel-loader',
            query: { presets: ['es2015'] }
          },
          {
            test: /^.((?!cssmodule).)*\.css$/,
            use: [
              "style-loader",
              {
                loader: "css-loader",
                options: {
                  modules: true,
                  sourceMap: true,
                  importLoaders: 1,
                  localIdentName: "[name]--[local]--[hash:base64:5]"
                }
              },
              "postcss-loader" // has separate config, see postcss.config.js nearby
            ]
          },
          //{
          //  test: /^.((?!cssmodule).)*\.css$/,
          //  loaders: [
          //    { loader: 'style-loader'},
          //    { loader: 'css-loader', options: cssModulesQuery},
          //  ]
          //},
          {
            test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
            loader: 'file-loader'
          },
          {
            test: /^.((?!cssmodule).)*\.(sass|scss)$/,
            loaders: [
              { loader: 'style-loader' },
              { loader: 'css-loader' },
              { loader: 'postcss-loader' },
              { loader: 'sass-loader' }
            ]
          },
          {
            test: /^.((?!cssmodule).)*\.less$/,
            loaders: [
              { loader: 'style-loader' },
              { loader: 'css-loader' },
              { loader: 'postcss-loader' },
              { loader: 'less-loader' }
            ]
          },
        //  {
        //    test: /^.((?!cssmodule).)*\.styl$/,
        //    loaders: [
        //      { loader: 'style-loader' },
        //      { loader: 'css-loader' },
        //      { loader: 'postcss-loader' },
        //      { loader: 'stylus-loader' }
        //    ]
        //  },
          {
            test: /\.json$/,
            loader: 'json-loader'
          },
          {
            test: /\.(js|jsx)$/,
            include: [].concat(this.includedPackages, [this.srcPathAbsolute]),
            loaders: [{ loader: 'babel-loader' }]
          },
          {
            test: /\.cssmodule\.(sass|scss)$/,
            loaders: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                query: cssModulesQuery
              },
              { loader: 'postcss-loader' },
              { loader: 'sass-loader' }
            ]
          },
          {
            test: /\.cssmodule\.css$/,
            loaders: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                query: cssModulesQuery
              },
              { loader: 'postcss-loader' }
            ]
          },
          {
            test: /\.cssmodule\.less$/,
            loaders: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                query: cssModulesQuery
              },
              { loader: 'postcss-loader' },
              { loader: 'less-loader' }
            ]
          },
          {
            test: /\.cssmodule\.styl$/,
            loaders: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                query: cssModulesQuery
              },
              { loader: 'postcss-loader' },
              { loader: 'stylus-loader' }
            ]
          }
        ]
      },
      output: {
        path: path.resolve('./dist/assets'),
        filename: 'app.js',
        publicPath: './assets/'
      },
      plugins: [],
      resolve: {
        alias: {
          actions: `${ this.srcPathAbsolute }/actions/`,
          components: `${ this.srcPathAbsolute }/components/`,
          config: `${ this.srcPathAbsolute }/config/${ this.env }.js`,
          images: `${ this.srcPathAbsolute }/images/`,
          sources: `${ this.srcPathAbsolute }/sources/`,
          stores: `${ this.srcPathAbsolute }/stores/`,
          styles: `${ this.srcPathAbsolute }/styles/`
        },
        extensions: [
          '.js',
          '.jsx'
        ],
        modules: [
          this.srcPathAbsolute,
          'node_modules'
        ]
      }
      //postcss: function () {
      //  return [];
      //}
    };
  }
}
module.exports = WebpackBaseConfig;

am working from 24 hours (-6 slepping :( ) just bumping my head on wall any help will be greatly appreciated

[raza2022]

I am closing for now as i switched to material-ui instead of react-toolbox to complete my project on time.

[javivelasco]

You just needed to add the CSS for the ripple! Sorry I didn't answer before!

[raza2022]

@javivelasco I already switched to Material ui because it's urgent project, But Thanks :thumbsup:

[davidtsai130]

@javivelasco I'm running into this issue now, what do you mean by "You just needed to add the CSS for the ripple"?

[javivelasco]

When the effect shown in the GIF happens it's because the CSS of the ripple is missing. Depending on the config you are using you might need to either import the component in a different way of to add the RIPPLE component to your react-toolbox-themr configuration. In any case the issue happens for that reason and I guess it's not an issue with the lib itself but with configuration

[davidtsai130]

@javivelasco I am importing the Button like so: import { Button } from 'react-toolbox/lib/button'; which would mean the theme should already be applied, no? Should I instead do this: import Button from 'react-toolbox/lib/button/Button'; and add BUTTON and RIPPLE to the react-toolbox-themr configuration?

Here is my webpack2 config:

Disregard the ! after postcss-loader, forgot to remove that before taking the screenshot

and part of my package.json looks like this:

[tiagomapmarques]

@raza2022 @davidtsai130 You need to add the PostCSS dependencies listed on the react-toolbox package. The only optional one is postcss-reporter. Be sure to add them in the exact version they are listed (instead of the current stable versions), otherwise the CSS will still misbehave (Input is a good example of this - label will not move up). Since you already have a postcss-loader on css files you should be fine with only those changes.

PS: Double-check your PostCSS config file. It should look similar to (or exactly like) this:

module.exports = {
  plugins: {
    'postcss-import': {
      root: __dirname,
    },
    'postcss-mixins': {},
    'postcss-each': {},
    'postcss-cssnext': {},
  },
};