Styled components upgrade

centrifuge-app/package.json

@@ -47,7 +47,7 @@
     "react-router": "6",
     "react-router-dom": "6",
     "recharts": "2.6.2",
-    "styled-components": "^5.3.5",
+    "styled-components": "6.1.12",
     "styled-system": "^5.1.5",
     "typescript": "~5.3.3",
     "vitest": "^1.2.1"

centrifuge-app/src/components/TextLink.tsx

@@ -31,10 +31,9 @@ export const TextLink = styled.span`
     }
   }
 `
+export const RouterTextLink = (props: any) => <TextLink as={Link} {...props} />
+export const ButtonTextLink = (props: any) => <TextLink as="button" {...props} />
 
-export const RouterTextLink = TextLink.withComponent(Link)
-
-export const ButtonTextLink = TextLink.withComponent('button')
 ButtonTextLink.defaultProps = {
   type: 'button',
 }

centrifuge-app/src/pages/IssuerPool/Investors/LiquidityPools.tsx

@@ -175,7 +175,7 @@ function PoolDomain({ poolId, domain, refetch }: { poolId: string; domain: Domai
           </ConnectionGuard>
         ) : (
           pool.tranches.map((tranche) => (
-            <a href={explorer.address(domain.trancheTokens[tranche.id])} target="_blank">
+            <a href={explorer.address(domain.trancheTokens[tranche.id])} target="_blank" rel="noreferrer">
               <Button variant="secondary" small style={{ width: '100%' }}>
                 <Shelf gap={1}>
                   <span>View {tranche.currency.symbol} token</span>

centrifuge-react/package.json

@@ -35,7 +35,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "standard-version": "^9.3.2",
-    "styled-components": "^5.3.6",
+    "styled-components": "6.1.12",
     "typescript": "~5.3.3"
   },
   "peerDependencies": {

centrifuge-react/src/components/WalletProvider/AccountButton.tsx

@@ -22,6 +22,10 @@ type AccountButtonProps = {
   multisig?: ComputedMultisig
 }
 
+const StyledText = styled(Text)`
+  display: block;
+`
+
 const Root = styled(Shelf)<{ selected: boolean }>`
   cursor: pointer;
   border: none;
@@ -138,7 +142,7 @@ export function AccountIcon({ id, theme = 'polkadot' }: { id: string; theme?: Ic
 export function AccountName({ account, proxies }: { account: WalletAccount; proxies?: Proxy[] }) {
   const utils = useCentrifugeUtils()
   return (
-    <Text as="span" variant="body2" fontWeight={300} style={{ display: 'block' }}>
+    <StyledText as="span" variant="body2" fontWeight={300}>
       {account.name && (
         <>
           <Text as="span" fontWeight={500}>
@@ -154,6 +158,6 @@ export function AccountName({ account, proxies }: { account: WalletAccount; prox
           {truncateAddress(utils.formatAddress(p.delegator))}{' '}
         </span>
       ))}
-    </Text>
+    </StyledText>
   )
 }

fabric/package.json

@@ -43,7 +43,7 @@
     "react-dom": "^18.2.0",
     "standard-version": "^9.3.2",
     "storybook": "^7.6.10",
-    "styled-components": "^5.3.6",
+    "styled-components": "6.1.12",
     "typescript": "~5.3.3"
   },
   "peerDependencies": {

fabric/src/components/Accordion/index.tsx

@@ -8,6 +8,10 @@ import { Text } from '../Text'
 export type AccordionProps = BoxProps & {
   items: { title: React.ReactNode; body: React.ReactNode }[]
 }
+interface AccordionEntryProps extends Omit<BoxProps, 'title'> {
+  title: React.ReactNode
+  body: React.ReactNode
+}
 
 const Root = styled(Box)`
   list-style: none;
@@ -33,7 +37,6 @@ const Toggle = styled(Shelf)`
 export function Accordion({ items, ...boxProps }: AccordionProps) {
   return (
     <Root
-      as="ul"
       pl={0}
       aria-label="Accordion Control Group Buttons"
       borderRadius="card"
@@ -50,12 +53,12 @@ export function Accordion({ items, ...boxProps }: AccordionProps) {
   )
 }
 
-function AccordionEntry({ title, body, ...boxProps }: AccordionProps['items'][number] & BoxProps) {
+function AccordionEntry({ title, body, ...boxProps }: AccordionEntryProps) {
   const [open, setOpen] = React.useState(false)
   const id = React.useId()
 
   return (
-    <Box as="li" borderStyle="solid" borderWidth={0} borderColor="borderPrimary" {...boxProps}>
+    <Box as="li" borderStyle="solid" borderWidth={0} borderColor="borderPrimary" {...(boxProps as any)}>
       <Toggle
         as="button"
         id={`accordion-control-${id}`}

fabric/src/components/Banner/index.tsx

@@ -1,6 +1,6 @@
 import { useModal, useOverlay } from '@react-aria/overlays'
 import * as React from 'react'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { IconX } from '../../icon'
 import { Button } from '../Button'
 import { Shelf } from '../Shelf'
@@ -14,6 +14,10 @@ type BannerProps = {
   children?: React.ReactNode
 }
 
+const StyledText = styled(Text)`
+  padding-right: 12px;
+`
+
 export function Banner({ children, title, ...props }: BannerProps) {
   const theme = useTheme()
   const ref = React.useRef<HTMLDivElement>(null)
@@ -54,9 +58,9 @@ export function Banner({ children, title, ...props }: BannerProps) {
             style={{ marginLeft: 'auto' }}
           />
         </Shelf>
-        <Text variant="body1" color={theme.colors.textInverted} style={{ paddingRight: '12px' }}>
+        <StyledText variant="body1" color={theme.colors.textInverted}>
           {children}
-        </Text>
+        </StyledText>
       </Stack>
     </Shelf>
   ) : null

fabric/src/components/Box/index.ts

@@ -69,7 +69,6 @@ interface SystemProps
     PositionProps,
     BleedProps,
     AspectProps {}
-
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface StyledBoxProps extends SystemProps {}
 

fabric/src/components/Button/WalletButton.tsx

@@ -8,6 +8,20 @@ import { Shelf } from '../Shelf'
 import { Text } from '../Text'
 import { VisualButton, VisualButtonProps } from './VisualButton'
 
+const StyledInteractiveText = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+const StyledText = styled(Text)`
+  marginleft: auto;
+`
+
+const StyledBodyText = styled(Text)<{ margin?: string | number }>`
+  margin-left: auto;
+  ${({ margin }) => margin && `margin: ${margin};`}
+`
+
 export type WalletButtonProps = Omit<
   VisualButtonProps & React.ComponentPropsWithoutRef<'button'>,
   'variant' | 'iconRight' | 'type' | 'children' | 'icon'
@@ -72,33 +86,25 @@ export function WalletButton({
         {address && alias ? (
           <Box position="relative" flex="1 1 auto">
             <Shelf position="absolute" top="0" bottom="0" left="0" width="100%" m="auto" height="30px">
-              <Text
-                fontSize={small ? 14 : 16}
-                color="textInteractive"
-                fontWeight={500}
-                style={{
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                }}
-              >
+              <StyledInteractiveText fontSize={small ? 14 : 16} color="textInteractive" fontWeight={500}>
                 {alias}
-              </Text>
+              </StyledInteractiveText>
             </Shelf>
           </Box>
         ) : (
-          <Text
+          <StyledBodyText
+            margin={address ? 0 : 'auto'}
             fontSize={small ? 14 : 16}
             color="textInteractive"
             fontWeight={500}
-            style={{ margin: address ? 0 : 'auto' }}
           >
             {displayAddress ? truncate(displayAddress) : connectLabel}
-          </Text>
+          </StyledBodyText>
         )}
         {address && balance && (
-          <Text variant="body3" color="textInteractive" style={{ marginLeft: 'auto' }}>
+          <StyledText variant="body3" color="textInteractive">
             {balance}
-          </Text>
+          </StyledText>
         )}
       </VisualButton>
     </StyledButton>

fabric/src/components/CurrencyInput/index.tsx

@@ -13,7 +13,7 @@ export type CurrencyInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement
     decimals?: number
   }
 
-const StyledMaxButton = styled(Box)`
+const StyledMaxButton = styled(Box).attrs({ as: 'button' })`
   padding: 0 8px;
   border: 0;
   border-radius: 12px;
@@ -29,7 +29,7 @@ const StyledMaxButton = styled(Box)`
   &:focus-visible {
     box-shadow: ${({ theme }) => theme.shadows.buttonPrimary};
   }
-`.withComponent('button')
+`
 
 StyledMaxButton.defaultProps = {
   type: 'button',

fabric/src/components/Divider/index.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
-import { Box } from '../Box'
+import { Box, BoxProps } from '../Box'
 
-const Hr = Box.withComponent('hr')
+const Hr = styled(Box).attrs<BoxProps>({ as: 'hr' })``
 
 export const Divider = styled(Hr)`
   margin: 0;

fabric/src/components/ImageUpload/index.tsx

@@ -70,6 +70,13 @@ const Container = styled(Grid)<{ $disabled?: boolean; $active: boolean }>`
   }
 `
 
+const StyledText = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+`
+
 export type ImageUploadProps = Omit<FileUploadProps, 'file' | 'height'> & {
   file?: File | null
   requirements?: string
@@ -227,18 +234,9 @@ export function ImageUpload({
             </Stack>
             <Stack p={2} gridArea="unit" justifySelf="stretch" style={{ visibility: fileUrl ? 'visible' : 'hidden' }}>
               <Shelf px={1} pb={1} justifyContent="space-between">
-                <Text
-                  variant="body1"
-                  color={disabled ? 'textDisabled' : 'textPrimary'}
-                  style={{
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    direction: 'rtl',
-                  }}
-                >
+                <StyledText variant="body1" color={disabled ? 'textDisabled' : 'textPrimary'}>
                   {curFile && (typeof curFile === 'string' ? curFile : curFile.name)}
-                </Text>
+                </StyledText>
                 <Flex display="flex" zIndex="3" bleedY={2} bleedX={2}>
                   {!disabled && <Button variant="tertiary" onClick={handleClear} icon={IconX} disabled={disabled} />}
                 </Flex>

fabric/src/components/InputUnit/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import styled from 'styled-components'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 
@@ -24,17 +25,9 @@ export function InputUnit({ id, label, secondaryLabel, errorMessage, inputElemen
     <IdContext.Provider value={id}>
       <Stack gap={1}>
         {label && <InputLabel disabled={disabled}>{label}</InputLabel>}
-        <Text
-          variant="body2"
-          color={disabled ? 'textDisabled' : 'textPrimary'}
-          style={{
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-          }}
-        >
+        <StyledText variant="body2" color={disabled ? 'textDisabled' : 'textPrimary'}>
           {inputElement}
-        </Text>
+        </StyledText>
         {secondaryLabel && (
           <Text variant="body3" color={disabled ? 'textDisabled' : 'textSecondary'}>
             {secondaryLabel}
@@ -48,7 +41,12 @@ export function InputUnit({ id, label, secondaryLabel, errorMessage, inputElemen
 
 export function InputLabel({ children, disabled }: { children: React.ReactNode; disabled?: boolean }) {
   return (
-    <Text variant="label2" color={disabled ? 'textDisabled' : 'textSecondary'} as="label" htmlFor={useContextId()}>
+    <Text
+      variant="label2"
+      color={disabled ? 'textDisabled' : 'textSecondary'}
+      as="label"
+      htmlFor={useContextId() as string}
+    >
       {children}
     </Text>
   )
@@ -61,3 +59,9 @@ export function InputErrorMessage({ children }: { children: React.ReactNode }) {
     </Text>
   )
 }
+
+const StyledText = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`

fabric/src/components/Pagination/Pagination.tsx

@@ -8,6 +8,10 @@ import { Text } from '../Text'
 import { usePaginationContext } from './PaginationContainer'
 import { PaginationState } from './usePagination'
 
+const StyledText = styled(Text)`
+  user-select: none;
+`
+
 const StyledButton = styled.button<{
   $active?: boolean
 }>(
@@ -96,11 +100,7 @@ export function Pagination({ pagination }: { pagination?: PaginationState }) {
           <IconChevronLeft />
         </Flex>
       </StyledButton>
-      {firstShown > 1 && (
-        <Text variant="interactive1" style={{ userSelect: 'none' }}>
-          …
-        </Text>
-      )}
+      {firstShown > 1 && <StyledText variant="interactive1">…</StyledText>}
       {pages.map((n) => (
         <StyledButton
           key={`pagr-nr-${n}`}
@@ -113,11 +113,7 @@ export function Pagination({ pagination }: { pagination?: PaginationState }) {
           </Text>
         </StyledButton>
       ))}
-      {lastShown < pageCount && (
-        <Text variant="interactive1" style={{ userSelect: 'none' }}>
-          …
-        </Text>
-      )}
+      {lastShown < pageCount && <StyledText variant="interactive1">…</StyledText>}
       <StyledButton onClick={() => goToNext()} disabled={!canNextPage} aria-label="next page">
         <Flex bleedX={1} bleedY={1}>
           <IconChevronRight />

fabric/src/components/RadioButton/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
+import { DefaultTheme } from 'styled-components/dist/types'
 import { Flex } from '../Flex'
 import { Shelf } from '../Shelf'
 import { Stack } from '../Stack'
@@ -8,7 +9,7 @@ import { Text } from '../Text'
 export type RadioButtonProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: string
   errorMessage?: string
-  textStyle?: string
+  textStyle?: keyof DefaultTheme['typography']
 }
 
 export function RadioButton({ label, errorMessage, textStyle, ...radioProps }: RadioButtonProps) {

fabric/src/components/StatusChip/index.tsx

@@ -27,10 +27,10 @@ const Chip = styled(Text)((props) =>
   css({
     display: 'inline-block',
     px: 1,
-    bg: `${props.backgroundColor}Bg`,
+    bg: `${String(props.backgroundColor)}Bg`,
     borderRadius: 'chip',
     whiteSpace: 'nowrap',
-    color: `${props.color}`,
+    color: `${String(props.color)}`,
   })
 )
 

fabric/src/components/Tabs/index.tsx

@@ -8,7 +8,7 @@ import { Text } from '../Text'
 export type TabsProps = {
   selectedIndex: number
   onChange?: (index: number) => void
-  children: (React.ReactElement<TabsItemProps> | string | boolean | null | undefined)[]
+  children: (React.ReactElement<TabsItemPrivateProps> | string | boolean | null | undefined)[]
 }
 
 export function Tabs({ selectedIndex, onChange, children }: TabsProps) {