refactor(ui-text-input): do not use fancy CSS selectors, Jest crashes on them

Author: matyasf

packages/ui-text-input/src/TextInput/index.tsx

@@ -350,6 +350,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
         <span css={styles?.facade}>
           {renderBeforeOrAfter ? (
             <span css={styles?.layout}>
+              {beforeElement && <div css={styles?.beforePadding}></div>}
               {beforeElement}
               {/* The input and content after input should not wrap,
                 so they're in their own flex container */}

packages/ui-text-input/src/TextInput/props.ts

@@ -193,6 +193,7 @@ type TextInputStyle = ComponentStyle<
   | 'textInput'
   | 'facade'
   | 'layout'
+  | 'beforePadding'
   | 'afterElement'
   | 'requiredInvalid'
   | 'inputLayout'

packages/ui-text-input/src/TextInput/styles.ts

@@ -157,7 +157,7 @@ const generateStyle = (
     facade: {
       label: 'textInput__facade',
       position: 'relative',
-      display: 'flex',
+      display: 'block',
       boxSizing: 'border-box',
       border: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}`,
       borderRadius: componentTheme.borderRadius,
@@ -188,16 +188,14 @@ const generateStyle = (
       label: 'textInput__layout',
       ...viewBase,
       display: 'flex',
-      flexGrow: 1,
       alignItems: 'center',
       justifyContent: 'flex-start',
       flexDirection: 'row',
-      // Apply the style if the first child has NOT the inputLayout class
-      '&:has(> :first-child:not([class$="textInput__inputLayout"]))': {
-        paddingInlineStart: componentTheme.padding
-      },
       ...(!shouldNotWrap && { flexWrap: 'wrap' })
     },
+    beforePadding: {
+      paddingInlineStart: componentTheme.padding
+    },
     inputLayout: {
       label: 'textInput__inputLayout',
       flexGrow: 1,
@@ -211,6 +209,7 @@ const generateStyle = (
       marginBottom: '-1px',
       label: 'textInput__afterElement',
       ...viewBase,
+      flexShrink: 0,
       paddingInlineEnd: componentTheme.padding,
       // we only override the padding once the width is calculated,
       // it needs the padding on render