Add --icon-size property, use within c-button

[tylersticka]

Overview

Addresses an issue where icons were inconsistently sized if included as the primary button content, as one might expect for an icon-only button.

Previously, button icon sizes were controlled via font-size on the icon container, c-button__extra. When an icon was included as the primary content, c-button__content, there was no such font-size declaration, and so the icon would appear smaller by comparison.

I considered adding some utility classes and/or icon modifiers to solve this problem, but I realized when futzing with the component that there were other potential issues with relying on font-size on a containing element. For example, it's impossible to reliably negate the gap between the __extra and __content elements since the font-size for the icon increases the computed size of that gap to a spot between two of our modular scale steps.

Instead, I added an optional --icon-size property to the c-icon component. This allows us to set the desired size of the icon on c-button, which cascades to all elements below. It also means the computed impact of the icon's size is not effective until the icon itself, so any margins or other relative values on its container will be more consistent with adjacent elements.

Along the way, I noticed that the c-button__extra styles were being unnecessarily output a second time within the context of WordPress buttons. I separated those styles into their own mixins to prevent this.

(This PR originally included other changes to c-button to streamline its template code, but I realized partway in that the actual solution to the issue was a smaller subset of that, which I've separated into this PR.)

Screenshots

Before

After

Testing

On the deploy preview…

1. Review Button component for regressions
2. Review Icon component for regressions
3. Review Article Listing prototype search form for regressions

---

• Fixes Add ability for search input's icon to use an increased font size #1540

[changeset-bot]

🦋 Changeset detected

Latest commit: 1f0d855

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✔️ Deploy Preview for cloudfour-patterns ready!

🔨 Explore the source changes: 1f0d855

🔍 Inspect the deploy log: https://app.netlify.com/sites/cloudfour-patterns/deploys/6194342f650c5600085e1e48

😎 Browse the preview: https://deploy-preview-1586--cloudfour-patterns.netlify.app

[spaceninja]