[ui] Upgrade styled-components to v6

[INTERNAL_BRANCH=dish/plus-styled-components]
dagster-io · Dec 4, 2024 · 0614b9b · 0614b9b
1 parent aaac011
commit 0614b9b
Show file tree

Hide file tree

Showing 75 changed files with 500 additions and 571 deletions.
diff --git a/js_modules/dagster-ui/packages/app-oss/package.json b/js_modules/dagster-ui/packages/app-oss/package.json
@@ -12,7 +12,6 @@
     "@dagster-io/ui-components": "workspace:*",
     "@dagster-io/ui-core": "workspace:*",
     "@rive-app/react-canvas": "^3.0.34",
-    "@types/styled-components": "^5.1.26",
     "eslint-config-next": "^13.5.3",
     "graphql": "^16.8.1",
     "next": "^14.2.10",
@@ -23,7 +22,8 @@
     "react-router-dom": "^5.3.0",
     "react-router-dom-v5-compat": "^6.3.0",
     "recoil": "^0.7.7",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6",
+    "stylis": "^4",
     "uuid": "^9.0.0",
     "validator": "^13.7.0",
     "web-vitals": "^2.1.3"
@@ -33,7 +33,7 @@
     "@types/jest": "^29.5.11",
     "@types/node": "^16.11.20",
     "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/uuid": "^8.3.4",
     "@types/validator": "^13",
     "@types/webpack-bundle-analyzer": "^4",

diff --git a/js_modules/dagster-ui/packages/ui-components/package.json b/js_modules/dagster-ui/packages/ui-components/package.json
@@ -30,7 +30,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "styled-components": "^5.3.3"
+    "styled-components": "^6",
+    "stylis": "^4"
   },
   "dependencies": {
     "@react-hook/resize-observer": "^1.2.6",
@@ -77,9 +78,8 @@
     "@types/mdx-js__react": "^1",
     "@types/react": "^18.3.9",
     "@types/react-dates": "^21.8.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/react-is": "^18.3.0",
-    "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.2",
     "babel-jest": "^27.4.6",
     "babel-loader": "^9.1.2",

diff --git a/js_modules/dagster-ui/packages/ui-components/rollup.config.js b/js_modules/dagster-ui/packages/ui-components/rollup.config.js
@@ -57,5 +57,6 @@ export default {
     'react-dom',
     'react-is',
     'styled-components',
+    'stylis',
   ],
 };
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx
@@ -2,8 +2,6 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import {Colors} from './Color';
-import {IconWrapper} from './Icon';
-import {SpinnerWrapper} from './Spinner';
 
 interface Props {
   fillColor?: string;
@@ -86,17 +84,20 @@ export const StyledTag = styled.div<StyledTagProps>`
     text-overflow: ellipsis;
   }
 
-  > ${IconWrapper}:first-child, > ${SpinnerWrapper}:first-child {
+  > .iconWrapper:first-child,
+  > .spinnerWrapper:first-child {
     margin-right: 4px;
     margin-left: -4px;
   }
 
-  > ${IconWrapper}:last-child, > ${SpinnerWrapper}:last-child {
+  > .iconWrapper:last-child,
+  > .spinnerWrapper:last-child {
     margin-left: 4px;
     margin-right: -4px;
   }
 
-  > ${IconWrapper}:first-child:last-child, > ${SpinnerWrapper}:first-child:last-child {
+  > .iconWrapper:first-child:last-child,
+  > .spinnerWrapper:first-child:last-child {
     margin: 0 -4px;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx
@@ -13,6 +13,13 @@ type Colors =
 
 type Underline = 'never' | 'always' | 'hover';
 
+type Props = Omit<React.HTMLProps<HTMLButtonElement>, 'color'> & {
+  color?: Colors;
+  disabled?: boolean;
+  underline?: Underline;
+  children?: React.ReactNode;
+};
+
 const fontColor = (color: Colors) => {
   if (typeof color === 'string') {
     return css`
@@ -49,14 +56,9 @@ const textDecoration = (underline: Underline) => {
   }
 };
 
-interface Props extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
-  color?: Colors;
-  underline?: Underline;
-}
-
-export const ButtonLink = styled(({color: _color, underline: _underline, ...rest}: Props) => (
-  <button {...rest} />
-))`
+export const ButtonLink = styled(
+  ({color: _color, underline: _underline, type: _type, ...rest}: Props) => <button {...rest} />,
+)<Props>`
   background: transparent;
   border: 0;
   cursor: pointer;

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx
@@ -28,9 +28,9 @@ export const CollapsibleSection = ({
           grow: 1,
           ...(headerWrapperProps?.flex || {}),
         }}
-        onClick={() => {
+        onClick={(e) => {
           setIsCollapsed(!isCollapsed);
-          headerWrapperProps?.onClick?.();
+          headerWrapperProps?.onClick?.(e);
         }}
       >
         {arrowSide === 'left' ? (

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx
@@ -302,10 +302,7 @@ const HoveredDictEntryContextProvider = React.memo(({children}: {children: React
 });
 
 const DictEntry = React.forwardRef(
-  (
-    props: React.ComponentProps<typeof DictEntryDiv>,
-    ref: React.ForwardedRef<HTMLButtonElement>,
-  ) => {
+  (props: React.ComponentProps<typeof DictEntryDiv>, ref: React.ForwardedRef<HTMLDivElement>) => {
     const {hovered, onMouseEnter, onMouseLeave} =
       React.useContext(HoveredDictEntryContext).useDictEntryHover();
 
@@ -324,7 +321,7 @@ const DictEntry = React.forwardRef(
 );
 
 const DictEntryDiv2 = styled.div``;
-const DictEntryDiv = styled.div<{$hovered: boolean}>`
+const DictEntryDiv = styled.div<{$hovered?: boolean}>`
   border: 1px solid transparent;
 
   ${({$hovered}) =>

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx
@@ -1,4 +1,5 @@
-import styled, {CSSProperties} from 'styled-components';
+import {CSSProperties} from 'react';
+import styled from 'styled-components';
 
 import {Button} from './Button';
 import {Icon} from './Icon';

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/DateRangePickerWrapper.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/DateRangePickerWrapper.tsx
@@ -67,7 +67,7 @@ const DatePickerContainer = styled.div`
     background-color: ${Colors.backgroundLight()};
     border-color: ${Colors.borderDefault()};
 
-    :hover {
+    &:hover {
       border-color: ${Colors.borderHover()};
     }
   }
@@ -95,7 +95,7 @@ const DatePickerContainer = styled.div`
     border-color: ${Colors.keylineDefault()};
     color: ${Colors.textLight()};
 
-    :hover {
+    &:hover {
       background-color: ${Colors.backgroundBlue()};
       border-color: ${Colors.keylineDefault()};
     }
@@ -104,8 +104,8 @@ const DatePickerContainer = styled.div`
   .CalendarDay__selected {
     background-color: ${Colors.backgroundBlueHover()};
 
-    :active,
-    :hover {
+    &:active,
+    &:hover {
       border-color: ${Colors.keylineDefault()};
     }
   }

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Group.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Group.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {ReactNode} from 'react';
 import styled, {css} from 'styled-components';
 
 import {Box} from './Box';
@@ -52,17 +53,22 @@ export const Group = (props: Props) => {
   );
 };
 
-type GroupChildProps = {
+type GroupChildProps = React.ComponentProps<typeof Box> & {
   empty: boolean;
+  children: ReactNode;
 };
 
-const GroupChild = styled(({empty: _empty, ...rest}) => <Box {...rest} />)<GroupChildProps>`
+const GroupChild = styled(({empty: _empty, ...rest}: GroupChildProps) => (
+  <Box {...rest} />
+))<GroupChildProps>`
   ${({empty}) => (empty ? 'display: none;' : '')}
   pointer-events: auto;
 `;
 
-type InnerProps = {
+type InnerProps = React.ComponentProps<typeof Box> & {
+  direction: Direction;
   spacing: Spacing;
+  children: ReactNode;
 };
 
 const marginAdjustment = (props: InnerProps) => {
@@ -77,7 +83,7 @@ const Outer = styled(Box)`
   pointer-events: none;
 `;
 
-const Inner = styled(({direction: _direction, spacing: _spacing, ...rest}) => (
+const Inner = styled(({direction: _direction, spacing: _spacing, ...rest}: InnerProps) => (
   <Box {...rest} />
 ))<InnerProps>`
   ${marginAdjustment}

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
@@ -824,14 +824,18 @@ export const Icon = React.memo((props: Props) => {
     />
   );
 });
-interface WrapperProps {
+interface WrapperProps extends React.ComponentPropsWithoutRef<'div'> {
   $color: string | null;
   $size: number;
   $img: string;
   $rotation: string | null;
 }
 
-export const IconWrapper = styled.div<WrapperProps>`
+export const IconWrapper = (props: WrapperProps) => {
+  return <IconWrapperStyled className="iconWrapper" {...props} />;
+};
+
+const IconWrapperStyled = styled.div<WrapperProps>`
   width: ${(p) => p.$size}px;
   height: ${(p) => p.$size}px;
   flex-shrink: 0;

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
@@ -9,7 +9,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import {Colors} from './Color';
-import {Icon, IconName, IconWrapper} from './Icon';
+import {Icon, IconName} from './Icon';
 
 interface Props extends React.ComponentProps<typeof BlueprintMenu> {}
 
@@ -105,7 +105,7 @@ export const MenuDivider = styled(BlueprintMenuDivider)`
   border-top: 1px solid ${Colors.keylineDefault()};
   margin: 2px 0;
 
-  :focus {
+  &:focus {
     outline: none;
   }
 
@@ -143,7 +143,7 @@ const StyledMenuItem = styled(BlueprintMenuItem)<StyledMenuItemProps>`
    * Use margin instead of align-items: center because the contents of the menu item may wrap 
    * in unusual circumstances.
    */
-  ${IconWrapper} {
+  .iconWrapper {
     margin-top: 2px;
   }
 
@@ -152,20 +152,20 @@ const StyledMenuItem = styled(BlueprintMenuItem)<StyledMenuItemProps>`
     background-color: ${Colors.backgroundBlue()};
     color: ${Colors.textDefault()};
 
-    ${IconWrapper} {
+    .iconWrapper {
       background-color: ${Colors.textDefault()};
     }
   }
 
-  &.bp5-disabled ${IconWrapper} {
+  &.bp5-disabled .iconWrapper {
     opacity: 0.5;
   }
 
-  &.bp5-active ${IconWrapper} {
+  &.bp5-active .iconWrapper {
     color: ${Colors.textDefault()};
   }
 
-  ${IconWrapper}:first-child {
+  .iconWrapper:first-child {
     margin-left: -4px;
   }
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Radio.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Radio.tsx
@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 import {Colors} from './Color';
-import {IconWrapper} from './Icon';
 
 export const RadioContainer = styled.div`
   .bp5-control {
@@ -22,7 +21,7 @@ export const RadioContainer = styled.div`
     cursor: default;
     color: ${Colors.backgroundDisabled()};
 
-    ${IconWrapper} {
+    .iconWrapper {
       opacity: 0.3;
     }
   }

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import {Colors} from './Color';
 import {Group} from './Group';
-import {Icon, IconWrapper} from './Icon';
+import {Icon} from './Icon';
 import {Tooltip} from './Tooltip';
 import {secondsToCountdownTime} from './secondsToCountdownTime';
 
@@ -49,7 +49,7 @@ export const RefreshButton = styled.button`
   position: relative;
   top: 1px;
 
-  & ${IconWrapper} {
+  & .iconWrapper {
     display: block;
     transition: color 100ms linear;
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import {Spinner as BlueprintSpinner} from '@blueprintjs/core';
+import {ReactNode} from 'react';
 import styled from 'styled-components';
 
 import {Colors} from './Color';
@@ -53,7 +54,17 @@ export const Spinner = ({
   );
 };
 
-export const SpinnerWrapper = styled.div<{$padding: number}>`
+interface WrapperProps {
+  $padding: number;
+  children: ReactNode;
+  title?: string;
+}
+
+export const SpinnerWrapper = (props: WrapperProps) => {
+  return <SpinnerWrapperStyled className="spinnerWrapper" {...props} />;
+};
+
+const SpinnerWrapperStyled = styled.div<WrapperProps>`
   padding: ${({$padding}) => $padding}px;
 `;