Rebuilding input container (#1355)

Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>

.changeset/chatty-peas-switch.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added `status` prop to `Input`, `Textarea` and `Select`.

.changeset/clean-buttons-remember.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added `iui-input-group-wrapper` class to allow inline labels for input groups.

.changeset/cyan-jars-perform.md

@@ -0,0 +1,9 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added two new components for building complex input layouts.
+ - `InputGrid` for the "outer" layout (label, inputs and statusMessage)
+ - `InputWithDecorations` for the "inner" layout (start icon/button, end icon/button)
+
+`LabeledInput`, `LabeledSelect`, `LabeledTextarea` and table `DatePickerInput` have been updated to make use of these new components internally.

.changeset/eighty-chefs-tan.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': major
+---
+
+`iui-transfer-list-listbox-label` and `iui-input-container` classes were removed.

.changeset/friendly-pigs-end.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added `iui-input-grid` class for outer input styling.

.changeset/healthy-vans-behave.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+Removed `inputStyle` and `inputClassName` props from `LabeledInput`; style and className props are being passed down to input. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps`, `inputWrapperProps` to pass props to sub elements.

.changeset/hip-comics-switch.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added new `padded` prop to `Icon`.

.changeset/light-buses-swim.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+Removed `selectStyle` and `selectClassName` props from `LabeledSelect`; style and className props are being passed down to textarea. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps` to pass props to sub elements.

.changeset/loud-pants-vanish.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added status styling to `input` and `select`.

.changeset/nervous-kiwis-peel.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+Removed `textareaStyle` and `textareaClassName` props from `LabeledTextarea`; style and className props are being passed down to textarea. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps` to pass props to sub elements.

.changeset/silly-buttons-run.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added padded styling to Icon using `data-iui-padded` attribute.

.changeset/strong-parrots-pretend.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added `iui-status-message` class to wrap StatusMessage icon and content. 

apps/storybook/src/ComboBox.stories.tsx

@@ -12,6 +12,7 @@ import {
   StatusMessage,
   SelectOption,
   MenuItemSkeleton,
+  Flex,
 } from '@itwin/itwinui-react';
 import { SvgCamera } from '@itwin/itwinui-icons-react';
 
@@ -382,7 +383,7 @@ export const WithLabel: StoryFn<Partial<ComboBoxProps>> = (args) => {
   const options = React.useMemo(() => countriesList, []);
 
   return (
-    <>
+    <Flex flexDirection='column' alignItems='unset' gap='2xs'>
       <Label htmlFor='combo-input'>Country</Label>
       <ComboBox
         options={options}
@@ -393,7 +394,7 @@ export const WithLabel: StoryFn<Partial<ComboBoxProps>> = (args) => {
         }}
         {...args}
       />
-    </>
+    </Flex>
   );
 };
 WithLabel.args = {

apps/storybook/src/Icon.stories.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import { Story, Meta } from '@storybook/react';
 import React from 'react';
-import { Icon, Slider } from '@itwin/itwinui-react';
+import { Icon, Slider, Flex } from '@itwin/itwinui-react';
 import {
   SvgInfoCircular,
   SvgPlaceholder,
@@ -42,6 +42,26 @@ Default.args = {
   fill: 'default',
 };
 
+export const Padded: Story<IconProps> = (args) => {
+  return (
+    <Flex
+      style={{
+        border: '1px solid red',
+        width: 'fit-content',
+      }}
+    >
+      <Icon {...args}>
+        <SvgPlaceholder />
+      </Icon>
+    </Flex>
+  );
+};
+Padded.args = {
+  size: 'medium',
+  fill: 'default',
+  padded: true,
+};
+
 export const Statuses: Story<IconProps> = (args) => {
   return (
     <>

apps/storybook/src/Icon.test.ts

@@ -9,6 +9,7 @@ describe('Icon', () => {
     'Default',
     'Statuses',
     'Sizes',
+    'Padded',
     // 'Autoscale', // exclude Autoscale because it is only an interactive demo for the user
   ];
 

apps/storybook/src/Input.stories.tsx

@@ -39,3 +39,12 @@ Small.args = {
   placeholder: 'Small Input',
   size: 'small',
 };
+
+export const Status: Story<InputProps> = (args) => {
+  return <Input placeholder='Positive Input' status='positive' {...args} />;
+};
+
+Status.args = {
+  placeholder: 'Positive Input',
+  status: 'positive',
+};

apps/storybook/src/Input.test.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 describe('Input', () => {
   const storyPath = 'Input/Input';
-  const tests = ['Basic', 'Disabled', 'Small'];
+  const tests = ['Basic', 'Disabled', 'Small', 'Status'];
 
   tests.forEach((testName) => {
     it(testName, function () {

apps/storybook/src/InputGrid.stories.tsx

@@ -0,0 +1,89 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { Story, Meta } from '@storybook/react';
+import React from 'react';
+import {
+  Input,
+  InputGrid,
+  InputWithDecorations,
+  Label,
+  Icon,
+  SearchBox,
+  Select,
+  StatusMessage,
+} from '@itwin/itwinui-react';
+import { SvgAdd, SvgAirplane } from '@itwin/itwinui-icons-react';
+
+type InputGridProps = React.ComponentProps<typeof InputGrid>;
+
+export default {
+  component: InputGrid,
+  title: 'Utilities/InputGrid',
+  argTypes: {},
+} as Meta<InputGridProps>;
+
+export const WithInput: Story<InputGridProps> = () => {
+  return (
+    <InputGrid>
+      <Label htmlFor='input-id'>This is label</Label>
+      <Input id='input-id' />
+      <StatusMessage>This is message</StatusMessage>
+    </InputGrid>
+  );
+};
+
+export const WithInputWithDecorations: Story<InputGridProps> = () => {
+  return (
+    <InputGrid>
+      <Label htmlFor='input-id'>This is label</Label>
+      <InputWithDecorations>
+        <Icon padded>
+          <SvgAirplane />
+        </Icon>
+        <InputWithDecorations.Input
+          placeholder='Add destination...'
+          id='input-id'
+        />
+        <InputWithDecorations.Button label='Add new flight'>
+          <SvgAdd />
+        </InputWithDecorations.Button>
+      </InputWithDecorations>
+      <StatusMessage>This is message</StatusMessage>
+    </InputGrid>
+  );
+};
+
+export const WithSelect: Story<InputGridProps> = () => {
+  const options = [
+    { value: 1, label: 'Bali' },
+    { value: 2, label: 'Hawaii' },
+    { value: 3, label: 'Madagascar' },
+  ];
+  const [value, setValue] = React.useState<number | undefined>(undefined);
+
+  return (
+    <InputGrid>
+      <Label htmlFor='input-id'>This is label</Label>
+      <Select
+        id='input-id'
+        options={options}
+        placeholder='Select destination'
+        value={value}
+        onChange={(value) => setValue(value)}
+      />
+      <StatusMessage>This is message</StatusMessage>
+    </InputGrid>
+  );
+};
+
+export const WithSearch: Story<InputGridProps> = () => {
+  return (
+    <InputGrid labelPlacement='inline'>
+      <Label htmlFor='input-id'>This is label</Label>
+      <SearchBox inputProps={{ id: 'input-id' }} />
+      <StatusMessage>This is message</StatusMessage>
+    </InputGrid>
+  );
+};

apps/storybook/src/InputGrid.test.ts

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+describe('InputGrid', () => {
+  const storyPath = 'Utilities/InputGrid';
+
+  const tests = [
+    'With Input',
+    'With Input With Decorations',
+    'With Select',
+    'With Search',
+  ];
+
+  tests.forEach((testName) => {
+    it(testName, function () {
+      const id = Cypress.storyId(storyPath, testName);
+      cy.visit('iframe', { qs: { id } });
+      cy.compareSnapshot(testName);
+    });
+  });
+});

apps/storybook/src/InputWithDecoration.stories.tsx

@@ -0,0 +1,73 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { InputWithDecorations, Icon } from '@itwin/itwinui-react';
+import { SvgAdd, SvgAirplane } from '@itwin/itwinui-icons-react';
+
+type InputWithDecorationsProps = React.ComponentProps<
+  typeof InputWithDecorations
+>;
+
+export default {
+  title: 'Input/InputWithDecorations',
+  component: InputWithDecorations,
+} as Meta<InputWithDecorationsProps>;
+
+export const Basic: Story<InputWithDecorationsProps> = () => {
+  return (
+    <InputWithDecorations>
+      <Icon padded>
+        <SvgAirplane />
+      </Icon>
+      <InputWithDecorations.Input placeholder='Input..' />
+      <InputWithDecorations.Button label='Custom button'>
+        <SvgAdd />
+      </InputWithDecorations.Button>
+    </InputWithDecorations>
+  );
+};
+
+export const Disabled: Story<InputWithDecorationsProps> = () => {
+  return (
+    <InputWithDecorations isDisabled>
+      <Icon padded>
+        <SvgAirplane />
+      </Icon>
+      <InputWithDecorations.Input placeholder='Disabled input' />
+      <InputWithDecorations.Button label='Custom button'>
+        <SvgAdd />
+      </InputWithDecorations.Button>
+    </InputWithDecorations>
+  );
+};
+
+export const Small: Story<InputWithDecorationsProps> = () => {
+  return (
+    <InputWithDecorations size='small'>
+      <Icon size='s' padded>
+        <SvgAirplane />
+      </Icon>
+      <InputWithDecorations.Input placeholder='Small input' />
+      <InputWithDecorations.Button label='Custom button'>
+        <SvgAdd />
+      </InputWithDecorations.Button>
+    </InputWithDecorations>
+  );
+};
+
+export const Status: Story<InputWithDecorationsProps> = () => {
+  return (
+    <InputWithDecorations status='positive'>
+      <Icon padded>
+        <SvgAirplane />
+      </Icon>
+      <InputWithDecorations.Input placeholder='Positive input' />
+      <InputWithDecorations.Button label='Custom button'>
+        <SvgAdd />
+      </InputWithDecorations.Button>
+    </InputWithDecorations>
+  );
+};

apps/storybook/src/InputWithDecoration.test.ts

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+describe('InputWithDecorations', () => {
+  const storyPath = 'Input/InputWithDecorations';
+  const tests = ['Basic', 'Disabled', 'Small', 'Status'];
+
+  tests.forEach((testName) => {
+    it(testName, function () {
+      const id = Cypress.storyId(storyPath, testName);
+      cy.visit('iframe', { qs: { id } });
+      cy.compareSnapshot(testName);
+    });
+  });
+});