feat(ui-buttons,ui-text-input): add condensed sizes to IconButton and simplify TextInput afterElement

Add condensedSmall and condensedMedium size options to IconButton,
matching Button's existing condensed size support. These are intended
for use inside compact layouts like TextInput.

Remove temporary workarounds from TextInput that were needed to make
the old IconButton work inside the afterElement slot:
- Remove adjustAfterElementHeight DOM hack
- Remove sizeVariants spread on afterElement container
- Remove afterElementHasWidth state machinery
- Simplify afterElement to a basic flex container with padding

Update documentation examples in both IconButton and TextInput READMEs
with a password visibility toggle use case and current icon names.

Author: balzss

packages/ui-buttons/src/IconButton/v2/README.md

@@ -12,6 +12,52 @@ type: example
 <IconButton screenReaderLabel="Add User"><PlusInstUIIcon /></IconButton>
 ```
 
+### Sizes
+
+```js
+---
+type: example
+---
+<View display="block">
+  <IconButton size="small" screenReaderLabel="Add" margin="small"><PlusInstUIIcon /></IconButton>
+  <IconButton size="medium" screenReaderLabel="Add" margin="small"><PlusInstUIIcon /></IconButton>
+  <IconButton size="large" screenReaderLabel="Add" margin="small"><PlusInstUIIcon /></IconButton>
+</View>
+```
+
+There are also two condensed size variants for compact layouts: `condensedSmall` and `condensedMedium`. These are designed to be used inside other components, such as a [TextInput](TextInput).
+
+```js
+---
+type: example
+---
+const PasswordInput = () => {
+  const [showPassword, setShowPassword] = useState(false)
+
+  return (
+    <View as="div" maxWidth="20rem">
+    <TextInput
+      renderLabel="Password"
+      type={showPassword ? 'text' : 'password'}
+      renderAfterInput={
+        <IconButton
+          size="condensedMedium"
+          withBackground={false}
+          withBorder={false}
+          screenReaderLabel={showPassword ? 'Hide password' : 'Show password'}
+          onClick={() => setShowPassword(!showPassword)}
+        >
+          {showPassword ? <EyeOffInstUIIcon /> : <EyeInstUIIcon />}
+        </IconButton>
+      }
+    />
+    </View>
+  )
+}
+
+render(<PasswordInput />)
+```
+
 ### Accessibility
 
 Because the IconButton visually only renders an icon, a description is necessary for assistive technologies. The `screenReaderLabel` prop is required for this purpose, and should consist of a complete description of the action.

packages/ui-buttons/src/IconButton/v2/props.ts

@@ -59,7 +59,7 @@ type IconButtonOwnProps = {
   /**
    * The size of the `IconButton`
    */
-  size?: 'small' | 'medium' | 'large'
+  size?: 'small' | 'medium' | 'large' | 'condensedSmall' | 'condensedMedium'
 
   /**
    * Provides a reference to the `IconButton`'s underlying html element.

packages/ui-text-input/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
   />

packages/ui-text-input/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,15 +67,13 @@ 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')
   }
 
   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>

packages/ui-text-input/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 }

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

@@ -44,13 +44,7 @@ const generateStyle = (
   state: TextInputStyleProps
 ): TextInputStyle => {
   const { size, textAlign, shouldNotWrap } = props
-  const {
-    interaction,
-    success,
-    invalid,
-    afterElementHasWidth,
-    beforeElementExists
-  } = state
+  const { interaction, success, invalid, beforeElementExists } = state
 
   const sizeVariants = {
     small: {
@@ -212,32 +206,13 @@ const generateStyle = (
       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
     }
   }
 }