feat: Refactor External Hyperlink to use new styling utilities

modules/docs/mdx/13.0-UPGRADE-GUIDE.mdx

@@ -87,6 +87,25 @@ yarn remove @workday/canvas-kit-codemod
 > after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
 > your project conventions.
 
+## Component Updates
+
+### Styling API and CSS Tokens
+
+**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101)
+
+Several components have been refactored to use our new
+[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
+[styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
+The React interface **has not changed**, but CSS variables are now used for dynamic properties.
+
+> **Note:** These components also support our new `cs` prop for styling. Learn more about styling
+> with `cs` in our
+> [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
+
+The following components are affected:
+
+- `ExternalHyperlink`
+
 
 ### Styling API and CSS Tokens
 

modules/react/button/lib/ExternalHyperlink.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import {styled, createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {extLinkIcon} from '@workday/canvas-system-icons-web';
-import {SystemIcon, systemIconStyles} from '@workday/canvas-kit-react/icon';
-import {Hyperlink, HyperlinkProps} from './Hyperlink';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {HyperlinkProps, hyperlinkStencil} from './Hyperlink';
+import {calc, createStencil, px2rem, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ExternalHyperlinkProps extends HyperlinkProps {
   /**
@@ -12,26 +14,25 @@ export interface ExternalHyperlinkProps extends HyperlinkProps {
    */
   iconLabel?: string;
 }
+const relativeToFontSizeIconSize = '1em';
 
-const iconStyles = {
-  ...systemIconStyles({fill: 'currentColor', fillHover: 'currentColor'}),
-};
-
-const Anchor = styled(Hyperlink)<ExternalHyperlinkProps & StyledType>({
-  ...iconStyles,
-  display: 'inline-flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-});
-
-const iconSize = '1em';
-const minIconSize = '16px';
-
-const StyledSystemIcon = styled(SystemIcon)<StyledType>({
-  ...iconStyles,
-  width: `calc(${iconSize} - 1px)`,
-  minWidth: `calc(${minIconSize} - 1px)`,
-  marginLeft: '2px',
+export const externalHyperlinkStencil = createStencil({
+  extends: hyperlinkStencil,
+  base: {
+    display: 'inline-flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    '& [data-part="external-hyperlink-icon"]': {
+      [systemIconStencil.vars.color]: 'currentColor',
+      width: calc.subtract(relativeToFontSizeIconSize, px2rem(1)),
+      minWidth: calc.subtract(system.space.x4, px2rem(1)),
+      marginInlineStart: calc.subtract(system.space.x1, px2rem(2)),
+      '& > svg': {
+        minWidth: system.space.x4,
+        minHeight: system.space.x4,
+      },
+    },
+  },
 });
 
 /**
@@ -41,18 +42,29 @@ const StyledSystemIcon = styled(SystemIcon)<StyledType>({
 export const ExternalHyperlink = createComponent('a')({
   displayName: 'ExternalHyperlink',
   Component: (
-    {children, iconLabel = 'Opens link in new window', ...elemProps}: ExternalHyperlinkProps,
-    ref
+    {
+      children,
+      iconLabel = 'Opens link in new window',
+      variant,
+      ...elemProps
+    }: ExternalHyperlinkProps,
+    ref,
+    Element
   ) => (
-    <Anchor ref={ref} target="_blank" rel="noreferrer" {...elemProps}>
-      <span>{children}</span>
-      <StyledSystemIcon
+    <Element
+      ref={ref}
+      target="_blank"
+      rel="noreferrer"
+      {...handleCsProp(elemProps, externalHyperlinkStencil({variant}))}
+    >
+      <span data-part="external-hyperlink-children">{children}</span>
+      <SystemIcon
         icon={extLinkIcon}
         role="img"
         aria-label={iconLabel}
-        size={iconSize}
-        cs={{'& svg': {minWidth: minIconSize, minHeight: minIconSize}}}
+        data-part="external-hyperlink-icon"
+        size={relativeToFontSizeIconSize}
       />
-    </Anchor>
+    </Element>
   ),
 });

modules/react/button/lib/Hyperlink.tsx

@@ -16,7 +16,7 @@ export interface HyperlinkProps extends CSProps {
   children?: React.ReactNode;
 }
 
-const hyperlinkStencil = createStencil({
+export const hyperlinkStencil = createStencil({
   base: {
     fontFamily: system.fontFamily.default,
     textDecoration: 'underline',

modules/react/combobox/lib/hooks/useComboboxInputConstrained.ts

@@ -141,6 +141,7 @@ export const useComboboxInputConstrained = createElemPropsHook(useComboboxModel)
         model.onFilterChange?.(event);
         return null; // Prevent further `onChange` callbacks from firing
       },
+
       name: null,
       disabled,
       /**