Clean up text styles and simplify text style names (dagster-io#21450)

## Summary & Motivation This PR aims to clean up all of our text styles, and introduces a new simplified naming convention that matches the style names within Figma. The old text style naming convention of `body`, `body1`, and `body2` was difficult to grok, ie: is body2 bigger or smaller than body1? When should I `CaptionBold` or `SubtitleCaption`? **Now we now have just 3 main text styles `Subtitle`, `Body`, and `Mono`.** - Each of these comes in a large and small variant, ie: `SubtitleLarge`| `Subtitle` | `SubtitleSmall` - There are 3 other less utilized styles `title`, `heading`, and `code`. The full set of styles now looks like this, and IMO is much easier to reason about. ![image](https://github.com/dagster-io/dagster/assets/2798333/dcc79be7-aa03-45a5-9d9b-81a57d6aae73) ## Legacy styles I've renamed or removed all the previous styles except for `caption` which is used in a lot of places. `caption` is the exact same style as the new `bodySmall` style. ## In Figma This has all been updated in Figma as well. In Dev mode, selecting any text will now show it's corresponding style name in code. ![image](https://github.com/dagster-io/dagster/assets/2798333/4d34a002-1046-43be-a7f6-d08725e94e05) ## How I Tested These Changes Loaded up the UI and clicked around.
nikomancy · May 1, 2024 · 0a89f73 · 0a89f73
1 parent 7566c70
commit 0a89f73
Show file tree

Hide file tree

Showing 56 changed files with 289 additions and 292 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ErrorBoundary.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ErrorBoundary.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import {Box} from './Box';
 import {Colors} from './Color';
-import {Body, Subheading} from './Text';
+import {Body, Subtitle} from './Text';
 import {FontFamily} from './styles';
 
 export type ErrorCollectionContextValue = {
@@ -71,7 +71,7 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
           flex={{direction: 'column', gap: 8}}
           padding={16}
         >
-          <Subheading>Sorry, {this.props.region} can&apos;t be displayed.</Subheading>
+          <Subtitle>Sorry, {this.props.region} can&apos;t be displayed.</Subtitle>
           <Body color={Colors.textLight()}>{errorCollectionMessage}</Body>
           {errorStackIncluded && <Trace>{`${error.message}\n\n${error.stack}`}</Trace>}
         </Box>

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx
@@ -4,7 +4,7 @@ import {Box} from './Box';
 import {Colors} from './Color';
 import {Icon, IconName} from './Icon';
 import {Spinner} from './Spinner';
-import {Subheading} from './Text';
+import {Subtitle} from './Text';
 
 export type NonIdealStateProps = React.DetailedHTMLProps<
   React.InputHTMLAttributes<HTMLInputElement>,
@@ -54,7 +54,7 @@ export const NonIdealState = ({
           grow: 1,
         }}
       >
-        {title && <Subheading style={{color: Colors.textDefault()}}>{title}</Subheading>}
+        {title && <Subtitle style={{color: Colors.textDefault()}}>{title}</Subtitle>}
         {description && <div style={{color: Colors.textDefault()}}>{description}</div>}
         {action}
       </Box>

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ProductTour.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ProductTour.tsx
@@ -7,7 +7,7 @@ import {Box} from './Box';
 import {Button} from './Button';
 import {Colors} from './Color';
 import {Popover} from './Popover';
-import {Subheading} from './Text';
+import {Subtitle} from './Text';
 
 export enum ProductTourPosition {
   TOP_LEFT = 'top-start',
@@ -89,7 +89,7 @@ export const ProductTour = ({
           <ProductTourContainer flex={{direction: 'column', gap: 4}} padding={16} style={{width}}>
             <Box flex={{direction: 'column', gap: 8}}>
               {media}
-              <Subheading style={{fontSize: '16px'}}>{title}</Subheading>
+              <Subtitle style={{fontSize: '16px'}}>{title}</Subtitle>
             </Box>
             <div>{description}</div>
             {actionsJsx}

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Text.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Text.tsx
@@ -12,80 +12,78 @@ const Text = styled.span<TextProps>`
 `;
 
 export const Title = styled(Text)`
-  font-size: 24px;
+  font-size: 32px;
+  line-height: 36px;
   font-weight: 600;
-  line-height: 30px;
   -webkit-font-smoothing: antialiased;
 `;
 
 export const Heading = styled(Text)`
-  font-size: 18px;
-  font-weight: 500;
+  font-size: 20px;
   line-height: 24px;
+  font-weight: 500;
   -webkit-font-smoothing: antialiased;
 `;
 
-export const Headline = styled(Text)`
-  font-size: 18px;
+export const SubtitleLarge = styled(Text)`
+  font-size: 16px;
+  line-height: 20px;
   font-weight: 500;
-  line-height: 24px;
   -webkit-font-smoothing: antialiased;
 `;
 
-export const Subheading = styled(Text)`
+export const Subtitle = styled(Text)`
   font-size: 14px;
-  font-weight: 600;
   line-height: 20px;
+  font-weight: 500;
   -webkit-font-smoothing: antialiased;
 `;
 
-export const Subtitle1 = styled(Text)`
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  -webkit-font-smoothing: antialiased;
+export const SubtitleSmall = styled(Text)`
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
 `;
 
-export const Subtitle2 = styled(Text)`
-  font-size: 14px;
-  font-weight: 600;
+export const BodyLarge = styled(Text)`
+  font-size: 16px;
   line-height: 20px;
-  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
 `;
 
 export const Body = styled(Text)`
   font-family: ${FontFamily.default};
   font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
 `;
 
-export const Body1 = styled(Text)`
-  font-size: 16px;
+export const BodySmall = styled(Text)`
+  font-family: ${FontFamily.default};
+  font-size: 12px;
+  line-height: 16px;
   font-weight: 400;
-  line-height: 24px;
 `;
 
-export const Body2 = styled(Text)`
-  font-family: ${FontFamily.default};
+export const MonoLarge = styled(Text)`
+  font-family: ${FontFamily.monospace};
+  font-size: 16px;
   line-height: 20px;
-  font-size: 14px;
   font-weight: 400;
 `;
 
-export const Caption = styled(Text)`
-  font-family: ${FontFamily.default};
-  font-size: 12px;
+export const Mono = styled(Text)`
+  font-family: ${FontFamily.monospace};
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
 `;
 
-export const CaptionSubtitle = styled(Text)`
+export const MonoSmall = styled(Text)`
+  font-family: ${FontFamily.monospace};
   font-size: 12px;
-  font-weight: 600;
   line-height: 16px;
-`;
-
-export const CaptionBolded = styled(Text)`
-  font-family: ${FontFamily.default};
-  font-size: 12px;
-  font-weight: 900;
+  font-weight: 400;
 `;
 
 export const Code = styled(Text)`
@@ -96,12 +94,8 @@ export const Code = styled(Text)`
   padding: 2px 4px;
 `;
 
-export const Mono = styled(Text)`
-  font-family: ${FontFamily.monospace};
-  font-size: 14px;
-`;
-
-export const CaptionMono = styled(Text)`
-  font-family: ${FontFamily.monospace};
+//Depricated – Use BodySmall moving forward
+export const Caption = styled(Text)`
+  font-family: ${FontFamily.default};
   font-size: 12px;
 `;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Group.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Group.stories.tsx
@@ -5,7 +5,7 @@ import {Box} from '../Box';
 import {ButtonLink} from '../ButtonLink';
 import {Colors} from '../Color';
 import {Group} from '../Group';
-import {Body, Code, Heading, Subheading} from '../Text';
+import {Body, Code, Heading, Subtitle} from '../Text';
 import {AlignItems, FlexWrap, Spacing} from '../types';
 
 // eslint-disable-next-line import/no-default-export
@@ -119,7 +119,7 @@ export const PointerEventsTest = () => {
             relevant margins.
           </div>
         </Group>
-        <Subheading>Subheading</Subheading>
+        <Subtitle>Subtitle</Subtitle>
       </Group>
     </div>
   );

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/DagsterPlusLaunchPromotion.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/DagsterPlusLaunchPromotion.tsx
@@ -1,4 +1,11 @@
-import {Body1, Box, Button, Dialog, ExternalAnchorButton, Icon} from '@dagster-io/ui-components';
+import {
+  BodyLarge,
+  Box,
+  Button,
+  Dialog,
+  ExternalAnchorButton,
+  Icon,
+} from '@dagster-io/ui-components';
 import styled from 'styled-components';
 
 import dagster_plus from './dagster_plus.png';
@@ -30,10 +37,10 @@ export const DagsterPlusLaunchPromotion = () => {
       </ImageWrapper>
       <Box flex={{direction: 'column', alignItems: 'center'}} padding={24}>
         <Header>Introducing Dagster+</Header>
-        <Body1>
+        <BodyLarge>
           Join us on <span style={{fontWeight: 600}}>April 17 at 12 ET</span> for the unveiling of
           the next generation of Dagster Cloud.
-        </Body1>
+        </BodyLarge>
         <Box
           flex={{direction: 'row', alignItems: 'center', justifyContent: 'center', gap: 8}}
           padding={{top: 12}}

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserPreferences.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserPreferences.oss.tsx
@@ -5,7 +5,7 @@ import {
   DAGSTER_THEME_KEY,
   DagsterTheme,
   Icon,
-  Subheading,
+  Subtitle,
 } from '@dagster-io/ui-components';
 import React from 'react';
 
@@ -64,7 +64,7 @@ export const UserPreferences = ({
   return (
     <>
       <Box padding={{bottom: 4}}>
-        <Subheading>Preferences</Subheading>
+        <Subtitle>Preferences</Subtitle>
       </Box>
       <Box flex={{justifyContent: 'space-between', alignItems: 'center'}}>
         <div>Timezone</div>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx
@@ -5,7 +5,7 @@ import {
   Dialog,
   DialogBody,
   DialogFooter,
-  Subheading,
+  Subtitle,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
 
@@ -79,7 +79,7 @@ const UserSettingsDialogContent = ({onClose, visibleFlags}: DialogContentProps)
         </Box>
         <Box padding={{top: 16}} border="top">
           <Box padding={{bottom: 8}}>
-            <Subheading>Experimental features</Subheading>
+            <Subtitle>Experimental features</Subtitle>
           </Box>
           {visibleFlags.map(({key, label, flagType}) => (
             <Box

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx
@@ -1,4 +1,4 @@
-import {Box, Colors, Group, Heading, Icon, Mono, Subheading} from '@dagster-io/ui-components';
+import {Box, Colors, Group, Heading, Icon, Mono, Subtitle} from '@dagster-io/ui-components';
 import {Link} from 'react-router-dom';
 
 import {AssetEventMetadataEntriesTable} from './AssetEventMetadataEntriesTable';
@@ -53,7 +53,7 @@ export const AssetEventDetail = ({
         padding={{vertical: 16}}
       >
         <Box flex={{gap: 4, direction: 'column'}}>
-          <Subheading>Event</Subheading>
+          <Subtitle>Event</Subtitle>
           {event.__typename === 'MaterializationEvent' ? (
             <Box flex={{gap: 4}}>
               <Icon name="materialization" />
@@ -68,7 +68,7 @@ export const AssetEventDetail = ({
         </Box>
         {event.partition && (
           <Box flex={{gap: 4, direction: 'column'}}>
-            <Subheading>Partition</Subheading>
+            <Subtitle>Partition</Subtitle>
             {hidePartitionLinks ? (
               event.partition
             ) : (
@@ -95,7 +95,7 @@ export const AssetEventDetail = ({
           </Box>
         )}
         <Box flex={{gap: 4, direction: 'column'}} style={{minHeight: 64}}>
-          <Subheading>Run</Subheading>
+          <Subtitle>Run</Subtitle>
           {run ? (
             <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
               <RunStatusWithStats runId={run.id} status={run.status} />
@@ -108,7 +108,7 @@ export const AssetEventDetail = ({
           )}
         </Box>
         <Box flex={{gap: 4, direction: 'column'}}>
-          <Subheading>Job</Subheading>
+          <Subtitle>Job</Subtitle>
           {run && !isHiddenAssetGroupJob(run.pipelineName) ? (
             <Box>
               <Box>
@@ -133,13 +133,13 @@ export const AssetEventDetail = ({
 
       {event.description && (
         <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-          <Subheading>Description</Subheading>
+          <Subtitle>Description</Subtitle>
           <Description description={event.description} />
         </Box>
       )}
 
       <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-        <Subheading>Metadata</Subheading>
+        <Subtitle>Metadata</Subtitle>
         <AssetEventMetadataEntriesTable
           repoAddress={repoAddress}
           assetKey={assetKey}
@@ -150,19 +150,19 @@ export const AssetEventDetail = ({
 
       {event.__typename === 'MaterializationEvent' && (
         <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-          <Subheading>Source data</Subheading>
+          <Subtitle>Source data</Subtitle>
           <AssetMaterializationUpstreamData timestamp={event.timestamp} assetKey={assetKey} />
         </Box>
       )}
 
       <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-        <Subheading>System tags</Subheading>
+        <Subtitle>System tags</Subtitle>
         <AssetEventSystemTags event={event} collapsible />
       </Box>
 
       {assetLineage.length > 0 && (
         <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-          <Subheading>Parent materializations</Subheading>
+          <Subtitle>Parent materializations</Subtitle>
           <AssetLineageElements elements={assetLineage} timestamp={event.timestamp} />
         </Box>
       )}
@@ -185,18 +185,18 @@ export const AssetEventDetailEmpty = () => (
       padding={{vertical: 16}}
     >
       <Box flex={{gap: 4, direction: 'column'}}>
-        <Subheading>Event</Subheading>
+        <Subtitle>Event</Subtitle>
       </Box>
       <Box flex={{gap: 4, direction: 'column'}} style={{minHeight: 64}}>
-        <Subheading>Run</Subheading>—
+        <Subtitle>Run</Subtitle>—
       </Box>
       <Box flex={{gap: 4, direction: 'column'}}>
-        <Subheading>Job</Subheading>—
+        <Subtitle>Job</Subtitle>—
       </Box>
     </Box>
 
     <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-      <Subheading>Metadata</Subheading>
+      <Subtitle>Metadata</Subtitle>
       <AssetEventMetadataEntriesTable event={null} repoAddress={null} showDescriptions />
     </Box>
   </Box>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEvents.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEvents.tsx
@@ -10,7 +10,7 @@ import {
   MenuItem,
   Popover,
   Spinner,
-  Subheading,
+  Subtitle,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
 
@@ -124,7 +124,7 @@ export const AssetEvents = ({
           padding={{vertical: 16, horizontal: 24}}
           style={{marginBottom: -1}}
         >
-          <Subheading>Asset Events</Subheading>
+          <Subtitle>Asset Events</Subtitle>
           <div style={{margin: '-6px 0 '}}>
             <ButtonGroup
               activeItems={new Set([xAxis])}