Bump styled-system and @types/styled-system (#43089)

* Bump styled-components from 5.3.11 to 6.1.11 Bumps [styled-components](https://github.com/styled-components/styled-components) from 5.3.11 to 6.1.11. - [Release notes](https://github.com/styled-components/styled-components/releases) - [Commits](styled-components/styled-components@v5.3.11...v6.1.11) --- updated-dependencies: - dependency-name: styled-components dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * Remove @types/styled-components * Add babel-plugin-styled-components * Fix issues after upgrading packages * Update snapshots * Bump styled-system and @types/styled-system Bumps [styled-system](https://github.com/jxnblk/styled-system) and [@types/styled-system](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/styled-system). These dependencies needed to be updated together. Updates `styled-system` from 3.2.1 to 5.1.5 - [Release notes](https://github.com/jxnblk/styled-system/releases) - [Changelog](https://github.com/styled-system/styled-system/blob/master/CHANGELOG.md) - [Commits](styled-system/styled-system@v3.2.1...v5.1.5) Updates `@types/styled-system` from 3.2.2 to 5.1.22 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/styled-system) --- updated-dependencies: - dependency-name: styled-system dependency-type: direct:production update-type: version-update:semver-major - dependency-name: "@types/styled-system" dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * Fix issues after upgrading styled-system * Update snapshots * Post-merge fixes * Declare @emotion/is-prop-valid as an explicit dependency * Correct formatting * Lint --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Bartosz Leper <[email protected]>
gravitational · Jul 15, 2024 · a9febc9 · a9febc9
1 parent 2a39910
commit a9febc9
Show file tree

Hide file tree

Showing 52 changed files with 2,640 additions and 2,717 deletions.
diff --git a/web/packages/design/package.json b/web/packages/design/package.json
@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "1.2.2",
-    "styled-system": "^3.1.11",
-    "csstype": "^3.0.2"
+    "csstype": "^3.0.2",
+    "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@types/styled-system": "^3.1.3",
-    "@gravitational/build": "^1.0.0"
+    "@gravitational/build": "^1.0.0",
+    "@types/styled-system": "^5.1.22"
   }
 }
diff --git a/web/packages/design/src/Box/Box.tsx b/web/packages/design/src/Box/Box.tsx
@@ -21,11 +21,7 @@ import styled from 'styled-components';
 import {
   alignSelf,
   AlignSelfProps,
-  borderColor,
-  BorderColorProps,
   BorderProps,
-  borderRadius,
-  BorderRadiusProps,
   borders,
   BordersProps,
   color,
@@ -72,9 +68,7 @@ export interface BoxProps
     JustifySelfProps,
     BorderProps,
     BordersProps,
-    BorderRadiusProps,
-    OverflowProps,
-    BorderColorProps {}
+    OverflowProps {}
 
 const Box = styled.div<BoxProps>`
   box-sizing: border-box;
@@ -92,9 +86,7 @@ const Box = styled.div<BoxProps>`
   ${alignSelf}
   ${justifySelf}
   ${borders}
-  ${borderRadius}
   ${overflow}
-  ${borderColor}
 `;
 
 Box.displayName = 'Box';

diff --git a/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap b/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap
@@ -14,8 +14,8 @@ exports[`rendering of Error Cards 1`] = `
   overflow: auto;
   word-break: break-word;
   line-height: 1.5;
-  margin-bottom: 24px;
   margin-top: 8px;
+  margin-bottom: 24px;
   background: #FF6257;
   color: #000000;
 }
@@ -45,10 +45,10 @@ exports[`rendering of Error Cards 1`] = `
 .c2 {
   overflow: hidden;
   text-overflow: ellipsis;
+  margin: 0;
   font-weight: 300;
   font-size: 28px;
   line-height: 32px;
-  margin: 0px;
   margin-bottom: 24px;
   text-align: center;
 }

diff --git a/web/packages/design/src/CardIcon/__snapshots__/CardIcon.test.jsx.snap b/web/packages/design/src/CardIcon/__snapshots__/CardIcon.test.jsx.snap
@@ -3,11 +3,11 @@
 exports[`rendering of CardIcon components 1`] = `
 .c0 {
   box-sizing: border-box;
-  margin-left: auto;
-  margin-right: auto;
+  padding: 48px;
   margin-top: 24px;
   margin-bottom: 24px;
-  padding: 48px;
+  margin-left: auto;
+  margin-right: auto;
   width: 540px;
   text-align: center;
 }

diff --git a/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap b/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap
@@ -3,11 +3,11 @@
 exports[`rendering of CardSuccess components 1`] = `
 .c0 {
   box-sizing: border-box;
-  margin-left: auto;
-  margin-right: auto;
+  padding: 48px;
   margin-top: 24px;
   margin-bottom: 24px;
-  padding: 48px;
+  margin-left: auto;
+  margin-right: auto;
   width: 540px;
   text-align: center;
 }

diff --git a/web/packages/design/src/Dialog/DialogContent.jsx b/web/packages/design/src/Dialog/DialogContent.jsx
@@ -18,14 +18,18 @@
 
 import styled from 'styled-components';
 
+import { flex, space } from 'styled-system';
+
 import { Flex } from 'design';
 
-const DialogContent = styled(Flex)``;
-DialogContent.defaultProps = {
-  ...Flex.defaultProps,
-  mb: '5',
-  flex: '1',
-  flexDirection: 'column',
-};
+const DialogContent = styled(Flex)`
+  margin-bottom: ${props => props.theme.space[5]}px;
+  flex: 1;
+  flex-direction: column;
+
+  /* Allow overriding space and flex settings. */
+  ${space}
+  ${flex}
+`;
 
 export default DialogContent;
diff --git a/web/packages/design/src/Image/Image.jsx → web/packages/design/src/Image/Image.tsx b/web/packages/design/src/Image/Image.jsx → web/packages/design/src/Image/Image.tsx
@@ -21,16 +21,35 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
 import {
-  space,
+  alignSelf,
+  AlignSelfProps,
   color,
-  width,
+  ColorProps,
   height,
-  maxWidth,
+  HeightProps,
   maxHeight,
-  alignSelf,
+  MaxHeightProps,
+  maxWidth,
+  MaxWidthProps,
+  space,
+  SpaceProps,
+  width,
+  WidthProps,
 } from 'design/system';
 
-const Image = props => {
+interface ImageProps
+  extends SpaceProps,
+    ColorProps,
+    WidthProps,
+    HeightProps,
+    MaxWidthProps,
+    MaxHeightProps,
+    AlignSelfProps {
+  alt?: string;
+  style?: React.CSSProperties;
+}
+
+const Image = (props: ImageProps) => {
   return <StyledImg {...props} />;
 };
 
@@ -49,7 +68,7 @@ Image.displayName = 'Logo';
 
 export default Image;
 
-const StyledImg = styled.img`
+const StyledImg = styled.img<ImageProps>`
   display: block;
   outline: none;
   ${color} ${space} ${width} ${height} ${maxWidth} ${maxHeight} ${alignSelf}

diff --git a/web/packages/design/src/LabelInput/LabelInput.tsx b/web/packages/design/src/LabelInput/LabelInput.tsx
@@ -33,6 +33,7 @@ const LabelInput = styled.label<LabelInputProps>`
   display: block;
   font-size: ${p => p.theme.fontSizes[1]}px;
   width: 100%;
+  margin-bottom: ${props => props.theme.space[1]}px;
   ${space}
 `;
 
@@ -42,7 +43,6 @@ LabelInput.propTypes = {
 
 LabelInput.defaultProps = {
   hasError: false,
-  mb: 1,
 };
 
 LabelInput.displayName = 'LabelInput';

diff --git a/web/packages/design/src/LabelState/LabelState.tsx b/web/packages/design/src/LabelState/LabelState.tsx
@@ -101,7 +101,7 @@ const LabelState = styled.span<LabelStateProps>`
   min-height: 16px;
   line-height: 1.4;
   padding: 0 8px;
-  font-size: 10px;
+  font-size: ${props => props.theme.fontSizes[0]}px;
   font-weight: 500;
   text-transform: uppercase;
   ${space}
@@ -111,7 +111,6 @@ const LabelState = styled.span<LabelStateProps>`
   ${fontSize}
 `;
 LabelState.defaultProps = {
-  fontSize: 0,
   shadow: false,
 };
 

diff --git a/web/packages/design/src/Menu/MenuItemIcon.jsx b/web/packages/design/src/Menu/MenuItemIcon.jsx
@@ -19,6 +19,8 @@
 import styled from 'styled-components';
 
 const MenuItemIcon = styled.span`
+  font-size: ${props => props.theme.fontSizes[4]}px;
+  margin-right: ${props => props.theme.space[2]}px;
   &:hover,
   &:focus {
     color: ${props => props.theme.colors.text.main};
@@ -30,9 +32,5 @@ const MenuItemIcon = styled.span`
 `;
 
 MenuItemIcon.displayName = 'MenuItemIcon';
-MenuItemIcon.defaultProps = {
-  fontSize: 4,
-  mr: 2,
-};
 
 export default MenuItemIcon;
diff --git a/web/packages/design/src/Onboard/__snapshots__/WelcomeWrapper.story.test.tsx.snap b/web/packages/design/src/Onboard/__snapshots__/WelcomeWrapper.story.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`wrapper 1`] = `
 .c8 {
   overflow: hidden;
   text-overflow: ellipsis;
-  margin: 0px;
+  margin: 0;
 }
 
 .c12 {

diff --git a/web/packages/design/src/SideNav/SideNavItem.jsx b/web/packages/design/src/SideNav/SideNavItem.jsx
@@ -23,6 +23,8 @@ import Flex from './../Flex';
 
 const fromTheme = ({ theme }) => {
   return {
+    paddingLeft: `${theme.space[9]}px`,
+    paddingRight: `${theme.space[5]}px`,
     background: theme.colors.levels.surface,
     color: theme.colors.text.slightlyMuted,
     fontSize: theme.fontSizes[1],
@@ -54,11 +56,4 @@ const SideNavItem = styled(Flex)`
 
 SideNavItem.displayName = 'SideNavItem';
 
-SideNavItem.defaultProps = {
-  pl: 9,
-  pr: 5,
-  bg: 'levels.surfaceSecondary',
-  color: 'text.main',
-};
-
 export default SideNavItem;
diff --git a/web/packages/design/src/SideNav/SideNavItemIcon.jsx b/web/packages/design/src/SideNav/SideNavItemIcon.jsx
@@ -32,13 +32,11 @@ const SideNavItemIcon = styled.svg`
   }
 
   opacity: 0.56;
+  font-size: ${props => props.theme.fontSizes[4]}px;
+  margin-right: ${props => props.theme.space[3]}px;
+  margin-left: -${props => props.theme.space[6]}px;
 `;
 
 SideNavItemIcon.displayName = 'SideNavItemIcon';
-SideNavItemIcon.defaultProps = {
-  fontSize: 4,
-  mr: 3,
-  ml: -6,
-};
 
 export default SideNavItemIcon;
diff --git a/web/packages/design/src/Text/Text.tsx b/web/packages/design/src/Text/Text.tsx
@@ -55,6 +55,7 @@ const Text = styled.div.withConfig({
 })<TextProps>`
   overflow: hidden;
   text-overflow: ellipsis;
+  margin: 0;
   ${typography}
   ${fontSize}
   ${space}
@@ -65,8 +66,4 @@ const Text = styled.div.withConfig({
 
 Text.displayName = 'Text';
 
-Text.defaultProps = {
-  m: 0,
-};
-
 export default Text;
diff --git a/web/packages/design/src/system/borderRadius.ts b/web/packages/design/src/system/borderRadius.ts
diff --git a/web/packages/design/src/system/index.ts b/web/packages/design/src/system/index.ts
@@ -25,6 +25,8 @@ import {
   type BorderProps,
   borderColor,
   type BorderColorProps,
+  borderRadius,
+  type BorderRadiusProps,
   borders,
   type BordersProps,
   color,
@@ -73,7 +75,6 @@ import {
 import { Property } from 'csstype';
 
 import typography, { type TypographyProps } from './typography';
-import borderRadius, { type BorderRadiusProps } from './borderRadius';
 
 const gap = style({
   prop: 'gap',