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

.changeset/new-pets-care.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add `--icon-size` CSS custom property to the Icon component to allow sizing via CSS without impacting `font-size` or selector depth.

.changeset/odd-sloths-allow.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Remove extra `.c-button__extra` selectors from WordPress block button styles.

.changeset/tough-books-sing.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Size Icons consistently in Buttons. Previously, Icon-only Buttons achieved by including an Icon as the primary content were inconsistently sized compared to Icons included before or after a label.

src/components/button/button.scss

@@ -19,3 +19,19 @@
 .c-button--tertiary {
   @include button.tertiary;
 }
+
+/**
+ * Element: Extra
+ */
+
+.c-button__extra {
+  @include button.extra;
+
+  /**
+   * Show visual slash through element when button is in slashed state
+   */
+
+  .c-button.is-slashed & {
+    @include button.extra-slashed;
+  }
+}

src/components/icon/icon.scss

@@ -6,6 +6,7 @@
   @include svg.inherit-color;
   @include svg.inherit-size;
   display: inline-block;
+  font-size: var(--icon-size, inherit);
   position: relative;
   vertical-align: middle;
 }

src/components/icon/icon.stories.mdx

@@ -57,6 +57,10 @@ Icons without a flex or grid container may appear [slightly low in comparison to
   </Story>
 </Canvas>
 
+## CSS Properties
+
+- `--icon-size`: By default, icons are sized based on `font-size`. Alternatively, `--icon-size` may be used in cases where you want to size an icon without impacting `font-size`.
+
 ## Template Properties
 
 The component template supports the following unique properties:

src/design/icons/icons.stories.mdx

@@ -44,7 +44,7 @@ const brandIconElements = brandIconDir.keys().map((key) => {
 
 Our icons are designed to be compact yet friendly. They embrace bold shapes, rounded corners and circular caps. They work well adjacent to text, but should rarely be used on their own to convey meaning.
 
-For icon usage examples, see [the icon object](/docs/components-icon--basic).
+For icon usage examples, see [the icon component](/docs/components-icon--basic).
 
 <IconGallery>{iconElements}</IconGallery>
 

src/mixins/_button.scss

@@ -46,6 +46,7 @@
  */
 
 @mixin default {
+  --icon-size: #{size.$icon-medium};
   align-items: center;
   background: var(--theme-color-background-button-default);
   border-color: var(--theme-color-border-button-default);
@@ -93,65 +94,6 @@
     transform: none;
   }
 
-  .c-button__extra {
-    display: flex;
-    font-size: size.$icon-medium;
-    margin: 0 size.$spacing-gap-button-extra;
-    position: relative;
-
-    &:first-child {
-      margin-left: size.$spacing-gap-button-extra * -1;
-    }
-
-    &:last-child {
-      margin-right: size.$spacing-gap-button-extra * -1;
-    }
-  }
-
-  /**
-   * Adds a slash across the "extra" content (most times "extra" content is an icon).
-   */
-  &.is-slashed {
-    .c-button__extra {
-      &::after {
-        background: currentColor;
-        border-radius: size.$border-radius-full;
-        content: '';
-        height: size.$edge-medium;
-        left: 0;
-        position: absolute;
-        top: 50%;
-        transform: rotate(-30deg);
-        width: 100%;
-      }
-
-      $clip-path: polygon(
-        -5% -5%,
-        105% -5%,
-        105% 23%,
-        -5% 87%,
-        -5% 101.4711%,
-        105% 37.9626%,
-        105% 105%,
-        -5% 105%
-      );
-
-      /**
-       * 1. Fixes a bug where some browsers would render the element as
-       *    slightly offset from others.
-       * 2. Helps normalize the box the clipping path renders to.
-       */
-      & > * {
-        clip-path: $clip-path;
-        transform: translate(0, 0); /* 1 */
-
-        @supports (clip-path: view-box) {
-          clip-path: view-box $clip-path; /* 2 */
-        }
-      }
-    }
-  }
-
   @include focus.focus-visible {
     box-shadow: 0 0 0 size.$edge-large color.$brand-primary-lighter;
   }
@@ -176,3 +118,57 @@
   border-color: transparent;
   color: var(--theme-color-text-button-tertiary);
 }
+
+/// Rules for extra element. Used to contain icons or other visual affordances.
+@mixin extra {
+  display: flex;
+  margin: 0 size.$spacing-gap-button-extra;
+  position: relative;
+
+  &:first-child {
+    margin-left: size.$spacing-gap-button-extra * -1;
+  }
+
+  &:last-child {
+    margin-right: size.$spacing-gap-button-extra * -1;
+  }
+}
+
+/// Clip path used for extra element when button's slashed state is active
+$extra-slashed-clip-path: polygon(
+  -5% -5%,
+  105% -5%,
+  105% 23%,
+  -5% 87%,
+  -5% 101.4711%,
+  105% 37.9626%,
+  105% 105%,
+  -5% 105%
+);
+
+// Styles for extra specific to slashed button state
+@mixin extra-slashed {
+  &::after {
+    background: currentColor;
+    border-radius: size.$border-radius-full;
+    content: '';
+    height: size.$edge-medium;
+    left: 0;
+    position: absolute;
+    top: 50%;
+    transform: rotate(-30deg);
+    width: 100%;
+  }
+
+  // 1. Fixes a bug where some browsers would render the element as
+  //    slightly offset from others.
+  // 2. Helps normalize the box the clipping path renders to.
+  & > * {
+    clip-path: $extra-slashed-clip-path;
+    transform: translate(0, 0); // 1
+
+    @supports (clip-path: view-box) {
+      clip-path: view-box $extra-slashed-clip-path; // 2
+    }
+  }
+}

src/prototypes/article-listing/example/example.scss

@@ -88,8 +88,4 @@
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
-
-  .search-btn .c-icon {
-    font-size: ms.step(1);
-  }
 }

src/prototypes/article-listing/example/example.twig

@@ -189,8 +189,9 @@
             }  %}
               {% block content %}
                 {% include '@cloudfour/components/icon/icon.twig' with {
-                  name: 'magnifying-glass'
-                } %}
+                  name: 'magnifying-glass',
+                  inline: true
+                } only %}
               {% endblock %}
             {% endembed %}
           </div>