search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
8.79k stars 827 forks source link

problem displaying the ripple on the outlined button #5620

Closed Benoit-ROBIN closed 1 week ago

Benoit-ROBIN commented 2 weeks ago

What is affected?

Component, Theming

Description

When I try to change the style of md-outlined-button I have displaying issues. When I change this value : 

.button-outlined {
  --md-ripple-pressed-opacity: 1;
}

there is a white border inside the button

Capture d’écran 2024-05-14 à 17 09 00

The problem is because of mismatching border lines, which causes the ripple's border to not perfectly line up with a border on its parent.

Workaround

A workaround was found by overriding the ripple border-radius value:

.button-outlined::part(ripple) {
  border-radius: calc(var(--eds-button-outlined-border-radius) - 1px);
}

to do this I need to add the attribute part to md-ripple in the button component. source: https://discord.com/channels/259087343246508035/1239956071762624563

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.4.1

Browser/OS/Node environment

node: 18.12.1 npm: 8.19.2 chrome: 124.0.6367.208 macos: 14.2.1

Benoit-ROBIN commented 2 weeks ago

I have a local branch ready but I can't push it to create a pull request.

ERROR: Permission to material-components/material-web.git denied to Benoit-ROBIN.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
asyncLiz commented 2 weeks ago

You won't be able to push your branch directly to this repository. Instead, create a pull request from a cloned copy of this repository.

GitHub has some guides on creating PRs from forks.