Addon doesn't show well

[jlramosr]

Hello! my addon is showing of a strange way in my storybook v5.0.11 (the icons and functionality doesn't work well):

What I'm doing bad?

I have another problem. When I create the MUI Theme, I use "override" to add a font with @font-face, but this font doesn't appear in my storybook component. What I have to do about that?

[usulpro]

Hi @jlramosr

After we switched to the new alpha the UI of this addon wasn't finished yet, so for some sizes it could look weird. But should switch colors well though. It will be likely reworked in the next version. If some functionality doesn't work as expected could you let me know details about that?

When you adding another font are you sure it properly download by components?

[jlramosr]

Hi @UsulPro and thanks for the response.

Ok, I see the UI of the same way for all the window sizes and doing click on "clone Theme", "Clear Theme", etc, it doesn't work. I was using v3.9.3 of Material-UI, but with the new version (v.4-beta), this still happens. When I change the theme (I have two themes - dark and light - with different primary colors), the background color of my components it doesn't change. When I use my components outside, this behaviour is correct. I use v5.0.11 of storybook and I've tried with all your v.0.9.0-alpha versions.

With regard to the fonts, the font downloaded on both themes with:

overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': MY_DOWNLOAD_FONT_ARRAY,
      },
    },
},
typography: {
  fontFamily: [ MY_DOWNLOADED_FONT, ... ]
}

it doesn't appear in the storybook, but outside the behaviour is correct and the font shows good.

Thanks again!

[usulpro]

@jlramosr sorry for a long answer, alpha-19 shows additional errors while theming creation, did you see any warnings in console?

[stoffeastrom]

@UsulPro I just cloned this https://github.com/indentlabs/notebook-ui and tested and I think it's the same problem? The console:

[usulpro]

Yes - it's the same! Could you please try

import { createMuiTheme } from '@material-ui/core/styles';

createMuiTheme(theme);

will it throw?

[stoffeastrom]

const theme = createMuiTheme({
  palette: {
    primary: purple,
    secondary: green
  },
  status: {
    danger: 'orange'
  }
});

const theme1 = createMuiTheme({
  palette: {
    primary: yellow,
    secondary: blue
  },
  status: {
    danger: 'orange'
  }
});

storiesOf('Button', module)
  .addDecorator(muiTheme([theme, theme1]))

and I still get that error when switching themes. Also changing colors in the color picker doesn't update the component e.g you get the same error on mouse over or changing color.

[stoffeastrom]

If I do

storiesOf('Button', module)
  .addDecorator(muiTheme([dark, light]))
  .add('with text', a => (
    <Button variant="contained" color="primary">
        test button
    </Button>

e.g add variant="contained" it starts working (at least updating the color)

[usulpro]

Great! Addon creates themes from objects you passing to muiTheme. So looks like the error comes when we trying to do createMuiTheme(theme) twice.

[usulpro]

I suppose I can close this

[Buzzkill-McSquare]

@UsulPro I don't think this issue should be closed as the initial post (addon UI not matching what's presented in the README) is still active.

[seanconnollydev]

I also wasn't able to edit the theme and didn't really understand how to use the UI. The UI displayed in the README is what I was hoping for.

[frankieali]

I'm attempting to use this addon in my new project. I have the same issue as the original poster in that the latest code does not result in a UI as seen on the project landing page. I was really hoping for the Show Theme Editor toggle seen in the demo here.

Anyway, I was looking into why the latest version of this project was not working for me and it was because @storybook/addon-backgrounds has been updated. Instead of being initialized with addDecorator it's now initialized with addParameters.

Since the package.json looks for "@storybook/addon-backgrounds": "^5.0.6" it's fetching 5.1.9 which has this breaking change.

[frankieali]

The demo in the README (seen on the project landing page) is version 0.8.11.

[usulpro]

Yep, after Material-UI released v1 the structure of theme was changed. So I'm considering a new way of how to edit themes. At this moment it's possible to edit theme as a json object from addon panel

[kaiwa]

I'm trying to set up alpha 20 with material-ui 3.9.3 and for me as well the component does not update when switching the theme.

I have two themes added in storybook's config.js:

addDecorator(muiTheme([
  ATheme
  BTheme,
]));

One of the themes is initially successfully applied to the component.

Both themes show up in the addon's theme selector and I can switch them.

When switching, the theme editor shows the selected theme correctly and I see a message is showing in the console with a changing themeInd:

message arrived at preview sm/storybook-addon-material-ui/material-event/back {themes: Array(2), themeInd: 1}

There are no errors besides the typography warning:

Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release.
Please read the migration guide under https://material-ui.com/style/typography#migration-to-typography-v2

But switching the theme has no effect on the component (border color should change to theme.palette.primary.light in my example).