⬆️ Styled components v6 (#3050)

* try updating styled components

* ♻️ Icon was tricky

* only changed import

* only change import

* only change import

* replaced CSSObject with StyledObject<any>

* refactoring needed due to new types

* refactoring due to new types

* fixing transient props

* replace removed FlattenSimpleInterpolation with 'any'

* Accordion: transient props

* Input: transient props

* Chip: transient props

* Checkbox: transient props

* Autocomplete: transient props

* Radio: transient props

* Avatar, Banner, ButtonGroup, Card: transient props

* breadcrumbs: fix deprecated event

* Storybook Stack: transient props

* pagination, progress: transient props

* sidesheet, slider, snackbar: transient props

* Switch, table: transient props

* TableOfContents, TopBar: transient props

* Tabs, TextArea, TextField: transient props

* Lab storybook: "stack" sc6 compatible

* Datepicker: filter styled propsforwarding

* Lab Button/Table stories: use style instead of css

* core-react: update snapshots

* Fix tests after sc6

* Data-grid: usse transient props

* use default export for styled again

* Table/Caption: fixed transient prop

* ⬆️ Update styled-components latest patch

* add back CSSObject type after patch added it back

* update snapshot

packages/eds-core-react/.storybook/components/Stack.tsx

@@ -1,18 +1,32 @@
-import styled, { CSSProperties } from 'styled-components'
+import styled, { CSSObject } from 'styled-components'
 
 type StackProps = {
-  direction?: CSSProperties['flexDirection']
-  align?: CSSProperties['alignItems']
+  direction?: CSSObject['flexDirection']
+  align?: CSSObject['alignItems']
+  children: React.ReactNode
+} & React.HTMLAttributes<HTMLDivElement>
+
+type StyledStackProps = {
+  $direction?: CSSObject['flexDirection']
+  $align?: CSSObject['alignItems']
 }
 
-export const Stack = styled.div<StackProps>`
+const StyledStack = styled.div<StyledStackProps>`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: ${({ align }) => align || 'center'};
+  align-items: ${({ $align }) => $align || 'center'};
   gap: 1rem;
   flex-wrap: wrap;
   @media screen and (min-width: 600px) {
-    flex-direction: ${({ direction }) => direction || 'row'};
+    flex-direction: ${({ $direction }) => $direction || 'row'};
   }
 `
+
+export const Stack = ({ children, direction, align, ...rest }: StackProps) => {
+  return (
+    <StyledStack $direction={direction} $align={align} {...rest}>
+      {children}
+    </StyledStack>
+  )
+}

packages/eds-core-react/package.json

@@ -63,7 +63,6 @@
     "@types/ramda": "^0.29.2",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.10",
-    "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.6",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^2.1.4",
@@ -82,14 +81,14 @@
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^7.3.0",
-    "styled-components": "5.3.9",
+    "styled-components": "6.0.8",
     "tsc-watch": "^6.0.4",
     "typescript": "^5.1.6"
   },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8",
-    "styled-components": ">=4.2 < 6"
+    "styled-components": ">=4.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.22.5",