core icon indicating copy to clipboard operation
core copied to clipboard

Old CSS in `CdsButton` disallows changing letter spacing on small buttons

Open squidjam opened this issue 1 year ago • 1 comments
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.

squidjam avatar May 02 '24 15:05 squidjam

Plink

squidjam avatar Sep 25 '24 05:09 squidjam