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.

Sign up for GitHub

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

Jump to bottom

MDCTopAppBar buttons ripple effect broken since 12.0.0 #8092

Open
hacklschorsch opened this issue Apr 27, 2023 · 2 comments
Open

MDCTopAppBar buttons ripple effect broken since 12.0.0 #8092

hacklschorsch opened this issue Apr 27, 2023 · 2 comments
Labels
bug

Comments

@hacklschorsch
Copy link

Bug report

I use AutoInit and a bit of static HTML for a small mobile web app.
auto-initialising a MDCTopAppBar with MDC 11.0.0 gives working ripple effects for the buttons, from 12.0.0 they don't ripple anymore.

Steps to reproduce

Here's a minimal HTML file. Change version numbers of CDN-included CSS between 11.0.0 and 12.0.0 - ripples in the MDCTopAppBar work up until version 11 and don't from version 12.

<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@11.0.0/dist/material-components-web.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
    <header class="mdc-top-app-bar" data-mdc-auto-init="MDCTopAppBar">
        <div class="mdc-top-app-bar__row">
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button"
                    aria-label="Open navigation menu">menu</button>
                <span class="mdc-top-app-bar__title">Page title</span>
            </section>
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
                <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
                    aria-label="Favorite">favorite</button>
                <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
                    aria-label="Search">search</button>
                <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
                    aria-label="Options">more_vert</button>
            </section>
        </div>
    </header>
    <main class="mdc-top-app-bar--fixed-adjust">
        <label class="mdc-text-field mdc-text-field--filled" data-mdc-auto-init="MDCTextField">
            <span class="mdc-text-field__ripple"></span>
            <input class="mdc-text-field__input" type="text" aria-labelledby="label">
            <span id="label" class="mdc-floating-label">auto-init working at all?</span>
            <span class="mdc-line-ripple"></span>
        </label>
    </main>
    <script src="https://unpkg.com/material-components-web@11.0.0/dist/material-components-web.js"></script>
    <script type="text/javascript">
        window.mdc.autoInit();
    </script>
</body>

</html>

Actual behavior

No ripples for the buttons in the Top app bar.

Expected behavior

Ripply goodness.

Screenshots

image

vs.

image
@hacklschorsch hacklschorsch changed the title MDCTopAppBar buttons ripple effect broken between in 11.0.0 and 12.0.0 MDCTopAppBar buttons ripple effect broken between since 12.0.0 Apr 27, 2023
@hacklschorsch hacklschorsch changed the title MDCTopAppBar buttons ripple effect broken between since 12.0.0 MDCTopAppBar buttons ripple effect broken since 12.0.0 Apr 27, 2023
@hacklschorsch
Copy link
Author

Might stem from 33c9a73

@mindaugasvcs
Copy link

Still not fixed :/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hacklschorsch @mindaugasvcs