Chore: remove styled system components (#6941)

Co-authored-by: Liu Liu <[email protected]>
Co-authored-by: llastflowers <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 4 people

.changeset/chilled-spoons-roll.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Chore/remove styled. components: deprecated UnderlineNav, ValidationAnimation, LabelGroup, Tooltip

packages/react/src/DialogV1/Dialog.test.tsx

@@ -23,7 +23,7 @@ const Component = () => {
         <div data-testid="inner">
           <Dialog.Header id="header">Title</Dialog.Header>
           <div style={{padding: 'var(--stack-gap-normal)'}}>
-            <Text fontFamily="sans-serif">Some content</Text>
+            <Text style={{fontFamily: 'sans-serif'}}>Some content</Text>
           </div>
         </div>
       </Dialog>
@@ -37,7 +37,7 @@ const ClosedDialog = () => {
       <div data-testid="inner">
         <Dialog.Header id="header">Title</Dialog.Header>
         <div style={{padding: 'var(--stack-gap-normal)'}}>
-          <Text fontFamily="sans-serif">Some content</Text>
+          <Text style={{fontFamily: 'sans-serif'}}>Some content</Text>
         </div>
       </div>
     </Dialog>
@@ -51,7 +51,7 @@ const DialogWithCustomFocusRef = () => {
       <div data-testid="inner">
         <Dialog.Header id="header">Title</Dialog.Header>
         <div style={{padding: 'var(--stack-gap-normal)'}}>
-          <Text fontFamily="sans-serif">Some content</Text>
+          <Text style={{fontFamily: 'sans-serif'}}>Some content</Text>
           <button type="button" data-testid="inner-button" ref={buttonRef}>
             hi
           </button>
@@ -80,7 +80,7 @@ const DialogWithCustomFocusRefAndReturnFocusRef = () => {
         <div data-testid="inner">
           <Dialog.Header id="header">Title</Dialog.Header>
           <div style={{padding: 'var(--stack-gap-normal)'}}>
-            <Text fontFamily="sans-serif">Some content</Text>
+            <Text style={{fontFamily: 'sans-serif'}}>Some content</Text>
             <button type="button" data-testid="inner-button" ref={buttonRef}>
               hi
             </button>

packages/react/src/FormControl/FormControlLeadingVisual.tsx

@@ -1,5 +1,4 @@
 import type React from 'react'
-import {get} from '../constants'
 import type {SxProp} from '../sx'
 import {useFormControlContext} from './_FormControlContext'
 import styled from 'styled-components'
@@ -24,7 +23,7 @@ const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp & {style
 }
 
 const StyledLeadingVisual = styled.div`
-  --leadingVisual-size: ${get('fontSizes.2')};
+  --leadingVisual-size: var(--text-title-size-small);
 
   color: var(--fgColor-default);
 
@@ -42,7 +41,7 @@ const StyledLeadingVisual = styled.div`
   }
 
   &:where([data-has-caption]) {
-    --leadingVisual-size: ${get('fontSizes.4')};
+    --leadingVisual-size: var(--base-size-24);
   }
 
   ${sx}

packages/react/src/LabelGroup/LabelGroup.module.css

@@ -1,3 +1,41 @@
+.Container {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--base-size-4);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 1;
+  max-width: 100%;
+  overflow: hidden;
+
+  &:where([data-overflow='inline']) {
+    flex-wrap: wrap;
+  }
+
+  &:where([data-list]) {
+    padding-inline-start: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    list-style-type: none;
+  }
+}
+
+.ItemWrapper {
+  display: flex;
+  align-items: center;
+  /* This min-height matches the height of the expand/collapse button.
+     Without it, the labels/tokens will do a slight layout shift when expanded.
+     This is because the height of the first row will match the token sizes,
+     but the height of the second row will be the height of the collapse button.
+  */
+  min-height: 28px;
+}
+
+.ItemWrapper--hidden {
+  order: 9999;
+  pointer-events: none;
+  visibility: hidden;
+}
+
 .OverlayContainer {
   align-items: flex-start;
   display: flex;

packages/react/src/LabelGroup/LabelGroup.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import styled from 'styled-components'
 import {XIcon} from '@primer/octicons-react'
 import {getFocusableChild} from '@primer/behaviors/utils'
-import {get} from '../constants'
 import VisuallyHidden from '../_VisuallyHidden'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button, IconButton} from '../Button'
+import {clsx} from 'clsx'
 import theme from '../theme'
 import classes from './LabelGroup.module.css'
 
@@ -18,45 +17,6 @@ export type LabelGroupProps = {
   visibleChildCount?: 'auto' | number
   className?: string
 }
-
-const StyledLabelGroupContainer = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-  gap: ${get('space.1')};
-  line-height: 1;
-  max-width: 100%;
-  overflow: hidden;
-
-  &[data-overflow='inline'] {
-    flex-wrap: wrap;
-  }
-
-  &[data-list] {
-    padding-inline-start: 0;
-    margin-block-start: 0;
-    margin-block-end: 0;
-    list-style-type: none;
-  }
-`
-
-const ItemWrapper = styled.div`
-  display: flex;
-  align-items: center;
-
-  /* This min-height matches the height of the expand/collapse button.
-     Without it, the labels/tokens will do a slight layout shift when expanded.
-     This is because the height of the first row will match the token sizes,
-     but the height of the second row will be the height of the collapse button.
-  */
-  min-height: 28px;
-
-  &.ItemWrapper--hidden {
-    order: 9999;
-    pointer-events: none;
-    visibility: hidden;
-  }
-`
-
 // Calculates the width of the overlay to cover the labels/tokens and the expand button.
 const getOverlayWidth = (
   buttonClientRect: DOMRect,
@@ -151,7 +111,7 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
   children,
   visibleChildCount,
   overflowStyle = 'overlay',
-  as = 'ul',
+  as: Component = 'ul',
   className,
 }) => {
   const containerRef = React.useRef<HTMLElement>(null)
@@ -320,28 +280,30 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
     }
   }, [overflowStyle, isOverflowShown])
 
-  const isList = as === 'ul' || as === 'ol'
+  const isList = Component === 'ul' || Component === 'ol'
   const ToggleWrapper = isList ? 'li' : React.Fragment
 
+  const ItemWrapperComponent = isList ? 'li' : 'span'
+
   // If truncation is enabled, we need to render based on truncation logic.
   return visibleChildCount ? (
-    <StyledLabelGroupContainer
+    <Component
       ref={containerRef}
       data-overflow={overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined}
       data-list={isList || undefined}
-      className={className}
-      as={as}
+      className={clsx(className, classes.Container)}
     >
       {React.Children.map(children, (child, index) => (
-        <ItemWrapper
+        <ItemWrapperComponent
           // data-index is used as an identifier we can use in the IntersectionObserver
           data-index={index}
-          className={hiddenItemIds.includes(index.toString()) ? 'ItemWrapper--hidden' : undefined}
-          as={isList ? 'li' : 'span'}
+          className={clsx(classes.ItemWrapper, {
+            [classes['ItemWrapper--hidden']]: hiddenItemIds.includes(index.toString()),
+          })}
           key={index}
         >
           {child}
-        </ItemWrapper>
+        </ItemWrapperComponent>
       ))}
       <ToggleWrapper>
         {overflowStyle === 'inline' ? (
@@ -369,15 +331,15 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
           </OverlayToggle>
         )}
       </ToggleWrapper>
-    </StyledLabelGroupContainer>
+    </Component>
   ) : (
-    <StyledLabelGroupContainer data-overflow="inline" data-list={isList || undefined} as={as} className={className}>
+    <Component data-overflow="inline" data-list={isList || undefined} className={clsx(className, classes.Container)}>
       {isList
         ? React.Children.map(children, (child, index) => {
             return <li key={index}>{child}</li>
           })
         : children}
-    </StyledLabelGroupContainer>
+    </Component>
   )
 }