refactor: Icon with appearance

Replace the size prop with appearance. "size" only set size whereas
"appearance" also sets a value for `--nl-icon-inset-block-start` that
center aligns icons with text inline.

Add dummy SVG icons, circle, square, and diamond that are "edge-to-edge"
icons as well as "inset" versions that are inset by 2 in their
viewBoxes.

Replace all stories that used "size" with their "appearance"
counterparts.

Author: matijs

packages/components-css/icon-css/src/_mixin.scss

@@ -1,11 +1,9 @@
 @mixin nl-icon {
-  // Default to 1lh × 1lh
-  --_nl-icon-block-size: 1lh;
-  --_nl-icon-inline-size: 1lh;
+  // Default to 1em × 1em
+  --_nl-icon-block-size: 1em;
+  --_nl-icon-inline-size: 1em;
 
   align-items: center;
-
-  // background-color: color-mix(in srgb, tomato 25%, transparent);
   block-size: var(--nl-icon-block-size, var(--_nl-icon-block-size));
   color: var(--nl-icon-color, currentcolor);
   display: inline-flex;
@@ -24,22 +22,32 @@
   color: currentColor;
 }
 
+// The icon takes on the size of capital letters of the current font-family
+@mixin nl-icon--cap {
+  --nl-icon-block-size: 1cap;
+  --nl-icon-inline-size: 1cap;
+  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
+}
+
 // The icon takes on the size of the current font-size
-@mixin nl-icon--size-em {
+@mixin nl-icon--em {
   --nl-icon-block-size: 1em;
   --nl-icon-inline-size: 1em;
+  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
 }
 
 // The icon takes on the size of the x-height of the current font-family
-@mixin nl-icon--size-ex {
+@mixin nl-icon--ex {
   --nl-icon-block-size: 1ex;
   --nl-icon-inline-size: 1ex;
+  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
 }
 
 // The icon takes on the size of the current line-height
-@mixin nl-icon--size-lh {
+@mixin nl-icon--lh {
   --nl-icon-block-size: 1lh;
   --nl-icon-inline-size: 1lh;
+  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
 }
 
 @mixin nl-icon--bidi-mirrored {

packages/components-css/icon-css/src/icon.scss

@@ -10,16 +10,20 @@
   }
 }
 
-.nl-icon--size-em {
-  @include mixin.nl-icon--size-em;
+.nl-icon--cap {
+  @include mixin.nl-icon--cap;
 }
 
-.nl-icon--size-ex {
-  @include mixin.nl-icon--size-ex;
+.nl-icon--em {
+  @include mixin.nl-icon--em;
 }
 
-.nl-icon--size-lh {
-  @include mixin.nl-icon--size-lh;
+.nl-icon--ex {
+  @include mixin.nl-icon--ex;
+}
+
+.nl-icon--lh {
+  @include mixin.nl-icon--lh;
 }
 
 .nl-icon--bidi-mirrored:dir(rtl) {

packages/components-react/icon-react/src/icon.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
-export type IconSize = 'em' | 'ex' | 'lh';
+export type IconAppearance = 'cap' | 'em' | 'ex' | 'lh';
 
 export type IconProps = (
   | (Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-hidden' | 'aria-label' | 'aria-labelledby' | 'dir'> & {
@@ -24,20 +24,20 @@ export type IconProps = (
       role: 'img';
     })
 ) & {
+  appearance?: IconAppearance;
   /**
    * If `true` flips the icon horizontally in right-to-left layouts.
    * This is useful for directional icons like arrows or chevrons.
    */
   bidiMirrored?: boolean;
-  size?: IconSize;
 };
 
 function hasRoleImg(props: IconProps): props is Extract<IconProps, { role: 'img' }> {
   return props.role === 'img';
 }
 
 export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(props, forwardedRef) {
-  const { bidiMirrored = false, children, className, size, ...restProps } = props;
+  const { bidiMirrored = false, children, className, appearance, ...restProps } = props;
   const ariaHidden = hasRoleImg(props) ? undefined : (true as const);
 
   return (
@@ -47,9 +47,10 @@ export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(props,
         'nl-icon',
         {
           ['nl-icon--bidi-mirrored']: bidiMirrored,
-          ['nl-icon--size-em']: size === 'em',
-          ['nl-icon--size-ex']: size === 'ex',
-          ['nl-icon--size-lh']: size === 'lh',
+          ['nl-icon--cap']: appearance === 'cap',
+          ['nl-icon--em']: appearance === 'em',
+          ['nl-icon--ex']: appearance === 'ex',
+          ['nl-icon--lh']: appearance === 'lh',
         },
         className,
       )}