Clay: `btn-sm` is not working with `btn-unstyled`

[matuzalemsteles]

Hey @pat270, in the case of using btn-sm withbtn-unstyled does not seem to work very well, see #599 for an example.

[pat270]

@matuzalemsteles I created btn-unstyled because we wanted to use button for interactive elements that didn't have any href attribute. It seemed easier to create a new class instead of using btn-link because there are a lot of css overwrites I needed to add to make it function like an inline element (e.g. a tag) and I would need to re-add btn-link styles to places where we would want it to function like Bootstrap 4 intended.

I prefer not to make btn-unstyled more complicated and would rather add some documentation on it. Is there a specific use case you can show me?

[matuzalemsteles]

I understand, thanks for clarifying and I agree with you. A case use is in ClayDropdown, It may happen to have a button with btn-unstyled along with btn-sm but I do not know if we would have cases with that for now.

[pat270]

I see, if that combo can be output I can just add support for it.

[matuzalemsteles]

Sounds good to me.

[carloslancha]

Hey @pat270 there's a case in blogs where they're using a dropdown with a small unstyled button, they can more or less do the trick by passing elementClasses but it would be better if we can add support for it. Thx!

[pat270]

@carloslancha When I created .dropdown-action, I ran under the assumption it would be the same color across the board https://lexicondesign.io/docs/patterns/buttons.html, then there became the sites stuff https://lexicondesign.io/docs/patterns/Sites/assetTitleBar.html.

It's possible to create that blue vertical ellipsis button using:

<div class="dropdown">
    <button class="btn btn-outline-primary btn-outline-borderless btn-monospaced btn-sm dropdown-toggle"></button>
    <div class="dropdown-menu"></div>
</div>

with the caveat that the icon size isn't 1rem.

I will probably need to revisit .dropdown-action colors and support for different .btn-* modifiers (e.g. .btn-outline-primary.btn-outline-borderless) so that you can create the action dropdowns in Lexicon Sites. Generally .btn-unstyled shouldn't be used unless you are trying to style a button the same style as a link in a component.

[carloslancha]

@pat270 makes sense, yep :)