problem displaying the ripple on the outlined button

[Benoit-ROBIN]

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

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]

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]

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.