website: Update input documentation & demos

apps/website/src/examples/ButtonGroup.input.tsx

@@ -17,7 +17,7 @@ export default () => {
         </IconButton>
       </ButtonGroup>
       <ButtonGroup>
-        <Input value='Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2V4YW1wbGUuYXV0aDAuY29tLyIsImF1ZCI6Imh0dHBzOi8vYXBpLmV4YW1wbGUuY29tL2NhbGFuZGFyL3YxLyIsInN1YiI6InVzcl8xMjMiLCJpYXQiOjE0NTg3ODU3OTYsImV4cCI6MTQ1ODg3MjE5Nn0.CA7eaHjIHz5NxeIJoFK9krqaeZrPLwmMmgI_XiQiIkQ' />
+        <Input value='https://itwinui.bentley.com/docs/buttongroup' />
         <Button styleType='high-visibility'>Copy</Button>
       </ButtonGroup>
     </Flex>

apps/website/src/examples/Input.button.tsx

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { LabeledInput, IconButton } from '@itwin/itwinui-react';
+import { SvgCloseSmall } from '@itwin/itwinui-icons-react';
+
+export default () => {
+  return (
+    <>
+      <LabeledInput
+        label='Street'
+        defaultValue='1051 Faribault Road'
+        svgIcon={
+          <IconButton styleType='borderless' aria-label='Clear street input'>
+            <SvgCloseSmall />
+          </IconButton>
+        }
+        iconDisplayStyle='inline'
+      />
+    </>
+  );
+};

apps/website/src/examples/Input.inline.tsx

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { LabeledInput } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <>
+      <LabeledInput
+        label='Inline input'
+        status='positive'
+        placeholder='Labeled input'
+        displayStyle='inline'
+      />
+    </>
+  );
+};

apps/website/src/examples/Input.main.tsx

@@ -8,7 +8,7 @@ import { LabeledInput } from '@itwin/itwinui-react';
 export default () => {
   return (
     <>
-      <LabeledInput label='Labeled input' message='Input message' />
+      <LabeledInput label='Label' placeholder='Placeholder' message='Hint message' />
     </>
   );
 };

apps/website/src/examples/Input.separatelabel.tsx

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Input, Label, Flex } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <Flex>
+      <Flex flexDirection='column' alignItems='flex-end' gap='var(--iui-size-m)'>
+        <Label htmlFor='first-name'>First name</Label>
+        <Label htmlFor='middle-initial'>Middle initial</Label>
+        <Label htmlFor='last-name'>Last name</Label>
+      </Flex>
+      <Flex flexDirection='column' alignItems='flex-start'>
+        <Input id='first-name' />
+        <Input id='middle-initial' maxlength='1' />
+        <Input id='last-name' />
+      </Flex>
+    </Flex>
+  );
+};

apps/website/src/examples/Input.sizes.tsx

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Input, Flex } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <Flex flexDirection='column'>
+      <Input placeholder='Small' size='small' />
+      <Input placeholder='Medium' />
+      <Input placeholder='Large' size='large' />
+    </Flex>
+  );
+};

apps/website/src/examples/Input.status.tsx

@@ -0,0 +1,31 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { LabeledInput, Flex } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <Flex>
+      <LabeledInput
+        label='Positive input'
+        message='Happy message'
+        status='positive'
+        placeholder='Labeled input'
+      />
+      <LabeledInput
+        label='Warning input'
+        message='Cautious message'
+        status='warning'
+        placeholder='Labeled input'
+      />
+      <LabeledInput
+        label='Negative input'
+        message='Angry message'
+        status='negative'
+        placeholder='Labeled input'
+      />
+    </Flex>
+  );
+};

apps/website/src/examples/index.tsx

@@ -102,6 +102,11 @@ export { default as InformationPanelMainExample } from './InformationPanel.main'
 export { default as InputGroupMainExample } from './InputGroup.main';
 
 export { default as InputMainExample } from './Input.main';
+export { default as InputSizesExample } from './Input.sizes';
+export { default as InputSeparateLabelExample } from './Input.separatelabel';
+export { default as InputInlineExample } from './Input.inline';
+export { default as InputStatusExample } from './Input.status';
+export { default as InputButtonExample } from './Input.button';
 
 export { default as KeyboardMainExample } from './Keyboard.main';
 

apps/website/src/pages/docs/input.mdx

@@ -1,6 +1,6 @@
 ---
 title: Input
-description: Input let users enter and edit data.
+description: An input lets users enter and edit data.
 layout: ./_layout.astro
 propsPath: '@itwin/itwinui-react/src/core/LabeledInput/LabeledInput.tsx'
 thumbnail: Input
@@ -9,17 +9,74 @@ group: inputs
 
 import PropsTable from '~/components/PropsTable.astro';
 import LiveExample from '~/components/LiveExample.astro';
-import Placeholder from '~/components/Placeholder.astro';
+import RelatedComponents from '~/components/RelatedComponents.astro';
 import * as AllExamples from '~/examples';
 
 <p>{frontmatter.description}</p>
 
-<Placeholder componentPageName='input-input' />
-
 <LiveExample src='Input.main.tsx' truncate={false}>
   <AllExamples.InputMainExample client:load />
 </LiveExample>
 
+Inputs are form elements meant to receive text input from the user. It is strongly recommended that each input have a label to indicate what info goes into the associated field. You can also display placeholder text within the field itself. This placeholder text is replaced by the actual text input by the user. Unlike the [textarea](textarea), which allow entry of a more sizable quantity of text, inputs are meant to receive info that is a few words long at most. Use inputs wherever you need the user to enter information too specific or personal to be listed within a [select](select).
+
+## Usage
+
+### Sizes
+
+There are three different sizes, which can be specified using the `size` prop.
+
+<LiveExample src='Input.sizes.tsx'>
+  <AllExamples.InputSizesExample client:load />
+</LiveExample>
+
+### Status
+
+Status messages are sometimes required for bringing warnings or errors to the user’s attention. For example, required fields that are left empty, spelling mistakes, or to notify a user the username they have entered is available. Note that the status is conveyed differently when [inline](#inline) styling is applied.
+
+<LiveExample src='Input.status.tsx'>
+  <AllExamples.InputStatusExample client:load />
+</LiveExample>
+
+### Inline
+
+It’s possible to use inputs inline, in forms for example. The [status](#status) displays a bit differently. For these inputs the status border remains the same, but the icon displays horizontally centered inside the area, at the far right.
+
+<LiveExample src='Input.inline.tsx'>
+  <AllExamples.InputInlineExample client:load />
+</LiveExample>
+
+### With other inputs
+
+You can pair an input and a button together.
+
+<LiveExample src='Input.button.tsx'>
+  <AllExamples.InputButtonExample client:load />
+</LiveExample>
+
+There are more complex options of pairing inputs with other various form components when using the [button group](buttongroup).
+
+<LiveExample src='ButtonGroup.input.tsx'>
+  <AllExamples.ButtonGroupInputExample client:load />
+</LiveExample>
+
+### Standalone
+
+You may want to place the label somewhere separated from the input. This can be useful when you want to create columns where the text labels are all right aligned. Use `<Input>` in combination with `<Label>` when you want to separate the two. Be aware that it is an accessibility requirement for all inputs to be paired with a label.
+
+<LiveExample src='Input.separatelabel.tsx'>
+  <AllExamples.InputSeparateLabelExample client:load />
+</LiveExample>
+
 ## Props
 
 <PropsTable path={frontmatter.propsPath} />
+
+## Related components
+
+<RelatedComponents
+  components={[
+    { title: 'Button', url: 'button' },
+    { title: 'Textarea', url: 'textarea' },
+  ]}
+/>