fix(ui-text-input): set IconButton height in TextInput to not break layout

INSTUI-4651

Author: joyenjoyer

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

@@ -113,6 +113,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
       })
     }
+    this.adjustAfterElementHeight()
     this.props.makeStyles?.(this.makeStyleProps())
   }
 
@@ -141,6 +142,35 @@ class TextInput extends Component<TextInputProps, TextInputState> {
     this.props.makeStyles?.(this.makeStyleProps())
   }
 
+  adjustAfterElementHeight() {
+    const afterElementChild = this._afterElement
+      ?.firstElementChild as HTMLElement | null
+
+    // Check if the child is a button, then get the button's first child (the content span)
+    const buttonContentSpan =
+      afterElementChild?.tagName === 'BUTTON'
+        ? (afterElementChild.firstElementChild as HTMLElement | null)
+        : null
+
+    // This is a necessary workaround for DateInput2 because it uses a Popover, which has a nested Button as an afterElement
+    // Check if the child is a Popover's inner span containing a button, then get the button's first child (the content span)
+    const popoverContentSpan =
+      afterElementChild?.tagName === 'SPAN' &&
+      afterElementChild.firstElementChild?.tagName === 'BUTTON'
+        ? (afterElementChild.firstElementChild
+            .firstElementChild as HTMLElement | null)
+        : null
+
+    const targetSpan = buttonContentSpan ?? popoverContentSpan
+
+    if (targetSpan) {
+      // Set the height to 36px (the height of a medium TextInput) to avoid layout shift when the afterElement content changes
+      // this temporary workaround is necessary because otherwise the layout breaks, later on IconButton's default height will be adjusted to the TextInput size
+      // so this workaround will not be needed anymore
+      targetSpan.style.height = '36px'
+    }
+  }
+
   makeStyleProps = (): TextInputStyleProps => {
     const { interaction } = this
     const { hasFocus, afterElementHasWidth } = this.state

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

@@ -208,14 +208,20 @@ const generateStyle = (
     afterElement: {
       // the next couple lines (until the `label`) is needed so the IconButton looks OK inside the TextInput
       // explanation: if the content inside is not a button or a popover (which could contain a button) it should have some padding on the right
+      // lineHeight is only needed if it is not popover or button
       '& > :not(button):not([data-position^="Popover"])': {
-        marginRight: componentTheme.padding
+        marginRight: componentTheme.padding,
+        ...(sizeVariants[size!] && {
+          lineHeight: sizeVariants[size!].lineHeight
+        })
       },
-      marginTop: '1px',
-      marginBottom: '2px',
       display: 'flex',
       alignItems: 'center',
-      ...sizeVariants[size!],
+      // Spread all sizeVariants except lineHeight (handled above)
+      ...(sizeVariants[size!]
+        ? // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          (({ lineHeight, ...rest }) => rest)(sizeVariants[size!])
+        : {}),
       label: 'textInput__afterElement',
       ...viewBase,
       borderRadius: componentTheme.borderRadius,