[ui] Upgrade styled-components to v6 (#26280)

## Summary & Motivation Upgrade styled-components to v6, based on https://styled-components.com/docs/faqs. ## How I Tested These Changes Navigate throughout app, verify that components render and behave correctly. This affects the entire app, so we need to be vigilant about spotting and fixing bugs after this merges.
dagster-io · Dec 5, 2024 · 1a2a067 · 1a2a067 · github-actions · Dec 5, 2024
1 parent f42dc5f
commit 1a2a067
Show file tree

Hide file tree

Showing 67 changed files with 432 additions and 477 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
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import {Colors} from './Color';
 import {IconWrapper} from './Icon';
 import {SpinnerWrapper} from './Spinner';
-
 interface Props {
   fillColor?: string;
   textColor?: string;

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,14 @@ export const Icon = React.memo((props: Props) => {
     />
   );
 });
-interface WrapperProps {
+export interface IconWrapperProps {
   $color: string | null;
   $size: number;
   $img: string;
   $rotation: string | null;
 }
 
-export const IconWrapper = styled.div<WrapperProps>`
+export const IconWrapper = styled.div<IconWrapperProps>`
   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
@@ -105,7 +105,7 @@ export const MenuDivider = styled(BlueprintMenuDivider)`
   border-top: 1px solid ${Colors.keylineDefault()};
   margin: 2px 0;
 
-  :focus {
+  &:focus {
     outline: none;
   }
 

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,13 @@ export const Spinner = ({
   );
 };
 
-export const SpinnerWrapper = styled.div<{$padding: number}>`
+interface WrapperProps {
+  $padding: number;
+  children: ReactNode;
+  title?: string;
+}
+
+export const SpinnerWrapper = styled.div<WrapperProps>`
   padding: ${({$padding}) => $padding}px;
 `;
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx
@@ -37,7 +37,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
 
   box-shadow: ${({$strokeColor}) => `${$strokeColor} inset 0px 0px 0px 1px`};
 
-  :hover:not(:disabled) {
+  &:hover:not(:disabled) {
     background-color: ${({$fillColor, $fillColorHover}) =>
       $fillColorHover || $fillColor || 'transparent'};
     box-shadow: ${({$strokeColor, $strokeColorHover}) =>
@@ -48,28 +48,28 @@ export const StyledButton = styled.button<StyledButtonProps>`
     text-decoration: none;
   }
 
-  :focus,
-  :focus-visible,
-  :focus:hover:not(:disabled) {
+  &:focus,
+  &:focus-visible,
+  &:focus:hover:not(:disabled) {
     box-shadow: ${Colors.focusRing()} 0 0 0 2px;
     outline: none;
   }
 
-  :focus:not(:focus-visible) {
+  &:focus:not(:focus-visible) {
     box-shadow: ${({$strokeColor}) =>
       `${$strokeColor} inset 0px 0px 0px 1px, ${Colors.shadowDefault()} 0px 2px 12px 0px;`};
   }
 
-  :active:not(:disabled) {
+  &:active:not(:disabled) {
     filter: brightness(0.95);
   }
 
-  :disabled {
+  &:disabled {
     cursor: default;
     opacity: 0.5;
   }
 
-  :disabled:hover {
+  &:disabled:hover {
     box-shadow: ${({$strokeColor}) => `${$strokeColor} inset 0px 0px 0px 1px`};
   }
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx
@@ -93,8 +93,8 @@ const Blob = styled.div<BlobProps>`
   user-select: none;
   width: ${({$blobSize}) => `${$blobSize}px`};
 
-  :focus,
-  :active {
+  &:focus,
+  &:active {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Tabs.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Tabs.tsx
@@ -117,32 +117,34 @@ export const Tab = styled((props: TabProps) => {
   ${tabCSS}
 `;
 
-interface TabsProps {
-  children: Array<React.ReactElement<TabProps>>;
+type TabsProps = Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'onChange'> & {
+  children: Array<React.ReactElement<TabProps> | null>;
   selectedTabId?: string;
   onChange?: (selectedTabId: string) => void;
   size?: 'small' | 'large';
-}
+};
 
-export const Tabs = styled(({selectedTabId, children, onChange, size = 'large', ...rest}) => {
-  return (
-    <div {...rest} role="tablist">
-      {React.Children.map(children, (child) =>
-        child
-          ? React.cloneElement(child, {
-              selected: child.props.selected || child.props.id === selectedTabId,
-              $size: size,
-              ...(onChange
-                ? {
-                    onClick: () => onChange(child.props.id),
-                  }
-                : {}),
-            })
-          : null,
-      )}
-    </div>
-  );
-})<TabsProps>`
+export const Tabs = styled(
+  ({selectedTabId, children, onChange, size = 'large', ...rest}: TabsProps) => {
+    return (
+      <div {...rest} role="tablist">
+        {React.Children.map(children, (child) =>
+          child
+            ? React.cloneElement(child, {
+                selected: child.props.selected || child.props.id === selectedTabId,
+                $size: size,
+                ...(onChange
+                  ? {
+                      onClick: () => child.props.id && onChange(child.props.id),
+                    }
+                  : {}),
+              })
+            : null,
+        )}
+      </div>
+    );
+  },
+)<TabsProps>`
   display: flex;
   gap: 16px;
   font-size: ${({size}) => (size === 'small' ? '12px' : '14px')};