Update Styled Components to V6

.changeset/famous-trainers-pretend.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+chore!: default color for Typography is currentColor

.changeset/tasty-suits-sit.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+chore: Box/Flex/Grid & Typography are now all react components, they are no longer styled-components.

.changeset/tidy-eggs-sleep.md

@@ -0,0 +1,6 @@
+---
+'@strapi/design-system': major
+'@strapi/icons': major
+---
+
+chore: update to use styled-components@6

.changeset/tidy-rats-camp.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+chore: disallow use of as and instead use tag prop instead

docs/.storybook/preview.tsx

@@ -6,7 +6,7 @@ import { parse } from 'qs';
 import { DesignSystemProvider, Box, darkTheme, lightTheme, type BoxProps } from '@strapi/design-system';
 
 import { DocsContainer, Unstyled } from '@storybook/blocks';
-import styled, { DefaultTheme } from 'styled-components';
+import { styled, DefaultTheme } from 'styled-components';
 import { MARKDOWN_OVERRIDES, Markdown } from '../components/Markdown';
 
 const createCustomTheme = (theme: DefaultTheme, base: 'light' | 'dark' = 'light') => {
@@ -57,7 +57,7 @@ const Theme = ({ children, ...props }: BoxProps) => {
 
   return (
     <DesignSystemProvider locale="en" theme={isDark ? darkTheme : lightTheme}>
-      <Main as="main" background="neutral0" padding="4rem" paddingBottom="8rem" height="100%">
+      <Main tag="main" background="neutral0" padding="4rem" paddingBottom="8rem" height="100%">
         <Box maxWidth="84rem" margin="auto" height="100%" {...props}>
           {children}
         </Box>
@@ -136,6 +136,7 @@ const preview: Preview = {
           'Primitives',
           ['Overview', '*'],
           'Inputs',
+          'Components',
           'Design System',
           ['Technical Components', 'Components'],
           'Utilities',

docs/components/ColorCards.tsx

@@ -27,14 +27,14 @@ const ColorCards = () => {
   const { compare } = useCollator(locale);
 
   return (
-    <Flex as="article" alignItems="stretch" direction="column">
+    <Flex tag="article" alignItems="stretch" direction="column">
       {COLOR_CARD_NAMES.map((colorName) => {
         const colorKeys = Object.keys(allColors).filter((colorKey) => colorKey.startsWith(colorName.toLowerCase()));
 
         return (
-          <Box key={colorName} as="section">
+          <Box key={colorName} tag="section">
             <H2>{`${colorName} colors`}</H2>
-            <Grid as="ol" gap={6} gridCols={3}>
+            <Grid tag="ol" gap={6} gridCols={3}>
               {colorKeys
                 .toSorted((a, b) => compare(a, b))
                 .map((key) => (
@@ -73,9 +73,9 @@ const Card = ({ colorKey, colorName, colorShade }: CardProps) => {
   const colorRGB = `${colorRef.toRgb().r}, ${colorRef.toRgb().g}, ${colorRef.toRgb().b}`;
 
   return (
-    <Box as="article" background="neutral100" borderRadius="8px">
+    <Box tag="article" background="neutral100" borderRadius="8px">
       <Flex
-        as="dl"
+        tag="dl"
         alignItems="end"
         direction="row"
         background={colorKey}
@@ -91,7 +91,7 @@ const Card = ({ colorKey, colorName, colorShade }: CardProps) => {
         <ContrastInfo backgroundColor={colorHex} isLighter isSmall />
       </Flex>
       <Grid
-        as="dl"
+        tag="dl"
         aria-label={`Table properties for ${colorName} ${colorShade}`}
         gap={2}
         gridCols={2}
@@ -117,10 +117,10 @@ const Card = ({ colorKey, colorName, colorShade }: CardProps) => {
           },
         ].map((props) => (
           <Box key={props.label}>
-            <Typography as="dt" variant="sigma">
+            <Typography tag="dt" variant="sigma">
               {props.label}
             </Typography>
-            <Typography as="dd" variant="pi">
+            <Typography tag="dd" variant="pi">
               {props.content}
             </Typography>
           </Box>
@@ -142,15 +142,15 @@ const ContrastInfo = ({ backgroundColor = '', isLighter = false, isSmall = false
   return (
     <Flex alignItems="stretch" direction="column" flex={1} textAlign="center">
       <Box
-        as="dt"
+        tag="dt"
         aria-label={`${isSmall ? 'Small' : 'Large'} font and ${isLighter ? 'lighter' : 'darker'} text.`}
         paddingBottom={2}
         style={{ color: textColor, fontSize: isSmall ? '12px' : '16px' }}
       >
         A
       </Box>
       <Box
-        as="dd"
+        tag="dd"
         background="neutral1000"
         borderRadius="4px"
         color="neutral0"

docs/components/DeprecationNotice.tsx

@@ -9,7 +9,7 @@ interface DeprecationNoticeProps {
 
 const DeprecationNotice = ({ children, href }: DeprecationNoticeProps) => (
   <Flex padding={5} background="danger500" justifyContent="center" marginTop={4} marginBottom={4} hasRadius>
-    <Typography fontSize={4} fontWeight="bold" as="p">
+    <Typography fontSize={4} fontWeight="bold" tag="p">
       ⛔️
       <strong>
         {' This component has been deprecated. Please use '}

docs/components/Image.tsx

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 interface ImageProps extends ComponentPropsWithoutRef<'img'> {}
 

docs/components/Markdown.tsx

@@ -1,6 +1,6 @@
 import { Markdown as MarkdownImpl } from '@storybook/blocks';
 import { BaseLink } from '@strapi/design-system';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 import { DeprecationNotice } from './DeprecationNotice';
 import { Image } from './Image';

docs/components/Typescale.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@strapi/design-system';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 const TEXT_VARIANTS = ['alpha', 'beta', 'delta', 'epsilon', 'omega', 'pi', 'sigma'] as const;
 

docs/components/Typography.tsx

@@ -1,31 +1,41 @@
-import { Typography, TypographyProps } from '@strapi/design-system';
-import styled, { css } from 'styled-components';
+import { Typography, TypographyComponent, TypographyProps } from '@strapi/design-system';
+import { styled, css } from 'styled-components';
 
 const H1 = (props: TypographyProps) => (
-  <Typography as="h1" variant="alpha" textColor="neutral800" marginBottom="0.5em" {...props} />
+  <Typography {...props} tag="h1" variant="alpha" textColor="neutral800" marginBottom="0.5em" />
 );
 
 const H2 = (props: TypographyProps) => (
-  <Typography as="h2" variant="beta" textColor="neutral800" marginBottom="1em" marginTop="2em" {...props} />
+  <Typography {...props} tag="h2" variant="beta" textColor="neutral800" marginBottom="1em" marginTop="2em" />
 );
 
 const H3 = (props: TypographyProps) => (
-  <Typography as="h3" variant="delta" textColor="neutral800" marginBottom="1em" marginTop="1.4em" {...props} />
+  <Typography
+    {...props}
+    tag="h3"
+    variant="delta"
+    textColor="neutral800"
+    marginBottom="1em"
+    marginTop="1.4em"
+    fontSize={4}
+  />
 );
 
 const H4 = (props: TypographyProps) => (
   <Typography
-    as="h4"
+    {...props}
+    tag="h4"
     variant="epsilon"
     textColor="neutral800"
     marginBottom="1em"
     marginTop="1.4em"
-    fontWeight="bold"
-    {...props}
+    fontWeight="semiBold"
   />
 );
 
-const P = (props: TypographyProps) => <Paragraph as="p" variant="epsilon" textColor="neutral700" {...props} />;
+const P = (props: TypographyProps) => (
+  <Paragraph {...props} tag="p" variant="epsilon" textColor="neutral700" fontSize={2} />
+);
 
 const codeStyles = css`
   color: ${({ theme }) => theme.colors.neutral700};
@@ -34,7 +44,7 @@ const codeStyles = css`
   padding: 0.6rem;
 `;
 
-const Paragraph = styled(Typography)`
+const Paragraph = styled<TypographyComponent<'p'>>(Typography)`
   & code {
     ${codeStyles}
   }
@@ -44,7 +54,7 @@ const Paragraph = styled(Typography)`
   }
 `;
 
-const Li = (props: TypographyProps) => <ListItem as="li" variant="epsilon" textColor="neutral700" {...props} />;
+const Li = (props: TypographyProps) => <ListItem tag="li" variant="epsilon" textColor="neutral700" {...props} />;
 
 const ListItem = styled(Typography)`
   & code {

docs/package.json

@@ -14,7 +14,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "storybook-dark-mode": "^3.0.3",
-    "styled-components": "^5.3.11"
+    "styled-components": "6.1.8"
   },
   "devDependencies": {
     "@storybook/blocks": "^7.6.17",

docs/stories/Accordion.mdx

@@ -36,19 +36,6 @@ import { Accordion, AccordionToggle, AccordionContent, AccordionGroup } from '@s
 
 <Canvas of={AccordionStories.Group} />
 
-## Accordion keyboard navigable
-
-The accordion component has two main states: collapsed and expanded. By default it has a collapsed state. If
-Call-to-actions are required, use them on the right side and use chevron icon on the left one.
-
-<Canvas of={AccordionStories.Keyboard} />
-
-## Accordion expanded
-
-The Accordion component can also be open by default using the parameter `expanded={true}`.
-
-<Canvas of={AccordionStories.Expanded} />
-
 ## Accordion props
 
 <ArgTypes of={Accordion} />