search

carbon-design-system / carbon-components-svelte

Svelte implementation of the Carbon Design System
https://svelte.carbondesignsystem.com
Apache License 2.0
2.71k stars 261 forks source link

PasswordInput v11 #1890

Open theetrain opened 10 months ago

theetrain commented 10 months ago

Spun off from #1629

SimpleProgrammingAU commented 10 months ago

If no one's taken this one, I'll smash it out since it should have some good overlap with TextInput.

SimpleProgrammingAU commented 10 months ago

Is the tooltip for this component being removed?

The styles are still included in the component styles, but they don't do anything anymore. I've had a bit of a hunt and can't find anything definitive in the CDS documentation that states whether or not a tooltip should exist from the PasswordInput component, generally.

theetrain commented 10 months ago

I think similar to how #1895 (Button) makes use of the new Popover component, I think tooltip functionality is blocked by #1896, so that ticket is high priority.

If you've already started on PasswordInput, then someone can work on Popover and then later update Button and PasswordInput to make use of Popover.

I believe the React library uses a mouseenter event to activate the cds--popover--open class. I would prefer we use pure CSS or perhaps the new Popover API to achieve the full interaction.

Edit: maybe pure CSS isn't enough since aria- attributes may need to be modified. Another potential advantage for the popover API.

SimpleProgrammingAU commented 10 months ago

I believe the React library uses a mouseenter event to activate the cds--popover--open class. I would prefer we use pure CSS or perhaps the new Popover API to achieve the full interaction.

Were you able to get the tooltip to work with PasswordInput in CDS React v11? I couldn't see anything happening to the implemented styles in the dev tools window when I rolled over the icon with my mouse.

SimpleProgrammingAU commented 8 months ago

@theetrain was just returning to this after submitting the draft for Popover and when I look at the React example, the tooltip doesn't appear anymore. What should we do?