Revert "Chore: remove styled system components" (#6964)

Author: francinelucca

.changeset/chilled-spoons-roll.md

@@ -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 style={{fontFamily: 'sans-serif'}}>Some content</Text>
+            <Text 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 style={{fontFamily: 'sans-serif'}}>Some content</Text>
+          <Text 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 style={{fontFamily: 'sans-serif'}}>Some content</Text>
+          <Text 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 style={{fontFamily: 'sans-serif'}}>Some content</Text>
+            <Text fontFamily="sans-serif">Some content</Text>
             <button type="button" data-testid="inner-button" ref={buttonRef}>
               hi
             </button>

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

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

packages/react/src/FormControl/FormControlLeadingVisual.tsx

@@ -1,41 +1,3 @@
-.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.module.css

@@ -1,10 +1,11 @@
 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'
 
@@ -17,6 +18,45 @@ 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,
@@ -111,7 +151,7 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
   children,
   visibleChildCount,
   overflowStyle = 'overlay',
-  as: Component = 'ul',
+  as = 'ul',
   className,
 }) => {
   const containerRef = React.useRef<HTMLElement>(null)
@@ -280,30 +320,28 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
     }
   }, [overflowStyle, isOverflowShown])
 
-  const isList = Component === 'ul' || Component === 'ol'
+  const isList = as === 'ul' || as === '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 ? (
-    <Component
+    <StyledLabelGroupContainer
       ref={containerRef}
       data-overflow={overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined}
       data-list={isList || undefined}
-      className={clsx(className, classes.Container)}
+      className={className}
+      as={as}
     >
       {React.Children.map(children, (child, index) => (
-        <ItemWrapperComponent
+        <ItemWrapper
           // data-index is used as an identifier we can use in the IntersectionObserver
           data-index={index}
-          className={clsx(classes.ItemWrapper, {
-            [classes['ItemWrapper--hidden']]: hiddenItemIds.includes(index.toString()),
-          })}
+          className={hiddenItemIds.includes(index.toString()) ? 'ItemWrapper--hidden' : undefined}
+          as={isList ? 'li' : 'span'}
           key={index}
         >
           {child}
-        </ItemWrapperComponent>
+        </ItemWrapper>
       ))}
       <ToggleWrapper>
         {overflowStyle === 'inline' ? (
@@ -331,15 +369,15 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
           </OverlayToggle>
         )}
       </ToggleWrapper>
-    </Component>
+    </StyledLabelGroupContainer>
   ) : (
-    <Component data-overflow="inline" data-list={isList || undefined} className={clsx(className, classes.Container)}>
+    <StyledLabelGroupContainer data-overflow="inline" data-list={isList || undefined} as={as} className={className}>
       {isList
         ? React.Children.map(children, (child, index) => {
             return <li key={index}>{child}</li>
           })
         : children}
-    </Component>
+    </StyledLabelGroupContainer>
   )
 }