core
core copied to clipboard
Old CSS in `CdsButton` disallows changing letter spacing on small buttons
trafficstars
Describe the bug
A CSS style applied to the buttons when they are small makes it impossible to change the letter spacing when the button is set to a small size
How to reproduce
<cds-button size="sm" class="test">test</cds-button>
cds-button.test {letter-spacing: 10px}
Expected behavior
I should be able to use --letter-spacing to determine the letter spacing on the button regardless of the size it has.
Versions
Clarity project:
- [x] Clarity Core
- [ ] Clarity Angular/UI
Clarity version:
- [ ] v5.x
- [x] v6.x
Framework:
- [ ] Angular
- [ ] React
- [ ] Vue
- [x] Other: N/A, happens in core
Framework version: N/A
Device:
- Type: Dell Laptop
- OS: Windows 11
- Browser Chrome
- Version latest
Additional notes
Please go to: projects/core/src/button/button.element.scss and check lines 265-267.
:host([size='sm']) .private-host {
--letter-spacing: 0.073em;
}
I don't think they should be there.
Plink