Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ripple effect incompatible with Tailwind CSS #103

Closed
zhuoyue95 opened this issue Apr 17, 2020 · 4 comments
Closed

Ripple effect incompatible with Tailwind CSS #103

zhuoyue95 opened this issue Apr 17, 2020 · 4 comments
Labels
help wanted Extra attention is needed

Comments

@zhuoyue95
Copy link

zhuoyue95 commented Apr 17, 2020

I have been using Tailwind CSS with my project. Today when I tried to integrate this package into my project and make use of material design components, I ran into an issue with ripple effect on buttons, in which the ripple effect just didn't fire.

Looking into the issue, I discovered that something in the preflight.css has meddled with the functionality. More specifically, the

* {
  border-style: solid;
}

rule has crippled the ripple effect not only on buttons, but also the ripple effect altogether.

Tested on:
Chrome 80.0.3987.163 on macOS 10.15.3
Elm 0.19.1

A minimal example:

module Main exposing (main)

import Browser exposing (Document)
import Html exposing (button, div, node, text)
import Html.Attributes exposing (class)
import Material.Button exposing (buttonConfig, outlinedButton, raisedButton, textButton, unelevatedButton)



-- Main --


main : Program () () Never
main =
  Browser.document
    { init = \_ -> ( (), Cmd.none )
    , view = view
    , update = \_ _ -> ( (), Cmd.none )
    , subscriptions = always Sub.none
    }



-- View --


view : () -> Document Never
view _ =
  { title = "MDC"
  , body =
      [ node "style" [] [ text "* {border-width: 0; border-style: solid;}" ]
      , div []
          [ textButton { buttonConfig | additionalAttributes = heroMargin } "Text"
          , raisedButton { buttonConfig | additionalAttributes = heroMargin } "Raised"
          , unelevatedButton { buttonConfig | additionalAttributes = heroMargin } "Unelevated"
          , outlinedButton { buttonConfig | additionalAttributes = heroMargin } "Outlined"
          ]
      ]
  }


heroMargin : List (Html.Attribute msg)
heroMargin =
  [ Html.Attributes.style "margin" "16px 32px" ]
@aforemny aforemny added the help wanted Extra attention is needed label May 11, 2020
@aforemny
Copy link
Owner

Hi @zhuoyue95, I think this should probably be solved upstream. I have found a relevant issue.

@aforemny
Copy link
Owner

A work-around is potentially to unset tailwind's border style for class .mdc-ripple-surface--test-edge-var-bug.

@aforemny aforemny changed the title Ripple effect crippled by some setting global border-style to solid Ripple effect incompatible with Tailwind CSS Jun 6, 2020
@aforemny
Copy link
Owner

I think this should be solved elsewhere. If you feel this issue needs solving here, please re-open.

@aforemny
Copy link
Owner

aforemny commented Sep 13, 2020

It seems there has been some progress upstream.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants