@instructure/ui-text-input 11.6.1-snapshot-135 → 11.7.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.6.1-snapshot-135](https://github.com/instructure/instructure-ui/compare/v11.6.0...v11.6.1-snapshot-135) (2026-03-18)
+# [11.7.0](https://github.com/instructure/instructure-ui/compare/v11.6.0...v11.7.0) (2026-03-18)
 
 
 ### Bug Fixes
@@ -16,6 +16,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 * **many:** add solution for using both old and new token system in the same app ([688a713](https://github.com/instructure/instructure-ui/commit/688a713ff715433bb085323dbad61285387c5141))
 * **many:** rework TextArea and dependent FormField components ([0f8c438](https://github.com/instructure/instructure-ui/commit/0f8c43803e3458bbf7b2dd266a9e246cb89b0d3c))
+* **ui-buttons,ui-text-input:** add condensed sizes to IconButton and simplify TextInput afterElement ([49bd675](https://github.com/instructure/instructure-ui/commit/49bd675ad9d9e77bffeb1940888d33d6cc911c60))
 
 
 

package/es/TextInput/v2/index.js

@@ -27,7 +27,7 @@ var _dec, _dec2, _class, _TextInput;
 
 import { Component, isValidElement } from 'react';
 import { callRenderProp, getInteraction, passthroughProps, withDeterministicId, safeCloneElement } from '@instructure/ui-react-utils';
-import { isActiveElement, addEventListener, getCSSStyleDeclaration } from '@instructure/ui-dom-utils';
+import { isActiveElement, addEventListener } from '@instructure/ui-dom-utils';
 import { FormField } from '@instructure/ui-form-field/latest';
 import { withStyle } from '@instructure/emotion';
 import generateStyle from "./styles.js";
@@ -44,7 +44,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
     super(props);
     this.ref = null;
     this._input = null;
-    this._afterElement = null;
     this._defaultId = void 0;
     this._messagesId = void 0;
     this._focusListener = null;
@@ -56,14 +55,12 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
       }
     };
     this.makeStyleProps = () => {
-      const afterElementHasWidth = this.state.afterElementHasWidth;
       const beforeElement = this.props.renderBeforeInput ? callRenderProp(this.props.renderBeforeInput) : null;
       const success = !!this.props.messages && this.props.messages.some(message => message.type === 'success');
       return {
         interaction: this.interaction,
         invalid: this.invalid,
         success: success,
-        afterElementHasWidth: afterElementHasWidth,
         beforeElementExists: !!beforeElement
       };
     };
@@ -88,9 +85,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
         this.props.onFocus(event);
       }
     };
-    this.state = {
-      afterElementHasWidth: void 0
-    };
     this._defaultId = props.deterministicId();
     this._messagesId = props.deterministicId('TextInput-messages');
   }
@@ -98,11 +92,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
     var _this$props$makeStyle, _this$props;
     if (this._input) {
       this._focusListener = addEventListener(this._input, 'focus', this.handleFocus);
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      });
     }
-    this.adjustAfterElementHeight();
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
   componentWillUnmount() {
@@ -110,13 +100,8 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
       this._focusListener.remove();
     }
   }
-  componentDidUpdate(prevProps) {
+  componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-    if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      });
-    }
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
   renderInstUIIcon(elementToRender) {
@@ -139,24 +124,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
     }
     return rendered;
   }
-  adjustAfterElementHeight() {
-    var _this$_afterElement, _afterElementChild$fi;
-    const afterElementChild = (_this$_afterElement = this._afterElement) === null || _this$_afterElement === void 0 ? void 0 : _this$_afterElement.firstElementChild;
-
-    // Check if the child is a button, then get the button's first child (the content span)
-    const buttonContentSpan = (afterElementChild === null || afterElementChild === void 0 ? void 0 : afterElementChild.tagName) === 'BUTTON' ? afterElementChild.firstElementChild : 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 === null || afterElementChild === void 0 ? void 0 : afterElementChild.tagName) === 'SPAN' && ((_afterElementChild$fi = afterElementChild.firstElementChild) === null || _afterElementChild$fi === void 0 ? void 0 : _afterElementChild$fi.tagName) === 'BUTTON' ? afterElementChild.firstElementChild.firstElementChild : null;
-    const targetSpan = buttonContentSpan !== null && buttonContentSpan !== void 0 ? 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';
-    }
-  }
   focus() {
     var _this$_input;
     (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
@@ -223,27 +190,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
       onBlur: this.handleBlur
     });
   }
-  getElementHasWidth(element) {
-    if (!element) {
-      return void 0;
-    }
-    const computedStyle = getCSSStyleDeclaration(element);
-    if (!computedStyle) {
-      return void 0;
-    }
-    const width = computedStyle.width,
-      paddingInlineStart = computedStyle.paddingInlineStart,
-      paddingInlineEnd = computedStyle.paddingInlineEnd;
-    if (width === 'auto' || width === '') {
-      // This is a workaround for an edge-case, when the TextInput's parent
-      // is hidden on load, so the element is not visible either.
-      // In this case the computed width is going to be either 'auto' or '',
-      // so we assume it has width so that the padding won't be removed.
-      return true;
-    }
-    const elementWidth = parseFloat(width) - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);
-    return elementWidth > 0;
-  }
   render() {
     const _this$props4 = this.props,
       width = _this$props4.width,
@@ -282,9 +228,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
             css: styles === null || styles === void 0 ? void 0 : styles.inputLayout,
             children: [this.renderInput(), afterElement && _jsx("span", {
               css: styles === null || styles === void 0 ? void 0 : styles.afterElement,
-              ref: e => {
-                this._afterElement = e;
-              },
               children: afterElement
             })]
           })]

package/es/TextInput/v2/styles.js

@@ -42,7 +42,6 @@ const generateStyle = (componentTheme, props, sharedTokens, state) => {
   const interaction = state.interaction,
     success = state.success,
     invalid = state.invalid,
-    afterElementHasWidth = state.afterElementHasWidth,
     beforeElementExists = state.beforeElementExists;
   const sizeVariants = {
     small: {
@@ -200,34 +199,13 @@ const generateStyle = (componentTheme, props, sharedTokens, state) => {
       flexDirection: 'row'
     },
     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: paddingHorizontalVariants[size]
-        // TODO check if it looks OK with the new buttons. With this it does not look OK with new icons
-        //...(sizeVariants[size!] && {
-        //  lineHeight: sizeVariants[size!]?.lineHeight
-        //})
-      },
       display: 'flex',
       alignItems: 'center',
-      // Spread all sizeVariants except lineHeight (handled above)
-      ...(sizeVariants[size] ?
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      (({
-        lineHeight,
-        ...rest
-      }) => rest)(sizeVariants[size]) : {}),
+      paddingInlineEnd: paddingHorizontalVariants[size],
       label: 'textInput__afterElement',
       ...viewBase,
       borderRadius: componentTheme.borderRadius,
-      flexShrink: 0,
-      // we only override the padding once the width is calculated,
-      // it needs the padding on render
-      ...(afterElementHasWidth === false && {
-        paddingInlineEnd: 0
-      })
+      flexShrink: 0
     }
   };
 };

package/lib/TextInput/v2/index.js

@@ -14,7 +14,6 @@ var _withDeterministicId = require("@instructure/ui-react-utils/lib/Deterministi
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
 var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
-var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
 var _latest = require("@instructure/ui-form-field/latest");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
@@ -56,7 +55,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     super(props);
     this.ref = null;
     this._input = null;
-    this._afterElement = null;
     this._defaultId = void 0;
     this._messagesId = void 0;
     this._focusListener = null;
@@ -68,14 +66,12 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       }
     };
     this.makeStyleProps = () => {
-      const afterElementHasWidth = this.state.afterElementHasWidth;
       const beforeElement = this.props.renderBeforeInput ? (0, _callRenderProp.callRenderProp)(this.props.renderBeforeInput) : null;
       const success = !!this.props.messages && this.props.messages.some(message => message.type === 'success');
       return {
         interaction: this.interaction,
         invalid: this.invalid,
         success: success,
-        afterElementHasWidth: afterElementHasWidth,
         beforeElementExists: !!beforeElement
       };
     };
@@ -100,9 +96,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
         this.props.onFocus(event);
       }
     };
-    this.state = {
-      afterElementHasWidth: void 0
-    };
     this._defaultId = props.deterministicId();
     this._messagesId = props.deterministicId('TextInput-messages');
   }
@@ -110,11 +103,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     var _this$props$makeStyle, _this$props;
     if (this._input) {
       this._focusListener = (0, _addEventListener.addEventListener)(this._input, 'focus', this.handleFocus);
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      });
     }
-    this.adjustAfterElementHeight();
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
   componentWillUnmount() {
@@ -122,13 +111,8 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       this._focusListener.remove();
     }
   }
-  componentDidUpdate(prevProps) {
+  componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-    if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      });
-    }
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
   renderInstUIIcon(elementToRender) {
@@ -151,24 +135,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     }
     return rendered;
   }
-  adjustAfterElementHeight() {
-    var _this$_afterElement, _afterElementChild$fi;
-    const afterElementChild = (_this$_afterElement = this._afterElement) === null || _this$_afterElement === void 0 ? void 0 : _this$_afterElement.firstElementChild;
-
-    // Check if the child is a button, then get the button's first child (the content span)
-    const buttonContentSpan = (afterElementChild === null || afterElementChild === void 0 ? void 0 : afterElementChild.tagName) === 'BUTTON' ? afterElementChild.firstElementChild : 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 === null || afterElementChild === void 0 ? void 0 : afterElementChild.tagName) === 'SPAN' && ((_afterElementChild$fi = afterElementChild.firstElementChild) === null || _afterElementChild$fi === void 0 ? void 0 : _afterElementChild$fi.tagName) === 'BUTTON' ? afterElementChild.firstElementChild.firstElementChild : null;
-    const targetSpan = buttonContentSpan !== null && buttonContentSpan !== void 0 ? 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';
-    }
-  }
   focus() {
     var _this$_input;
     (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
@@ -235,27 +201,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       onBlur: this.handleBlur
     });
   }
-  getElementHasWidth(element) {
-    if (!element) {
-      return void 0;
-    }
-    const computedStyle = (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(element);
-    if (!computedStyle) {
-      return void 0;
-    }
-    const width = computedStyle.width,
-      paddingInlineStart = computedStyle.paddingInlineStart,
-      paddingInlineEnd = computedStyle.paddingInlineEnd;
-    if (width === 'auto' || width === '') {
-      // This is a workaround for an edge-case, when the TextInput's parent
-      // is hidden on load, so the element is not visible either.
-      // In this case the computed width is going to be either 'auto' or '',
-      // so we assume it has width so that the padding won't be removed.
-      return true;
-    }
-    const elementWidth = parseFloat(width) - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);
-    return elementWidth > 0;
-  }
   render() {
     const _this$props4 = this.props,
       width = _this$props4.width,
@@ -294,9 +239,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
             css: styles === null || styles === void 0 ? void 0 : styles.inputLayout,
             children: [this.renderInput(), afterElement && (0, _jsxRuntime.jsx)("span", {
               css: styles === null || styles === void 0 ? void 0 : styles.afterElement,
-              ref: e => {
-                this._afterElement = e;
-              },
               children: afterElement
             })]
           })]

package/lib/TextInput/v2/styles.js

@@ -47,7 +47,6 @@ const generateStyle = (componentTheme, props, sharedTokens, state) => {
   const interaction = state.interaction,
     success = state.success,
     invalid = state.invalid,
-    afterElementHasWidth = state.afterElementHasWidth,
     beforeElementExists = state.beforeElementExists;
   const sizeVariants = {
     small: {
@@ -205,34 +204,13 @@ const generateStyle = (componentTheme, props, sharedTokens, state) => {
       flexDirection: 'row'
     },
     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: paddingHorizontalVariants[size]
-        // TODO check if it looks OK with the new buttons. With this it does not look OK with new icons
-        //...(sizeVariants[size!] && {
-        //  lineHeight: sizeVariants[size!]?.lineHeight
-        //})
-      },
       display: 'flex',
       alignItems: 'center',
-      // Spread all sizeVariants except lineHeight (handled above)
-      ...(sizeVariants[size] ?
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      (({
-        lineHeight,
-        ...rest
-      }) => rest)(sizeVariants[size]) : {}),
+      paddingInlineEnd: paddingHorizontalVariants[size],
       label: 'textInput__afterElement',
       ...viewBase,
       borderRadius: componentTheme.borderRadius,
-      flexShrink: 0,
-      // we only override the padding once the width is calculated,
-      // it needs the padding on render
-      ...(afterElementHasWidth === false && {
-        paddingInlineEnd: 0
-      })
+      flexShrink: 0
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "11.6.1-snapshot-135",
+  "version": "11.7.0",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -18,21 +18,21 @@
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.1-snapshot-135",
-    "@instructure/ui-babel-preset": "11.6.1-snapshot-135",
-    "@instructure/ui-badge": "11.6.1-snapshot-135",
-    "@instructure/ui-color-utils": "11.6.1-snapshot-135"
+    "@instructure/ui-babel-preset": "11.7.0",
+    "@instructure/ui-axe-check": "11.7.0",
+    "@instructure/ui-badge": "11.7.0",
+    "@instructure/ui-color-utils": "11.7.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.6.1-snapshot-135",
-    "@instructure/shared-types": "11.6.1-snapshot-135",
-    "@instructure/ui-dom-utils": "11.6.1-snapshot-135",
-    "@instructure/ui-a11y-utils": "11.6.1-snapshot-135",
-    "@instructure/ui-form-field": "11.6.1-snapshot-135",
-    "@instructure/ui-react-utils": "11.6.1-snapshot-135",
-    "@instructure/ui-tag": "11.6.1-snapshot-135",
-    "@instructure/ui-themes": "11.6.1-snapshot-135"
+    "@instructure/emotion": "11.7.0",
+    "@instructure/ui-dom-utils": "11.7.0",
+    "@instructure/ui-form-field": "11.7.0",
+    "@instructure/ui-a11y-utils": "11.7.0",
+    "@instructure/shared-types": "11.7.0",
+    "@instructure/ui-themes": "11.7.0",
+    "@instructure/ui-tag": "11.7.0",
+    "@instructure/ui-react-utils": "11.7.0"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/TextInput/v2/README.md

@@ -164,7 +164,7 @@ type: example
   render(<ExtraContentExample />)
 ```
 
-Another common usecase is to add an `IconButton` at the end of a TextInput, e.g. for revealing the content of a password field. In these cases, please use the `withBorder={false}` and `withBackground={false}` props for the IconButton.
+Another common usecase is to add an [IconButton](IconButton) at the end of a TextInput, e.g. for revealing the content of a password field. Use the `condensedMedium` size together with `withBorder={false}` and `withBackground={false}` on the IconButton.
 
 ```js
 ---
@@ -174,18 +174,25 @@ const InputsWithButtonsExample = () => {
   const [passwordValue, setPasswordValue] = useState('')
   const [showPassword, setShowPassword] = useState(false)
   return (
-    <TextInput
-      renderLabel="Password"
-      type={showPassword ? 'text' : 'password'}
-      placeholder="Find something..."
-      value={passwordValue}
-      onChange={(e, newValue) => setPasswordValue(newValue)}
-      renderAfterInput={
-        <IconButton withBorder={false} withBackground={false} onClick={() => setShowPassword(prevState => !prevState)} screenReaderLabel={showPassword ? 'Hide password' : 'Show password'}>
-          {showPassword ? <IconOffLine/> : <IconEyeLine/>}
-        </IconButton>
-      }
-    />
+    <View as="div" maxWidth="20rem">
+      <TextInput
+        renderLabel="Password"
+        type={showPassword ? 'text' : 'password'}
+        value={passwordValue}
+        onChange={(e, newValue) => setPasswordValue(newValue)}
+        renderAfterInput={
+          <IconButton
+            size="condensedMedium"
+            withBorder={false}
+            withBackground={false}
+            screenReaderLabel={showPassword ? 'Hide password' : 'Show password'}
+            onClick={() => setShowPassword((prev) => !prev)}
+          >
+            {showPassword ? <EyeOffInstUIIcon /> : <EyeInstUIIcon />}
+          </IconButton>
+        }
+      />
+    </View>
   )
 }
 render(<InputsWithButtonsExample />)
@@ -228,7 +235,7 @@ type: example
 <View as="div" maxWidth="250px">
   <TextInput
     renderLabel="I will not wrap"
-    renderBeforeInput={() => (<IconSearchLine inline={false} />)}
+    renderBeforeInput={<SearchInstUIIcon />}
     renderAfterInput={<Avatar name="Paula Panda" src={avatarSquare} size="x-small" />}
     shouldNotWrap
   />

package/src/TextInput/v2/index.tsx

@@ -31,20 +31,12 @@ import {
   withDeterministicId,
   safeCloneElement
 } from '@instructure/ui-react-utils'
-import {
-  isActiveElement,
-  addEventListener,
-  getCSSStyleDeclaration
-} from '@instructure/ui-dom-utils'
+import { isActiveElement, addEventListener } from '@instructure/ui-dom-utils'
 import { FormField } from '@instructure/ui-form-field/latest'
 import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
-import type {
-  TextInputProps,
-  TextInputState,
-  TextInputStyleProps
-} from './props'
+import type { TextInputProps, TextInputStyleProps } from './props'
 import { allowedProps } from './props'
 import type { Renderable } from '@instructure/shared-types'
 
@@ -56,7 +48,7 @@ tags: form, field, input
 **/
 @withDeterministicId()
 @withStyle(generateStyle)
-class TextInput extends Component<TextInputProps, TextInputState> {
+class TextInput extends Component<TextInputProps> {
   static readonly componentId = 'TextInput'
 
   static allowedProps = allowedProps
@@ -75,7 +67,6 @@ class TextInput extends Component<TextInputProps, TextInputState> {
 
   constructor(props: TextInputProps) {
     super(props)
-    this.state = { afterElementHasWidth: undefined }
     this._defaultId = props.deterministicId!()
     this._messagesId = props.deterministicId!('TextInput-messages')
   }
@@ -83,7 +74,6 @@ class TextInput extends Component<TextInputProps, TextInputState> {
   ref: Element | null = null
 
   private _input: HTMLInputElement | null = null
-  private _afterElement: HTMLSpanElement | null = null
 
   private readonly _defaultId: string
   private readonly _messagesId: string
@@ -107,11 +97,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
         'focus',
         this.handleFocus
       )
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      })
     }
-    this.adjustAfterElementHeight()
     this.props.makeStyles?.(this.makeStyleProps())
   }
 
@@ -121,12 +107,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
     }
   }
 
-  componentDidUpdate(prevProps: TextInputProps) {
-    if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      })
-    }
+  componentDidUpdate() {
     this.props.makeStyles?.(this.makeStyleProps())
   }
 
@@ -152,37 +133,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
     return rendered
   }
 
-  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 { afterElementHasWidth } = this.state
     const beforeElement = this.props.renderBeforeInput
       ? callRenderProp(this.props.renderBeforeInput)
       : null
@@ -193,7 +144,6 @@ class TextInput extends Component<TextInputProps, TextInputState> {
       interaction: this.interaction,
       invalid: this.invalid,
       success: success,
-      afterElementHasWidth: afterElementHasWidth,
       beforeElementExists: !!beforeElement
     }
   }
@@ -303,34 +253,6 @@ class TextInput extends Component<TextInputProps, TextInputState> {
     )
   }
 
-  getElementHasWidth(element: Element | null) {
-    if (!element) {
-      return undefined
-    }
-
-    const computedStyle = getCSSStyleDeclaration(element)
-    if (!computedStyle) {
-      return undefined
-    }
-
-    const { width, paddingInlineStart, paddingInlineEnd } = computedStyle
-
-    if (width === 'auto' || width === '') {
-      // This is a workaround for an edge-case, when the TextInput's parent
-      // is hidden on load, so the element is not visible either.
-      // In this case the computed width is going to be either 'auto' or '',
-      // so we assume it has width so that the padding won't be removed.
-      return true
-    }
-
-    const elementWidth =
-      parseFloat(width) -
-      parseFloat(paddingInlineStart) -
-      parseFloat(paddingInlineEnd)
-
-    return elementWidth > 0
-  }
-
   render() {
     const {
       width,
@@ -381,14 +303,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
               <span css={styles?.inputLayout}>
                 {this.renderInput()}
                 {afterElement && (
-                  <span
-                    css={styles?.afterElement}
-                    ref={(e) => {
-                      this._afterElement = e
-                    }}
-                  >
-                    {afterElement}
-                  </span>
+                  <span css={styles?.afterElement}>{afterElement}</span>
                 )}
               </span>
             </span>

package/src/TextInput/v2/props.ts

@@ -223,22 +223,12 @@ const allowedProps: AllowedPropKeys = [
   'margin'
 ]
 
-type TextInputState = {
-  afterElementHasWidth?: boolean
-}
-
 type TextInputStyleProps = {
   interaction: InteractionType
   success: boolean
   invalid: boolean
-  afterElementHasWidth: TextInputState['afterElementHasWidth']
   beforeElementExists: boolean
 }
 
-export type {
-  TextInputProps,
-  TextInputState,
-  TextInputStyleProps,
-  TextInputStyle
-}
+export type { TextInputProps, TextInputStyleProps, TextInputStyle }
 export { allowedProps }