Rebuilding input container

apps/storybook/src/LabeledInput.stories.tsx

@@ -6,7 +6,13 @@ import { SvgCloseSmall, 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, Tooltip, IconButton } from '@itwin/itwinui-react';
+import {
+  LabeledInput,
+  Tooltip,
+  IconButton,
+  FancyInput,
+  InputWrapper,
+} from '@itwin/itwinui-react';
 
 type LabeledInputProps = React.ComponentProps<typeof LabeledInput>;
 
@@ -27,13 +33,20 @@ export default {
   },
 } as Meta<LabeledInputProps>;
 
-export const Basic: Story<LabeledInputProps> = (args) => {
+export const Basic: Story<LabeledInputProps> = () => {
   return (
-    <LabeledInput
-      placeholder='Enter text here...'
-      label='This is a label'
-      {...args}
-    />
+    <FancyInput>
+      <FancyInput.Label>Label</FancyInput.Label>
+      <FancyInput.MiddlePart>
+        <InputWrapper>
+          <InputWrapper.Input />
+          <InputWrapper.Button>
+            <SvgCloseSmall />
+          </InputWrapper.Button>
+        </InputWrapper>
+      </FancyInput.MiddlePart>
+      <FancyInput.Message startIcon={<SvgCamera />}>Message</FancyInput.Message>
+    </FancyInput>
   );
 };
 

packages/itwinui-css/src/all.scss

@@ -23,9 +23,11 @@
 @forward 'information-panel/information-panel';
 @forward 'input/input';
 @forward 'input-container/input-container';
+@forward 'input-container/fancy-input';
 @forward 'keyboard/keyboard';
 @forward 'location-marker/location-marker';
 @forward 'menu/menu';
+@forward 'message/message';
 @forward 'non-ideal-state/non-ideal-state';
 @forward 'progress-indicator/progress-indicator';
 @forward 'radio/radio';

packages/itwinui-css/src/input-container/fancy-input.scss

@@ -0,0 +1,93 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@use '../mixins';
+
+.iui-fancy-input {
+  display: grid;
+  grid-template:
+    'label label'
+    'inputs inputs'
+    'message message' / auto 1fr;
+
+  &.iui-inline-label {
+    grid-template:
+      'label inputs inputs'
+      '. message message' / auto auto 1fr;
+  }
+
+  .iui-input-label {
+    font-weight: var(--iui-font-weight-semibold);
+    margin-bottom: var(--iui-size-2xs);
+    color: var(--_iui-input-label-color);
+
+    grid-area: label;
+    display: block;
+    align-self: center;
+
+    &.iui-required {
+      &::after {
+        content: '*';
+        margin-left: var(--iui-size-2xs);
+        color: var(--iui-color-text-negative);
+      }
+    }
+
+    &.iui-disabled {
+      --_iui-input-label-color: var(--iui-color-text-disabled);
+      cursor: not-allowed;
+    }
+
+    cursor: default;
+
+    &:is(label) {
+      cursor: pointer;
+
+      &.iui-disabled {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .iui-input-message {
+    grid-area: message;
+  }
+
+  .iui-input-icon {
+    margin: 0 var(--iui-size-s);
+
+    &.iui-actionable {
+      align-items: center;
+      height: calc(100% - 4px); // subtract 2px on both sides to avoid overlapping with border/outline
+      margin-right: 2px; // shift 2px from the right to avoid overlapping with border/outline
+      border-radius: var(--iui-border-radius-1);
+      padding-inline: calc(var(--iui-size-xs) + 1px);
+      cursor: pointer;
+      box-sizing: content-box;
+
+      @include mixins.iui-ripple(var(--iui-color-background), var(--iui-color-background-backdrop));
+
+      svg {
+        fill: var(--iui-color-icon);
+        transition: transform var(--iui-duration-1) ease-out;
+      }
+
+      &.iui-open svg {
+        transform: rotate(180deg); // transform for arrow icon (e.g. svg-caret-down), used in combobox
+      }
+    }
+  }
+
+  &.iui-inline-label {
+    .iui-input-label {
+      margin: 0 var(--iui-size-m) 0 0;
+
+      &.iui-required {
+        margin-right: calc(var(--iui-size-2xs) * 1.5 - 1px);
+      }
+    }
+  }
+
+  .iui-fancy-input-wrapper {
+    grid-area: inputs;
+  }
+}

packages/itwinui-css/src/message/message.scss

@@ -0,0 +1,56 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@use '../mixins';
+
+.iui-message-content {
+  font-size: var(--iui-font-size-0);
+  margin-top: var(--iui-size-2xs);
+  color: var(--iui-color-text-muted);
+
+  a {
+    user-select: none;
+  }
+}
+
+.iui-message-icon {
+  @include mixins.iui-icon-style('m');
+  grid-area: icon;
+  align-self: center;
+
+  &:not(:last-child) {
+    margin-right: var(--iui-size-2xs);
+  }
+
+  svg:where(:not(.iui-button svg)) {
+    @include mixins.iui-icon-color;
+  }
+}
+
+.iui-message {
+  display: flex;
+
+  @each $status in positive, warning, negative {
+    &[data-iui-status='#{$status}'] {
+      .iui-message-content {
+        color: var(--iui-color-text-#{$status});
+
+        a {
+          text-decoration: underline;
+          color: var(--iui-color-text-#{$status});
+        }
+
+        a:hover {
+          text-decoration: none;
+          color: var(--iui-color-text-#{$status}-hover);
+        }
+      }
+
+      .iui-message-icon {
+        &,
+        svg {
+          fill: var(--iui-color-icon-#{$status});
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,170 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { LabeledInput } from './LabeledInput.js';
+
+const assertBaseElement = (container: HTMLElement) => {
+  const inputContainer = container.querySelector('.iui-input-container');
+  expect(inputContainer).toBeTruthy();
+  expect(container.querySelector('.iui-input')).toBeTruthy();
+  return inputContainer;
+};
+
+it('should render correctly in its most basic state', () => {
+  const { container, getByText } = render(<LabeledInput label='some label' />);
+  assertBaseElement(container);
+  const label = getByText('some label') as HTMLElement;
+  expect(label.className).toBe('iui-label');
+});
+
+it('should render disabled component', () => {
+  const { container, getByText } = render(
+    <LabeledInput label='some label' disabled />,
+  );
+  assertBaseElement(container);
+  expect(
+    container.querySelector('.iui-input-container.iui-disabled'),
+  ).toBeTruthy();
+  getByText('some label');
+  expect((container.querySelector('input') as HTMLInputElement).disabled).toBe(
+    true,
+  );
+});
+
+it('should handle required attribute', () => {
+  const { container } = render(<LabeledInput label='some label' required />);
+  assertBaseElement(container);
+  expect(container.querySelector('.iui-label.iui-required')).toBeTruthy();
+  expect(
+    (container.querySelector('input') as HTMLInputElement).required,
+  ).toBeTruthy();
+});
+
+it('should render message', () => {
+  const { container, getByText } = render(
+    <LabeledInput
+      label='some label'
+      message={<div className='my-message'>Message</div>}
+    />,
+  );
+  const inputContainer = assertBaseElement(container);
+  expect(inputContainer).toHaveClass('iui-with-message');
+  getByText('some label');
+  const message = container.querySelector(
+    '.iui-message > .my-message',
+  ) as HTMLElement;
+  expect(message).toBeTruthy();
+  expect(message.textContent).toBe('Message');
+});
+
+it.each(['positive', 'negative', 'warning'] as const)(
+  'should render %s component',
+  (status) => {
+    const { container, getByText } = render(
+      <LabeledInput label='some label' status={status} />,
+    );
+    const inputContainer = assertBaseElement(container);
+    expect(inputContainer).toHaveClass(`iui-${status}`);
+    getByText('some label');
+    expect(container.querySelector('.iui-input-icon')).toBeTruthy();
+  },
+);
+
+it('should set focus', () => {
+  let element: HTMLInputElement | null = null;
+  const onRef = (ref: HTMLInputElement) => {
+    element = ref;
+  };
+  const { container, getByText } = render(
+    <LabeledInput label='some label' ref={onRef} setFocus />,
+  );
+  assertBaseElement(container);
+  getByText('some label');
+  expect(element).toBeTruthy();
+  expect(document.activeElement).toEqual(element);
+});
+
+it('should take class and style on container', () => {
+  const { container, getByText } = render(
+    <LabeledInput
+      label='some label'
+      className='my-class'
+      style={{ width: 80 }}
+    />,
+  );
+  assertBaseElement(container);
+  getByText('some label');
+  const inputContainer = container.querySelector(
+    '.iui-input-container.my-class',
+  ) as HTMLElement;
+  expect(inputContainer).toBeTruthy();
+  expect(inputContainer.style.width).toBe('80px');
+});
+
+it('should take class and style on input', () => {
+  const { container, getByText } = render(
+    <LabeledInput
+      label='some label'
+      inputClassName='my-class'
+      inputStyle={{ width: 80 }}
+    />,
+  );
+  assertBaseElement(container);
+  getByText('some label');
+  const input = container.querySelector('.iui-input.my-class') as HTMLElement;
+  expect(input).toBeTruthy();
+  expect(input.style.width).toBe('80px');
+});
+
+it('should render inline input', () => {
+  const { container, getByText, queryByText } = render(
+    <LabeledInput
+      label='some label'
+      displayStyle='inline'
+      message='My message'
+      status='positive'
+    />,
+  );
+  const inputContainer = assertBaseElement(container);
+  expect(inputContainer).toHaveClass('iui-inline-label', 'iui-inline-icon');
+  getByText('some label');
+  expect(queryByText('My message')).toBeNull();
+  expect(container.querySelector('.iui-input-icon')).toBeTruthy();
+});
+
+it('should take custom icon', () => {
+  const { container, getByText } = render(
+    <LabeledInput
+      label='some label'
+      displayStyle='inline'
+      svgIcon={<svg className='my-icon' />}
+    />,
+  );
+  assertBaseElement(container);
+  getByText('some label');
+  expect(
+    container.querySelector('.iui-input-container.iui-inline-label'),
+  ).toBeTruthy();
+  expect(container.querySelector('.iui-input-icon .my-icon')).toBeTruthy();
+});
+
+it('should render inline icon', () => {
+  const { container, queryByText } = render(
+    <LabeledInput
+      label='some label'
+      iconDisplayStyle='inline'
+      svgIcon={<svg className='my-icon' />}
+      message='My message'
+    />,
+  );
+  const inputContainer = assertBaseElement(container);
+  expect(inputContainer).toHaveClass('iui-inline-icon', 'iui-with-message');
+  expect(inputContainer).not.toHaveClass('iui-inline-label');
+  expect(queryByText('some label')).toHaveClass('iui-label');
+  expect(queryByText('My message')).toHaveClass('iui-message');
+  expect(container.querySelector('.iui-input-icon .my-icon')).toBeTruthy();
+});