[Terra-Form-Field] Added Inline label examples for form field compone…

…nts (#4001)

Co-authored-by: SM051274 <sm051274@cerner.net>

packages/terra-core-docs/CHANGELOG.md

@@ -10,7 +10,8 @@
 ## 1.54.0 - (January 2, 2024)
 
 * Added
- * Added a new example for `terra-list` with interactive elements as a list items.
+  * Added inline label example for `terra-input-field`, `terra-form-native-select-field`, `terra-form-combobox-field` and `terra-form-single-select-field`.
+  * Added a new example for `terra-list` with interactive elements as a list items.
   * Added new test example for `terra-form-search-select`
   * Added instruction note for invalid example in `terra-search-select` and `terra-combo-box`.
   * Added accessibility note for selectable button in `terra-button`

packages/terra-core-docs/src/terra-dev-site/doc/form-input/InputField.2.doc.mdx

@@ -1,6 +1,7 @@
 import { Badge } from 'terra-form-input/package.json?dev-site-package';
 
 import InputFieldExample from './example/InputField?dev-site-example';
+import InlineLabelField from './example/InlineLabelField?dev-site-example';
 import RequiredInputFieldExample from './example/RequiredInputField?dev-site-example';
 import IncompleteInputFieldExample from './example/IncompleteInputField?dev-site-example';
 import NumberInputFieldExample from './example/NumberInputField?dev-site-example';
@@ -39,6 +40,7 @@ import InputField from 'terra-form-input/lib/InputField';
 <RequiredInputFieldExample />
 <IncompleteInputFieldExample description="Applies theme-specific styling for incomplete. ***Note: Only use incomplete if given specific guidance, reserved for specific applications when no value has been provided. Not for general use.***" />
 <NumberInputFieldExample />
+<InlineLabelField title="Input Field with Inline Label"/>
 
 ## Form Input Field Props
 <FormInputFieldPropsTable />

packages/terra-core-docs/src/terra-dev-site/doc/form-input/common/InputFieldDocCommon.module.scss

@@ -0,0 +1,11 @@
+:local {
+  .field-label {
+    font-weight: 700;
+  }
+
+  .flex-box-container {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+  }
+}

packages/terra-core-docs/src/terra-dev-site/doc/form-input/example/InlineLabelField.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import InputField from 'terra-form-input/lib/InputField';
+import styles from '../common/InputFieldDocCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const label = 'Profile Name';
+const InlineLabelFieldExample = () => (
+  <div className={cx('flex-box-container')}>
+    <div>
+      <span className={cx('field-label')}>{label}</span>
+    </div>
+    <div>
+      <InputField
+        inputId="profile-name"
+        isLabelHidden
+        isInline
+        label={label}
+        help="Note: profile name cannot be changed in the future"
+        type="text"
+        inputAttrs={{
+          name: 'profile',
+        }}
+      />
+    </div>
+  </div>
+);
+
+export default InlineLabelFieldExample;

packages/terra-core-docs/src/terra-dev-site/doc/form-select/ComboboxField.06.doc.mdx

@@ -1,6 +1,7 @@
 import { Badge } from 'terra-form-select/package.json?dev-site-package';
 
 import ComboboxFieldExample from './example/combobox/ComboboxField?dev-site-example';
+import InlineLabelFieldExample from './example/combobox/InlineLabelField?dev-site-example';
 import RequiredComboboxFieldExample from './example/combobox/RequiredComboboxField?dev-site-example';
 import IncompleteComboboxFieldExample from './example/combobox/IncompleteComboboxField?dev-site-example';
 
@@ -36,6 +37,7 @@ import ComboboxField from 'terra-form-select/lib/ComboboxField';
 <ComboboxFieldExample title="Combobox Field Example" />
 <RequiredComboboxFieldExample title="Required Combobox Field Example" />
 <IncompleteComboboxFieldExample title="Incomplete Combobox Field Example" description="Applies theme-specific styling for incomplete. ***Note: Only use incomplete if given specific guidance, reserved for specific applications when no value has been provided. Not for general use.***" />
+<InlineLabelFieldExample title="Combobox Field with Inline Label" />
 
 ## Combobox Field Props
 <ComboboxFieldPropsTable />

packages/terra-core-docs/src/terra-dev-site/doc/form-select/NativeSelectField.14.doc.mdx

@@ -1,6 +1,7 @@
 import { Badge } from 'terra-form-select/package.json?dev-site-package';
 
 import DefaultFieldExample from './example/native-select-field/DefaultField?dev-site-example';
+import InlineLabelFieldExample from './example/native-select-field/InlineLabelField?dev-site-example';
 import RequiredFieldExample from './example/native-select-field/RequiredField?dev-site-example';
 import IncompleteFieldExample from './example/native-select-field/IncompleteField?dev-site-example';
 import DefaultFieldExamplewithoutPlaceholder from './example/native-select-field/DefaultFieldwithoutPlaceholder?dev-site-example'
@@ -36,6 +37,7 @@ A convenience wrapper assembling a [terra-form-select](https://github.com/cerner
 <RequiredFieldExample title="Required Select Field Example" />
 <IncompleteFieldExample title="Incomplete Select Field Example" />
 <DefaultFieldExamplewithoutPlaceholder title="Select Field Example without placeholder"/>
+<InlineLabelFieldExample title="Select Field with Inline Label" />
 
 ## Props
 ### Native Select Option

packages/terra-core-docs/src/terra-dev-site/doc/form-select/SingleSelectField.04.doc.mdx

@@ -1,6 +1,7 @@
 import { Badge } from 'terra-form-select/package.json?dev-site-package';
 
 import SingleSelectFieldExample from './example/single/SingleSelectField?dev-site-example';
+import InlineLabelFieldExample from './example/single/InlineLabelField?dev-site-example';
 import RequiredSingleSelectFieldExample from './example/single/RequiredSingleSelectField?dev-site-example';
 import IncompleteSingleSelectFieldExample from './example/single/IncompleteSingleSelectField?dev-site-example';
 
@@ -38,6 +39,7 @@ import SingleSelectField from 'terra-form-select/lib/SingleSelectField';
 <SingleSelectFieldExample title="Single Select Field Example" />
 <RequiredSingleSelectFieldExample title="Required Single Select Field Example" />
 <IncompleteSingleSelectFieldExample title="Incomplete Single Select Field Example" description="Applies theme-specific styling for incomplete. ***Note: Only use incomplete if given specific guidance, reserved for specific applications when no value has been provided. Not for general use.***" />
+<InlineLabelFieldExample title="Single Select Field with Inline Label" />
 
 ## Single Select Field Props
 <SingleSelectFieldPropsTable />

packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/FormSelectDocCommon.module.scss

@@ -20,4 +20,8 @@
     outline: 0;
     text-align: left;
   }
+
+  .field-label {
+    font-weight: 700;
+  }
 }

packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/combobox/InlineLabelField.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import Grid from 'terra-grid';
+import ComboboxField from 'terra-form-select/lib/ComboboxField';
+import styles from '../FormSelectDocCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const label = 'T-shirt size';
+const InlineLabelFieldExample = () => (
+  <Grid>
+    <Grid.Row>
+      <Grid.Column small={1}>
+        <span className={cx('field-label')}>{label}</span>
+      </Grid.Column>
+      <Grid.Column small={3}>
+        <ComboboxField
+          label={label}
+          isLabelHidden
+          placeholder="Select a size"
+          selectId="tshirt-size-field-1"
+          className={cx('form-select')}
+          help="Please take note that product sizes may vary."
+        >
+          <ComboboxField.Option value="xSmall" display="Extra Small" />
+          <ComboboxField.Option value="small" display="Small" />
+          <ComboboxField.Option value="medium" display="Medium" />
+          <ComboboxField.Option value="large" display="Large" />
+          <ComboboxField.Option value="xLarge" display="Extra Large" />
+        </ComboboxField>
+      </Grid.Column>
+    </Grid.Row>
+  </Grid>
+);
+
+export default InlineLabelFieldExample;

packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/native-select-field/InlineLabelField.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import Grid from 'terra-grid';
+import NativeSelectField from 'terra-form-select/lib/native-select/NativeSelectField';
+import styles from '../FormSelectDocCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const label = 'Select a Day';
+const InlineLabelFieldExample = () => (
+  <Grid>
+    <Grid.Row>
+      <Grid.Column small={1}>
+        <span className={cx('field-label')}>{label}</span>
+      </Grid.Column>
+      <Grid.Column small={3}>
+        <NativeSelectField
+          label={label}
+          isLabelHidden
+          isInline
+          help="Note: Shop will be closed on weekends"
+          options={[
+            { value: 'monday', display: 'Volvo' },
+            { value: 'tuesday', display: 'Tuesday' },
+            { value: 'wednesday', display: 'Wednesday' },
+            { value: 'thursday', display: 'Thursday' },
+            { value: 'friday', display: 'Friday' },
+            { value: 'saturday', disabled: true, display: 'Saturday' },
+            { value: 'sunday', disabled: true, display: 'Sunday' },
+          ]}
+          selectId="default-example"
+          className={cx('form-select')}
+        />
+      </Grid.Column>
+    </Grid.Row>
+  </Grid>
+);
+
+export default InlineLabelFieldExample;

packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/single/InlineLabelField.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import Grid from 'terra-grid';
+import SingleSelectField from 'terra-form-select/lib/SingleSelectField';
+import styles from '../FormSelectDocCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const label = 'T-shirt size';
+const InlineLabelFieldExample = () => (
+  <Grid>
+    <Grid.Row>
+      <Grid.Column small={1}>
+        <span className={cx('field-label')}>{label}</span>
+      </Grid.Column>
+      <Grid.Column small={3}>
+        <SingleSelectField
+          label={label}
+          isLabelHidden
+          placeholder="Select a size"
+          selectId="tshirt-size-field-1"
+          className={cx('form-select')}
+          help="Please take note that product sizes may vary."
+        >
+          <SingleSelectField.Option value="xSmall" display="Extra Small" />
+          <SingleSelectField.Option value="small" display="Small" />
+          <SingleSelectField.Option value="medium" display="Medium" />
+          <SingleSelectField.Option value="large" display="Large" />
+          <SingleSelectField.Option value="xLarge" display="Extra Large" />
+        </SingleSelectField>
+      </Grid.Column>
+    </Grid.Row>
+  </Grid>
+);
+
+export default InlineLabelFieldExample;