feat(ui-text-input,ui-date-input): properly support IconButtons inside TextInputs

Author: balzss

packages/ui-date-input/src/DateInput2/README.md

@@ -2,7 +2,7 @@
 describes: DateInput2
 ---
 
-> _Warning_: `DateInput2` is an **experimental** upgrade to the existing [`DateInput`](/#DateInput) component, offering easier configuration, better UX, improved accessibility, and a year picker. While it addresses key limitations of `DateInput`, it's still in the experimental phase, with some missing unit tests and potential API changes.
+> _Info_: `DateInput2` is an upgrade to the [`DateInput`](/#DateInput) component, offering easier configuration, better UX, improved accessibility, and a year picker. Please consider updating to this for WCAG compatiblity and an overall better experience (for both devs and users).
 
 ### Minimal config
 

packages/ui-date-input/src/DateInput2/index.tsx

@@ -290,7 +290,6 @@ const DateInput2 = forwardRef(
                 withBackground={false}
                 withBorder={false}
                 screenReaderLabel={screenReaderLabels.calendarIcon}
-                shape="circle"
                 interaction={interaction}
               >
                 {renderCalendarIcon ? (

packages/ui-text-input/src/TextInput/README.md

@@ -182,9 +182,6 @@ TextInput accepts focusable and non-focusable content before and/or after
 the input text. A common use case is adding an icon or avatar to the input.
 Focusable content will be focused separately from the input itself.
 
-> Note: For any content larger than an icon or small avatar (multiple [Tags](#Tag), for example),
-> use the `renderBeforeInput` property.
-
 - ```javascript
   class ExtraContentExample extends React.Component {
     constructor(props) {
@@ -301,6 +298,47 @@ Focusable content will be focused separately from the input itself.
   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.
+
+```js
+---
+type: example
+---
+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)}>
+          {showPassword ? <IconOffLine/> : <IconEyeLine/>}
+        </IconButton>
+      }
+    />
+  )
+}
+render(<InputsWithButtonsExample />)
+```
+
+Having a clear button for a search field is also common but you don't need to implement anything to make that work, only set the `type` of the input to `search`:
+
+```js
+---
+type: example
+---
+<TextInput
+  renderLabel="Search"
+  type="search"
+  placeholder="Find something..."
+  renderBeforeInput={<IconSearchSolid/>}
+/>
+```
+
 ### Setting width and display
 
 To make the component display inline, set the `display` property to `inline-block`. To constrain the

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

@@ -206,15 +206,20 @@ const generateStyle = (
       ...flexBase
     },
     afterElement: {
-      // TODO this is added for the case when there is an IconButton inside a TextInput (like in the DateInput2 component)
-      // and the button size makes the whole input 2px larger (because of the borders)
-      // this is not the best solution and in the long term we should work with the design team to figure out how to handle such cases
-      marginTop: '-1px',
-      marginBottom: '-1px',
+      // 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
+      '& > :not(button):not([data-cid$="Popover"])': {
+        marginRight: componentTheme.padding
+      },
+      marginTop: '1px',
+      marginBottom: '1px',
+      display: 'flex',
+      alignItems: 'center',
+      ...sizeVariants[size!],
       label: 'textInput__afterElement',
       ...viewBase,
+      borderRadius: componentTheme.borderRadius,
       flexShrink: 0,
-      paddingInlineEnd: componentTheme.padding,
       // we only override the padding once the width is calculated,
       // it needs the padding on render
       ...(afterElementHasWidth === false && {