[ui] Repair box-shadow on TextInput and TextArea (#23472)

## Summary & Motivation

Repair some slightly incorrect box-shadow values on `TextInput` and
`TextArea`.

- The styled text input should have an inset box-shadow, but we appear
to have overlooked this at some point. Fixing this allows the input and
button controls to have the same default height, thus repairing the bug
that brought this to our attention.
- Note that this effectively takes the `TextInput` height down from 34px
to 32px, which may be noticeable in some parts of the app. It's more
correct and consistent, but if there are places where we're depending on
the incorrect height for alignment etc, we might notice some knock-on
effects that we should clean up.
- I also reduced the focus ring box-shadow to 2px, again to match
`Button`.
- The `TextArea` component has been ignoring its `strokeColor` prop, so
all textareas are getting the default box-shadow color. This is fixed.
- The `TextArea` now also gets a 2px focus ring.

## How I Tested These Changes

Storybook examples.

js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx

@@ -96,7 +96,7 @@ export const TextInputStyles = css`
   line-height: 20px;
   padding: 6px 6px 6px 12px;
   margin: 0;
-  transition: box-shadow linear 150ms;
+  transition: box-shadow 150ms;
 
   ::placeholder {
     color: ${Colors.textLighter()};
@@ -118,7 +118,7 @@ export const TextInputStyles = css`
     box-shadow:
       ${Colors.borderDefault()} inset 0px 0px 0px 1px,
       ${Colors.keylineDefault()} inset 2px 2px 1.5px,
-      ${Colors.focusRing()} 0 0 0 3px;
+      ${Colors.focusRing()} 0 0 0 2px;
     outline: none;
   }
 `;
@@ -141,17 +141,17 @@ const StyledInput = styled.input<StyledInputProps>`
         `
       : null}
 
-  box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderDefault()} 0px 0px 0px 1px;
+  box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderDefault()} inset 0px 0px 0px 1px;
   padding: ${({$hasIcon}) => ($hasIcon ? '6px 6px 6px 28px' : '6px 6px 6px 12px')};
 
   :hover {
-    box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderHover()} 0px 0px 0px 1px;
+    box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px;
   }
 
   :focus {
     box-shadow:
-      ${({$strokeColor}) => $strokeColor || Colors.borderDefault()} 0px 0px 0px 1px,
-      ${Colors.focusRing()} 0 0 0 3px;
+      ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px,
+      ${Colors.focusRing()} 0 0 0 2px;
     background-color: ${Colors.backgroundDefaultHover()};
   }
 `;
@@ -164,17 +164,16 @@ interface TextAreaProps {
 export const TextArea = styled.textarea<TextAreaProps>`
   ${TextInputStyles}
 
-  box-shadow: ${Colors.borderDefault()} inset 0px 0px 0px 1px;
+  box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderDefault()} inset 0px 0px 0px 1px;
 
   :hover {
-    box-shadow: ${Colors.borderHover()} inset 0px 0px 0px 1px;
+    box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px;
   }
 
-  :hover {
-    box-shadow: ${Colors.borderHover()} inset 0px 0px 0px 1px;
-  }
   :focus {
-    box-shadow: ${Colors.focusRing()} 0px 0px 0px 1px;
+    box-shadow:
+      ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px,
+      ${Colors.focusRing()} 0px 0px 0px 2px;
     background-color: ${Colors.backgroundDefaultHover()};
   }
 

js_modules/dagster-ui/packages/ui-components/src/components/__stories__/TextInput.stories.tsx

@@ -1,6 +1,8 @@
 import {Meta} from '@storybook/react';
 import {useState} from 'react';
 
+import {Box} from '../Box';
+import {Button} from '../Button';
 import {Colors} from '../Color';
 import {Icon} from '../Icon';
 import {TextInput} from '../TextInput';
@@ -59,3 +61,19 @@ export const RightElement = () => {
     />
   );
 };
+
+export const NextToButton = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
+      <TextInput
+        icon="layers"
+        placeholder="Type anything…"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        rightElement={<Icon name="info" color={Colors.accentPrimary()} />}
+      />
+      <Button>Hello</Button>
+    </Box>
+  );
+};