[ui] Fix misc styling / unnecessary overrides following Blueprint upd…

…ate (#25241) ## Summary & Motivation https://linear.app/dagster-labs/issue/FE-615/fix-text-wrapping-issues-in-buttons-on-ui-pages ## How I Tested These Changes Tested these callsites manually in OSS. Co-authored-by: bengotow <[email protected]>
dagster-io · Oct 21, 2024 · e36eda4 · e36eda4 · github-actions · Oct 21, 2024
1 parent 792dc10
commit e36eda4
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 39 deletions.
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
@@ -109,4 +109,6 @@ export const StyledButtonText = styled.span`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: left;
+  flex: 1;
 `;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
@@ -6,6 +6,7 @@ import {Icon, IconName, IconWrapper} from './Icon';
 import {FontFamily} from './styles';
 
 interface Props extends Omit<React.ComponentPropsWithRef<'input'>, 'onChange'> {
+  fill?: boolean;
   icon?: IconName;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   strokeColor?: string;
@@ -15,6 +16,7 @@ interface Props extends Omit<React.ComponentPropsWithRef<'input'>, 'onChange'> {
 export const TextInput = React.forwardRef(
   (props: Props, ref: React.ForwardedRef<HTMLInputElement>) => {
     const {
+      fill,
       icon,
       disabled,
       strokeColor = Colors.borderDefault(),
@@ -24,7 +26,7 @@ export const TextInput = React.forwardRef(
     } = props;
 
     return (
-      <TextInputContainer $disabled={!!disabled}>
+      <TextInputContainer $disabled={!!disabled} style={fill ? {width: '100%', flex: 1} : {}}>
         {icon ? (
           <Icon name={icon} color={disabled ? Colors.accentGray() : Colors.accentPrimary()} />
         ) : null}

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/SearchFilter.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/SearchFilter.tsx
@@ -1,4 +1,4 @@
-import {Colors, MenuItem, Suggest, useViewport} from '@dagster-io/ui-components';
+import {MenuItem, Suggest, useViewport} from '@dagster-io/ui-components';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -64,9 +64,5 @@ export const SearchFilter = <T,>({
 const SuggestWrapper = styled.div`
   .bp5-input-group.dagster-suggest-input {
     width: 100%;
-
-    ::placeholder {
-      color: ${Colors.textLighter()};
-    }
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitions.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitions.tsx
@@ -8,13 +8,11 @@ import {
   Spinner,
   Subheading,
   TextInput,
-  TextInputContainer,
   Tooltip,
 } from '@dagster-io/ui-components';
 import isEqual from 'lodash/isEqual';
 import uniq from 'lodash/uniq';
 import {useMemo, useState} from 'react';
-import styled from 'styled-components';
 
 import {AssetPartitionDetailEmpty, AssetPartitionDetailLoader} from './AssetPartitionDetail';
 import {AssetPartitionList} from './AssetPartitionList';
@@ -268,14 +266,13 @@ export const AssetPartitions = ({
                 padding={{horizontal: 24, vertical: 8}}
               >
                 <Box style={{display: 'flex', flex: 1}}>
-                  <StyledTextInputWrapper>
-                    <TextInput
-                      icon="search"
-                      value={searchValue}
-                      onChange={(e) => setSearchValue(e.target.value)}
-                      placeholder="Filter by name…"
-                    />
-                  </StyledTextInputWrapper>
+                  <TextInput
+                    fill
+                    icon="search"
+                    value={searchValue}
+                    onChange={(e) => setSearchValue(e.target.value)}
+                    placeholder="Filter by name…"
+                  />
                 </Box>
                 <div>
                   {selection.dimension.name !== 'default' && (
@@ -421,15 +418,3 @@ function getSort(sortTypes: Array<SortType>, idx: number, definitionType: Partit
       : SortType.CREATION
     : sortTypes[idx]!;
 }
-
-const StyledTextInputWrapper = styled.div`
-  width: 100%;
-
-  ${TextInputContainer} {
-    width: 100%;
-  }
-
-  input {
-    width: 100%;
-  }
-`;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateScheduleDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateScheduleDialog.tsx
@@ -118,7 +118,7 @@ const EvaluateSchedule = ({repoAddress, name, onClose, jobName}: Props) => {
     }));
     selectedTimestampRef.current = _selectedTimestamp || timestamps[0] || null;
     return (
-      <SelectWrapper>
+      <div>
         <ScheduleDescriptor>Select a mock evaluation time</ScheduleDescriptor>
         <Popover
           isOpen={isTickSelectionOpen}
@@ -141,7 +141,7 @@ const EvaluateSchedule = ({repoAddress, name, onClose, jobName}: Props) => {
         >
           <div {...containerProps}>
             <Button
-              style={{flex: 1}}
+              style={{flex: 1, width: '100%'}}
               rightIcon={<Icon name="arrow_drop_down" />}
               onClick={() => setIsTickSelectionOpen((isOpen) => !isOpen)}
               data-testid={testId('tick-selection')}
@@ -150,7 +150,7 @@ const EvaluateSchedule = ({repoAddress, name, onClose, jobName}: Props) => {
             </Button>
           </div>
         </Popover>
-      </SelectWrapper>
+      </div>
     );
   }, [
     _selectedTimestamp,
@@ -383,14 +383,6 @@ export const SCHEDULE_DRY_RUN_MUTATION = gql`
   ${RUN_REQUEST_FRAGMENT}
 `;
 
-const SelectWrapper = styled.div`
-  button {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-  }
-`;
-
 const Grid = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);