chore!: update styled-components to 6 & update DS to 2.0.0-beta.3

docs/docs/docs/01-core/content-manager/hooks/use-drag-and-drop.mdx

@@ -53,7 +53,7 @@ const MyComponent = ({ onMoveItem }) => {
       ) : (
         <Flex ref={composedRefs} data-handler-id={handlerId}>
           <IconButton
-            forwardedAs="div"
+            tag="div"
             role="button"
             tabIndex={0}
             aria-label="Drag"
@@ -99,7 +99,7 @@ const MyComponent = ({ onDropItem }) => {
       {isOverDropTarget && <Placeholder direction={direction} />}
       <Flex ref={composedRefs} data-handler-id={handlerId}>
         <IconButton
-          forwardedAs="div"
+          tag="div"
           role="button"
           tabIndex={0}
           aria-label="Drag"
@@ -153,7 +153,7 @@ const MyComponent = ({ onMoveItem }) => {
       ) : (
         <Flex ref={composedRefs} data-handler-id={handlerId}>
           <IconButton
-            forwardedAs="div"
+            tag="div"
             role="button"
             tabIndex={0}
             aria-label="Drag"
@@ -252,7 +252,7 @@ You might notice in the [basic usage](#basic-usage) section this piece of code:
 
 ```jsx
 <IconButton
-  forwardedAs="div"
+  tag="div"
   role="button"
   tabIndex={0}
   aria-label="Drag"

examples/getstarted/package.json

@@ -13,7 +13,7 @@
     "strapi": "strapi"
   },
   "dependencies": {
-    "@strapi/icons": "2.0.0-beta.2",
+    "@strapi/icons": "2.0.0-beta.3",
     "@strapi/plugin-color-picker": "5.0.0-beta.6",
     "@strapi/plugin-documentation": "5.0.0-beta.6",
     "@strapi/plugin-graphql": "5.0.0-beta.6",
@@ -33,7 +33,7 @@
     "react-intl": "6.6.2",
     "react-router-dom": "6.22.3",
     "strapi-plugin-workspace-plugin": "workspace:*",
-    "styled-components": "5.3.11"
+    "styled-components": "6.1.8"
   },
   "engines": {
     "node": ">=18.0.0 <=20.x.x",

examples/getstarted/src/plugins/local-plugin/admin/src/index.js

@@ -1,5 +1,6 @@
+import { PuzzlePiece } from '@strapi/icons';
+
 import { prefixPluginTranslations } from './utils/prefixPluginTranslations';
-import PluginIcon from './components/PluginIcon';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 
@@ -9,7 +10,7 @@ export default {
   register(app) {
     app.addMenuLink({
       to: `plugins/${pluginId}`,
-      icon: PluginIcon,
+      icon: PuzzlePiece,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'My plugin',
@@ -57,7 +58,7 @@ export default {
           defaultMessage: `custom${upcasedType}`,
         },
         components: {
-          Input: async () => import('./components/PluginIcon'),
+          Input: PuzzlePiece,
         },
       };
 

examples/kitchensink-ts/package.json

@@ -20,7 +20,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "6.22.3",
-    "styled-components": "5.3.11"
+    "styled-components": "6.1.8"
   },
   "engines": {
     "node": ">=18.0.0 <=20.x.x",

examples/kitchensink/package.json

@@ -25,7 +25,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "6.22.3",
-    "styled-components": "5.3.11"
+    "styled-components": "6.1.8"
   },
   "engines": {
     "node": ">=18.0.0 <=20.x.x",

examples/plugins/workspace-plugin/admin/src/index.js

@@ -1,4 +1,5 @@
-import PluginIcon from './components/PluginIcon';
+import { PuzzlePiece } from '@strapi/icons';
+
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 
@@ -8,7 +9,7 @@ export default {
   register(app) {
     app.addMenuLink({
       to: `/plugins/${pluginId}`,
-      icon: PluginIcon,
+      icon: PuzzlePiece,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'My plugin',

packages/core/admin/admin/src/components/ContentBox.tsx

@@ -1,5 +1,11 @@
-import { Flex, FlexProps, Typography } from '@strapi/design-system';
-import styled from 'styled-components';
+import {
+  Flex,
+  FlexComponent,
+  FlexProps,
+  Typography,
+  TypographyComponent,
+} from '@strapi/design-system';
+import { styled } from 'styled-components';
 
 interface ContentBoxProps {
   title?: string;
@@ -40,7 +46,7 @@ const ContentBox = ({
   );
 };
 
-const IconWrapper = styled(Flex)`
+const IconWrapper = styled<FlexComponent>(Flex)`
   margin-right: ${({ theme }) => theme.spaces[6]};
 
   svg {
@@ -49,7 +55,8 @@ const IconWrapper = styled(Flex)`
   }
 `;
 
-const TypographyWordBreak = styled(Typography)`
+const TypographyWordBreak = styled<TypographyComponent>(Typography)`
+  color: ${({ theme }) => theme.colors.neutral800};
   word-break: break-all;
 `;
 

packages/core/admin/admin/src/components/ErrorElement.tsx

@@ -1,8 +1,16 @@
-import { Alert, Button, Flex, Main, Typography, Link } from '@strapi/design-system';
+import {
+  Alert,
+  Button,
+  Flex,
+  Main,
+  Typography,
+  Link,
+  TypographyComponent,
+} from '@strapi/design-system';
 import { Duplicate, WarningCircle } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useRouteError } from 'react-router-dom';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { useClipboard } from '../hooks/useClipboard';
 
@@ -98,7 +106,7 @@ const StyledAlert = styled(Alert)`
   }
 `;
 
-const ErrorType = styled(Typography)`
+const ErrorType = styled<TypographyComponent>(Typography)`
   word-break: break-all;
   color: ${({ theme }) => theme.colors.danger600};
 `;

packages/core/admin/admin/src/components/Form.tsx

@@ -738,7 +738,7 @@ const Blocker = ({ onProceed = () => {}, onCancel = () => {} }: BlockerProps) =>
         <DialogBody>
           <Flex direction="column" gap={2}>
             <WarningCircle width="24px" height="24px" fill="danger600" />
-            <Typography as="p" variant="omega" textAlign="center">
+            <Typography tag="p" variant="omega" textAlign="center">
               {formatMessage({
                 id: 'global.prompt.unsaved',
                 defaultMessage: 'You have unsaved changes, are you sure you want to leave?',

packages/core/admin/admin/src/components/FormInputs/Boolean.tsx

@@ -1,45 +1,43 @@
 import { forwardRef } from 'react';
 
-import { ToggleInput, useComposedRefs } from '@strapi/design-system';
+import { Toggle, useComposedRefs, Field } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 import { useFocusInputField } from '../../hooks/useFocusInputField';
 import { useField } from '../Form';
 
 import { InputProps } from './types';
 
-const BooleanInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const { formatMessage } = useIntl();
-  const field = useField<boolean | null>(props.name);
-  const fieldRef = useFocusInputField(props.name);
+const BooleanInput = forwardRef<HTMLInputElement, InputProps>(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const { formatMessage } = useIntl();
+    const field = useField<boolean | null>(name);
+    const fieldRef = useFocusInputField<HTMLInputElement>(name);
 
-  const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);
+    const composedRefs = useComposedRefs(ref, fieldRef);
 
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    <ToggleInput
-      ref={composedRefs}
-      checked={field.value === null ? null : field.value || false}
-      error={field.error}
-      /**
-       * TODO: reintroduce labelActions
-       */
-      // labelAction={labelAction}
-      offLabel={formatMessage({
-        id: 'app.components.ToggleCheckbox.off-label',
-        defaultMessage: 'False',
-      })}
-      onLabel={formatMessage({
-        id: 'app.components.ToggleCheckbox.on-label',
-        defaultMessage: 'True',
-      })}
-      onChange={field.onChange}
-      onClear={() => {
-        field.onChange(props.name, null);
-      }}
-      {...props}
-    />
-  );
-});
+    return (
+      <Field.Root error={field.error} name={name} hint={hint} required={required} maxWidth="320px">
+        <Field.Label action={labelAction}>{label}</Field.Label>
+        <Toggle
+          ref={composedRefs}
+          checked={field.value === null ? null : field.value || false}
+          offLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.off-label',
+            defaultMessage: 'False',
+          })}
+          onLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.on-label',
+            defaultMessage: 'True',
+          })}
+          onChange={field.onChange}
+          {...props}
+        />
+        <Field.Hint />
+        <Field.Error />
+      </Field.Root>
+    );
+  }
+);
 
 export { BooleanInput };

packages/core/admin/admin/src/components/FormInputs/Checkbox.tsx

@@ -1,28 +1,34 @@
 import { forwardRef } from 'react';
 
-import { Checkbox, useComposedRefs } from '@strapi/design-system';
+import { Checkbox, useComposedRefs, Field } from '@strapi/design-system';
 
 import { useFocusInputField } from '../../hooks/useFocusInputField';
 import { useField } from '../Form';
 
 import { InputProps } from './types';
 
-const CheckboxInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const field = useField<boolean>(props.name);
-  const fieldRef = useFocusInputField(props.name);
+const CheckboxInput = forwardRef<HTMLInputElement, InputProps>(
+  ({ name, required, label, hint, ...props }, ref) => {
+    const field = useField<boolean>(name);
+    const fieldRef = useFocusInputField<HTMLInputElement>(name);
 
-  const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);
+    const composedRefs = useComposedRefs(ref, fieldRef);
 
-  return (
-    <Checkbox
-      onValueChange={(checked) => field.onChange(props.name, checked)}
-      ref={composedRefs}
-      value={field.value}
-      {...props}
-    >
-      {props.label || props['aria-label']}
-    </Checkbox>
-  );
-});
+    return (
+      <Field.Root error={field.error} name={name} hint={hint} required={required}>
+        <Checkbox
+          onValueChange={(checked) => field.onChange(name, checked)}
+          ref={composedRefs}
+          value={field.value}
+          {...props}
+        >
+          {label || props['aria-label']}
+        </Checkbox>
+        <Field.Hint />
+        <Field.Error />
+      </Field.Root>
+    );
+  }
+);
 
 export { CheckboxInput };