search

madvas / cljs-react-material-ui

Clojurescript library for using material-ui.com
Eclipse Public License 1.0
205 stars 32 forks source link

Icon height is set incorrectly inside FloatingActionButton #21

Closed nikortel closed 7 years ago

nikortel commented 7 years ago

When using icon inside FloatingActionButton: [ui/floating-action-button [ic/content-add]]

The icon height is set to 24px when in material-ui.com examples the height is 56px. This causes the hover effect of the FloatingActionButton to not show correctly and the icon is not centered vertically.

Actual rendered element with cljs-react-material-ui <svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.870588); fill: currentcolor; height: 24px; width: 24px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; user-select: none;"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>

And rendered element in material-ui.com: <svg viewBox="0 0 24 24" style="display: inline-block; color: rgb(255, 255, 255); fill: rgb(255, 255, 255); height: 56px; width: 24px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; line-height: 56px; user-select: none;"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>

Can be fixed by including following style for the icon :height 56px.

madvas commented 7 years ago

you must use it as:

[ui/floating-action-button
    (ic/content-add)]

Icons are raw react components, not adapted for reagent. Must be called as function, not with []