feat: upgrade to styled components version 6

BREAKING CHANGE: styled-components peer dependency bumped up to v6 NDS was upgraded with [re-enabled vendor prefixes](https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default) and using a [StyleSheetManager to restore v5 behaviour for shouldForwardProp](https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default) Follow the migration guide for app upgrades to v6 https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6
nulogy · Dec 11, 2024 · f07658a · f07658a
1 parent 067c494
commit f07658a
Show file tree

Hide file tree

Showing 30 changed files with 276 additions and 317 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -24,7 +24,7 @@
       "error",
       {
         "components": ["Link"],
-        "specialLink": ["as"]
+        "specialLink": ["as", "to"]
       }
     ],
     "react/display-name": "off",

diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "@nulogy/icons": "4",
     "react": ">=16.10.2",
     "react-dom": ">=16.10.2",
-    "styled-components": "^5.1.0",
+    "styled-components": "^6.0.0",
     "typescript": "4.9.5"
   },
   "devDependencies": {
@@ -95,7 +95,6 @@
     "@types/react": "^17.0.39",
     "@types/react-datepicker": "^4.1.0",
     "@types/react-dom": "^17.0.20",
-    "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^5.30.5",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
@@ -137,7 +136,7 @@
     "semantic-release": "^17.2.1",
     "source-map-loader": "^1.0.1",
     "storybook-addon-performance": "^0.17.1",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.0.0",
     "svg-sprite-loader": "^6.0.11",
     "ts-jest": "^26.1.1",
     "typescript": "4.9.5",
@@ -146,10 +145,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.9.6",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@nulogy/tokens": "^5.4.0",
     "@reach/dialog": "0.17.0",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
+    "@types/react-router-dom": "5.3.0",
     "@types/styled-system": "5.1.22",
     "body-scroll-lock": "^3.1.5",
     "core-js": "3",
@@ -170,7 +171,8 @@
     "react-select": "^5.8.0",
     "react-windowed-select": "^5.2.0",
     "smoothscroll-polyfill": "^0.4.4",
-    "styled-system": "^5.1.4"
+    "styled-system": "^5.1.4",
+    "stylis": "^4.0.0"
   },
   "husky": {
     "hooks": {

diff --git a/src/BottomSheet/stories/BottomSheet.features.story.tsx b/src/BottomSheet/stories/BottomSheet.features.story.tsx
@@ -21,7 +21,6 @@ export default {
 
 export const WithCustomWidths = () => {
   const [isOpen, setIsOpen] = React.useState(true);
-
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open Sheet</Button>
@@ -41,7 +40,6 @@ export const WithCustomWidths = () => {
 
 export const DisableCloseOnOverlayClick = () => {
   const [isOpen, setIsOpen] = React.useState(true);
-
   return (
     <Box>
       <Button onClick={() => setIsOpen(true)}>Open Sheet</Button>
@@ -63,7 +61,6 @@ export const DisableCloseOnOverlayClick = () => {
 
 export const AdvancedUsage = () => {
   const [isOpen, setIsOpen] = React.useState(true);
-
   return (
     <>
       <ToastContainer />

diff --git a/src/BrandedNavBar/MenuTriggerButton.tsx b/src/BrandedNavBar/MenuTriggerButton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { CSSObject } from "styled-components";
+import styled from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
 import { Icon } from "../Icon";
 import { DefaultNDSThemeType } from "../theme";
@@ -11,8 +11,8 @@ type StyledButtonProps = React.ComponentPropsWithRef<"button"> & {
   theme?: DefaultNDSThemeType;
 };
 
-const StyledButton = styled.button(
-  ({ color = "white", hoverColor = "lightBlue", hoverBackground = "black", theme }: StyledButtonProps): CSSObject => ({
+const StyledButton = styled.button<StyledButtonProps>(
+  ({ color = "white", hoverColor = "lightBlue", hoverBackground = "black", theme }) => ({
     display: "flex",
     alignItems: "center",
     position: "relative",

diff --git a/src/BrandedNavBar/MobileMenu.tsx b/src/BrandedNavBar/MobileMenu.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import type { CSSObject } from "styled-components";
 import { display } from "styled-system";
-import { Text, Heading3 } from "../Type";
+import { Text } from "../Type";
 import { Flex } from "../Flex";
 import { BrandingText } from "../Branding";
 import { DropdownLink, DropdownText } from "../DropdownMenu";
@@ -204,8 +204,8 @@ type NavProps = {
   backgroundColor: string;
 };
 
-const Nav = styled.nav(
-  ({ backgroundColor }: NavProps) => ({
+const Nav = styled.nav<NavProps>(
+  ({ backgroundColor }) => ({
     backgroundColor,
   }),
   {

diff --git a/src/BrandedNavBar/SmallNavBar.tsx b/src/BrandedNavBar/SmallNavBar.tsx
@@ -43,7 +43,7 @@ type SmallHeaderProps = {
   breakpointLower?: string | number;
 };
 
-const SmallHeader = styled.header(
+const SmallHeader = styled.header<SmallHeaderProps>(
   ({ isOpen, theme }: SmallHeaderProps): CSSObject =>
     isOpen
       ? {

diff --git a/src/BrandedNavBar/SubMenuTriggerButton.tsx b/src/BrandedNavBar/SubMenuTriggerButton.tsx
@@ -1,4 +1,4 @@
-import styled, { CSSObject, StyledComponentPropsWithRef } from "styled-components";
+import styled, { CSSObject } from "styled-components";
 import React from "react";
 import { DropdownButton } from "../DropdownMenu";
 import { Icon } from "../Icon";

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -67,6 +67,14 @@ const WrapperButton = styled.button<ButtonProps>(
     },
     padding: `${subPx(theme.space.x1)} ${theme.space.x2}`,
   }),
+  variant({
+    variants: {
+      touch: {
+        fontSize: "md",
+        lineHeight: "base",
+      },
+    },
+  }),
   ({ theme }) =>
     variant({
       prop: "size",
@@ -83,14 +91,6 @@ const WrapperButton = styled.button<ButtonProps>(
         },
       },
     }),
-  variant({
-    variants: {
-      touch: {
-        fontSize: "md",
-        lineHeight: "base",
-      },
-    },
-  }),
   space
 );
 

diff --git a/src/Button/IconicButton.tsx b/src/Button/IconicButton.tsx
@@ -26,7 +26,7 @@ interface IconicButtonProps
     SpaceProps,
     Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> {}
 
-const IconWrapper = styled.span(({ theme, size }: { theme: DefaultNDSThemeType; size: string }) => ({
+const IconWrapper = styled.span<{ size: string }>(({ theme, size }) => ({
   display: "inline-flex",
   flexShrink: 0,
   alignItems: "center",

diff --git a/src/DatePicker/DatePickerStyles.ts b/src/DatePicker/DatePickerStyles.ts
@@ -1,7 +1,6 @@
 import { createGlobalStyle } from "styled-components";
-import { DefaultNDSThemeType } from "../theme";
 
-export const DatePickerStyles = createGlobalStyle<{ theme: DefaultNDSThemeType }>(({ theme }) => ({
+export const DatePickerStyles = createGlobalStyle(({ theme }) => ({
   ".nds-date-picker": {
     ".react-datepicker-wrapper": {
       width: "fit-content",
@@ -83,10 +82,9 @@ export const DatePickerStyles = createGlobalStyle<{ theme: DefaultNDSThemeType }
         cursor: "pointer",
       },
     },
-    ".react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover":
-      {
-        backgroundColor: "transparent",
-      },
+    ".react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover": {
+      backgroundColor: "transparent",
+    },
     ".react-datepicker__day-names, .react-datepicker__week": {
       whiteSpace: "nowrap",
     },

diff --git a/src/DropdownMenu/DropdownLink.tsx b/src/DropdownMenu/DropdownLink.tsx
@@ -12,10 +12,9 @@ interface Props extends React.ComponentPropsWithRef<"a">, StyledProps {
   bgHoverColor?: string;
 }
 
-const DropdownLink = styled.a.withConfig<Props>({
-  shouldForwardProp: (prop, defaultValidatorFn) =>
-    !["hoverColor", "bgHoverColor"].includes(prop) && defaultValidatorFn(prop),
-})(
+const DropdownLink = styled.a.withConfig({
+  shouldForwardProp: (prop) => !["hoverColor", "bgHoverColor"].includes(prop),
+})<Props>(
   ({ theme, color = "darkGrey", hoverColor = "darkBlue", bgHoverColor = "lightBlue" }) => ({
     color: theme.colors[color],
     fontWeight: theme.fontWeights.medium,

diff --git a/src/Modal/ModalHeader.tsx b/src/Modal/ModalHeader.tsx
@@ -1,34 +1,28 @@
-import React from "react";
-import styled, { CSSObject } from "styled-components";
+import styled from "styled-components";
 import { transparentize } from "polished";
 import { DefaultNDSThemeType } from "../theme";
 
 const getHeaderPaddingRight = (closeButtonIncluded?: boolean, theme?: DefaultNDSThemeType) =>
   closeButtonIncluded ? theme.space.x8 : theme.space.x3;
 
-type ModalHeaderProps = React.ComponentPropsWithRef<"div"> & {
+const ModalHeader = styled.div<{
   hasCloseButton?: boolean;
-  theme?: DefaultNDSThemeType;
-};
-
-const ModalHeader = styled.div(
-  ({ hasCloseButton, theme }: ModalHeaderProps): CSSObject => ({
-    position: "relative",
-    padding: `${theme.space.x2} ${getHeaderPaddingRight(hasCloseButton, theme)} ${theme.space.x2} ${theme.space.x3}`,
-    backgroundColor: transparentize(0.1, theme.colors.white),
-    zIndex: theme.zIndices.modalHeaderAndFooter,
-    borderRadius: `${theme.radii.medium} ${theme.radii.medium} 0 0`,
-    ":after": {
-      content: "''",
-      position: "absolute",
-      bottom: 0,
-      left: theme.space.x1,
-      right: theme.space.x1,
-      display: "block",
-      margin: "0 auto",
-      borderBottom: `solid 1px ${theme.colors.lightGrey}`,
-    },
-  })
-);
+}>(({ hasCloseButton, theme }) => ({
+  position: "relative",
+  padding: `${theme.space.x2} ${getHeaderPaddingRight(hasCloseButton, theme)} ${theme.space.x2} ${theme.space.x3}`,
+  backgroundColor: transparentize(0.1, theme.colors.white),
+  zIndex: theme.zIndices.modalHeaderAndFooter,
+  borderRadius: `${theme.radii.medium} ${theme.radii.medium} 0 0`,
+  ":after": {
+    content: "''",
+    position: "absolute",
+    bottom: 0,
+    left: theme.space.x1,
+    right: theme.space.x1,
+    display: "block",
+    margin: "0 auto",
+    borderBottom: `solid 1px ${theme.colors.lightGrey}`,
+  },
+}));
 
 export default ModalHeader;
diff --git a/src/NDSProvider/GlobalStyles.tsx b/src/NDSProvider/GlobalStyles.tsx
@@ -1,12 +1,8 @@
-import styled, { CSSObject } from "styled-components";
-import { DefaultNDSThemeType } from "../theme";
+import styled from "styled-components";
 
-export type GlobalStylesProps = {
-  theme?: DefaultNDSThemeType;
+const GlobalStyles = styled.div<{
   locale?: string;
-};
-
-const GlobalStyles = styled.div(({ theme, locale }: GlobalStylesProps): CSSObject => {
+}>(({ theme, locale }) => {
   const fontFamily = locale === "zh_CN" ? theme.fonts.sc : theme.fonts.base;
   return {
     color: theme.colors.black,

diff --git a/src/NDSProvider/ModalStyleOverride.tsx b/src/NDSProvider/ModalStyleOverride.tsx
@@ -1,7 +1,6 @@
 import { createGlobalStyle } from "styled-components";
-import { GlobalStylesProps } from "./GlobalStyles";
 
-const ModalStyleOverride = createGlobalStyle(({ theme, locale }: GlobalStylesProps) => {
+const ModalStyleOverride = createGlobalStyle<{ locale?: string }>(({ theme, locale }) => {
   const fontFamily = locale === "zh_CN" ? theme.fonts.sc : theme.fonts.base;
   return {
     ".ReactModal__Content, [data-reach-dialog-content]": {

diff --git a/src/Radio/RadioGroup.tsx b/src/Radio/RadioGroup.tsx
@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
-import { CSSObject, ThemeContext, useTheme } from "styled-components";
+import React, { CSSProperties, useContext } from "react";
+import { ThemeContext, useTheme } from "styled-components";
 import { HelpText, RequirementText } from "../FieldLabel";
 import { InlineValidation } from "../Validation";
 import { Fieldset } from "../Form";
@@ -50,7 +50,7 @@ export default function RadioGroup({
   );
 }
 
-const labelTextStyles = (theme: DefaultNDSThemeType): CSSObject => ({
+const labelTextStyles = (theme: DefaultNDSThemeType): CSSProperties => ({
   fontSize: theme.fontSizes.small,
   fontWeight: Number(theme.fontWeights.bold),
   lineHeight: theme.lineHeights.smallTextBase,

diff --git a/src/Select/SelectOption.tsx b/src/Select/SelectOption.tsx
@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { components, OptionProps } from "react-windowed-select";
 import { typography } from "styled-system";
 import { subPx } from "../utils";
+import { variant } from "../StyledProps";
 import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext";
-import { stylesForVariant } from "./customReactSelectStyles";
 
 type SelectOptionProps = {
   isSelected: boolean;
@@ -33,12 +33,11 @@ export const StyledOption = styled.div<SelectOptionProps>(
       },
     },
   }),
-  ({ theme, variant }) =>
-    stylesForVariant(
-      {
+  ({ theme }) =>
+    variant({
+      variants: {
         touch: {
           div: {
-            // padding: subPx(theme.space.x2),
             padding: subPx(theme.space.x1),
           },
         },
@@ -48,8 +47,7 @@ export const StyledOption = styled.div<SelectOptionProps>(
           },
         },
       },
-      variant
-    )
+    })
 );
 
 interface CustomOptionProps extends OptionProps {

diff --git a/src/Select/customReactSelectStyles.tsx b/src/Select/customReactSelectStyles.tsx
@@ -1,5 +1,4 @@
 import { transparentize } from "polished";
-import type { CSSObject } from "styled-components";
 import type { GroupBase, MenuPlacement, StylesConfig } from "react-select";
 import type { CSSProperties } from "react";
 import type { DefaultNDSThemeType } from "../theme";
@@ -74,7 +73,7 @@ export function getMenuBorderRadius({
 }
 
 type VariantConfig = {
-  [key in ComponentVariant]?: CSSObject;
+  [key in ComponentVariant]?: CSSProperties;
 };
 
 export function stylesForVariant(config: VariantConfig, variant: ComponentVariant = "desktop") {

diff --git a/src/Toggle/ToggleButton.tsx b/src/Toggle/ToggleButton.tsx
@@ -105,21 +105,19 @@ const Slider: React.FC<React.PropsWithChildren<SliderProps>> = ({ disabled, chil
   );
 };
 
-const ToggleInput = styled.input(
-  ({ disabled, theme }: ToggleInputProps): CSSObject => ({
-    width: "1px",
-    height: "1px",
-    opacity: 0,
-    position: "absolute",
-    [`&:checked + .slider}`]: {
-      backgroundColor: disabled ? theme.colors.grey : theme.colors.darkBlue,
-    },
-    [`&:focus + .slider`]: {
-      transform: disabled ? null : `scale(${animationConfig.scale})`,
-      boxShadow: disabled ? undefined : theme.shadows.focus,
-    },
-  })
-);
+const ToggleInput = styled.input<ToggleButtonProps>(({ disabled, theme }) => ({
+  width: "1px",
+  height: "1px",
+  opacity: 0,
+  position: "absolute",
+  [`&:checked + .slider}`]: {
+    backgroundColor: disabled ? theme.colors.grey : theme.colors.darkBlue,
+  },
+  [`&:focus + .slider`]: {
+    transform: disabled ? null : `scale(${animationConfig.scale})`,
+    boxShadow: disabled ? undefined : theme.shadows.focus,
+  },
+}));
 
 const ToggleButton = React.forwardRef<React.Ref<HTMLInputElement>, ToggleButtonProps>((props, ref) => {
   const { disabled, defaultToggled, toggled } = props;