fix(FormItem): fix style and added label decorations and extraIcon

src/assets/icons/icons.stories.mdx

@@ -26,6 +26,7 @@ import Proxy from './Proxy.svg'
 import Sidecar from './Sidecar.svg'
 import Import from './Import.svg'
 import Export from './Export.svg'
+import IIconFilled from './IIconFilled.svg'
 
 <Meta title="Icons/Mia-Platform" />
 
@@ -66,4 +67,7 @@ import { IconName } from "@mia-platform-internal/console-design-system-react/ico
   <IconItem name="MiExport">
     <Export />
   </IconItem>
+  <IconItem name="MiIIconFilled">
+    <IIconFilled />
+  </IconItem>
 </IconGallery>

src/components/Form/FormItem/FormItem.module.css

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2024 Mia srl
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.labelContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--palette-text-neutral-subtler, #898989);
+  gap: var(--spacing-gap-xs, 4px);
+}
+
+.extraContainer {
+  display: flex;
+  align-items: center;
+  color: var(--palette-text-neutral-main, #636363);
+  padding-top: var(--spacing-gap-sm, 8px);
+  gap: var(--spacing-gap-xs, 4px);
+}
+
+.tooltipContainer {
+  display: inline-flex;
+}
+
+.docLinkContainer {
+  width: var(--shape-size-md, 16px);
+  height: var(--shape-size-md, 16px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/Form/FormItem/FormItem.stories.tsx

@@ -17,6 +17,7 @@
  */
 
 import { Meta, type StoryObj } from '@storybook/react'
+import { PiCircleHalfTilt } from 'react-icons/pi'
 
 import { Button } from '../../Button'
 import { Checkbox as CheckboxComponent } from '../../Checkbox'
@@ -77,6 +78,48 @@ export const Input: Story = {
   },
 }
 
+export const Required: Story = {
+  args: {
+    name: 'input',
+    isRequired: true,
+    children: <InputComponent />,
+  },
+}
+
+export const InputWithTooltip: Story = {
+  args: {
+    name: 'input',
+    tooltip: { title: 'title' },
+    children: <InputComponent />,
+  },
+}
+
+export const InputWithDoclink: Story = {
+  args: {
+    name: 'input',
+    docLink: '#',
+    children: <InputComponent />,
+  },
+}
+
+export const InputWithDoclinkAndTooltip: Story = {
+  args: {
+    name: 'input',
+    docLink: '#',
+    tooltip: { title: 'title' },
+    children: <InputComponent />,
+  },
+}
+
+export const InputWithExtra: Story = {
+  args: {
+    name: 'input',
+    extra: 'Extra',
+    extraIcon: PiCircleHalfTilt,
+    children: <InputComponent />,
+  },
+}
+
 export const InputWithAddon: Story = {
   args: {
     name: 'inputAddon',

src/components/Form/FormItem/FormItem.test.tsx

@@ -17,6 +17,7 @@
  */
 
 import { RenderResult, waitFor, within } from '@testing-library/react'
+import { PiCircleHalfTilt } from 'react-icons/pi'
 import { ReactElement } from 'react'
 import { fireEvent } from '@testing-library/dom'
 
@@ -84,6 +85,43 @@ describe('FormItem Component', () => {
       await waitFor(() => expect(asFragment()).toMatchSnapshot())
     })
 
+    test('renders input required FormItem correctly', async() => {
+      const { asFragment } = renderItem({
+        name: 'input',
+        isRequired: true,
+        children: <Input />,
+      })
+      await waitFor(() => expect(asFragment()).toMatchSnapshot())
+    })
+
+    test('renders input with tooltip FormItem correctly', async() => {
+      const { asFragment } = renderItem({
+        name: 'input',
+        tooltip: { title: 'tooltip' },
+        children: <Input />,
+      })
+      await waitFor(() => expect(asFragment()).toMatchSnapshot())
+    })
+
+    test('renders input with docLink FormItem correctly', async() => {
+      const { asFragment } = renderItem({
+        name: 'input',
+        tooltip: { title: 'tooltip' },
+        children: <Input />,
+      })
+      await waitFor(() => expect(asFragment()).toMatchSnapshot())
+    })
+
+    test('renders input with extra FormItem correctly', async() => {
+      const { asFragment } = renderItem({
+        name: 'input',
+        extra: 'Extra',
+        extraIcon: PiCircleHalfTilt,
+        children: <Input />,
+      })
+      await waitFor(() => expect(asFragment()).toMatchSnapshot())
+    })
+
     test('renders inputAddon FormItem correctly', async() => {
       const { asFragment } = renderItem({
         name: 'inputAddon',
@@ -174,6 +212,21 @@ describe('FormItem Component', () => {
     })
   })
 
+  test('click on docLink button should open a new window', async() => {
+    const openLink = jest.fn()
+    jest.spyOn(window, 'open').mockImplementationOnce(openLink)
+
+    renderItem({
+      name: 'input',
+      docLink: '#',
+      children: <Input />,
+    })
+
+    const button = screen.getByRole('button', { name: 'doc-link' })
+    await userEvent.click(button)
+    expect(openLink).toHaveBeenCalledWith('#', '_blank')
+  })
+
   describe('onChange', () => {
     test('input should display value and change correctly', async() => {
       renderItem({

src/components/Form/FormItem/FormItem.tsx

@@ -16,15 +16,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ReactElement, isValidElement, useMemo } from 'react'
+import { ReactElement, isValidElement, useCallback, useMemo } from 'react'
 import { Form as AntForm } from 'antd'
+import { PiBookOpen } from 'react-icons/pi'
 
+import { Button } from '../../Button'
 import { Checkbox } from '../../Checkbox'
 import { FormItemProps } from '../props.ts'
+import ICircleFilled from '../../../assets/icons/ICircleFilled.svg'
+import { Icon } from '../../Icon'
 import { Input } from '../../Input'
 import { RadioGroup } from '../../RadioGroup'
 import { Switch } from '../../Switch'
+import { Tooltip } from '../../Tooltip'
 import log from '../../../utils/log.ts'
+import styles from './FormItem.module.css'
 
 const defaults = {
   span: 1,
@@ -63,11 +69,17 @@ export const FormItem = (
     span = defaults.span,
     justify,
     isFullWidth = defaults.isFullWidth,
-    label = name,
+    label: labelProp = name,
     rules,
     valuePropName,
     getValueFromEvent,
     shouldUpdate,
+    dependencies,
+    isRequired,
+    docLink,
+    tooltip,
+    extra: extraProp,
+    extraIcon: extraIconProp,
   }: FormItemProps
 ): ReactElement => {
   const form = AntForm.useFormInstance()
@@ -107,14 +119,61 @@ export const FormItem = (
     log.error('inputElement must be a valid element or a function')
   }, [form, name, children])
 
+  const onClickDocLink = useCallback(() => {
+    window.open(docLink, '_blank')
+  }, [docLink])
+
+  const label = useMemo(() => {
+    if (labelProp || tooltip || docLink) {
+      return (
+        <div className={styles.labelContainer}>
+          {labelProp}
+          {tooltip && (
+            <Tooltip {...tooltip}>
+              <div className={styles.tooltipContainer}>
+                <Icon component={ICircleFilled} size={16} />
+              </div>
+            </Tooltip>
+          )}
+          <div className={styles.docLinkContainer}>
+            {docLink && (
+              <Button
+                icon={<Icon aria-label="doc-link" component={PiBookOpen} size={16} />}
+                shape={Button.Shape.Circle}
+                type={Button.Type.Ghost}
+                onClick={onClickDocLink}
+              />
+            )}
+          </div>
+        </div>
+      )
+    }
+  }, [docLink, labelProp, onClickDocLink, tooltip])
+
+  const extra = useMemo(() => {
+    if (extraIconProp || extraProp) {
+      return (
+        <div className={styles.extraContainer}>
+          {extraIconProp && (
+            <Icon component={extraIconProp} size={16} />
+          )}
+          {extraProp}
+        </div>
+      )
+    }
+  }, [extraIconProp, extraProp])
+
   return (
     <AntForm.Item
       {...defaultFormItemProps}
       {...shouldUpdate && { shouldUpdate }}
       {...getValueFromEvent && { getValueFromEvent }}
       {...valuePropName && { valuePropName }}
+      dependencies={dependencies}
+      extra={extra}
       label={label}
       name={name}
+      required={isRequired}
       rules={rules}
       style={style}
     >