Refactor icon component to match formatting and extendability of othe…

…r components
RoleModel · Jun 23, 2023 · 0464358 · 0464358
1 parent 39794c9
commit 0464358
Show file tree

Hide file tree

Showing 8 changed files with 213 additions and 70 deletions.
diff --git a/src/components/accordion.scss b/src/components/accordion.scss
@@ -17,9 +17,8 @@
     }
 
     .accordion__marker {
-      --op-mso-optical-sizing: 48;
+      @extend %icon-x-large-global;
 
-      font-size: var(--op-font-x-large);
       justify-self: flex-end;
       transition: var(--op-transition-accordion);
       user-select: none;

diff --git a/src/components/alert.scss b/src/components/alert.scss
@@ -6,10 +6,8 @@
   gap: var(--op-space-small);
 
   .alert__icon {
-    /* stylelint-disable scss/at-extend-no-missing-placeholder */
-    @extend .icon--large;
-    @extend .icon--weight-bold;
-    /* stylelint-enable scss/at-extend-no-missing-placeholder */
+    @extend %icon-large-global;
+    @extend %icon-weight-bold-global;
 
     line-height: var(--op-line-height-dense);
   }

diff --git a/src/components/badge.scss b/src/components/badge.scss
@@ -23,7 +23,7 @@
   white-space: nowrap;
 
   .material-symbols-outlined {
-    font-size: var(--op-font-small);
+    @extend %icon-small-global;
   }
 
   &.badge--pill {

diff --git a/src/components/icon.scss b/src/components/icon.scss
@@ -5,89 +5,151 @@
 
 @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200';
 
-.material-symbols-outlined,
-.material-symbols {
-  --op-mso-fill: 0;
-  --op-mso-weight: var(--op-font-weight-normal);
-  --op-mso-grade: 0;
-  --op-mso-optical-sizing: 20;
-
-  font-size: var(--op-font-medium);
-  font-variation-settings: 'FILL' var(--op-mso-fill), 'wght' var(--op-mso-weight), 'GRAD' var(--op-mso-grade),
-    'opsz' var(--op-mso-optical-sizing);
-  line-height: var(--op-line-height-densest);
-  vertical-align: middle;
+%icon-small-global {
+  --__op-icon-font-size: var(--_op-icon-font-size-small);
+  --__op-icon-optical-size: var(--_op-icon-optical-size-small);
 }
 
-// Fill
-.icon--outlined {
-  --op-mso-fill: 0;
+%icon-medium-global {
+  --__op-icon-font-size: var(--_op-icon-font-size-medium);
+  --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
 }
 
-.icon--filled {
-  --op-mso-fill: 1;
+%icon-large-global {
+  --__op-icon-font-size: var(--_op-icon-font-size-large);
+  --__op-icon-optical-size: var(--_op-icon-optical-size-large);
 }
 
-// Weight
-.icon--weight-light {
-  --op-mso-weight: var(--op-font-weight-light);
+%icon-x-large-global {
+  --__op-icon-font-size: var(--_op-icon-font-size-x-large);
+  --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
 }
 
-.icon--weight-normal {
-  --op-mso-weight: var(--op-font-weight-normal);
+%icon-weight-light-global {
+  --__op-icon-weight: var(--_op-icon-weight-light);
 }
 
-.icon--weight-semi-bold {
-  --op-mso-weight: var(--op-font-weight-semi-bold);
+%icon-weight-normal-global {
+  --__op-icon-weight: var(--_op-icon-weight-normal);
 }
 
-.icon--weight-bold {
-  --op-mso-weight: var(--op-font-weight-bold);
+%icon-weight-semi-bold-global {
+  --__op-icon-weight: var(--_op-icon-weight-semi-bold);
 }
 
-// Emphasis
-.icon--low-emphasis {
-  --op-mso-grade: -20;
+%icon-weight-bold-global {
+  --__op-icon-weight: var(--_op-icon-weight-bold);
 }
 
-.icon--normal-emphasis {
-  --op-mso-grade: 0;
-}
+%icon-global {
+  // Public API (allowed to be overridden)
+  // Weight
+  --_op-icon-weight-light: var(--op-font-weight-light);
+  --_op-icon-weight-normal: var(--op-font-weight-normal);
+  --_op-icon-weight-semi-bold: var(--op-font-weight-semi-bold);
+  --_op-icon-weight-bold: var(--op-font-weight-bold);
 
-.icon--high-emphasis {
-  --op-mso-grade: 200;
-}
+  // Fill
+  --_op-icon-fill-outlined: 0;
+  --_op-icon-fill-filled: 1;
 
-// Size
-.icon--medium {
-  font-size: var(--op-font-medium);
+  // Emphasis
+  --_op-icon-emphasis-low: -20;
+  --_op-icon-emphasis-normal: 0;
+  --_op-icon-emphasis-high: 200;
 
-  --op-mso-optical-sizing: 20;
-}
+  // Size
+  --_op-icon-font-size-small: var(--op-font-small);
+  --_op-icon-font-size-medium: var(--op-font-medium);
+  --_op-icon-font-size-large: var(--op-font-large);
+  --_op-icon-font-size-x-large: var(--op-font-2x-large);
+  --_op-icon-optical-size-small: 20;
+  --_op-icon-optical-size-medium: 20;
+  --_op-icon-optical-size-large: 40;
+  --_op-icon-optical-size-x-large: 48;
 
-.icon--large {
-  font-size: var(--op-font-large);
+  // Private API (don't touch these)
+  --__op-icon-weight: var(--_op-icon-weight-normal);
+  --__op-icon-fill: var(--_op-icon-fill-outlined);
+  --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
+  --__op-icon-font-size: var(--_op-icon-font-size-medium);
+  --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
 
-  --op-mso-optical-sizing: 40;
-}
+  font-size: var(--__op-icon-font-size);
+  font-variation-settings: 'FILL' var(--__op-icon-fill), 'wght' var(--__op-icon-weight),
+    'GRAD' var(--__op-icon-emphasis), 'opsz' var(--__op-icon-optical-size);
+  line-height: var(--op-line-height-densest);
+  vertical-align: middle;
+
+  // Fill Modifiers
+  &.icon--outlined {
+    --__op-icon-fill: var(--_op-icon-fill-outlined);
+  }
+
+  &.icon--filled {
+    --__op-icon-fill: var(--_op-icon-fill-filled);
+  }
+
+  // Weight Modifiers
+  &.icon--weight-light {
+    @extend %icon-weight-light-global;
+  }
+
+  &.icon--weight-normal {
+    @extend %icon-weight-normal-global;
+  }
+
+  &.icon--weight-semi-bold {
+    @extend %icon-weight-semi-bold-global;
+  }
+
+  &.icon--weight-bold {
+    @extend %icon-weight-bold-global;
+  }
+
+  // Emphasis
+  &.icon--low-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-low);
+  }
+
+  &.icon--normal-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
+  }
+
+  &.icon--high-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-high);
+  }
+
+  // Size Modifiers
+  &.icon--small {
+    @extend %icon-small-global;
+  }
+
+  &.icon--medium {
+    @extend %icon-medium-global;
+  }
 
-.icon--x-large {
-  font-size: var(--op-font-2x-large);
+  &.icon--large {
+    @extend %icon-large-global;
+  }
 
-  --op-mso-optical-sizing: 48;
+  &.icon--x-large {
+    @extend %icon-x-large-global;
+  }
+}
+
+.material-symbols-outlined,
+.material-symbols {
+  @extend %icon-global;
 }
 
 .custom-icons {
+  @extend %icon-global;
+
   display: inline-block;
   width: var(--op-font-2x-large);
   height: var(--op-font-2x-large);
 
-  &.icon--medium {
-    font-size: var(--op-font-small);
-
-    --op-mso-optical-sizing: 20;
-  }
-
   &.icon--large {
     width: var(--op-font-large);
     height: var(--op-font-large);

diff --git a/src/components/sidebar.scss b/src/components/sidebar.scss
@@ -101,10 +101,8 @@
       justify-content: flex-start;
 
       .material-symbols-outlined {
-        /* stylelint-disable scss/at-extend-no-missing-placeholder */
-        @extend .icon--large;
-        @extend .icon--weight-bold;
-        /* stylelint-enable scss/at-extend-no-missing-placeholder */
+        @extend %icon-large-global;
+        @extend %icon-weight-bold-global;
       }
     }
 

diff --git a/src/stories/Components/Icon/Icon.js b/src/stories/Components/Icon/Icon.js
@@ -4,10 +4,10 @@ export const createIcon = ({ name, filled = false, size = 'medium', weight = 'no
 
   icon.className = [
     'material-symbols-outlined',
-    filled ? 'icon--filled' : 'icon--outlined',
-    `icon--${size}`,
-    `icon--weight-${weight}`,
-    `icon--${emphasis}-emphasis`,
+    filled ? 'icon--filled' : '',
+    size !== 'medium' ? `icon--${size}` : '',
+    weight !== 'normal' ? `icon--weight-${weight}` : '',
+    emphasis !== 'normal' ? `icon--${emphasis}-emphasis` : '',
   ]
     .filter(Boolean)
     .join(' ')

diff --git a/src/stories/Components/Icon/Icon.mdx b/src/stories/Components/Icon/Icon.mdx
@@ -45,7 +45,7 @@ To use an icon, put an element (usually a `span`) with the class of `.material-s
 
 ### Size
 
-`.icon--medium`, `.icon--large`, `.icon--x-large` (with medium being the default) modify the size of any icon.
+`.icon--small`, `.icon--medium`, `.icon--large`, `.icon--x-large` (with medium being the default) modify the size of any icon.
 
 <Canvas of={IconStories.Large} />
 
@@ -62,3 +62,89 @@ Emphasis acts similarly to weight, but changes the thickness of the icon strokes
 `.icon--low-emphasis`, `.icon--normal-emphasis`, `.icon--high-emphasis` (with normal being the default) modify the emphasis of any icon.
 
 <Canvas of={IconStories.Emphasis} />
+
+## Icon API
+
+Each icon modifier works off of a scale for each variation. These can be overriden to change how icons scale in your application.
+
+{/* prettier-ignore-start */}
+```css
+// Public API (allowed to be overridden)
+// Weight
+--_op-icon-weight-light:
+--_op-icon-weight-normal:
+--_op-icon-weight-semi-bold:
+--_op-icon-weight-bold:
+
+// Fill
+--_op-icon-fill-outlined:
+--_op-icon-fill-filled:
+
+// Emphasis
+--_op-icon-emphasis-low:
+--_op-icon-emphasis-normal:
+--_op-icon-emphasis-high:
+
+// Size
+--_op-icon-font-size-small:
+--_op-icon-font-size-medium:
+--_op-icon-font-size-large:
+--_op-icon-font-size-x-large:
+--_op-icon-optical-size-small:
+--_op-icon-optical-size-medium:
+--_op-icon-optical-size-large:
+--_op-icon-optical-size-x-large:
+```
+{/* prettier-ignore-end */}
+
+## Overriding Styles
+
+The icon classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+
+Icon takes advantage of multiple selector placeholders to allow for easy overriding of styles. They can be overridden to change all icon styles:
+
+```css
+%icon-small-global {
+}
+
+%icon-medium-global {
+}
+
+%icon-large-global {
+}
+
+%icon-x-large-global {
+}
+
+%icon-weight-light-global {
+}
+
+%icon-weight-normal-global {
+}
+
+%icon-weight-semi-bold-global {
+}
+
+%icon-weight-bold-global {
+}
+
+%icon-global {
+}
+```
+
+Sometimes other components need to modify what icons look like within then. Rather than having to ensure the right size modifier class is used when using the parent component, the parent component can force the size using the size global modifiers. Examples from accordion and alert looks like:
+
+```css
+.accordion__marker {
+  @extend %icon-x-large-global;
+
+  /* ... */
+}
+
+.alert__icon {
+  @extend %icon-large-global;
+  @extend %icon-weight-bold-global;
+
+  /* ... */
+}
+```
diff --git a/src/stories/Components/Icon/Icon.stories.js b/src/stories/Components/Icon/Icon.stories.js
@@ -10,7 +10,7 @@ export default {
     filled: { control: 'boolean' },
     size: {
       control: { type: 'select' },
-      options: ['normal', 'large', 'x-large'],
+      options: ['small', 'medium', 'large', 'x-large'],
     },
     weight: {
       control: { type: 'select' },