chore: remove text-icon selector and remove deprecation warnings on typography (#4235)

* refactor(eds-core-react): remove text-icon className from variables

* chore(eds-core-react): remove deprecated Typography component documentation and references

* fix(eds-core-react): add typography link stories

Author: torleifhalseth

packages/eds-core-react/src/components/Typography/Typography.docs.mdx

@@ -6,27 +6,6 @@ import * as ComponentStories from './Typography.stories'
 
 # Typography
 
-## ⚠️ Deprecated
-
-**This component is deprecated and will be removed in a future version.**
-
-
-### The next-generation typography system is now available:
-
-* **For headings**: Use `<Heading as="h1|h2|h3|h4|h5|h6">` instead of `<Typography variant="h1|h2|h3|h4|h5|h6">`
-* **For paragraphs**: Use `<Paragraph>` instead of `<Typography variant="body_short|body_long">`
-* **For inline text**: Use `<TypographyNext as Typography>` for flexible text styling with full typography control
-
-```tsx
-import { TypographyNext as Typography, Heading, Paragraph } from '@equinor/eds-core-react'
-
-<Heading as="h1">Welcome</Heading>
-<Paragraph>This uses the new typography system.</Paragraph>
-<Typography family="ui" size="md" lineHeight="default" baseline="grid" weight="normal" tracking="normal">
-  Flexible inline text
-</Typography>
-```
-
 Presents hierarchy and organises information as clearly and efficiently as possible,
 therefore text sizes and styles were developed to balance content density and reading comfort.
 

packages/eds-core-react/src/components/Typography/Typography.new.stories.tsx

@@ -90,102 +90,6 @@ Playground.parameters = {
   },
 }
 
-export const WithIcons: StoryFn = () => {
-  const iconTextStyle: React.CSSProperties = {
-    display: 'grid',
-    gridAutoFlow: 'column',
-    gap: 'round(0.618em, 0.5px)',
-    placeItems: 'center start',
-    width: 'fit-content',
-  }
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <TypographyNext
-        family="ui"
-        size="xs"
-        baseline="grid"
-        style={iconTextStyle}
-      >
-        <Icon name="save" className="eds-typography-text-icon" /> Extra small
-        text with icon
-      </TypographyNext>
-      <TypographyNext
-        family="ui"
-        size="sm"
-        baseline="grid"
-        style={iconTextStyle}
-      >
-        <Icon name="save" className="eds-typography-text-icon" /> Small text
-        with icon
-      </TypographyNext>
-      <TypographyNext
-        family="ui"
-        size="md"
-        baseline="grid"
-        style={iconTextStyle}
-      >
-        <Icon name="save" className="eds-typography-text-icon" /> Medium text
-        with icon
-      </TypographyNext>
-      <TypographyNext
-        family="ui"
-        size="lg"
-        baseline="grid"
-        style={iconTextStyle}
-      >
-        <Icon name="save" className="eds-typography-text-icon" /> Large text
-        with icon
-      </TypographyNext>
-      <TypographyNext
-        family="ui"
-        size="xl"
-        baseline="grid"
-        style={iconTextStyle}
-      >
-        <Icon name="save" className="eds-typography-text-icon" /> Extra large
-        text with icon
-      </TypographyNext>
-      <TypographyNext
-        family="ui"
-        size="2xl"
-        baseline="grid"
-        style={iconTextStyle}
-      >
-        <Icon name="save" className="eds-typography-text-icon" /> 2XL heading
-        text with icon
-      </TypographyNext>
-      <TypographyNext
-        family="ui"
-        size="3xl"
-        baseline="grid"
-        style={iconTextStyle}
-      >
-        <Icon name="save" className="eds-typography-text-icon" /> 3XL heading
-        text with icon
-      </TypographyNext>
-      <TypographyNext
-        family="ui"
-        size="4xl"
-        baseline="grid"
-        style={iconTextStyle}
-      >
-        <Icon name="save" className="eds-typography-text-icon" /> 4XL heading
-        text with icon
-      </TypographyNext>
-    </div>
-  )
-}
-
-WithIcons.parameters = {
-  docs: {
-    description: {
-      story:
-        "Icons can be used alongside TypographyNext by applying the `.eds-typography-text-icon` class. The icon will automatically adapt its size based on the typography component's font-size using CSS custom properties. The icon scales proportionally with the text size.",
-    },
-  },
-}
-
 export const AsLink: StoryFn = () => {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>

packages/eds-core-react/src/components/Typography/Typography.stories.shared.tsx

@@ -1,4 +1,3 @@
-import { Icon } from '../Icon'
 import { Heading } from './Heading'
 import { Paragraph } from './Paragraph'
 import { TypographyNext } from './Typography.new'
@@ -303,25 +302,6 @@ export const LineHeightComparison = ({
   </>
 )
 
-export const IconTextRow = ({
-  label,
-  size,
-  text = 'Save your work',
-  iconName = 'save',
-}: {
-  label: string
-  size: (typeof SIZES)[number]
-  text?: string
-  iconName?: string
-}) => (
-  <ComparisonRowItem label={label}>
-    <IconTextContainer className={`font-ui text-${size}`}>
-      <Icon name={iconName} className="eds-typography-text-icon" />
-      <span className="text-baseline-center">{text}</span>
-    </IconTextContainer>
-  </ComparisonRowItem>
-)
-
 export const ButtonRow = ({
   label,
   size,

packages/eds-core-react/src/components/Typography/Typography.stories.tsx

@@ -15,7 +15,6 @@ const SBCard = styled(Card)`
 const meta: Meta<typeof Typography> = {
   title: 'Typography/Typography',
   component: Typography,
-  tags: ['deprecated'],
   argTypes: {
     variant: { control: { type: null } },
     group: { control: { type: null } },
@@ -38,10 +37,6 @@ const meta: Meta<typeof Typography> = {
         excludeDecorators: true,
       },
     },
-    status: {
-      type: 'deprecated',
-    },
-    badges: ['deprecated'],
   },
   decorators: [
     (Story) => {

packages/eds-core-react/src/components/Typography/Typography.tsx

@@ -9,7 +9,6 @@ import {
   typographyTemplate,
   outlineTemplate,
   OverridableComponent,
-  useDeprecationWarning,
 } from '@equinor/eds-utils'
 import {
   quickVariants,
@@ -129,19 +128,6 @@ export type TypographyProps = {
   lines?: number
 } & (HTMLAttributes<HTMLElement> | AnchorHTMLAttributes<HTMLAnchorElement>)
 
-/**
- * @deprecated Typography component is deprecated and will be removed in a future version.
- * Please use the new Typography, Heading, or Paragraph components instead.
- *
- * Migration guide:
- * - For headings: Use `<Heading as="h1|h2|h3|h4|h5|h6">` instead of `<Typography variant="h1|h2|h3|h4|h5|h6">`
- * - For paragraphs: Use `<Paragraph>` instead of `<Typography variant="body_short|body_long">`
- * - For inline text: Use `<Typography>` for more flexible text styling
- *
- * @see {@link TypographyNext}
- * @see {@link Heading}
- * @see {@link Paragraph}
- */
 export const Typography: OverridableComponent<TypographyProps, HTMLElement> =
   forwardRef(function Typography(
     {
@@ -159,13 +145,6 @@ export const Typography: OverridableComponent<TypographyProps, HTMLElement> =
     },
     ref,
   ) {
-    useDeprecationWarning(
-      'The Typography component is deprecated and will be removed in a future version. ' +
-        'Please migrate to the new TypographyNext, Heading, or Paragraph component. ' +
-        'See the documentation for migration details.',
-      'Typography',
-    )
-
     const as: ElementType = providedAs
       ? providedAs
       : getElementType(variant, link)

packages/eds-tokens/README.md

@@ -142,7 +142,6 @@ const darkSurface = darkSemanticNested.bg.neutral.surface // "#262626"
   * Font weight data attributes (`[data-font-weight='lighter']`, `[data-font-weight='normal']`, `[data-font-weight='bolder']`)
   * Letter spacing data attributes (`[data-tracking='tight']`, `[data-tracking='normal']`, `[data-tracking='wide']`)
   * Baseline grid alignment (`[data-baseline='grid']`, `[data-baseline='center']`)
-  * Icon sizing utilities (`.eds-typography-text-icon`)
 
 
 #### Using Typography variables

packages/eds-tokens/build/css/typography.css

@@ -1,12 +1,12 @@
 /*
  * Registered custom property for font-size values
  * 
- * This @property declaration registers --font-size as a typed CSS custom property,
+ * This @property declaration registers --eds-typography-font-size as a typed CSS custom property,
  * enabling proper unit handling in calc() expressions. This is essential for the
- * .eds-typography-text-icon sizing calculations, which use tan(atan2(var(--font-size), 1px)) to
+ * text-icon sizing calculations, which use tan(atan2(var(--eds-typography-font-size), 1px)) to
  * extract the numeric value from the font-size for proportional icon scaling.
  * 
- * Without this registration, the browser would treat --font-size as an untyped string,
+ * Without this registration, the browser would treat --eds-typography-font-size as an untyped string,
  * preventing the mathematical operations needed for responsive icon sizing based on
  * the current text size.
  */
@@ -485,12 +485,3 @@
     padding-bottom: calc((round(1cap, 4px) - 1ex) / 2 - (1cap - 1ex) / 2);
   }
 }
-
-/* Icon sizing within text elements - adjusts based on font-size */
-.eds-typography-text-icon {
-  width: calc(24px * tan(atan2(var(--eds-typography-font-size), 1px)) / 16);
-  height: auto;
-  font-size: calc(24px * tan(atan2(var(--eds-typography-font-size), 1px)) / 16);
-  margin-block: -0.5em;
-  margin-inline: -0.2em;
-}

packages/eds-tokens/build/css/variables.css

@@ -1268,11 +1268,3 @@
     padding-bottom: calc(round(1cap, 4px) / 2 - .5cap);
   }
 }
-
-.eds-typography-text-icon {
-  width: calc(24px * tan(atan2(var(--eds-typography-font-size), 1px)) / 16);
-  height: auto;
-  font-size: calc(24px * tan(atan2(var(--eds-typography-font-size), 1px)) / 16);
-  margin-block: -.5em;
-  margin-inline: -.2em;
-}

packages/eds-tokens/build/css/variables.min.css

@@ -1,12 +1,12 @@
 /*
  * Registered custom property for font-size values
  * 
- * This @property declaration registers --font-size as a typed CSS custom property,
+ * This @property declaration registers --eds-typography-font-size as a typed CSS custom property,
  * enabling proper unit handling in calc() expressions. This is essential for the
- * .eds-typography-text-icon sizing calculations, which use tan(atan2(var(--font-size), 1px)) to
+ * text-icon sizing calculations, which use tan(atan2(var(--eds-typography-font-size), 1px)) to
  * extract the numeric value from the font-size for proportional icon scaling.
  * 
- * Without this registration, the browser would treat --font-size as an untyped string,
+ * Without this registration, the browser would treat --eds-typography-font-size as an untyped string,
  * preventing the mathematical operations needed for responsive icon sizing based on
  * the current text size.
  */
@@ -485,12 +485,3 @@
     padding-bottom: calc((round(1cap, 4px) - 1ex) / 2 - (1cap - 1ex) / 2);
   }
 }
-
-/* Icon sizing within text elements - adjusts based on font-size */
-.eds-typography-text-icon {
-  width: calc(24px * tan(atan2(var(--eds-typography-font-size), 1px)) / 16);
-  height: auto;
-  font-size: calc(24px * tan(atan2(var(--eds-typography-font-size), 1px)) / 16);
-  margin-block: -0.5em;
-  margin-inline: -0.2em;
-}