[dagster-io/ui] Remove WIP suffixes (#7229)

dagster-io · Apr 1, 2022 · c997aa3 · c997aa3 · vercel · Apr 1, 2022
1 parent b61db9d
commit c997aa3
Show file tree

Hide file tree

Showing 62 changed files with 523 additions and 540 deletions.
diff --git a/js_modules/dagit/packages/core/src/runs/RunTag.tsx b/js_modules/dagit/packages/core/src/runs/RunTag.tsx
@@ -1,5 +1,6 @@
 import {Tag} from '@dagster-io/ui';
 import * as React from 'react';
+import styled from 'styled-components/macro';
 
 export enum DagsterTag {
   Namespace = 'dagster/',
@@ -34,5 +35,38 @@ export const RunTag = ({tag, onClick}: IRunTagProps) => {
     onClick && onClick(tag);
   };
 
-  return <Tag isDagsterTag={isDagsterTag} onClick={onTagClick} tag={displayTag} />;
+  return <TagDeprecated isDagsterTag={isDagsterTag} onClick={onTagClick} tag={displayTag} />;
 };
+
+interface ITagProps {
+  tag: {
+    key: string;
+    value: string;
+  };
+  onClick?: (tag: {key: string; value: string}) => void;
+  isDagsterTag?: boolean;
+}
+
+export const TagDeprecated = ({tag, onClick, isDagsterTag}: ITagProps) => {
+  const onTagClick = () => onClick && onClick(tag);
+
+  return (
+    <TagButton onClick={onTagClick}>
+      <Tag intent={isDagsterTag ? 'none' : 'primary'} interactive>
+        {`${tag.key}: ${tag.value}`}
+      </Tag>
+    </TagButton>
+  );
+};
+
+const TagButton = styled.button`
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+
+  :focus {
+    outline: none;
+  }
+`;
diff --git a/js_modules/dagit/packages/ui/.storybook/preview.js b/js_modules/dagit/packages/ui/.storybook/preview.js
@@ -5,7 +5,7 @@ import {
   GlobalSuggestStyle,
   GlobalToasterStyle,
   GlobalTooltipStyle,
-  ColorsWIP,
+  Colors,
 } from '../src';
 
 import {MemoryRouter} from 'react-router-dom';
@@ -19,15 +19,15 @@ const GlobalStyle = createGlobalStyle`
   }
 
   html, body {
-    color: ${ColorsWIP.Gray800};
+    color: ${Colors.Gray800};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
   a,
   a:hover,
   a:active {
-    color: ${ColorsWIP.Link};
+    color: ${Colors.Link};
   }
 
   body {
@@ -60,7 +60,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .bp3-button:disabled .material-icons {
-    color: ${ColorsWIP.Gray300}
+    color: ${Colors.Gray300}
   }
 `;
 

diff --git a/js_modules/dagit/packages/ui/src/components/Alert.tsx b/js_modules/dagit/packages/ui/src/components/Alert.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import styled from 'styled-components/macro';
 
 import {Box} from './Box';
-import {ColorsWIP} from './Colors';
+import {Colors} from './Colors';
 import {Group} from './Group';
-import {IconName, IconWIP} from './Icon';
+import {IconName, Icon} from './Icon';
 
 export type AlertIntent = 'info' | 'warning' | 'error' | 'success';
 
@@ -22,36 +22,36 @@ export const Alert: React.FC<Props> = (props) => {
     switch (intent) {
       case 'warning':
         return {
-          backgroundColor: ColorsWIP.Yellow50,
-          borderColor: ColorsWIP.Yellow500,
+          backgroundColor: Colors.Yellow50,
+          borderColor: Colors.Yellow500,
           icon: 'warning',
-          iconColor: ColorsWIP.Yellow500,
-          textColor: ColorsWIP.Yellow700,
+          iconColor: Colors.Yellow500,
+          textColor: Colors.Yellow700,
         };
       case 'error':
         return {
-          backgroundColor: ColorsWIP.Red50,
-          borderColor: ColorsWIP.Red500,
+          backgroundColor: Colors.Red50,
+          borderColor: Colors.Red500,
           icon: 'error',
-          iconColor: ColorsWIP.Red500,
-          textColor: ColorsWIP.Red700,
+          iconColor: Colors.Red500,
+          textColor: Colors.Red700,
         };
       case 'success':
         return {
-          backgroundColor: ColorsWIP.Green50,
-          borderColor: ColorsWIP.Green500,
+          backgroundColor: Colors.Green50,
+          borderColor: Colors.Green500,
           icon: 'done',
-          iconColor: ColorsWIP.Green500,
-          textColor: ColorsWIP.Green700,
+          iconColor: Colors.Green500,
+          textColor: Colors.Green700,
         };
       case 'info':
       default:
         return {
-          backgroundColor: ColorsWIP.Blue50,
-          borderColor: ColorsWIP.Blue500,
+          backgroundColor: Colors.Blue50,
+          borderColor: Colors.Blue500,
           icon: 'info',
-          iconColor: ColorsWIP.Blue500,
-          textColor: ColorsWIP.Blue700,
+          iconColor: Colors.Blue500,
+          textColor: Colors.Blue700,
         };
     }
   }, [intent]);
@@ -65,15 +65,15 @@ export const Alert: React.FC<Props> = (props) => {
     >
       <Box flex={{direction: 'row', justifyContent: 'space-between'}}>
         <Group direction="row" spacing={12} alignItems="flex-start">
-          <IconWIP name={icon as IconName} color={iconColor} />
+          <Icon name={icon as IconName} color={iconColor} />
           <Group direction="column" spacing={8}>
             <AlertTitle>{title}</AlertTitle>
             {description ? <AlertDescription>{description}</AlertDescription> : null}
           </Group>
         </Group>
         {!!onClose ? (
           <ButtonWrapper onClick={onClose}>
-            <IconWIP name="close" color={textColor} />
+            <Icon name="close" color={textColor} />
           </ButtonWrapper>
         ) : null}
       </Box>

diff --git a/js_modules/dagit/packages/ui/src/components/AnchorButton.stories.tsx b/js_modules/dagit/packages/ui/src/components/AnchorButton.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import {AnchorButton, ExternalAnchorButton} from './Button';
 import {Group} from './Group';
-import {IconWIP as Icon} from './Icon';
+import {Icon as Icon} from './Icon';
 
 // eslint-disable-next-line import/no-default-export
 export default {

diff --git a/js_modules/dagit/packages/ui/src/components/BaseButton.stories.tsx b/js_modules/dagit/packages/ui/src/components/BaseButton.stories.tsx
@@ -3,9 +3,9 @@ import * as React from 'react';
 
 import {BaseButton} from './BaseButton';
 import {Box} from './Box';
-import {ColorsWIP} from './Colors';
+import {Colors} from './Colors';
 import {Group} from './Group';
-import {IconWIP as Icon} from './Icon';
+import {Icon} from './Icon';
 
 // eslint-disable-next-line import/no-default-export
 export default {
@@ -32,35 +32,35 @@ export const Default = () => {
 export const Fill = () => {
   return (
     <Group direction="column" spacing={8}>
-      <BaseButton label="Button" fillColor={ColorsWIP.Dark} textColor={ColorsWIP.White} />
+      <BaseButton label="Button" fillColor={Colors.Dark} textColor={Colors.White} />
       <BaseButton
         label="Button"
-        fillColor={ColorsWIP.Blue500}
-        textColor={ColorsWIP.White}
+        fillColor={Colors.Blue500}
+        textColor={Colors.White}
         icon={<Icon name="star" />}
       />
       <BaseButton
         label="Button"
-        fillColor={ColorsWIP.Green500}
-        textColor={ColorsWIP.White}
+        fillColor={Colors.Green500}
+        textColor={Colors.White}
         rightIcon={<Icon name="close" />}
       />
       <BaseButton
         label="Button"
-        fillColor={ColorsWIP.Red500}
-        textColor={ColorsWIP.White}
+        fillColor={Colors.Red500}
+        textColor={Colors.White}
         icon={<Icon name="source" />}
         rightIcon={<Icon name="expand_more" />}
       />
       <BaseButton
         label="Button"
-        fillColor={ColorsWIP.Olive500}
-        textColor={ColorsWIP.White}
+        fillColor={Colors.Olive500}
+        textColor={Colors.White}
         icon={<Icon name="folder_open" />}
       />
       <BaseButton
-        fillColor={ColorsWIP.Yellow500}
-        textColor={ColorsWIP.White}
+        fillColor={Colors.Yellow500}
+        textColor={Colors.White}
         icon={<Icon name="cached" />}
       />
     </Group>
@@ -69,33 +69,29 @@ export const Fill = () => {
 
 export const Transparent = () => {
   return (
-    <Box padding={12} background={ColorsWIP.Gray200}>
+    <Box padding={12} background={Colors.Gray200}>
       <Group direction="column" spacing={8}>
-        <BaseButton textColor={ColorsWIP.Dark} label="Button" fillColor="transparent" />
+        <BaseButton textColor={Colors.Dark} label="Button" fillColor="transparent" />
         <BaseButton
-          textColor={ColorsWIP.Dark}
+          textColor={Colors.Dark}
           label="Button"
           fillColor="transparent"
           icon={<Icon name="star" />}
         />
         <BaseButton
-          textColor={ColorsWIP.Dark}
+          textColor={Colors.Dark}
           label="Button"
           fillColor="transparent"
           rightIcon={<Icon name="close" />}
         />
         <BaseButton
-          textColor={ColorsWIP.Dark}
+          textColor={Colors.Dark}
           label="Button"
           fillColor="transparent"
           icon={<Icon name="source" />}
           rightIcon={<Icon name="expand_more" />}
         />
-        <BaseButton
-          textColor={ColorsWIP.Dark}
-          fillColor="transparent"
-          icon={<Icon name="cached" />}
-        />
+        <BaseButton textColor={Colors.Dark} fillColor="transparent" icon={<Icon name="cached" />} />
       </Group>
     </Box>
   );
@@ -105,8 +101,8 @@ export const Disabled = () => {
   return (
     <Group direction="column" spacing={8}>
       <BaseButton label="Button" icon={<Icon name="star" />} disabled />
-      <BaseButton label="Button" fillColor={ColorsWIP.Dark} textColor={ColorsWIP.White} disabled />
-      <BaseButton textColor={ColorsWIP.Dark} label="Button" fillColor="transparent" disabled />
+      <BaseButton label="Button" fillColor={Colors.Dark} textColor={Colors.White} disabled />
+      <BaseButton textColor={Colors.Dark} label="Button" fillColor="transparent" disabled />
     </Group>
   );
 };
diff --git a/js_modules/dagit/packages/ui/src/components/BaseButton.tsx b/js_modules/dagit/packages/ui/src/components/BaseButton.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {ColorsWIP} from './Colors';
+import {Colors} from './Colors';
 import {StyledButton, StyledButtonText} from './StyledButton';
 
 interface CommonButtonProps {
@@ -18,14 +18,14 @@ interface BaseButtonProps extends CommonButtonProps, React.ComponentPropsWithRef
 export const BaseButton = React.forwardRef(
   (props: BaseButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
     const {
-      fillColor = ColorsWIP.White,
+      fillColor = Colors.White,
       disabled,
       icon,
       label,
       loading,
       rightIcon,
-      textColor = ColorsWIP.Dark,
-      strokeColor = ColorsWIP.Gray300,
+      textColor = Colors.Dark,
+      strokeColor = Colors.Gray300,
       ...rest
     } = props;
 

diff --git a/js_modules/dagit/packages/ui/src/components/BaseTag.stories.tsx b/js_modules/dagit/packages/ui/src/components/BaseTag.stories.tsx
@@ -2,9 +2,9 @@ import {Meta} from '@storybook/react/types-6-0';
 import * as React from 'react';
 
 import {BaseTag} from './BaseTag';
-import {ColorsWIP} from './Colors';
+import {Colors} from './Colors';
 import {Group} from './Group';
-import {IconWIP} from './Icon';
+import {Icon} from './Icon';
 
 // eslint-disable-next-line import/no-default-export
 export default {
@@ -13,12 +13,12 @@ export default {
 } as Meta;
 
 const COLORS = [
-  {fillColor: ColorsWIP.Gray10, textColor: ColorsWIP.Gray900, iconColor: ColorsWIP.Gray900},
-  {fillColor: ColorsWIP.Blue50, textColor: ColorsWIP.Blue700, iconColor: ColorsWIP.Blue500},
-  {fillColor: ColorsWIP.Green50, textColor: ColorsWIP.Green700, iconColor: ColorsWIP.Green500},
-  {fillColor: ColorsWIP.Yellow50, textColor: ColorsWIP.Yellow700, iconColor: ColorsWIP.Yellow500},
-  {fillColor: ColorsWIP.Red50, textColor: ColorsWIP.Red700, iconColor: ColorsWIP.Red500},
-  {fillColor: ColorsWIP.Olive50, textColor: ColorsWIP.Olive700, iconColor: ColorsWIP.Olive500},
+  {fillColor: Colors.Gray10, textColor: Colors.Gray900, iconColor: Colors.Gray900},
+  {fillColor: Colors.Blue50, textColor: Colors.Blue700, iconColor: Colors.Blue500},
+  {fillColor: Colors.Green50, textColor: Colors.Green700, iconColor: Colors.Green500},
+  {fillColor: Colors.Yellow50, textColor: Colors.Yellow700, iconColor: Colors.Yellow500},
+  {fillColor: Colors.Red50, textColor: Colors.Red700, iconColor: Colors.Red500},
+  {fillColor: Colors.Olive50, textColor: Colors.Olive700, iconColor: Colors.Olive500},
 ];
 
 export const Basic = () => {
@@ -29,18 +29,18 @@ export const Basic = () => {
           <BaseTag
             fillColor={fillColor}
             textColor={textColor}
-            icon={<IconWIP name="info" color={iconColor} />}
+            icon={<Icon name="info" color={iconColor} />}
           />
           <BaseTag
             fillColor={fillColor}
             textColor={textColor}
-            icon={<IconWIP name="alternate_email" color={iconColor} />}
+            icon={<Icon name="alternate_email" color={iconColor} />}
             label="Lorem"
           />
           <BaseTag
             fillColor={fillColor}
             textColor={textColor}
-            rightIcon={<IconWIP name="toggle_off" color={iconColor} />}
+            rightIcon={<Icon name="toggle_off" color={iconColor} />}
             label="Lorem"
           />
           <BaseTag fillColor={fillColor} textColor={textColor} label="Lorem" />

diff --git a/js_modules/dagit/packages/ui/src/components/BaseTag.tsx b/js_modules/dagit/packages/ui/src/components/BaseTag.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components/macro';
 
-import {ColorsWIP} from './Colors';
+import {Colors} from './Colors';
 import {IconWrapper} from './Icon';
 
 interface Props {
@@ -28,8 +28,8 @@ const BaseTagTooltipStyle: React.CSSProperties = {
 
 export const BaseTag = (props: Props) => {
   const {
-    fillColor = ColorsWIP.Gray10,
-    textColor = ColorsWIP.Gray900,
+    fillColor = Colors.Gray10,
+    textColor = Colors.Gray900,
     icon,
     interactive = false,
     rightIcon,