Update icon placement in LabeledInput/LabeledTextarea

.changeset/cold-vans-burn.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+Removed `iconDisplayStyle` prop from `LabeledInput` and `LabeledTextarea` components. `svgIcon` is now added inline. Users must use `StatusMessage` to add custom icon to the message.

apps/storybook/src/LabeledInput.stories.tsx

@@ -6,7 +6,7 @@ import { SvgPlaceholder } from '@itwin/itwinui-icons-react';
 import SvgCamera from '@itwin/itwinui-icons-react/cjs/icons/Camera';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
-import { LabeledInput } from '@itwin/itwinui-react';
+import { LabeledInput, StatusMessage } from '@itwin/itwinui-react';
 
 type LabeledInputProps = React.ComponentProps<typeof LabeledInput>;
 
@@ -125,8 +125,11 @@ export const WithCustomIcon: Story<LabeledInputProps> = (args) => {
     <LabeledInput
       placeholder='Enter text here...'
       label='This is a label'
-      message='⬅ This is a custom icon'
-      svgIcon={<SvgCamera />}
+      message={
+        <StatusMessage startIcon={<SvgCamera />}>
+          ⬅ This is a custom icon
+        </StatusMessage>
+      }
       {...args}
     />
   );
@@ -157,14 +160,12 @@ export const HybridLayout: Story<LabeledInputProps> = (args) => {
         label='This is a label'
         svgIcon={<SvgPlaceholder />}
         message='Block layout with inline icon'
-        iconDisplayStyle='inline'
         {...args}
       />
     </>
   );
 };
 
 HybridLayout.args = {
-  iconDisplayStyle: 'inline',
   message: 'Block layout with inline icon',
 };

apps/storybook/src/LabeledTextarea.stories.tsx

@@ -5,7 +5,7 @@
 import SvgCamera from '@itwin/itwinui-icons-react/cjs/icons/Camera';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
-import { LabeledTextarea } from '@itwin/itwinui-react';
+import { LabeledTextarea, StatusMessage } from '@itwin/itwinui-react';
 
 type LabeledTextareaProps = React.ComponentProps<typeof LabeledTextarea>;
 
@@ -102,12 +102,15 @@ Negative.args = {
 };
 
 export const WithCustomIcon: Story<Partial<LabeledTextareaProps>> = (args) => {
+  const { message: textMessage, ...rest } = args;
   return (
     <LabeledTextarea
       placeholder='Enter text here'
       label='This is a label'
-      svgIcon={<SvgCamera />}
-      {...args}
+      message={
+        <StatusMessage startIcon={<SvgCamera />}>{textMessage}</StatusMessage>
+      }
+      {...rest}
     />
   );
 };

packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { StatusIconMap, useId, Icon } from '../utils/index.js';
+import { useId, Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { InputGrid } from '../InputGrid/index.js';
 import { InputWithDecorations } from '../InputWithDecorations/index.js';
@@ -40,15 +40,6 @@ export type LabeledInputProps = {
    * @default 'default'
    */
   displayStyle?: 'default' | 'inline';
-  /**
-   * Set display style of icon.
-   * Supported values:
-   * - 'block' - icon appears below input.
-   * - 'inline' - icon appears inside input (at the end).
-   *
-   * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
-   */
-  iconDisplayStyle?: 'block' | 'inline';
   /**
    * Passes properties for message content.
    */
@@ -90,14 +81,11 @@ export const LabeledInput = React.forwardRef((props, ref) => {
     iconProps,
     inputWrapperProps,
     displayStyle = 'default',
-    iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline',
     required = false,
     id = uid,
     ...rest
   } = props;
 
-  const icon = svgIcon ?? (status && StatusIconMap[status]());
-
   return (
     <InputGrid labelPlacement={displayStyle} {...wrapperProps}>
       {label && (
@@ -124,17 +112,16 @@ export const LabeledInput = React.forwardRef((props, ref) => {
           ref={ref}
           {...rest}
         />
-        {icon && iconDisplayStyle === 'inline' && (
-          <Icon fill={!svgIcon ? status : undefined} padded {...iconProps}>
-            {icon}
+        {svgIcon && (
+          <Icon padded {...iconProps}>
+            {svgIcon}
           </Icon>
         )}
       </InputWithDecorations>
 
       {typeof message === 'string' ? (
         <StatusMessage
           status={status}
-          startIcon={displayStyle === 'default' ? icon : undefined}
           iconProps={iconProps}
           contentProps={messageContentProps}
         >

packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx

@@ -38,7 +38,7 @@ type LabeledTextareaProps = {
    * Passes properties for svgIcon.
    */
   iconProps?: React.ComponentProps<typeof Icon>;
-} & Pick<LabeledInputProps, 'svgIcon' | 'displayStyle' | 'iconDisplayStyle'>;
+} & Pick<LabeledInputProps, 'svgIcon' | 'displayStyle'>;
 
 /**
  * Textarea wrapper that allows for additional styling and labelling